import Link from "next/link";
import { requireSuperAdmin } from "@/lib/auth";
import { logoutAction } from "@/app/(auth)/actions";
import { Logo } from "@/components/ui";

const NAV = [
  ["", "📊 Overview"],
  ["conferences", "🗂️ Conferences"],
  ["settings", "⚙️ System settings"],
] as const;

export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  await requireSuperAdmin();
  return (
    <div className="min-h-screen">
      <header className="fx-header sticky top-0 z-30 border-b border-zinc-800/70 bg-zinc-950/85 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
          <div className="flex items-center gap-4">
            <Logo href="/admin" />
            <span className="rounded-md bg-amber-500/15 px-2 py-0.5 text-xs font-semibold text-amber-600">SUPER ADMIN</span>
          </div>
          <div className="flex items-center gap-3 text-sm">
            <Link href="/dashboard" className="text-zinc-400 hover:text-zinc-200">Organizer view</Link>
            <form action={logoutAction}>
              <button className="rounded-lg px-2.5 py-1.5 text-xs text-zinc-500 hover:bg-zinc-800 hover:text-zinc-200">Sign out</button>
            </form>
          </div>
        </div>
        {/* Management bar */}
        <nav className="mx-auto flex max-w-6xl gap-1 overflow-x-auto px-4 pb-2">
          {NAV.map(([path, name]) => (
            <Link
              key={path}
              href={`/admin${path ? `/${path}` : ""}`}
              className="whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium text-zinc-400 transition hover:bg-white/70 hover:text-zinc-100"
            >
              {name}
            </Link>
          ))}
        </nav>
      </header>
      <main className="fx-in mx-auto max-w-6xl px-4 py-8">{children}</main>
    </div>
  );
}