import { Button, Checkbox, Form, Input, message, Typography } from "antd";
import { useEffect, useState } from "react";
import { fetchCaptcha, login, type CaptchaResponse } from "../api/auth";
import { getCurrentUser } from "../api";
import "./Login.css";

const { Title, Text, Link } = Typography;

export default function Login() {
  const [captcha, setCaptcha] = useState<CaptchaResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  const loadCaptcha = async () => {
    try {
      const data = await fetchCaptcha();
      setCaptcha(data);
    } catch (e) {
      message.error("加载验证码失败");
    }
  };

  useEffect(() => {
    loadCaptcha();
  }, []);

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      const data = await login({
        username: values.username,
        password: values.password,
        captchaId: captcha?.captchaId || "",
        captchaCode: values.captchaCode
      });
      localStorage.setItem("accessToken", data.accessToken);
      localStorage.setItem("refreshToken", data.refreshToken);
      localStorage.setItem("username", values.username);
      try {
        const profile = await getCurrentUser();
        sessionStorage.setItem("userProfile", JSON.stringify(profile));
      } catch (e) {
        sessionStorage.removeItem("userProfile");
      }
      message.success("登录成功");
      window.location.href = "/";
    } catch (e: any) {
      message.error(e.message || "登录失败");
      loadCaptcha();
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-page">
      <div className="login-left">
        <div className="login-brand">
          <img src="/logo.svg" alt="logo" className="brand-logo-img" />
          <span className="brand-name">MeetingAI</span>
        </div>

        <div className="login-hero">
          <h1 className="hero-title">
            智能会议<br />
            <span className="hero-accent">实时语音处理</span><br />
            系统
          </h1>
          <p className="hero-desc">
            全流程自动化会议记录，声纹识别与智能摘要<br />
            提升团队协作效率的新一代解决方案。
          </p>
        </div>

        <div className="login-left-footer">
          <div className="footer-item">企业级安全</div>
          <div className="footer-divider" />
          <div className="footer-item">多语言支持</div>
        </div>
      </div>

      <div className="login-right">
        <div className="login-container">
          <div className="login-header">
            <Title level={2}>账号登录</Title>
            <Text type="secondary">欢迎回来，请登录您的账号</Text>
          </div>

          <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
            className="login-form"
            requiredMark={false}
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: "请输入用户名" }]}
            >
              <Input size="large" placeholder="请输入用户名" />
            </Form.Item>

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

            <Form.Item
              label="验证码"
              name="captchaCode"
              rules={[{ required: true, message: "请输入验证码" }]}
            >
              <div className="captcha-wrapper">
                <Input size="large" placeholder="验证码" />
                <div className="captcha-image-container" onClick={loadCaptcha}>
                  {captcha ? (
                    <img src={captcha.imageBase64} alt="captcha" />
                  ) : (
                    <div className="captcha-placeholder" />
                  )}
                </div>
              </div>
            </Form.Item>

            <div className="login-extra">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
              <Link className="forgot-password">忘记密码？</Link>
            </div>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading} block size="large">
                立即登录
              </Button>
            </Form.Item>
          </Form>

          <div className="login-footer">
            <Text type="secondary">
              默认账号：<Text strong>admin</Text> / 密码：<Text strong>123456</Text>
            </Text>
          </div>
        </div>
      </div>
    </div>
  );
}