import { auth, signOut } from "@/lib/auth"
import { redirect } from "next/navigation"
import Link from "next/link"
import { LogOut } from "lucide-react"
import { LogoGlitch } from "@/components/logo-glitch"

const NAV = [
  { href: "/admin", label: "Tableau de bord" },
  { href: "/admin/products", label: "Produits" },
  { href: "/admin/drops", label: "Drops" },
  { href: "/admin/collaborators", label: "Collaborateurs" },
  { href: "/admin/categories", label: "Catégories" },
  { href: "/admin/orders", label: "Commandes" },
  { href: "/admin/newsletter", label: "Newsletter" },
  { href: "/admin/users", label: "Utilisateurs" },
  { href: "/admin/settings", label: "Réglages" },
]

export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  const session = await auth()
  if (!session?.user || (session.user as { role?: string }).role !== "ADMIN") {
    redirect("/")
  }

  return (
    <div className="min-h-screen flex">
      {/* Sidebar */}
      <aside className="w-56 bg-[var(--surface)] border-r border-[var(--border)] flex flex-col shrink-0">
        <div className="p-6 border-b border-[var(--border)]">
          <Link href="/" aria-label="VALABEL" className="text-[var(--text)]">
            <LogoGlitch className="h-7 w-auto" />
          </Link>
          <p className="font-mono text-xs text-[var(--text-muted)] mt-1 uppercase tracking-widest">Admin</p>
        </div>
        <nav className="p-4 space-y-1">
          {NAV.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="block px-3 py-2.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text)] hover:bg-[var(--surface-raised)] transition-colors rounded-[var(--radius)]"
            >
              {link.label}
            </Link>
          ))}
        </nav>
        <div className="mt-auto p-4 border-t border-[var(--border)] space-y-3">
          <p className="font-mono text-xs text-[var(--text-muted)] truncate">{session.user.email}</p>
          <form
            action={async () => {
              "use server"
              await signOut({ redirectTo: "/" })
            }}
          >
            <button
              type="submit"
              className="flex items-center gap-2 font-mono text-xs uppercase tracking-widest text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors"
            >
              <LogOut size={14} />
              Déconnexion
            </button>
          </form>
        </div>
      </aside>

      {/* Content */}
      <main className="flex-1 overflow-auto p-8">{children}</main>
    </div>
  )
}