import { date as formatDate } from '@planningcenter/datetime-fmt'
import React, { useState } from 'react'
import { StyleSheet, View, ScrollView } from 'react-native'
import { Heading } from '../../components'
import { Avatar } from '../../components/display/avatar'
import { Banner } from '../../components/display/banner'
import { Button } from '../../components/display/button'
import { Icon } from '../../components/display/icon'
import { Text } from '../../components/display/text'
import { useCurrentPerson, useTheme, useSubmitAgeCheck, useOrganization } from '../../hooks'
import { platformFontWeightBold } from '../../utils/styles'
import { AgeCheckSelectBirthdateModal } from './components/age_check_select_birthdate_modal'

function calculateAge(birthdate: Date) {
  const today = new Date()
  const age = today.getUTCFullYear() - birthdate.getUTCFullYear()
  const hasHadBirthdayThisYear =
    today.getUTCMonth() > birthdate.getUTCMonth() ||
    (today.getUTCMonth() === birthdate.getUTCMonth() &&
      today.getUTCDate() >= birthdate.getUTCDate())
  return hasHadBirthdayThisYear ? age : age - 1
}

export function AgeCheckRequiredScreen() {
  const person = useCurrentPerson()
  const { data: organization } = useOrganization()

  const [birthdate, setBirthdate] = useState<Date | null>(null)
  const [draftBirthdate, setDraftBirthdate] = useState<Date | null>(null)
  const [isBirthdateModalOpen, setBirthdateModalOpen] = useState(false)
  const { submitAgeCheck, isPending, isSuccess } = useSubmitAgeCheck()
  const styles = useStyles()

  const birthdateStamp = birthdate
    ? formatDate(birthdate, { style: 'standard', year: true, timeZone: 'UTC' })
    : 'Missing'

  const age = birthdate ? calculateAge(birthdate) : null

  const confirmationText =
    birthdate !== null
      ? `Your birthdate is ${birthdateStamp} and you are ${age} years old. Is that correct?`
      : ''

  const openBirthdateModal = () => {
    setDraftBirthdate(birthdate || new Date())
    setBirthdateModalOpen(true)
  }

  const closeBirthdateModal = () => {
    setBirthdateModalOpen(false)
  }

  const handleSubmitAgeConfirmation = () => {
    if (!birthdate) return
    submitAgeCheck(birthdate)
  }

  return (
    <>
      <ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>
        <View style={styles.header}>
          <View style={styles.heading}>
            <Icon name="general.exclamationTriangle" size={20} style={styles.warningIcon} />
            <Heading variant="h2">Your age is required to use chat</Heading>
          </View>
          <Text>
            Privacy laws require us to verify your age before you can use messaging features. This
            helps us protect minors who use chat.
          </Text>
        </View>
        <View style={styles.cards}>
          <View style={styles.card}>
            <Heading variant="h3">My profile</Heading>
            <View style={styles.profileContent}>
              <Avatar sourceUri={person.avatar || ''} size="lg" showFallback={!person.avatar} />
              <View style={styles.personInfo}>
                <Text style={styles.name}>{person.name}</Text>
                <View style={styles.birthdateInfo}>
                  <Text variant="tertiary" style={styles.birthdateLabel}>
                    Birthdate:{' '}
                  </Text>
                  <Text variant="tertiary">{birthdateStamp}</Text>
                </View>
              </View>
              {birthdate && (
                <Button
                  title="Edit"
                  accessibilityHint="Choose a new birthdate for your profile"
                  size="sm"
                  variant="outline"
                  style={styles.editButton}
                  onPress={openBirthdateModal}
                />
              )}
            </View>
            {!birthdate && (
              <Button
                title="Add birthdate"
                accessibilityHint="Choose a birthdate for your profile"
                size="lg"
                style={styles.primaryButton}
                onPress={openBirthdateModal}
              />
            )}
          </View>
          {birthdate && (
            <View style={styles.card}>
              <Heading variant="h3">Age confirmation</Heading>
              {age !== null && age < 13 ? (
                <Banner appearance="warning" description={confirmationText} />
              ) : (
                <Text>{confirmationText}</Text>
              )}
              <Button
                title="Yes, update my profile"
                size="lg"
                style={styles.primaryButton}
                onPress={handleSubmitAgeConfirmation}
                disabled={isPending || isSuccess}
              />
            </View>
          )}
        </View>
        <Text variant="tertiary">
          Your birthdate will be added to your profile, but it is only visible to church
          administrators at {organization?.name}. It will not be shared with other church members,
          unless you give permission.
        </Text>
      </ScrollView>

      <AgeCheckSelectBirthdateModal
        onChange={setDraftBirthdate}
        onDismiss={closeBirthdateModal}
        onRequestClose={closeBirthdateModal}
        onSubmit={setBirthdate}
        value={draftBirthdate || new Date()}
        visible={isBirthdateModalOpen}
      />
    </>
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  return StyleSheet.create({
    scrollView: {
      flex: 1,
      backgroundColor: colors.surfaceColor080,
    },
    container: {
      padding: 16,
      gap: 16,
    },
    header: {
      gap: 8,
    },
    heading: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
    },
    warningIcon: {
      color: colors.statusErrorIcon,
    },
    card: {
      backgroundColor: colors.surfaceColor100,
      borderRadius: 8,
      padding: 16,
      gap: 8,
    },
    cards: {
      gap: 8,
    },
    profileContent: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'flex-start',
      gap: 8,
    },
    personInfo: {
      flex: 1,
      minWidth: 0,
    },
    primaryButton: {
      alignSelf: 'center',
      marginTop: 8,
    },
    name: {
      fontWeight: platformFontWeightBold,
    },
    birthdateLabel: {
      fontWeight: platformFontWeightBold,
    },
    birthdateInfo: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'center',
      gap: 4,
    },
    editButton: {
      alignSelf: 'flex-end',
    },
    formSheetContent: {
      flex: 1,
    },
  })
}