import React, { useState } from 'react';
import './login.less';

const LoginPage = () => {
  const [username, setUsername] = useState('admin');
  const [password, setPassword] = useState('admin123');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    
    try {
      // 模拟登录请求
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 模拟登录成功，存储token
      localStorage.setItem('token', 'mock-token-123456');
      
      // 显示成功消息
      alert('登录成功');
      
      // 跳转到首页
      window.location.href = '/';
    } catch (error) {
      alert('登录失败，请检查用户名和密码');
      console.error('Login error:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="loginContainer">
      <div className="loginCard">
        <h2 className="loginTitle">LeasePal 商户管理系统</h2>
        <h5 className="loginSubtitle">登录</h5>
        
        <form onSubmit={handleSubmit} className="loginForm">
          <div className="formItem">
            <input 
              type="text" 
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="用户名"
              required
              className="formInput"
            />
          </div>
          
          <div className="formItem">
            <input 
              type="password" 
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="密码"
              required
              className="formInput"
            />
          </div>
          
          <div className="formItem">
            <button 
              type="submit" 
              className="loginButton"
              disabled={loading}
            >
              {loading ? '登录中...' : '登录'}
            </button>
          </div>
          
          <div className="loginTips">
            <p><strong>提示：</strong>用户名: admin, 密码: admin123</p>
          </div>
        </form>
      </div>
    </div>
  );
};

export default LoginPage;