import {useEffect, useState} from "react";
import Taro from '@tarojs/taro'
import {Input, Radio, Button} from '@nutui/nutui-react-taro'
import {loginBySms} from '@/api/passport/login'

const Login = () => {
  const [isAgree, setIsAgree] = useState(false)
  const [phone, setPhone] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)

  const reload = () => {
    Taro.hideTabBar()
  }

  // 处理登录
  const handleLogin = async () => {
    if (!isAgree) {
      Taro.showToast({
        title: '请先同意服务协议',
        icon: 'none'
      })
      return
    }

    if (!phone || phone.trim() === '') {
      Taro.showToast({
        title: '请输入手机号',
        icon: 'none'
      })
      return
    }

    if (!password || password.trim() === '') {
      Taro.showToast({
        title: '请输入密码',
        icon: 'none'
      })
      return
    }

    // 验证手机号格式
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(phone)) {
      Taro.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      })
      return
    }

    try {
      setLoading(true)
      await loginBySms({
        phone: phone,
        code: password
      })

      Taro.showToast({
        title: '登录成功',
        icon: 'success'
      })

      // 延迟跳转到首页
      setTimeout(() => {
        Taro.reLaunch({
          url: '/pages/index/index'
        })
      }, 1500)
    } catch (error: any) {
      console.error('登录失败:', error)
      Taro.showToast({
        title: error.message || '登录失败，请重试',
        icon: 'none'
      })
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    reload()
  }, [])

  return (
    <>
      <div className={'flex flex-col justify-center px-5'}>
        <div className={'text-3xl text-center py-5 font-normal my-10'}>账号登录</div>

        <>
          <div className={'flex flex-col justify-between items-center my-2'}>
            <Input
              type="text"
              placeholder="手机号"
              maxLength={11}
              value={phone}
              onChange={(val) => setPhone(val)}
              style={{backgroundColor: '#ffffff', borderRadius: '8px'}}
            />
          </div>
          <div className={'flex flex-col justify-between items-center my-2'}>
            <Input
              type="password"
              placeholder="密码"
              value={password}
              onChange={(val) => setPassword(val)}
              style={{backgroundColor: '#ffffff', borderRadius: '8px'}}
            />
          </div>
          {/*<div className={'flex justify-between my-2 text-left px-1'}>*/}
          {/*  <a href={'#'} className={'text-blue-600 text-sm'}*/}
          {/*     onClick={() => Taro.navigateTo({url: '/passport/forget'})}>忘记密码</a>*/}
          {/*  <a href={'#'} className={'text-blue-600 text-sm'}*/}
          {/*     onClick={() => Taro.navigateTo({url: '/passport/register'})}>立即注册</a>*/}
          {/*</div>*/}
          <div className={'flex justify-center my-5'}>
            <Button
              type="info"
              size={'large'}
              className={'w-full rounded-lg p-2'}
              disabled={!isAgree}
              loading={loading}
              onClick={handleLogin}
            >
              {loading ? '登录中...' : '登录'}
            </Button>
          </div>
          {/*<div className={'my-2 flex fixed justify-center bottom-20 left-0 text-sm items-center text-center w-full'}>*/}
          {/*  <Button onClick={() => Taro.navigateTo({url: '/passport/setting'})}>服务配置</Button>*/}
          {/*</div>*/}
          {/*<div className={'w-full fixed bottom-20 my-2 flex justify-center text-sm items-center text-center'}>*/}
          {/*  没有账号？<a href={''} onClick={() => Taro.navigateTo({url: '/passport/register'})}*/}
          {/*              className={'text-blue-600'}>立即注册</a>*/}
          {/*</div>*/}
        </>

        <div className={'my-2 flex text-sm items-center px-1'}>
          <Radio style={{color: '#333333'}} checked={isAgree} onClick={() => setIsAgree(!isAgree)}></Radio>
          <span className={'text-gray-400'} onClick={() => setIsAgree(!isAgree)}>勾选表示您已阅读并同意</span><a
          onClick={() => Taro.navigateTo({url: '/passport/agreement'})}
          className={'text-blue-600'}>《服务协议及隐私政策》</a>
        </div>
      </div>
    </>
  )
}
export default Login
