import { useState } from 'react'
import { Image, Text, View } from 'react-native'
import { AButton, ACheckbox, AForm, AFormItem, AInput } from '@/components/common/ao'
import { IconQq, IconWeixin, IconZhiwen } from '@/components/iconfont'
import { Divider } from '@/components/ui/divider'
import useFormValidation from '@/hooks/useFormValidation'
import alovaInstance from '@/request'
import { toast } from '@/utils/toast'

interface LoginForm {
  username: string
  password: string
  rememberMe: boolean
  socialType?: 'qq' | 'weixin' | 'fingerprint'
}

export default function AuthLogin() {
  const [form, setForm] = useState<LoginForm>({
    username: '',
    password: '',
    rememberMe: true,
  })

  const handleInputChange = (field: keyof LoginForm, value: string) => {
    setForm(prev => ({ ...prev, [field]: value }))
  }

  // 验证规则
  const rules = {
    username: { required: true, message: '账号是必填项' },
    password: { required: true, message: '密码是必填项' },
  }

  const { isValid } = useFormValidation(form, rules)

  const loginDefault = () => {
    alovaInstance.Post('/auth/test', {
      title: 'foo',
      body: 'bar',
      userId: 1,
    })
      .then((res) => {
        console.log('成功返回:', res)
      })
      .catch((err) => {
        console.log('请求失败或未授权:', err)
      })
  }

  const loginQq = () => {
    toast.show({ title: '功能待开发，请稍等. . .' })
  }
  const loginWx = () => {
    toast.show({ title: '功能待开发，请稍等. . .' })
  }
  const loginZhiwen = () => {
    toast.show({ title: '功能待开发，请稍等. . .' })
  }

  return (
    <View className="flex flex-col items-center px-6 h-full">
      <Image
        source={require('@/static/images/logo.png')}
        style={{ width: 120, height: 120 }}
        className="my-12"
      />

      <AForm form={form}>
        <AFormItem label="账号">
          <AInput
            value={form.username}
            onChange={text => handleInputChange('username', text)}
          />
        </AFormItem>

        <AFormItem label="密码">
          <AInput
            isPassword
            value={form.password}
            onChange={text => handleInputChange('password', text)}
          />
        </AFormItem>
      </AForm>

      <View className="w-full flex-row justify-between items-center mb-6">
        <ACheckbox
          isChecked={form.rememberMe}
          onChange={checked => setForm(prev => ({ ...prev, rememberMe: checked }))}
          label="记住我"
        />

        <Text className="text-blue-500">忘记密码?</Text>
      </View>

      <AButton className="w-full" onPress={loginDefault} disabled={!isValid}>
        登录
      </AButton>

      <View className="flex-row items-center my-8 w-full">
        <View className="flex-1">
          <Divider />
        </View>
        <Text className="mx-3 text-gray-500 text-sm">社交账号</Text>
        <View className="flex-1">
          <Divider />
        </View>
      </View>

      <View className="w-full flex-row justify-between items-center">
        <IconQq size={32} onPress={loginQq} />
        <IconWeixin size={32} onPress={loginWx} />
        <IconZhiwen size={32} onPress={loginZhiwen} />
      </View>
    </View>
  )
}