import {
  Button,
  Text,
  View,
  YStack,
  XStack,
  isWeb,
  Paragraph,
  H3,
  InfoCard,
  AnimatePresence,
  ScrollView,
} from '@my/ui'
import { ArrowLeft, Camera, Check } from '@tamagui/lucide-icons'
import { CameraDemo } from 'app/assets/camera-demo'
import { JunwonLogoIcon } from 'app/assets/icon'
import { getServerAddress } from 'app/utils/getServerAddress'
import { useState } from 'react'
import { useRouter } from 'solito/router'
import { z } from 'zod'

const formFields = [
  { id: 'email', label: 'Email', placeholder: 'junwon@junwon.com' },
  { id: 'age', label: 'Age', placeholder: '28', keyboardType: 'numeric', maxLength: 2 },
  {
    id: 'location',
    label: 'Location (State if in USA | Country if not)',
    placeholder: 'California (or Spain)',
  },
]

export const CameraScreen = () => {
  const router = useRouter()
  const [showTikTok, setShowTikTok] = useState(false)
  const [showInstagram, setShowInstagram] = useState(false)
  const [showYouTube, setShowYouTube] = useState(false)
  const [showAgeWarning, setShowAgeWarning] = useState(false)
  const [formSubmitted, setFormSubmitted] = useState(false)
  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({})
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitError, setSubmitError] = useState<string | null>(null)

  const formDataSchema = z.object({
    email: z.string().email('* Email: We cannot reach you at the email address you provided.'),
    age: z.string().refine(
      (val) => {
        const num = parseInt(val, 10)
        return num >= 13 && num <= 99
      },
      {
        message:
          '* Age: We are not able to provide service to people below 13 years old or above 99 years old.',
      }
    ),
    location: z
      .string()
      .min(
        1,
        '* Location: We need to know where you are in order to determine whether and when we can invite you.'
      ),
    tiktokHandle: z.string().optional(),
    instagramHandle: z.string().optional(),
    youtubeHandle: z.string().optional(),
  })

  type FormData = z.infer<typeof formDataSchema> & {
    [key: string]: string | undefined
  }

  const [formData, setFormData] = useState<FormData>({
    email: '',
    age: '',
    location: '',
    tiktokHandle: '',
    instagramHandle: '',
    youtubeHandle: '',
  })

  const infoCards = [
    {
      kind: 'body_of_post' as const,
      title: 'Live Stream with AI Viewers',
      contents: [
        'Junwon Camera app is a magical new way to interact with advanced AIs: via a live camera stream! Enrich your days with AI viewers at just $7 for 7 days.',
      ],
    },
    {
      kind: 'body_of_post' as const,
      title: 'Listen to Humanity',
      contents: [
        'AIs have seen the entire internet. Show them what you are doing, and hear ideas that practically come from the collective wisdom of the entire humanity.',
      ],
    },
    {
      kind: 'body_of_post' as const,
      title: 'Captivate Followers',
      contents: [
        "Turn on Junwon Camera to turn your ordinary days into extraordinary contents. Eating lunch? Now it's a Mukbang. Post that video on YT, IG, TT, and catch attention.",
      ],
    },
  ]

  const cardTitleStyle = isWeb
    ? {
        fontFamily: 'Spline+Sans',
        fontWeight: 500,
      }
    : { fontFamily: 'SplineSansMedium' }

  return (
    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
      <View
        f={1}
        ai="center"
        mb="$10"
      >
        <YStack
          maxWidth={500}
          width="100%"
        >
          <XStack
            width="100%"
            ai="center"
            jc="space-between"
            position="relative"
            p="$7"
          >
            <Button
              icon={ArrowLeft}
              size="$6"
              p="$5"
              style={{ position: 'absolute', left: 0 }}
              chromeless
              pressStyle={{ backgroundColor: 'transparent', borderColor: 'transparent' }}
              onPress={() => router.back()}
            />
            <View style={{ flex: 1, alignItems: 'center' }}>
              <JunwonLogoIcon />
            </View>
          </XStack>

          <CameraDemo />

          <YStack
            gap="$6"
            mt="$12"
            mb="$12"
            pl="$5"
            pr="$5"
          >
            <Paragraph
              style={cardTitleStyle}
              transform={[{ scaleX: 1.03 }, { scaleY: 0.97 }]}
              size="$9"
              letterSpacing={0.3}
            >
              Junwon Camera
            </Paragraph>

            {infoCards.map((card, index) => (
              <InfoCard
                key={index}
                {...card}
              />
            ))}
          </YStack>

          <Button
            size="$6"
            width="100%"
            bc="#FF7725"
            color="white"
            onPress={() =>
              router.push('https://junwonapp.notion.site/12ddac7d3ab780b3a62bc3efc3637a93')
            }
          >
            Sign Up
          </Button>

          <YStack
            gap="$1"
            ai="center"
            mt="$12"
          >
            <Text>Already have access?</Text>
            <Text> Open Junwon Camera </Text>
            <Button
              icon={Camera}
              size="$6"
              w="$6"
              h="$6"
              p="$0"
              m="$5"
              bc="#06caeb"
              color="white"
              onPress={() => router.push('/test-camera')}
            />
          </YStack>
        </YStack>
      </View>
    </ScrollView>
  )
}