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

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

  const handleRegister = async (values) => {
    setLoading(true);
    const result = await register(values.phone, values.password, values.nickname);
    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="register-modal"
    >
      <div className="auth-modal-content" data-testid="register-modal-content">
        <div className="auth-header">
          <h2 className="auth-title">注册图汇</h2>
          <p className="auth-subtitle">加入我们，发现无限创意</p>
        </div>

        <Form
          form={form}
          onFinish={handleRegister}
          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="register-phone-input"
            />
          </Form.Item>

          <Form.Item
            name="nickname"
          >
            <Input
              prefix={<UserOutlined className="input-icon" />}
              placeholder="昵称（选填，不填则自动生成）"
              size="large"
              className="auth-input"
              data-testid="register-nickname-input"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码至少6位' }
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="input-icon" />}
              placeholder="设置密码（至少6位）"
              size="large"
              className="auth-input"
              data-testid="register-password-input"
            />
          </Form.Item>

          <Form.Item
            name="confirmPassword"
            dependencies={['password']}
            rules={[
              { required: true, message: '请确认密码' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'));
                },
              }),
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="input-icon" />}
              placeholder="确认密码"
              size="large"
              className="auth-input"
              data-testid="register-confirm-password-input"
            />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              block
              loading={loading}
              className="auth-submit-btn"
              data-testid="register-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={onSwitchToLogin} className="switch-link">立即登录</a>
        </div>
      </div>
    </Modal>
  );
};

export default RegisterModal;
