import { Button, Checkbox, Form, Input, message, Typography, Space } from "antd";
import { useEffect, useState, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { fetchCaptcha, login, type CaptchaResponse } from "../api/auth";
import { getCurrentUser, getSystemParamValue } from "../api";
import { UserOutlined, LockOutlined, SafetyOutlined, ReloadOutlined, ShopOutlined } from "@ant-design/icons";
import "./Login.css";

const { Title, Text, Link } = Typography;

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

  const loadCaptcha = useCallback(async () => {
    if (!captchaEnabled) {
      return;
    }
    try {
      const data = await fetchCaptcha();
      setCaptcha(data);
    } catch (e) {
      message.error(t('common.error'));
    }
  }, [captchaEnabled, t]);

  useEffect(() => {
    const init = async () => {
      try {
        const value = await getSystemParamValue("security.captcha.enabled", "true");
        const enabled = value !== "false";
        setCaptchaEnabled(enabled);
        if (enabled) {
          loadCaptcha();
        }
      } catch (e) {
        setCaptchaEnabled(true);
        loadCaptcha();
      }
    };
    init();
  }, [loadCaptcha]);

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    if (searchParams.get("timeout") === "1") {
      message.warning(t('login.loginTimeout'));
      // Clean up the URL to avoid repeated messages on refresh
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, [t]);

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      const data = await login({
        username: values.username,
        password: values.password,
        tenantCode: values.tenantCode,
        captchaId: captchaEnabled ? captcha?.captchaId : undefined,
        captchaCode: captchaEnabled ? values.captchaCode : undefined
      });
      localStorage.setItem("accessToken", data.accessToken);
      localStorage.setItem("refreshToken", data.refreshToken);
      localStorage.setItem("username", values.username);
      if (data.availableTenants) {
        localStorage.setItem("availableTenants", JSON.stringify(data.availableTenants));
        // We should infer activeTenantId from token or just use the first/default logic
        // For simplicity, we can parse the JWT to get tenantId, or backend can return it.
        // Let's assume for now we use the first one if not platform admin, or the backend logic.
        // Actually, if we use a helper to parse JWT:
        const payload = JSON.parse(atob(data.accessToken.split('.')[1]));
        localStorage.setItem("activeTenantId", String(payload.tenantId));
      }
      try {
        const profile = await getCurrentUser();
        sessionStorage.setItem("userProfile", JSON.stringify(profile));
      } catch (e) {
        sessionStorage.removeItem("userProfile");
      }
      message.success(t('common.success'));
      window.location.href = "/";
    } catch (e: any) {
      message.error(e.message || t('common.error'));
      if (captchaEnabled) {
        loadCaptcha();
      }
    } finally {
      setLoading(false);
    }
  };

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

        <div className="login-hero">
          <h1 className="hero-title">
            {t('login.heroTitle1')}<br />
            <span className="hero-accent">{t('login.heroTitle2')}</span><br />
            {t('login.heroTitle3')}
          </h1>
          <p className="hero-desc">
            {t('login.heroDesc')}
          </p>
        </div>

        <div className="login-left-footer">
          <div className="footer-item">{t('login.enterpriseSecurity')}</div>
          <div className="footer-divider" aria-hidden="true" />
          <div className="footer-item">{t('login.multiLang')}</div>
        </div>
      </div>

      <div className="login-right">
        <div className="login-container">
          <div className="login-header">
            <Title level={2}>{t('login.welcome')}</Title>
            <Text type="secondary">{t('login.subtitle')}</Text>
          </div>

          <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
            className="login-form"
            requiredMark={false}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: t('login.username') }]}
            >
              <Input 
                size="large" 
                prefix={<UserOutlined className="text-gray-400" aria-hidden="true" />}
                placeholder={t('login.username')} 
                autoComplete="username"
                spellCheck={false}
                aria-label={t('login.username')}
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: t('login.password') }]}
            >
              <Input.Password 
                size="large" 
                prefix={<LockOutlined className="text-gray-400" aria-hidden="true" />}
                placeholder={t('login.password')} 
                autoComplete="current-password"
                aria-label={t('login.password')}
              />
            </Form.Item>

            {captchaEnabled && (
              <Form.Item
                name="captchaCode"
                rules={[{ required: true, message: t('login.captcha') }]}
              >
                <div className="captcha-wrapper">
                  <Input 
                    size="large" 
                    prefix={<SafetyOutlined className="text-gray-400" aria-hidden="true" />}
                    placeholder={t('login.captcha')} 
                    maxLength={6}
                    aria-label={t('login.captcha')}
                  />
                  <Button 
                    className="captcha-image-btn" 
                    onClick={loadCaptcha}
                    icon={!captcha ? <ReloadOutlined spin /> : null}
                    aria-label="点击刷新验证码"
                  >
                    {captcha && <img src={captcha.imageBase64} alt="验证码图片" />}
                  </Button>
                </div>
              </Form.Item>
            )}

            <div className="login-extra">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>{t('login.rememberMe')}</Checkbox>
              </Form.Item>
              <Link className="forgot-password">{t('login.forgotPassword')}</Link>
            </div>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading} block size="large" className="login-submit-btn">
                {loading ? t('login.loggingIn') : t('login.submit')}
              </Button>
            </Form.Item>
          </Form>

          <div className="login-footer">
            <Text type="secondary">
              {t('login.demoAccount')}：<Text strong className="tabular-nums">admin</Text> / {t('login.password')}：<Text strong className="tabular-nums">123456</Text>
            </Text>
          </div>
        </div>
      </div>
    </div>
  );
}
