import Link from "next/link";
import { ArrowLeft, ShieldCheck } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { Logo } from "@/components/brand/logo";

export const dynamic = "force-dynamic";

export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  const user = await requireAdmin();
  return (
    <div className="min-h-dvh bg-bg text-fg">
      <header className="sticky top-0 z-30 border-b border-border glass">
        <div className="mx-auto flex h-12 w-full max-w-6xl items-center justify-between gap-3 px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-3">
            <Link href="/app" className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[13px] text-fg-muted transition-colors hover:bg-bg-muted hover:text-fg">
              <ArrowLeft className="size-4" /> Back to app
            </Link>
            <span className="hidden h-4 w-px bg-border sm:block" aria-hidden />
            <Logo size={20} className="hidden sm:inline-flex" />
          </div>
          <div className="flex items-center gap-2 text-xs text-fg-muted">
            <span className="inline-flex items-center gap-1 rounded-full border border-border bg-bg-subtle px-2 py-0.5 text-[11px] font-medium">
              <ShieldCheck className="size-3 text-accent" /> Admin
            </span>
            <span className="hidden truncate sm:inline">{user.email}</span>
          </div>
        </div>
      </header>
      <main className="mx-auto w-full max-w-6xl px-4 py-6 sm:px-6 lg:px-8">{children}</main>
    </div>
  );
}