import { useEvent } from 'expo'
import ExpoQQ from 'expo-qq'
import { useRouter } from 'expo-router'
import { useEffect } from 'react'
import { Image, Text, View } from 'react-native'
import CustomHeader from '@/components/custom/Header'
import { Button, ButtonText } from '@/components/ui/button'

export default function AuthIndex() {
  const router = useRouter()

  function toPath(url: string) {
    router.push(url)
  }

  // /// 监听登录结果，你也可以使用ExpoQQ.addListener('onLoginFinished', callback)来实现，但请不要忘记移除监听
  // const onSendLoginFinished = useEvent(ExpoQQ, 'onGetUserInfo')
  // const onLoginFinished = useEvent(ExpoQQ, 'onLoginFinished')

  // useEffect(() => {
  //   console.log(onSendLoginFinished)
  // }, [onSendLoginFinished])

  // /// 国内应用需要在用户接受隐私协议后再初始化
  // useEffect(() => {
  //   const init = async () => {
  //     await ExpoQQ.init('102826474', 'universal link')
  //   }
  //   init()
  // }, [])

  // useEffect(() => {
  //   if (!onLoginFinished || !onLoginFinished.success)
  //     return

  //   const fetchUserInfo = async () => {
  //     try {
  //     // 1️⃣ 确认 SDK 已经拿到 token
  //       const tokenInfo = await ExpoQQ.getLoginTokenInfo()
  //       console.log('tokenInfo', tokenInfo)

  //       // 2️⃣ 再请求用户信息
  //       await ExpoQQ.sendGetUserInfoReq()
  //     }
  //     catch (e) {
  //       console.error('QQ 登录未完成', e)
  //     }
  //   }

  //   fetchUserInfo()
  // }, [onLoginFinished])

  // /// 调用qq登陆
  // const loginByQQ = async () => {
  //   await ExpoQQ.login(['get_user_info'])
  // }

  return (
    <View className="flex-1">
      <CustomHeader
        showHeader={false}
      />
      <View className="flex-1 bg-white items-center justify-center">
        <Image
          source={require('@/static/images/work.png')}
          style={{ width: '100%', height: 280 }}
          className="mb-6"
        />

        <Image
          source={require('@/static/images/logo.png')}
          style={{ width: 60, height: 60 }}
          className="mb-6"
          resizeMode="contain"
        />

        <Text className="font-bold text-3xl text-[#333] tracking-wide">
          ONEAO
        </Text>

        <View className="w-full flex flex-col gap-3 mt-12 px-3">
          <Button action="secondary" onPress={() => toPath('/auth/login')}>
            <ButtonText>登录</ButtonText>
          </Button>

          <Button action="secondary" onPress={() => toPath('/auth/register')}>
            <ButtonText>注册</ButtonText>
          </Button>
        </View>
      </View>
    </View>

  )
}