import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Input, Toast } from 'antd-mobile'
import { useUserStore } from '@/stores/user'
import styles from './login-simple.module.css'

export default function SimpleLogin() {
  const navigate = useNavigate()
  const { login } = useUserStore()
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)

  const handleLogin = async () => {
    if (!username || !password) {
      Toast.show('请输入用户名和密码')
      return
    }

    setLoading(true)
    try {
      const response = await fetch('/api/v1/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
      })

      const result = await response.json()

      if (result.code === 0) {
        // 登录成功，保存到 store
        login(result.data.user, result.data.token)
        localStorage.setItem('i18nextLng', 'zh')
        Toast.show('登录成功')
        // 跳转到首页
        navigate('/dashboard')
      } else {
        Toast.show(result.message || '登录失败')
      }
    } catch (error: any) {
      Toast.show(error.message || '登录失败，请重试')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className={styles.loginPage}>
      <div className={styles.loginCard}>
        <h1 className={styles.title}>企业工具台</h1>
        <p className={styles.subtitle}>出差申请系统</p>

        <div className={styles.form}>
          <div className={styles.field}>
            <label>用户名</label>
            <Input
              placeholder="请输入用户名"
              value={username}
              onChange={setUsername}
              clearable
            />
          </div>

          <div className={styles.field}>
            <label>密码</label>
            <Input
              type="password"
              placeholder="请输入密码"
              value={password}
              onChange={setPassword}
              clearable
            />
          </div>

          <Button
            block
            color="primary"
            size="large"
            onClick={handleLogin}
            loading={loading}
          >
            登录
          </Button>

          <p className={styles.tip}>
            💡 开发模式：输入任意用户名密码即可登录
          </p>
        </div>
      </div>
    </div>
  )
}