import { useState } from 'react';
import { Modal, Form, Input, Button, Checkbox, Divider, message } from 'antd';
import { MobileOutlined, LockOutlined, WechatOutlined, QqOutlined, WeiboOutlined } from '@ant-design/icons';
import { login } from '../api/auth';
import './AuthModal.css';

const LoginModal = ({ open, onClose, onSwitchToRegister }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleLogin = async (values) => {
    setLoading(true);
    const result = await login(values.phone, values.password);
    setLoading(false);
    
    if (result.success) {
      message.success('登录成功！');
      onClose();
      form.resetFields();
      // 刷新页面以更新用户信息
      window.location.reload();
    } else {
      message.error(result.message || '登录失败');
    }
  };

  const handleClose = () => {
    form.resetFields();
    onClose();
  };

  return (
    <Modal
      open={open}
      onCancel={handleClose}
      footer={null}
      width={480}
      centered
      className="auth-modal"
      title={null}
      closeIcon={<span className="close-icon">×</span>}
      data-testid="login-modal"
    >
      <div className="auth-modal-content" data-testid="login-modal-content">
        <div className="auth-header">
          <h2 className="auth-title">登录图汇</h2>
          <p className="auth-subtitle">欢迎回来，开始您的设计之旅</p>
        </div>

        <Form
          form={form}
          onFinish={handleLogin}
          layout="vertical"
          requiredMark={false}
          className="auth-form"
        >
          <Form.Item
            name="phone"
            rules={[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的11位手机号' }
            ]}
          >
            <Input
              prefix={<MobileOutlined className="input-icon" />}
              placeholder="请输入手机号"
              maxLength={11}
              size="large"
              className="auth-input"
              data-testid="login-phone-input"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password
              prefix={<LockOutlined className="input-icon" />}
              placeholder="密码"
              size="large"
              className="auth-input"
              data-testid="login-password-input"
            />
          </Form.Item>

          <Form.Item>
            <div className="form-options">
              <Checkbox>记住我</Checkbox>
              <a href="#" className="forgot-link">忘记密码？</a>
            </div>
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              block
              loading={loading}
              className="auth-submit-btn"
              data-testid="login-submit-btn"
            >
              登录
            </Button>
          </Form.Item>
        </Form>

        <Divider className="auth-divider">
          <span>其他登录方式</span>
        </Divider>

        <div className="social-login">
          <Button 
            className="social-btn wechat" 
            shape="circle" 
            icon={<WechatOutlined />}
            title="微信登录"
          />
          <Button 
            className="social-btn qq" 
            shape="circle" 
            icon={<QqOutlined />}
            title="QQ登录"
          />
          <Button 
            className="social-btn weibo" 
            shape="circle" 
            icon={<WeiboOutlined />}
            title="微博登录"
          />
        </div>

        <div className="auth-footer">
          <span>还没有账号？</span>
          <a onClick={onSwitchToRegister} className="switch-link">立即注册</a>
        </div>
      </div>
    </Modal>
  );
};

export default LoginModal;
