/**
 * 注册页面 - V21 完全对标
 */
import React from "react";
import { Form, Input, message } from "antd";
import { UserOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import { useRegister } from "@/hooks/useAuth";
import Button from "@/components/ui/Button";
import "./Register.css";

interface RegisterFormValues {
  email: string;
  username: string;
  password: string;
  confirmPassword: string;
}

const Register: React.FC = () => {
  const registerMutation = useRegister();
  const [form] = Form.useForm();

  const onFinish = async (values: RegisterFormValues) => {
    try {
      await registerMutation.mutateAsync({
        email: values.email,
        username: values.username,
        password: values.password,
        display_name: values.username,
      });
      message.success("注册成功！请查收验证邮件。");
    } catch (error: unknown) {
      if (!(error as { __msgShown?: boolean })?.__msgShown)
        message.error("注册失败，请重试");
    }
  };

  return (
    <div className="xx-auth-page">
      <div className="xx-auth-card">
        <div className="xx-auth-header">
          <div className="xx-auth-brand">
            <span className="xx-auth-logo">🦐</span>
            <span className="xx-auth-brand-name">小虾智剪</span>
          </div>
          <p>创建账户，开启智能视频创作之旅</p>
        </div>

        <Form
          form={form}
          name="register"
          onFinish={onFinish}
          autoComplete="off"
          layout="vertical"
        >
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: "请输入邮箱" },
              { type: "email", message: "请输入有效的邮箱地址" },
            ]}
          >
            <Input
              prefix={<MailOutlined />}
              placeholder="name@example.com"
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="username"
            label="用户名"
            rules={[
              { required: true, message: "请输入用户名" },
              { min: 3, message: "用户名至少 3 个字符" },
              { max: 20, message: "用户名最多 20 个字符" },
              {
                pattern: /^[a-zA-Z0-9_]+$/,
                message: "用户名只能包含字母、数字和下划线",
              },
            ]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder="用户名"
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="password"
            label="密码"
            rules={[
              { required: true, message: "请输入密码" },
              { min: 8, message: "密码至少 8 个字符" },
              {
                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
                message: "密码必须包含大小写字母和数字",
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="•••••••••"
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="confirmPassword"
            label="确认密码"
            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 />}
              placeholder="•••••••••"
              size="large"
            />
          </Form.Item>

          <Form.Item>
            <Button
              buttonType="primary"
              buttonSize="lg"
              htmlType="submit"
              loading={registerMutation.isPending}
              style={{ width: "100%" }}
            >
              {registerMutation.isPending ? "注册中..." : "注册"}
            </Button>
          </Form.Item>

          <div className="xx-auth-footer">
            已有账号？ <Link to="/login">立即登录</Link>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Register;
