/**
 * 重置密码页面 - V21 完全对标
 */
import React from "react";
import { Form, Input, Button, Result, message } from "antd";
import { LockOutlined } from "@ant-design/icons";
import { Link, useSearchParams, useNavigate } from "react-router-dom";
import { useMutation } from "@tanstack/react-query";
import { resetPassword } from "@/api/auth";
import "./ResetPassword.css";

const ResetPassword: React.FC = () => {
  const [form] = Form.useForm();
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const token = searchParams.get("token");

  const resetMutation = useMutation({
    mutationFn: (password: string) => resetPassword(token!, password),
    onSuccess: () => {
      message.success("密码重置成功！");
      setTimeout(() => navigate("/login"), 2000);
    },
    onError: (error: unknown) => {
      if (!(error as { __msgShown?: boolean })?.__msgShown)
        message.error("重置失败，请重试");
    },
  });

  const onFinish = (values: { password: string }) => {
    resetMutation.mutate(values.password);
  };

  if (!token) {
    return (
      <div className="xx-result-page">
        <div className="xx-result-card">
          <Result
            status="error"
            title="无效的重置链接"
            subTitle="该链接无效或已过期，请重新申请密码重置。"
            extra={[
              <Link to="/forgot-password" key="forgot">
                <Button type="primary">重新申请</Button>
              </Link>,
            ]}
          />
        </div>
      </div>
    );
  }

  if (resetMutation.isSuccess) {
    return (
      <div className="xx-result-page">
        <div className="xx-result-card">
          <Result
            status="success"
            title="密码重置成功"
            subTitle="您的密码已成功重置，即将跳转到登录页面..."
            extra={[
              <Link to="/login" key="login">
                <Button type="primary">立即登录</Button>
              </Link>,
            ]}
          />
        </div>
      </div>
    );
  }

  return (
    <div className="xx-auth-page">
      <div className="xx-auth-card">
        <div className="xx-auth-header">
          <div className="xx-logo-big">🦐</div>
          <h1>小虾自动剪辑</h1>
          <p>设置新密码</p>
        </div>

        <Form
          form={form}
          name="reset-password"
          onFinish={onFinish}
          layout="vertical"
        >
          <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
              type="submit"
              className="btn primary"
              style={{ width: "100%" }}
              disabled={resetMutation.isPending}
            >
              {resetMutation.isPending ? "重置中..." : "重置密码"}
            </button>
          </Form.Item>

          <div className="xx-auth-footer">
            <Link to="/login">返回登录</Link>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default ResetPassword;
