"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Activity, BarChart3, BookOpen, CreditCard, FolderKanban, KeyRound, LayoutDashboard, ListTree, Network, Play, Settings, Shield, Waypoints } from "lucide-react";
import { cn } from "@/lib/utils";
import { Logo } from "@/components/ui/logo";

export const DASHBOARD_NAV = [
  { href: "/dashboard", label: "Overview", icon: LayoutDashboard, exact: true },
  { href: "/dashboard/playground", label: "Playground", icon: Play },
  { href: "/dashboard/api-keys", label: "API Keys", icon: KeyRound },
  { href: "/dashboard/projects", label: "Projects", icon: FolderKanban },
  { href: "/dashboard/requests", label: "Requests", icon: ListTree },
  { href: "/dashboard/crawls", label: "Crawls", icon: Network },
  { href: "/dashboard/sessions", label: "Sessions", icon: Waypoints },
  { href: "/dashboard/usage", label: "Usage", icon: Activity },
  { href: "/dashboard/analytics", label: "Analytics", icon: BarChart3 },
  { href: "/dashboard/billing", label: "Billing", icon: CreditCard },
  { href: "/docs", label: "Documentation", icon: BookOpen, external: true },
  { href: "/dashboard/settings", label: "Settings", icon: Settings },
] as const;

export function SidebarNav({ isAdmin, onNavigate, className }: { isAdmin?: boolean; onNavigate?: () => void; className?: string }) {
  const pathname = usePathname();
  const items = [...DASHBOARD_NAV, ...(isAdmin ? [{ href: "/admin", label: "Admin", icon: Shield } as const] : [])];
  return (
    <nav className={cn("flex flex-col gap-0.5", className)} aria-label="Dashboard">
      {items.map((item) => {
        const active = "exact" in item && item.exact ? pathname === item.href : pathname === item.href || pathname.startsWith(item.href + "/");
        const Icon = item.icon;
        return (
          <Link
            key={item.href}
            href={item.href}
            onClick={onNavigate}
            target={"external" in item && item.external ? "_blank" : undefined}
            className={cn(
              "group flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13.5px] font-medium transition-colors",
              active ? "bg-bg-muted text-fg" : "text-fg-muted hover:bg-bg-subtle hover:text-fg",
            )}
            aria-current={active ? "page" : undefined}
          >
            <Icon className={cn("size-4 shrink-0", active ? "text-fg" : "text-fg-subtle group-hover:text-fg-muted")} aria-hidden />
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}

export function Sidebar({ isAdmin }: { isAdmin?: boolean }) {
  return (
    <aside className="hidden lg:flex w-[232px] shrink-0 flex-col border-r border-border bg-bg-subtle/60">
      <div className="flex h-14 items-center px-5">
        <Logo href="/dashboard" size="sm" />
      </div>
      <div className="flex-1 overflow-y-auto px-3 pb-4 scrollbar-thin">
        <SidebarNav isAdmin={isAdmin} />
      </div>
      <div className="border-t border-border px-4 py-3 text-[11.5px] text-fg-subtle">
        <a href="/status" className="hover:text-fg" target="_blank" rel="noreferrer">
          <span className="mr-1.5 inline-block size-1.5 rounded-full bg-success align-middle" /> All systems operational
        </a>
      </div>
    </aside>
  );
}