"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";

import { API_BASE, apiFetch } from "@/lib/api";
import { readToken, saveToken } from "@/lib/auth";
import { useI18nText } from "@/lib/i18n";

type AuthOk = { ok: true; user_id: number; token: string; expires_at: number };
type AuthErr = { ok: false; error: string };
type AuthResp = AuthOk | AuthErr;

function passwordScore(password: string, isZh: boolean): { label: string; color: string } {
  if (password.length >= 12) return { label: isZh ? "强" : "Strong", color: "text-emerald-600" };
  if (password.length >= 8) return { label: isZh ? "中" : "Medium", color: "text-blue-600" };
  return { label: isZh ? "弱" : "Weak", color: "text-orange-600" };
}

export default function AuthPage() {
  const { isZh, tx } = useI18nText();
  const router = useRouter();
  const apiBase = useMemo(() => API_BASE, []);
  const [checkingAuth, setCheckingAuth] = useState(true);

  const [mode, setMode] = useState<"register" | "login">("login");
  const [username, setUsername] = useState(process.env.NEXT_PUBLIC_TEST_USERNAME ?? "");
  const [password, setPassword] = useState(process.env.NEXT_PUBLIC_TEST_PASSWORD ?? "");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [resp, setResp] = useState<AuthResp | null>(null);

  useEffect(() => {
    if (readToken()) {
      router.replace("/problems");
      return;
    }
    setCheckingAuth(false);
  }, [router]);

  const usernameErr = username.trim().length < 3 ? tx("用户名至少 3 位", "Username must be at least 3 chars") : "";
  const passwordErr = password.length < 6 ? tx("密码至少 6 位", "Password must be at least 6 chars") : "";
  const confirmErr =
    mode === "register" && password !== confirmPassword ? tx("两次密码不一致", "Passwords do not match") : "";

  const canSubmit = !loading && !usernameErr && !passwordErr && !confirmErr;

  async function submit() {
    if (!canSubmit) return;
    setLoading(true);
    setResp(null);
    try {
      const j = await apiFetch<AuthResp>(`/api/v1/auth/${mode}`, {
        method: "POST",
        body: JSON.stringify({ username: username.trim(), password }),
      });
      setResp(j);
      if (j.ok) {
        saveToken(j.token);
        setTimeout(() => {
          router.replace("/problems");
        }, 350);
      }
    } catch (e: unknown) {
      setResp({ ok: false, error: String(e) });
    } finally {
      setLoading(false);
    }
  }

  const strength = passwordScore(password, isZh);

  if (checkingAuth) {
    return (
      <main className="mx-auto max-w-4xl px-3 py-12 text-sm text-zinc-500">
        {tx("已登录，正在跳转...", "Already signed in, redirecting...")}
      </main>
    );
  }

  return (
    <main className="mx-auto max-w-4xl px-3 py-6 max-[390px]:px-2 sm:px-4 md:px-6 md:py-10">
      <div className="grid gap-6 md:grid-cols-[1.1fr,1fr]">
        <section className="rounded-2xl border bg-zinc-900 p-6 text-zinc-100">
          <h1 className="text-2xl font-semibold">{tx("欢迎回来，开始刷题", "Welcome back, let's practice")}</h1>
          <p className="mt-3 text-sm text-zinc-300">
            {tx("登录后可提交评测、保存草稿、查看错题本和个人进度。", "After sign-in you can submit, save drafts, review wrong-book, and track your progress.")}
          </p>
          <div className="mt-6 space-y-2 text-sm text-zinc-300">
            <p>{tx("• 题库按 CSP-J / CSP-S / NOIP 入门组织", "• Problem sets are organized by CSP-J / CSP-S / NOIP junior")}</p>
            <p>{tx("• 题目页支持本地草稿与试运行", "• Problem page supports local draft and run")}</p>
            <p>{tx("• 生成式题解会异步入库，支持多解法", "• Generated solutions are queued asynchronously with multiple methods")}</p>
          </div>
          <p className="mt-6 text-xs text-zinc-400">
            API Base: <span className="font-mono">{apiBase}</span>
          </p>
        </section>

        <section className="rounded-2xl border bg-white p-6">
          <div className="grid grid-cols-2 gap-2 rounded-lg bg-zinc-100 p-1 text-sm">
            <button
              type="button"
              className={`rounded-md px-3 py-2 ${
                mode === "login" ? "bg-white shadow-sm" : "text-zinc-600"
              }`}
              onClick={() => {
                setMode("login");
                setResp(null);
              }}
              disabled={loading}
            >
              {tx("登录", "Sign In")}
            </button>
            <button
              type="button"
              className={`rounded-md px-3 py-2 ${
                mode === "register" ? "bg-white shadow-sm" : "text-zinc-600"
              }`}
              onClick={() => {
                setMode("register");
                setResp(null);
              }}
              disabled={loading}
            >
              {tx("注册", "Register")}
            </button>
          </div>

          <div className="mt-5 space-y-4">
            <div>
              <label className="text-sm font-medium">{tx("用户名", "Username")}</label>
              <input
                className="mt-1 w-full rounded-lg border px-3 py-2"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder={tx("例如：csp_student", "e.g. csp_student")}
              />
              {usernameErr && <p className="mt-1 text-xs text-red-600">{usernameErr}</p>}
            </div>

            <div>
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium">{tx("密码", "Password")}</label>
                <span className={`text-xs ${strength.color}`}>{tx("强度", "Strength")}: {strength.label}</span>
              </div>
              <input
                type={showPassword ? "text" : "password"}
                className="mt-1 w-full rounded-lg border px-3 py-2"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder={tx("至少 6 位", "At least 6 chars")}
              />
              {passwordErr && <p className="mt-1 text-xs text-red-600">{passwordErr}</p>}
            </div>

            {mode === "register" && (
              <div>
                <label className="text-sm font-medium">{tx("确认密码", "Confirm Password")}</label>
                <input
                  type={showPassword ? "text" : "password"}
                  className="mt-1 w-full rounded-lg border px-3 py-2"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  placeholder={tx("再输入一次密码", "Enter password again")}
                />
                {confirmErr && <p className="mt-1 text-xs text-red-600">{confirmErr}</p>}
              </div>
            )}

            <label className="flex items-center gap-2 text-xs text-zinc-600">
              <input
                type="checkbox"
                checked={showPassword}
                onChange={(e) => setShowPassword(e.target.checked)}
              />
              {tx("显示密码", "Show password")}
            </label>

            <button
              className="w-full rounded-lg bg-zinc-900 px-4 py-2 text-white hover:bg-zinc-800 disabled:opacity-50"
              onClick={() => void submit()}
              disabled={!canSubmit}
            >
              {loading ? tx("提交中...", "Submitting...") : mode === "register" ? tx("注册并登录", "Register & Sign In") : tx("登录", "Sign In")}
            </button>
          </div>

          {resp && (
            <div
              className={`mt-4 rounded-lg border px-3 py-2 text-sm ${
                resp.ok ? "border-emerald-300 bg-emerald-50 text-emerald-700" : "border-red-300 bg-red-50 text-red-700"
              }`}
            >
              {resp.ok
                ? tx("登录成功，正在跳转到题库...", "Signed in. Redirecting to problem set...")
                : `${tx("操作失败：", "Action failed: ")}${resp.error}`}
            </div>
          )}

          <p className="mt-4 text-xs text-zinc-500">
            {tx("登录后 Token 自动保存在浏览器 localStorage，可直接前往", "Token is stored in browser localStorage after sign-in. You can go to")}
            <Link className="mx-1 underline" href="/problems">
              {tx("题库", "Problems")}
            </Link>
            {tx("与", "and")}
            <Link className="mx-1 underline" href="/me">
              {tx("我的", "My Account")}
            </Link>
            {tx("页面。", ".")}
          </p>
        </section>
      </div>
    </main>
  );
}