import { Anchor, Button, Separator, Text, View, YStack, XStack, isWeb, useThemeName } from '@my/ui'
import { ArrowLeft } from '@tamagui/lucide-icons'
import { JunwonLogoIcon } from 'app/assets/icon'
import { useThemeSetting } from 'app/provider/theme/UniversalThemeProvider'
import { useSupabase } from 'app/utils/supabase/useSupabase'
import { useUser } from 'app/utils/useUser'
import { useRouter } from 'solito/router'
import { useState, useEffect } from 'react'

function ControlPageOuterButton({ buttonText, href }) {
  const buttonStyle = isWeb
    ? {
        fontFamily: 'Spline+Sans',
        fontWeight: 500,
      }
    : { fontFamily: 'SplineSansMedium' }

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

function ControlPageInnerButton({ buttonText, onPress }) {
  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>
  )
}

export function ControlPage() {
  const supabase = useSupabase()
  const router = useRouter()
  const { user, isLoading } = useUser()
  const { set: setTheme } = useThemeSetting()
  const themeName = useThemeName()
  const [currentTheme, setCurrentTheme] = useState(themeName)
  const [isClient, setIsClient] = useState(false)
  const displayThemeName = currentTheme.startsWith('dark') ? 'White Page' : 'Black Page'

  useEffect(() => {
    setCurrentTheme(themeName)
    setIsClient(true) // Set to true only on client
  }, [themeName])

  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <YStack maxWidth={500} width="100%" ml="$3" mr="$3">
        <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>
        <Separator />
        {!isLoading && user ? (
          <>
            <ControlPageInnerButton
              buttonText={'Collection'}
              onPress={() => router.push('/profile/collection')}
            />
            <Separator />
            <ControlPageInnerButton
              buttonText={'Account Control'}
              onPress={() => router.push('/control/account-control')}
            />
            <Separator />
            <ControlPageInnerButton
              buttonText={'Sign Out'}
              onPress={() => {
                supabase.auth.signOut()
                router.push('/control')
              }}
            />
          </>
        ) : (
          <ControlPageInnerButton
            buttonText={'Sign Up or Sign In'}
            onPress={() => router.push('/sign-in')}
          />
        )}
        <Separator />
        <ControlPageOuterButton
          buttonText={'Chat with Junwon'}
          href={'https://discord.gg/3jmD5d8deM'}
        />
        <Separator />
        <ControlPageInnerButton
          buttonText={'Privacy Policy'}
          onPress={() => router.push('/privacy-policy')}
        />
        <Separator />
        <ControlPageInnerButton
          buttonText={'Terms of Service'}
          onPress={() => router.push('/terms-of-service')}
        />
        <Separator />
        {isClient && (
          <>
            <ControlPageInnerButton
              buttonText={`Switch to ${displayThemeName} Mode`}
              onPress={() => {
                setTheme(currentTheme.startsWith('dark') ? 'light' : 'dark')
              }}
            />
            <Separator />
          </>
        )}
      </YStack>
    </View>
  )
}