import { Button, Dialog, Paragraph, Separator, Text, View, YStack, isWeb } from '@my/ui'
import { JunwonLogoIcon } from 'app/assets/icon'
import { useSupabase } from 'app/utils/supabase/useSupabase'
import { useUser } from 'app/utils/useUser'
import { useState } from 'react'
import { useLink } from 'solito/link'
import { useRouter } from 'solito/router'

function ControlPageInnerButton({
  buttonText,
  onPress,
}: {
  buttonText: string
  onPress: () => void
}) {
  const buttonStyle = isWeb
    ? {
        fontFamily: 'Spline+Sans',
        fontWeight: 500,
      }
    : { fontFamily: 'SplineSansMedium' }

  return (
    <View ai={'center'} jc={'center'} m="$3">
      <Button unstyled onPress={onPress}>
        <Text
          style={buttonStyle}
          transform={[{ scaleX: 1.03 }, { scaleY: 0.95 }]}
          fontSize="$5"
          letterSpacing={0.3}
          lineHeight={isWeb ? '$6' : '$8'}
          color={'#06CAEB'}
          textDecorationLine="none"
        >
          {buttonText}
        </Text>
      </Button>
    </View>
  )
}

async function handleDeleteAccount(database: any, user: any, router: any) {
  if (user) {
    const { data, error } = await database.rpc('delete_account', { account_id: user.id })
    if (error) {
      console.error('Account deletion failed:', error)
    } else {
      await database.auth.signOut()
      router.replace('/')
    }
  }
}

export function DeleteAccountPage() {
  const router = useRouter()
  const database = useSupabase()
  const { user, isLoading } = useUser()
  const [isDialogOpen, setIsDialogOpen] = useState(false)

  return (
    <View style={{ flex: 1 }}>
      <YStack>
        <View als="center" m="$8" {...useLink({ href: '/control' })}>
          <JunwonLogoIcon />
        </View>
        <Separator />
        <Paragraph p="$3">
          Danger: Clicking the Delete Account button will delete your account. All data will be
          deleted permanently after 30 days.
        </Paragraph>
        <Separator />
        {!isLoading && user ? (
          <>
            <ControlPageInnerButton
              buttonText={'Delete Account'}
              onPress={() => setIsDialogOpen(true)}
            />
            <Separator />
          </>
        ) : null}
      </YStack>

      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <Dialog.Portal>
          <Dialog.Overlay />
          <Dialog.Content br="$8" bc="red">
            <Dialog.Title pl="$3" pr="$3">
              Danger
            </Dialog.Title>
            <Dialog.Description pt="$2" pb="$2" pl="$3" pr="$3">
              Are you sure you really want to delete your account? Account deletion can never be
              undone.
            </Dialog.Description>
            <YStack m="$3" gap="$3">
              <Button onPress={() => handleDeleteAccount(database, user, router)} color="red">
                Delete
              </Button>
              <Button onPress={() => setIsDialogOpen(false)} backgroundColor="$blue10">
                Cancel
              </Button>
            </YStack>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog>
    </View>
  )
}