import Link from "next/link"
import { ArrowLeft, ShieldCheck } from "lucide-react"
import { Button } from "@/components/ui/button"
import { AdminNav } from "@/components/admin/admin-nav"
import { requireAdmin } from "@/lib/auth/require-admin"

export const dynamic = "force-dynamic"

// Shared chrome for every /admin/* page: header, admin guard, section
// nav tabs. Keeping it in a layout means each section page can focus on
// its own content and the guard / nav stay in sync automatically as new
// sections are added.
export default async function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { user } = await requireAdmin("/admin")

  return (
    <div className="min-h-dvh bg-muted/30">
      <header className="border-b border-border bg-background">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4 md:px-6">
          <div className="flex items-center gap-3">
            <Button asChild variant="ghost" size="icon" className="h-9 w-9">
              <Link href="/" aria-label="Back to app">
                <ArrowLeft className="h-4 w-4" aria-hidden="true" />
              </Link>
            </Button>
            <div className="flex items-center gap-2">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
                <ShieldCheck className="h-4 w-4" aria-hidden="true" />
              </div>
              <div className="leading-tight">
                <h1 className="text-base font-semibold tracking-tight md:text-lg">Admin</h1>
                <p className="truncate text-xs text-muted-foreground">Signed in as {user.email}</p>
              </div>
            </div>
          </div>
          <form action="/auth/sign-out" method="post">
            <Button type="submit" variant="outline" size="sm">
              Sign out
            </Button>
          </form>
        </div>
      </header>

      <main className="mx-auto max-w-7xl space-y-6 px-4 py-6 md:px-6 md:py-8">
        <AdminNav />
        {children}
      </main>
    </div>
  )
}