import type { AFormRef } from '@/components/common/ao'
import { useRouter } from 'expo-router'
import { Lock, UserRound } from 'lucide-react-native'
import { useRef, useState } from 'react'

import { Image, ScrollView, View } from 'react-native'
import { AButton, AForm, AFormItem, AInput } from '@/components/common/ao'
import { registerDefaultApi } from '@/request/api/auth'
import { toast } from '@/utils/toast'

interface RegisterForm {
  username: string
  password: string
  confirmPassword: string
}

export default function AuthRegister() {
  const router = useRouter()
  const scrollRef = useRef<ScrollView>(null)

  const [form, setForm] = useState<RegisterForm>({
    username: '',
    password: '',
    confirmPassword: '',
  })
  const [loading, setLoading] = useState(false)
  const formRef = useRef<AFormRef>(null)

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

  const handleRegister = async () => {
    if (formRef.current?.validate()) {
      setLoading(true)

      await registerDefaultApi({
        account: form.username,
        password: form.password,
      }).then((res) => {
        if (res.isSuccess) {
          console.log(res)
          toast.show({
            title: '注册成功',
          })
          // router.replace('/auth/login')
        }
        else {
          toast.show({
            title: res.message || '注册失败',
          })
        }
      }).catch((_err) => {
      }).finally(() => {
        setLoading(false)
      })
    }
  }

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

        <AForm ref={formRef} form={form} scrollRef={scrollRef}>
          <AFormItem
            name="username"
            label="账号"
            isRequired
          >
            <AInput
              placeholder="请输入账号"
              leftIcon={UserRound}
              value={form.username}
              onChange={text => handleInputChange('username', text)}
            />
          </AFormItem>

          <AFormItem
            name="password"
            label="密码"
            isRequired
          >
            <AInput
              placeholder="请输入密码"
              leftIcon={Lock}
              isPassword
              value={form.password}
              onChange={text => handleInputChange('password', text)}
            />
          </AFormItem>

          <AFormItem
            name="confirmPassword"
            label="确认密码"
            isRequired
            rules={[
              {
                validator: val => val === form.password,
                message: '两次密码不一致',
              },
            ]}
          >
            <AInput
              placeholder="请再次输入密码"
              leftIcon={Lock}
              isPassword
              value={form.confirmPassword}
              onChange={text => handleInputChange('confirmPassword', text)}
            />
          </AFormItem>
        </AForm>

        <AButton className="w-full mb-4" onPress={handleRegister} loading={loading}>

          注册
        </AButton>
      </View>
    </ScrollView>
  )
}