"use client";

import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { ArrowRight, LockKeyhole, ShieldCheck } from "lucide-react";
import {
  adminApiUrl,
  adminRequest,
  clearAdminToken,
  getAdminToken,
  setAdminToken,
} from "@/lib/admin-api";
import { apiHeaders, apiPath } from "@/lib/api-url";

export default function AdminLoginPage() {
  return (
    <Suspense
      fallback={
        <section className="grid min-h-[70vh] place-items-center bg-slate-50 px-4 py-16 font-['Space_Grotesk']">
          <p className="text-sm font-bold text-muted-foreground">Loading admin login...</p>
        </section>
      }
    >
      <AdminLoginContent />
    </Suspense>
  );
}

function AdminLoginContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const reason = searchParams.get("reason");
  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    async function checkExistingSession() {
      if (!getAdminToken()) {
        return;
      }

      try {
        await adminRequest("/api/admin/me");
        router.replace("/admin");
      } catch {
        clearAdminToken();
      }
    }

    checkExistingSession();
  }, [router]);

  async function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("loading");
    setErrorMessage("");

    const formData = new FormData(e.currentTarget);

    try {
      const response = await fetch(`${adminApiUrl}${apiPath("/api/admin/login")}`, {
        method: "POST",
        headers: apiHeaders({
          "Content-Type": "application/json",
        }),
        body: JSON.stringify({
          email: String(formData.get("email") ?? ""),
          password: String(formData.get("password") ?? ""),
        }),
      });
      const data = (await response.json()) as { token?: string; error?: string };

      if (!response.ok || !data.token) {
        throw new Error(data.error ?? "Login failed");
      }

      setAdminToken(data.token);
      router.replace("/admin");
    } catch (error) {
      setStatus("error");
      setErrorMessage(error instanceof Error ? error.message : "Login failed");
    }
  }

  return (
    <section className="min-h-screen bg-slate-100 px-4 py-16 font-['Space_Grotesk']">
      <div className="mx-auto grid min-h-[calc(100vh-8rem)] w-full max-w-5xl overflow-hidden rounded-xl border border-border bg-white shadow-[0_24px_80px_rgba(15,23,42,0.10)] lg:grid-cols-[0.9fr_1.1fr]">
        <div className="relative hidden bg-primary p-8 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
          <div className="absolute inset-0 opacity-10 [background-image:linear-gradient(to_right,currentColor_1px,transparent_1px),linear-gradient(to_bottom,currentColor_1px,transparent_1px)] [background-size:32px_32px]" />
          <div className="relative">
            <div className="grid h-12 w-12 place-items-center rounded-md bg-white/15">
              <ShieldCheck className="h-6 w-6" />
            </div>
            <h1 className="mt-6 text-3xl font-black tracking-tight">Ride N Revive Admin</h1>
            <p className="mt-3 max-w-sm text-sm leading-7 text-primary-foreground/78">
              Manage blogs, car companies, and website content from a protected session.
            </p>
          </div>
          <div className="relative rounded-lg border border-white/15 bg-white/10 p-4 text-sm font-semibold leading-6 text-primary-foreground/82">
            Admin access now expires with this browser session or when you leave the admin panel.
          </div>
        </div>

        <div className="grid place-items-center p-6 sm:p-10">
          <form onSubmit={submit} className="w-full max-w-md">
            <div className="grid h-12 w-12 place-items-center rounded-md bg-primary text-primary-foreground">
              <LockKeyhole className="h-5 w-5" />
            </div>
            <h2 className="mt-5 text-3xl font-black tracking-tight text-foreground">Admin login</h2>
            <p className="mt-2 text-sm leading-6 text-muted-foreground">
              Sign in to continue managing Ride N Revive content.
            </p>

            {reason === "session-expired" ? (
              <p className="mt-5 rounded-md border border-primary/25 bg-primary/10 px-3 py-2 text-sm font-bold text-primary">
                Your admin session expired. Please sign in again.
              </p>
            ) : null}

            <div className="mt-6 space-y-4">
              <div>
                <label className="mb-1.5 block text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                  Email
                </label>
                <input
                  required
                  name="email"
                  type="email"
                  className="h-11 w-full rounded-md border border-border bg-white px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                />
              </div>
              <div>
                <label className="mb-1.5 block text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                  Password
                </label>
                <input
                  required
                  name="password"
                  type="password"
                  className="h-11 w-full rounded-md border border-border bg-white px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                />
              </div>
            </div>

            {status === "error" ? (
              <p className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm font-semibold text-destructive">
                {errorMessage}
              </p>
            ) : null}

            <button
              disabled={status === "loading"}
              className="mt-6 inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground transition hover:opacity-95 disabled:opacity-70"
            >
              {status === "loading" ? "Signing in..." : "Sign in"}
              <ArrowRight className="h-4 w-4" />
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}