import { View, Input, Button, Text, Image } from '@tarojs/components'
import { useState } from 'react'
import Taro from '@tarojs/taro'
import { authManager } from '../../utils/auth'
import './index.css'

export default function Login() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)

  const handleLogin = async () => {
    if (!username || !password) {
      Taro.showToast({
        title: '请输入用户名和密码',
        icon: 'none'
      })
      return
    }

    setLoading(true)
    try {
      const user = await authManager.login(username, password)
      Taro.showToast({
        title: '登录成功',
        icon: 'success'
      })
      
      // 登录成功后跳转到首页
      setTimeout(() => {
        Taro.switchTab({ url: '/pages/index/index' })
      }, 1500)
    } catch (error: any) {
      Taro.showToast({
        title: error.message || '登录失败',
        icon: 'none'
      })
    } finally {
      setLoading(false)
    }
  }

  const goToRegister = () => {
    Taro.navigateTo({ url: '/pages/register/index' })
  }

  return (
    <View className="login-container">
      <View className="login-header">
        <Image 
          className="login-logo"
          src="https://source.unsplash.com/200x200/?logo"
          mode="aspectFit"
        />
        <View className="login-title-container">
          <Text className="login-title">欢迎回来</Text>
          <Text className="login-subtitle">请使用您的账号登录</Text>
        </View>
      </View>
      
      <View className="login-form">
        <View className="form-item">
          <Text className="form-label">用户名</Text>
          <View className="input-wrapper">
            <Input
              className="form-input"
              placeholder="请输入用户名"
              value={username}
              onInput={(e) => setUsername(e.detail.value)}
              maxlength={20}
            />
          </View>
        </View>
        
        <View className="form-item">
          <Text className="form-label">密码</Text>
          <View className="input-wrapper">
            <Input
              className="form-input"
              placeholder="请输入密码"
              password
              value={password}
              onInput={(e) => setPassword(e.detail.value)}
              maxlength={20}
            />
          </View>
        </View>
        
        <Button
          className={`login-button ${loading ? 'loading' : ''}`}
          loading={loading}
          onClick={handleLogin}
          disabled={loading}
        >
          {loading ? '登录中...' : '登录'}
        </Button>
        
        <View className="login-footer">
          <Text className="footer-text">
            还没有账号？ 
            <Text className="link-text" onClick={goToRegister}>
              立即注册
            </Text>
          </Text>
        </View>
      </View>
      
      <View className="login-footer-info">
        <Text className="footer-tip">登录即表示您同意我们的</Text>
        <View className="footer-links">
          <Text className="link-text">用户协议</Text>
          <Text className="link-separator">和</Text>
          <Text className="link-text">隐私政策</Text>
        </View>
      </View>
    </View>
  )
}