import Link from "next/link";
import type { Metadata } from "next";
import { cookies } from "next/headers";
import { logoutAction } from "@/lib/admin-actions";
import { SESSION_COOKIE, verifySession } from "@/lib/session";
import { SITE } from "@/lib/site";

const ADMIN_NAV = [
  { href: "/admin", label: "Dashboard" },
  { href: "/admin/games", label: "Games" },
  { href: "/admin/categories", label: "Categories" },
] as const;

/** Never index the admin area (X-Robots-Tag header backs this up). */
export const metadata: Metadata = {
  robots: { index: false, follow: false },
};

/**
 * Admin shell. Unauthenticated visitors only ever reach /admin/login
 * (middleware), so the sidebar renders solely for verified sessions.
 */
export default async function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const token = (await cookies()).get(SESSION_COOKIE)?.value;
  const user = token ? await verifySession(token) : null;

  if (!user) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-slate-950 px-4 py-12">
        {children}
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-950">
      <div className="border-b border-slate-800 bg-slate-900">
        <div className="shell flex h-16 items-center justify-between gap-4">
          <div className="flex items-center gap-6">
            <Link href="/admin" className="text-lg font-bold text-white">
              {SITE.name} <span className="text-brand-400">Admin</span>
            </Link>
            <nav aria-label="Admin" className="hidden items-center gap-1 sm:flex">
              {ADMIN_NAV.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="rounded-lg px-3 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white"
                >
                  {link.label}
                </Link>
              ))}
            </nav>
          </div>
          <div className="flex items-center gap-3">
            <span className="hidden text-xs text-slate-500 sm:block">
              Signed in as {user}
            </span>
            <Link
              href="/"
              className="text-sm font-medium text-slate-400 hover:text-white"
            >
              View site
            </Link>
            <form action={logoutAction}>
              <button
                type="submit"
                className="inline-flex h-9 items-center rounded-lg border border-slate-700 px-3 text-sm font-semibold text-slate-200 hover:border-slate-500"
              >
                Log out
              </button>
            </form>
          </div>
        </div>
        <nav aria-label="Admin mobile" className="shell flex gap-1 pb-3 sm:hidden">
          {ADMIN_NAV.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="rounded-lg bg-slate-800 px-3 py-2 text-sm font-medium text-slate-200"
            >
              {link.label}
            </Link>
          ))}
        </nav>
      </div>
      <main className="shell py-8">{children}</main>
    </div>
  );
}