"use client";
import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronRight, ExternalLink, Menu, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { DOCS_NAV, type DocsNavLink } from "./nav-config";

function NavLinks({ onNavigate, className }: { onNavigate?: () => void; className?: string }) {
  const pathname = usePathname();
  return (
    <nav aria-label="Documentation" className={cn("text-[13.5px]", className)}>
      {DOCS_NAV.map((section) => (
        <div key={section.title} className="mb-6 last:mb-0">
          <div className="mb-1.5 px-2 text-[11.5px] font-semibold uppercase tracking-wide text-fg-subtle">{section.title}</div>
          <ul className="space-y-px">
            {section.links.map((l) => (
              <li key={l.href}>
                <NavItem link={l} active={pathname === l.href} onNavigate={onNavigate} />
              </li>
            ))}
          </ul>
        </div>
      ))}
    </nav>
  );
}

function NavItem({ link, active, onNavigate }: { link: DocsNavLink; active: boolean; onNavigate?: () => void }) {
  return (
    <Link
      href={link.href}
      onClick={onNavigate}
      aria-current={active ? "page" : undefined}
      className={cn(
        "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 transition-colors",
        active ? "bg-accent-soft font-medium text-accent" : "text-fg-muted hover:bg-bg-muted hover:text-fg",
      )}
    >
      <span className="truncate">{link.title}</span>
      {link.badge ? <span className="shrink-0 rounded-full bg-warning-soft px-1.5 py-px text-[10.5px] font-medium text-warning">{link.badge}</span> : null}
      {link.external ? <ExternalLink className="size-3.5 shrink-0 text-fg-subtle" aria-hidden /> : null}
    </Link>
  );
}

/** Desktop sidebar: sticky under the marketing header. */
export function DocsSidebar({ className }: { className?: string }) {
  return (
    <aside className={cn("sticky top-14 hidden max-h-[calc(100dvh-3.5rem)] overflow-y-auto py-8 pr-4 scrollbar-thin lg:block", className)}>
      <NavLinks />
    </aside>
  );
}

/** Mobile: compact bar with the current page and a drawer with the full navigation. */
export function DocsMobileNav() {
  const [open, setOpen] = React.useState(false);
  const pathname = usePathname();
  const current = React.useMemo(() => DOCS_NAV.flatMap((s) => s.links.map((l) => ({ ...l, section: s.title }))).find((l) => l.href === pathname), [pathname]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);

  return (
    <div className="lg:hidden">
      <div className="-mx-5 flex items-center gap-2 border-b border-border bg-bg-subtle/60 px-5 py-2.5 text-[13px] sm:-mx-8 sm:px-8">
        <Button variant="outline" size="sm" onClick={() => setOpen(true)} aria-expanded={open} aria-controls="docs-drawer" className="gap-1.5">
          <Menu className="size-4" aria-hidden />
          Menu
        </Button>
        <span className="flex min-w-0 items-center gap-1 text-fg-muted">
          <span className="truncate">{current?.section ?? "Docs"}</span>
          <ChevronRight className="size-3.5 shrink-0 text-fg-subtle" aria-hidden />
          <span className="truncate font-medium text-fg">{current?.title ?? "Documentation"}</span>
        </span>
      </div>

      {open ? (
        <div className="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label="Documentation navigation" id="docs-drawer">
          <button type="button" className="absolute inset-0 bg-fg/30 backdrop-blur-[2px] animate-fade-in" aria-label="Close navigation" onClick={() => setOpen(false)} />
          <div className="absolute inset-y-0 left-0 flex w-[min(20rem,85vw)] flex-col border-r border-border bg-bg shadow-lg animate-fade-in">
            <div className="flex h-14 items-center justify-between border-b border-border px-4">
              <span className="text-[13.5px] font-semibold text-fg">Documentation</span>
              <Button variant="ghost" size="icon-sm" onClick={() => setOpen(false)} aria-label="Close navigation">
                <X />
              </Button>
            </div>
            <div className="flex-1 overflow-y-auto px-3 py-4 scrollbar-thin">
              <NavLinks onNavigate={() => setOpen(false)} />
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}