/**
 * 登录页面 - V21 完全对标
 */
import React from "react";
import { Form, Input, Checkbox, message } from "antd";
import { Link, useNavigate } from "react-router-dom";
import { useLogin } from "@/hooks/useAuth";
import Button from "@/components/ui/Button";
import "./Login.css";

interface LoginFormValues {
  email: string;
  password: string;
  remember: boolean;
}

const Login: React.FC = () => {
  const navigate = useNavigate();
  const loginMutation = useLogin();
  const [form] = Form.useForm();

  const onFinish = async (values: LoginFormValues) => {
    try {
      await loginMutation.mutateAsync({
        email: values.email,
        password: values.password,
      });
      message.success("登录成功！");
      navigate("/app/dashboard");
    } 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="login"
          onFinish={onFinish}
          autoComplete="off"
          layout="vertical"
        >
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: "请输入邮箱" },
              { type: "email", message: "请输入有效的邮箱" },
            ]}
          >
            <Input placeholder="name@example.com" size="large" />
          </Form.Item>

          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password placeholder="•••••••••" size="large" />
          </Form.Item>

          <Form.Item>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
              <Link className="xx-auth-forgot" to="/forgot-password">
                忘记密码？
              </Link>
            </div>
          </Form.Item>

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

        <div className="xx-auth-divider">或</div>

        <div className="xx-auth-third-party">
          <button
            type="button"
            className="xx-btn-wechat"
            onClick={() => message.info("微信登录功能开发中")}
          >
            <span className="xx-wechat-icon">💬</span>
            微信登录
          </button>
        </div>

        <div className="xx-auth-footer">
          还没有账号？ <Link to="/register">立即注册</Link>
        </div>
      </div>
    </div>
  );
};

export default Login;
