import React, { useState, useEffect } from 'react'
import { View, Text, Input, Button } from '@tarojs/components'
import { useAuth } from '../../hooks'
import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
import Taro from '@tarojs/taro'

/**
 * 人才用户登录页面
 * 支持手机号/身份证号/残疾证号 + 密码登录
 * 原型参考: docs/小程序原型/rencai.html (行115-158)
 */
export const LoginPage: React.FC = () => {
  const [identifier, setIdentifier] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const { login, isLoggedIn } = useAuth()

  // 如果已登录，直接跳转到首页
  useEffect(() => {
    if (isLoggedIn) {
      Taro.switchTab({ url: '/pages/index/index' })
    }
  }, [isLoggedIn])

  const handleLogin = async () => {
    // 表单验证
    if (!identifier.trim()) {
      Taro.showToast({ title: '请输入手机号/身份证号/残疾证号', icon: 'none' })
      return
    }

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

    setLoading(true)
    try {
      await login(identifier, password)
      Taro.showToast({ title: '登录成功', icon: 'success' })

      // 跳转到首页
      setTimeout(() => {
        Taro.switchTab({ url: '/pages/index/index' })
      }, 500)
    } catch (error: any) {
      Taro.showToast({
        title: error.message || '登录失败',
        icon: 'none',
        duration: 2000
      })
    } finally {
      setLoading(false)
    }
  }

  const handleForgotPassword = () => {
    // 占位功能
    Taro.showToast({ title: '请联系管理员重置密码', icon: 'none' })
  }

  return (
    <View className="min-h-screen" data-testid="talent-login-page">
      {/* 导航栏 */}
      <Navbar
        title="人才登录"
        leftIcon=""
        backgroundColor="bg-transparent"
        textColor="text-white"
        border={false}
      />

      {/* 蓝色渐变背景 */}
      <View
        className="min-h-screen flex flex-col items-center justify-center px-6"
        style={{
          background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)'
        }}
      >
        {/* 标题区域 */}
        <View className="mb-12 text-center flex flex-col">
          <Text className="text-3xl font-bold text-white block mb-2" data-testid="talent-page-title">人才服务平台</Text>
          <Text className="text-base text-white/80 block">欢迎回来</Text>
        </View>

        {/* 白色圆角卡片表单 */}
        <View className="w-full bg-white rounded-2xl shadow-lg p-6">
          {/* 表单标题 */}
          <Text className="text-xl font-semibold text-gray-800 block mb-6 text-center">人才登录</Text>

          {/* 身份证号/残疾证号输入框 */}
          <View className="mb-4">
            <Text className="text-sm text-gray-600 block mb-2">手机号/身份证号/残疾证号</Text>
            <View className="border border-gray-300 rounded-lg px-4 py-3 bg-gray-50">
              <Input
                className="w-full text-base"
                placeholder="请输入手机号/身份证号/残疾证号"
                value={identifier}
                onInput={(e) => setIdentifier(e.detail.value)}
                disabled={loading}
                data-testid="talent-identifier-input"
              />
            </View>
          </View>

          {/* 密码输入框 */}
          <View className="mb-6">
            <Text className="text-sm text-gray-600 block mb-2">密码</Text>
            <View className="border border-gray-300 rounded-lg px-4 py-3 bg-gray-50">
              <Input
                className="w-full text-base"
                placeholder="请输入密码"
                value={password}
                onInput={(e) => setPassword(e.detail.value)}
                disabled={loading}
                password
                data-testid="talent-password-input"
              />
            </View>
          </View>

          {/* 登录按钮 */}
          <Button
            className="w-full rounded-lg text-white font-medium py-3 mb-4"
            style={{
              background: loading ? '#9ca3af' : 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)'
            }}
            onClick={handleLogin}
            disabled={loading}
            data-testid="talent-login-button"
          >
            {loading ? '登录中...' : '登录'}
          </Button>

          {/* 忘记密码链接 */}
          <View className="text-center">
            <Text
              className="text-sm text-blue-500"
              onClick={handleForgotPassword}
            >
              忘记密码？
            </Text>
          </View>
        </View>

        {/* 底部说明 */}
        <View className="mt-8 text-center">
          <Text className="text-xs text-white/60">
            登录即表示您同意用户协议和隐私政策
          </Text>
        </View>
      </View>
    </View>
  )
}

export default LoginPage
