"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

import { SidebarLogo } from "@/components/medora/sidebar-logo";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { DS_HOME, DS_SECTIONS } from "./nav";
import { useSidebarTone } from "./sidebar-tone";

const byHref = (href: string) => DS_SECTIONS.find((s) => s.href === href)!;

const GROUPS = [
  { label: "Overview", items: [DS_HOME] },
  {
    label: "Components",
    items: ["foundations", "actions", "forms", "data-display", "navigation", "overlays"].map((p) => byHref(`/design-system/${p}`)),
  },
  {
    label: "Patterns",
    items: ["layout-patterns", "building-blocks", "documents"].map((p) => byHref(`/design-system/${p}`)),
  },
  {
    label: "Modules",
    items: ["pos", "inventory", "catalog", "accounts", "hr", "reports", "access", "settings"].map((p) => byHref(`/design-system/${p}`)),
  },
];

export function DsSidebar() {
  const pathname = usePathname();
  const { tone } = useSidebarTone();
  const isActive = (href: string) => (href === DS_HOME.href ? pathname === href : pathname.startsWith(href));

  return (
    <Sidebar tone={tone}>
      <SidebarHeader className="items-center px-4 pt-5 pb-3">
        <Link href="/design-system" aria-label="Medora design system">
          <SidebarLogo tone={tone} />
        </Link>
      </SidebarHeader>
      <SidebarContent className="gap-0 px-1">
        {GROUPS.map((g) => (
          <SidebarGroup key={g.label} className="py-1">
            <SidebarGroupLabel>{g.label}</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {g.items.map((item) => (
                  <SidebarMenuItem key={item.href}>
                    <SidebarMenuButton isActive={isActive(item.href)} render={<Link href={item.href} />}>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>
      <SidebarFooter className="px-4 py-3 text-xs text-(--sidebar-muted)">
        shadcn/ui on Base UI, themed with Medora tokens. Mock data only.
      </SidebarFooter>
    </Sidebar>
  );
}