import { useState } from 'react'
import { GenerativePageProps } from '@junwon/centum/types'
import { ArrowLeft, Pencil } from '@tamagui/lucide-icons'
import { Helmet } from 'react-helmet'
import { useRouter } from 'solito/router'
import {
  YStack,
  Separator,
  XStack,
  Button,
  Text,
  Spinner,
  ScrollView,
  Dialog,
  Input,
  View,
} from 'tamagui'

export const GenerativePage = (props: GenerativePageProps) => {
  const router = useRouter()
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [guideline, setGuideline] = useState('')

  return (
    <YStack
      f={1}
      w="100%"
    >
      <Helmet>
        <title>{props.title}</title>
      </Helmet>
      {/* Top Bar */}
      <YStack>
        <XStack
          w="100%"
          minHeight="$3"
          ai="center"
          jc="center"
          position="relative"
          my="$2"
          px="$3"
        >
          {props.showBackButton && (
            <Button
              icon={ArrowLeft}
              style={{ position: 'absolute', left: 0 }}
              chromeless
              pressStyle={{ backgroundColor: 'transparent', borderColor: 'transparent' }}
              onPress={() => router.back()}
            />
          )}
          <Text
            style={{
              flex: 1,
              textAlign: 'center',
              maxWidth: '70%',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {props.title}
          </Text>
          {props.onGuidelineSubmit && (
            <Button
              icon={Pencil}
              style={{ position: 'absolute', right: 0 }}
              chromeless
              pressStyle={{ backgroundColor: 'transparent', borderColor: 'transparent' }}
              onPress={() => setIsDialogOpen(true)}
            />
          )}
        </XStack>
        <Separator m="$0" />
      </YStack>
      <ScrollView>
        <YStack
          ai="center"
          w="100%"
          mt="$5"
          px="$3"
          mb="$8"
        >
          <YStack
            px="$3"
            w="100%"
          >
            {props.showLoading ? (
              <Spinner
                size="large"
                color="#fff"
                mt="$8"
                mb="$5"
              />
            ) : (
              <>
                {props.code ? (
                  <View>
                    <div
                      style={{
                        all: 'initial',
                      }}
                    >
                      <div style={{ all: 'unset' }}>
                        <span dangerouslySetInnerHTML={{ __html: props.code }} />
                      </div>
                    </div>
                  </View>
                ) : (
                  <YStack ai="center">
                    <Text color="$red10">Failed to generate and render post.</Text>
                  </YStack>
                )}
              </>
            )}
          </YStack>
        </YStack>
      </ScrollView>
      <Dialog
        open={isDialogOpen}
        onOpenChange={setIsDialogOpen}
      >
        <Dialog.Portal>
          <Dialog.Overlay />
          <Dialog.Content br="$8">
            <Dialog.Title
              pl="$3"
              pr="$3"
            >
              Edit Post
            </Dialog.Title>
            <Dialog.Description p="$3">
              Describe a full page post including what you want the post to be about and what you
              want the post to look like.
            </Dialog.Description>
            <YStack p="$3">
              <Input
                multiline
                numberOfLines={5}
                value={guideline}
                onChangeText={setGuideline}
                mb="$5"
              />
              <XStack gap="$5">
                <Button
                  flex={1}
                  onPress={() => setIsDialogOpen(false)}
                >
                  Cancel
                </Button>
                <Button
                  flex={1}
                  backgroundColor="#06CAEB"
                  onPress={() => {
                    props.onGuidelineSubmit?.(guideline)
                    setIsDialogOpen(false)
                    setGuideline('')
                  }}
                >
                  Generate
                </Button>
              </XStack>
            </YStack>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog>
      {!props.showLoading && <Separator />}
    </YStack>
  )
}