"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { SCHOOL } from "@/lib/constants";
import InstituteLogo from "@/components/InstituteLogo";

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

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

    try {
      const res = await fetch("/api/admin/auth", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password }),
      });

      const json = await res.json();
      if (!json.ok) {
        setError(json.error || "Authentication failed");
        return;
      }

      router.push("/admin");
    } catch {
      setError("Network error. Please try again.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="flex min-h-[75vh] items-center justify-center">
      <div className="card-shadow relative w-full max-w-md overflow-hidden rounded-md border-2 border-maroon-900 bg-cream p-8">
        <div className="pointer-events-none absolute inset-2 rounded-xs border border-gold-600/50" />

        <div className="relative z-10 text-center">
          <div className="flex justify-center">
            <InstituteLogo size={70} />
          </div>

          <p className="mt-3 text-[10px] font-bold uppercase tracking-[0.35em] text-maroon-800">
            Department of Employment and Training
          </p>
          <h1 className="mt-1 font-display text-2xl font-bold text-maroon-950">
            Staff &amp; Admin Console
          </h1>
          <p className="font-tamil mt-0.5 text-xs text-ink/60">
            {SCHOOL.name} · நிர்வாகி நுழைவு
          </p>

          <form onSubmit={handleLogin} className="mt-6 text-left">
            <div>
              <label
                htmlFor="admin-password"
                className="block text-xs font-bold uppercase tracking-wider text-ink/80"
              >
                Admin Access Password / PIN
              </label>
              <input
                id="admin-password"
                type="password"
                value={password}
                onChange={(e) => {
                  setPassword(e.target.value);
                  setError(null);
                }}
                placeholder="Enter Administrator Password"
                required
                autoFocus
                className="mt-2 w-full rounded-sm border border-ink/30 bg-white px-4 py-3 text-sm text-ink outline-none transition-all placeholder:text-xs placeholder:text-ink/40 focus:border-maroon-900 focus:ring-2 focus:ring-maroon-900/20"
              />
            </div>

            {error && (
              <div className="mt-3 rounded-xs border border-maroon-700/40 bg-maroon-50 p-2.5 text-xs font-semibold text-maroon-900">
                {error}
              </div>
            )}

            <button
              type="submit"
              disabled={loading}
              className="mt-5 w-full rounded-md bg-maroon-900 py-3.5 text-sm font-bold uppercase tracking-[0.2em] text-cream shadow-md transition-all hover:bg-maroon-800 disabled:opacity-60"
            >
              {loading ? "Authenticating…" : "Unlock Admin Console"}
            </button>

            <div className="mt-5 flex flex-col gap-2 border-t border-ink/10 pt-3 text-center text-[12px] text-ink/60">
              <a
                href="/install"
                className="font-medium text-maroon-900 underline hover:text-maroon-700"
              >
                ⚙️ First time setup? Launch One-Click Installer
              </a>
              <a href="/" className="text-[11px] text-ink/50 hover:text-ink hover:underline">
                ← Return to Public Result Portal
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}