"use client";

import type { FormEvent } from "react";
import { useState } from "react";
import { useRouter } from "next/navigation";

import { getCmsApiBaseUrl } from "@/lib/api-base";

type LoginResponse = {
  accessToken: string;
  user?: unknown;
};

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const apiBaseUrl = getCmsApiBaseUrl();
  const accessTokenKey = "accessToken";

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);

    try {
      const res = await fetch(`${apiBaseUrl}/auth/login`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ email, password }),
      });

      if (!res.ok) {
        let message = "Login failed";
        try {
          const data = (await res.json()) as { message?: string };
          if (data?.message) message = data.message;
        } catch {
          // ignore parse errors
        }
        throw new Error(message);
      }

      const data = (await res.json()) as LoginResponse;
      if (!data?.accessToken) {
        throw new Error("Missing access token in response");
      }

      localStorage.setItem(accessTokenKey, data.accessToken);

      try {
        const meRes = await fetch(`${apiBaseUrl}/auth/me`, {
          headers: { Authorization: `Bearer ${data.accessToken}` },
        });
        if (meRes.ok) {
          const me = (await meRes.json()) as { user?: unknown };
          if (me?.user) {
            localStorage.setItem("authUser", JSON.stringify(me.user));
          }
        }
      } catch {
        // optional: permissions may be missing until next full page load
      }

      router.replace("/dashboard");
    } catch (err) {
      const message = err instanceof Error ? err.message : "Login failed";
      setError(message);
    } finally {
      setLoading(false);
    }
  }

  const inputClass =
    "box-border h-12 w-full max-w-full rounded-2xl border-2 border-indigo-200/80 bg-[#f4f3ff] px-4 text-center text-[15px] font-medium text-slate-800 shadow-inner shadow-indigo-950/5 outline-none ring-0 transition-all duration-200 placeholder:text-indigo-300/80 placeholder:font-normal focus:border-violet-500 focus:bg-white focus:shadow-[0_0_0_4px_rgba(139,92,246,0.35)] focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50";

  return (
    <main className="fixed inset-0 z-[1] flex min-h-0 min-h-[100dvh] flex-col items-center justify-center overflow-y-auto overflow-x-hidden px-4 py-10">
      {/* Full-screen navy → purple */}
      <div
        className="pointer-events-none absolute inset-0 min-h-[100dvh] bg-gradient-to-br from-[#020617] via-[#1e1b4b] to-[#4c1d95]"
        aria-hidden
      />
      <div
        className="pointer-events-none absolute inset-0 min-h-[100dvh] bg-[radial-gradient(circle_at_20%_0%,rgba(167,139,250,0.35),transparent_45%),radial-gradient(circle_at_90%_80%,rgba(59,130,246,0.25),transparent_40%)]"
        aria-hidden
      />
      <div
        className="pointer-events-none absolute inset-0 min-h-[100dvh] opacity-30"
        style={{
          backgroundImage: `radial-gradient(2px 2px at 20% 30%, white, transparent),
            radial-gradient(2px 2px at 60% 70%, white, transparent),
            radial-gradient(1px 1px at 50% 50%, white, transparent),
            radial-gradient(1px 1px at 80% 10%, white, transparent),
            radial-gradient(2px 2px at 90% 40%, white, transparent),
            radial-gradient(1px 1px at 33% 90%, white, transparent)`,
          backgroundSize: "200px 200px, 180px 180px, 220px 220px, 160px 160px, 190px 190px, 210px 210px",
        }}
        aria-hidden
      />

      <div className="relative z-[2] mx-auto flex w-full max-w-[420px] flex-col items-center">
        <article
          className="w-full rounded-[16px] border-2 border-violet-400/60 bg-white p-8 text-center shadow-[0_0_0_1px_rgba(255,255,255,0.8)_inset,0_32px_64px_-12px_rgba(76,29,149,0.55),0_24px_48px_-24px_rgba(15,23,42,0.5)]"
        >
          <header className="mb-8 flex flex-col items-center gap-3">
            {!apiBaseUrl.trim() ? (
              <div
                role="status"
                className="mb-1 w-full rounded-xl border border-amber-400/80 bg-amber-50 px-4 py-3 text-left text-xs leading-relaxed text-amber-950"
              >
                Thiếu <code className="rounded bg-amber-100/90 px-1">NEXT_PUBLIC_API_BASE_URL</code>{" "}
                trong <code className="rounded bg-amber-100/90 px-1">cms/.env.local</code> (xem{" "}
                <code className="rounded bg-amber-100/90 px-1">.env.example</code>). Trỏ tới gốc URL
                backend, ví dụ <code className="rounded bg-amber-100/90 px-1">http://localhost:3000</code>
                , rồi khởi động lại dev server.
              </div>
            ) : null}
            <p className="text-[11px] font-bold uppercase tracking-[0.28em] text-violet-600">
              Administration
            </p>
            <h1 className="font-serif text-[2rem] font-bold leading-tight tracking-tight text-slate-900 sm:text-[2.125rem]">
              <span className="bg-gradient-to-r from-violet-700 via-indigo-600 to-blue-600 bg-clip-text text-transparent">
                Cổ Thư Kỳ Phổ
              </span>{" "}
              <span className="font-sans text-[1.125rem] font-bold text-indigo-500">CMS</span>
            </h1>
            <div className="h-1 w-16 rounded-full bg-gradient-to-r from-violet-500 via-fuchsia-500 to-indigo-500" />
            <p className="max-w-[19rem] font-serif text-sm italic leading-relaxed text-violet-900/70">
              Nơi lưu giữ dòng chữ xưa — mỗi bài viết là một nhịp trong kho tàng.
            </p>
            <p className="max-w-[19rem] text-xs leading-relaxed text-slate-500">
              Quiet entrance to the archive—sign in to curate stories and records.
            </p>
          </header>

          <form
            onSubmit={onSubmit}
            className="flex w-full flex-col items-center gap-5"
            aria-busy={loading}
          >
            <div className="flex w-full flex-col items-center gap-2">
              <label htmlFor="login-email" className="text-xs font-bold uppercase tracking-wider text-indigo-800/80">
                Email
              </label>
              <input
                id="login-email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                autoComplete="email"
                autoFocus
                disabled={loading}
                placeholder="you@example.com"
                className={inputClass}
                style={{ WebkitAppearance: "none", appearance: "none" }}
              />
            </div>

            <div className="flex w-full flex-col items-center gap-2">
              <label
                htmlFor="login-password"
                className="text-xs font-bold uppercase tracking-wider text-indigo-800/80"
              >
                Password
              </label>
              <input
                id="login-password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                autoComplete="current-password"
                disabled={loading}
                placeholder="••••••••"
                className={inputClass}
                style={{ WebkitAppearance: "none", appearance: "none" }}
              />
            </div>

            {error ? (
              <div
                role="alert"
                className="w-full rounded-2xl border-2 border-red-400 bg-red-50 px-4 py-3 text-center text-sm font-medium text-red-800"
              >
                {error}
              </div>
            ) : null}

            <button
              type="submit"
              disabled={loading}
              aria-busy={loading}
              className="mt-1 box-border flex h-[44px] w-full max-w-full items-center justify-center rounded-[14px] border-0 bg-gradient-to-r from-indigo-600 via-violet-600 to-indigo-600 px-4 text-[15px] font-bold text-white shadow-[0_8px_24px_-4px_rgba(79,70,229,0.55),0_0_0_1px_rgba(255,255,255,0.22)_inset] outline-none transition-all duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] hover:scale-[1.01] hover:shadow-[0_14px_32px_-6px_rgba(79,70,229,0.5)] hover:brightness-[1.06] active:scale-[0.99] focus-visible:ring-4 focus-visible:ring-indigo-400/55 disabled:pointer-events-none disabled:opacity-45 disabled:hover:scale-100"
            >
              {loading ? (
                <span className="flex items-center gap-2">
                  <span
                    className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white"
                    aria-hidden
                  />
                  Signing in…
                </span>
              ) : (
                "Sign in"
              )}
            </button>
          </form>

          <p className="mt-8 text-center text-[11px] leading-relaxed text-slate-500">
            For authorized editors only. Sessions may refresh automatically after sign-in.
          </p>
        </article>

        <p className="mt-8 max-w-[20rem] text-center text-[10px] leading-relaxed text-white/35">
          © Cổ Thư Kỳ Phổ · Quản trị nội dung
        </p>
      </div>
    </main>
  );
}