"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ExternalLink, Menu, X } from "lucide-react";
import { useState } from "react";

import { AdminHeader } from "@/components/admin/admin-header";
import { LogoutButton } from "@/components/auth/logout-button";
import { Button } from "@/components/ui/button";
import { adminNavGroups, isAdminNavActive, type AdminNavItem } from "@/lib/admin/nav";
import { cn } from "@/lib/utils";

function NavItem({
  item,
  pathname,
  onNavigate,
}: {
  item: AdminNavItem;
  pathname: string;
  onNavigate?: () => void;
}) {
  const active = isAdminNavActive(pathname, item);
  const Icon = item.icon;

  return (
    <Link
      href={item.href}
      target={item.external ? "_blank" : undefined}
      rel={item.external ? "noopener noreferrer" : undefined}
      onClick={onNavigate}
      className={cn(
        "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
        active
          ? "bg-primary/15 font-medium text-primary"
          : "text-muted-foreground hover:bg-white/5 hover:text-foreground",
      )}
    >
      <Icon className="size-4 shrink-0" aria-hidden />
      <span className="min-w-0 flex-1 truncate">{item.label}</span>
      {item.external ? (
        <ExternalLink className="size-3.5 shrink-0 opacity-50" aria-hidden />
      ) : null}
    </Link>
  );
}

function NavGroups({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();

  return (
    <div className="space-y-6">
      {adminNavGroups.map((group) => (
        <div key={group.title}>
          <p className="text-muted-foreground mb-2 px-3 text-[10px] font-semibold uppercase tracking-widest">
            {group.title}
          </p>
          <nav className="flex flex-col gap-0.5" aria-label={group.title}>
            {group.items.map((item) => (
              <NavItem key={`${group.title}-${item.href}`} item={item} pathname={pathname} onNavigate={onNavigate} />
            ))}
          </nav>
        </div>
      ))}
    </div>
  );
}

function SidebarFooter() {
  return (
    <div className="border-border/60 space-y-3 border-t p-4">
      <Link
        href="/"
        target="_blank"
        rel="noopener noreferrer"
        className="text-primary flex items-center gap-2 text-sm font-medium hover:underline"
      >
        View live site
        <ExternalLink className="size-3.5" aria-hidden />
      </Link>
      <LogoutButton />
    </div>
  );
}

export function AdminSidebar() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <>
      <div className="border-border/60 flex items-center justify-between border-b bg-zinc-950/80 px-4 py-3 lg:hidden">
        <Link href="/admin" className="font-display text-lg text-primary">
          Admin
        </Link>
        <Button variant="ghost" size="icon" onClick={() => setMobileOpen(true)} aria-label="Open admin menu">
          <Menu className="size-5" />
        </Button>
      </div>

      {mobileOpen ? (
        <div className="fixed inset-0 z-50 lg:hidden">
          <button
            type="button"
            className="absolute inset-0 bg-black/60"
            aria-label="Close admin menu"
            onClick={() => setMobileOpen(false)}
          />
          <aside className="absolute inset-y-0 left-0 flex w-[min(100vw-2rem,320px)] flex-col border-r border-white/10 bg-zinc-950">
            <div className="flex items-center justify-between border-b border-white/10 px-4 py-4">
              <span className="font-display text-lg text-primary">Admin</span>
              <Button variant="ghost" size="icon" onClick={() => setMobileOpen(false)} aria-label="Close menu">
                <X className="size-5" />
              </Button>
            </div>
            <div className="flex-1 overflow-y-auto px-2 py-4">
              <NavGroups onNavigate={() => setMobileOpen(false)} />
            </div>
            <SidebarFooter />
          </aside>
        </div>
      ) : null}

      <aside className="border-border/60 hidden w-64 shrink-0 flex-col border-r bg-zinc-950/50 lg:sticky lg:top-0 lg:flex lg:max-h-screen lg:self-start">
        <div className="border-border/60 border-b px-4 py-5">
          <Link href="/admin" className="font-display text-lg text-primary">
            Admin
          </Link>
          <p className="text-muted-foreground mt-1 text-xs">Manage content, media, and store</p>
        </div>
        <div className="flex-1 overflow-y-auto px-2 py-4">
          <NavGroups />
        </div>
        <SidebarFooter />
      </aside>
    </>
  );
}

export function AdminShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen bg-zinc-950 text-foreground">
      <AdminSidebar />
      <div className="flex min-w-0 flex-1 flex-col">
        <AdminHeader />
        <main className="min-w-0 flex-1 px-4 py-6 sm:px-8 sm:py-10">{children}</main>
      </div>
    </div>
  );
}