"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/providers/auth-provider";
import { useToast } from "@/providers/toast-provider";
import { t } from "@/lib/i18n";

/**
 * 登录页（standalone 模式 mock 登录）
 *
 * 仲裁 ARB-002 §2.3：MF 模式复用 Shell /login
 * 开发期 standalone 模式：自建 mock 登录页（MSW 拦截 /api/auth/login）
 *
 * Mock 凭据：admin@edu.test / admin123
 */
export default function LoginPage() {
  const router = useRouter();
  const { login } = useAuth();
  const { show } = useToast();
  const [email, setEmail] = useState("admin@edu.test");
  const [password, setPassword] = useState("admin123");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    try {
      await login(email, password);
      show("success", "登录成功");
      router.replace("/admin/dashboard");
    } catch (err) {
      const msg = err instanceof Error ? err.message : "登录失败";
      show("error", "登录失败", msg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "var(--bg-paper)",
      }}
    >
      <div
        style={{
          width: 360,
          padding: 32,
          background: "var(--bg-paper)",
          border: "1px solid var(--color-rule)",
          borderRadius: 8,
        }}
      >
        <h1
          style={{
            fontFamily: "var(--font-serif)",
            color: "var(--color-ink)",
            fontSize: 24,
            marginBottom: 4,
          }}
        >
          Edu 管理端
        </h1>
        <p
          style={{
            color: "var(--color-ink-muted)",
            fontSize: 13,
            marginBottom: 24,
          }}
        >
          {t("admin.auth.welcome")}
        </p>

        <form
          onSubmit={handleSubmit}
          style={{ display: "flex", flexDirection: "column", gap: 16 }}
        >
          <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{ fontSize: 13, color: "var(--color-ink)" }}>
              {t("admin.common.email")}
            </span>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
              style={{
                padding: "8px 12px",
                border: "1px solid var(--color-rule)",
                borderRadius: 4,
                background: "var(--bg-paper)",
                color: "var(--color-ink)",
                fontSize: 14,
              }}
            />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{ fontSize: 13, color: "var(--color-ink)" }}>
              {t("admin.users.password")}
            </span>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              autoComplete="current-password"
              style={{
                padding: "8px 12px",
                border: "1px solid var(--color-rule)",
                borderRadius: 4,
                background: "var(--bg-paper)",
                color: "var(--color-ink)",
                fontSize: 14,
              }}
            />
          </label>
          <button
            type="submit"
            disabled={loading}
            style={{
              padding: "10px 16px",
              background: "var(--color-accent)",
              color: "var(--bg-paper)",
              border: "none",
              borderRadius: 4,
              fontSize: 14,
              cursor: loading ? "not-allowed" : "pointer",
              opacity: loading ? 0.6 : 1,
            }}
          >
            {loading ? t("admin.common.loading") : "登录"}
          </button>
        </form>

        <p
          style={{
            marginTop: 16,
            fontSize: 12,
            color: "var(--color-ink-muted)",
            textAlign: "center",
          }}
        >
          Mock: admin@edu.test / admin123
        </p>
      </div>
    </div>
  );
}
