App Sidebar

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { BarChart3, ChevronsUpDown, CreditCard, FileText, Home, Landmark, Menu, Settings, Users, X, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppSidebarGroup {
  label?: string;
  items: { label: string; href: string; icon: LucideIcon; count?: number }[];
}

export interface AppSidebarProps {
  brand?: string;
  entity?: string;
  groups?: AppSidebarGroup[];
  activeHref?: string;
  user?: { name: string; email: string; initials: string };
  children?: ReactNode;
  className?: string;
}

const DEFAULT_GROUPS: AppSidebarGroup[] = [
  { items: [{ label: "Overview", href: "#overview", icon: Home }] },
  {
    label: "Receivables",
    items: [
      { label: "Invoices", href: "#invoices", icon: FileText, count: 23 },
      { label: "Customers", href: "#customers", icon: Users },
      { label: "Payments", href: "#payments", icon: CreditCard },
    ],
  },
  {
    label: "Accounting",
    items: [
      { label: "Reconciliation", href: "#recon", icon: Landmark, count: 4 },
      { label: "Reports", href: "#reports", icon: BarChart3 },
    ],
  },
];

function LedgerlyMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 28 28" className={cn("size-7 shrink-0", className)}>
      <rect width="28" height="28" rx="7" fill="var(--da-primary)" />
      <path d="M8 8v12h12" stroke="var(--da-primary-fg)" strokeWidth="2.6" fill="none" strokeLinecap="round" />
      <path d="M13 15h7M13 11h7" stroke="var(--da-primary-fg)" strokeWidth="2.2" strokeLinecap="round" opacity=".7" />
    </svg>
  );
}

/** Classic enterprise app shell: white bordered sidebar with brand, entity switcher, grouped nav (uppercase group labels, count badges, blue active state), settings and user footer; off-canvas drawer on mobile. */
export function AppSidebar({
  brand = "Ledgerly",
  entity = "Northwind Traders Inc.",
  groups = DEFAULT_GROUPS,
  activeHref = "#invoices",
  user = { name: "Priya Raman", email: "priya@northwind.com", initials: "PR" },
  children,
  className,
}: AppSidebarProps) {
  const [open, setOpen] = useState(false);
  const id = useId();
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <div className={cn("flex min-h-dvh bg-da-surface-2 text-da-fg", className)}>
      {open && <div aria-hidden className="fixed inset-0 z-40 bg-da-overlay lg:hidden" onClick={() => setOpen(false)} />}
      <aside
        id={id}
        aria-label="Sidebar"
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-da-border bg-da-surface text-da-surface-fg transition-transform duration-(--da-duration-slow) ease-da lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0 motion-reduce:transition-none",
          open ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <div className="flex h-14 items-center gap-2 border-b border-da-border px-4 font-da-display font-extrabold">
          <LedgerlyMark />
          {brand}
          <button
            type="button"
            aria-label="Close menu"
            onClick={() => setOpen(false)}
            className="da-focus ml-auto grid size-8 place-items-center rounded-da-md hover:bg-da-muted lg:hidden"
          >
            <X aria-hidden className="size-4" />
          </button>
        </div>
        <div className="p-3">
          <button
            type="button"
            className="da-focus da-stroke flex w-full items-center gap-2 rounded-da-md bg-da-surface px-2.5 py-2 text-left text-sm hover:bg-da-surface-2"
          >
            <span aria-hidden className="grid size-6 place-items-center rounded-da-sm bg-da-accent text-xs font-bold text-da-accent-fg">
              {entity[0]}
            </span>
            <span className="min-w-0 flex-1">
              <span className="block text-[11px] text-da-muted-fg">Entity</span>
              <span className="block truncate font-semibold">{entity}</span>
            </span>
            <ChevronsUpDown aria-hidden className="size-4 text-da-muted-fg" />
          </button>
        </div>
        <nav aria-label="Main" className="flex-1 overflow-y-auto px-3 pb-3">
          {groups.map((g, gi) => (
            <div key={g.label ?? gi} className={cn(gi > 0 && "mt-5")}>
              {g.label && <p className="mb-1.5 px-2.5 text-[11px] font-semibold tracking-da-label text-da-muted-fg uppercase">{g.label}</p>}
              <ul className="space-y-0.5">
                {g.items.map((it) => {
                  const on = it.href === activeHref;
                  return (
                    <li key={it.href}>
                      <a
                        href={it.href}
                        aria-current={on ? "page" : undefined}
                        className={cn(
                          "da-focus da-transition flex h-9 items-center gap-2.5 rounded-da-md px-2.5 text-sm font-medium",
                          on ? "bg-da-primary/10 text-da-primary" : "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg",
                        )}
                      >
                        <it.icon aria-hidden className="size-4" />
                        <span className="flex-1">{it.label}</span>
                        {it.count !== undefined && (
                          <span
                            className={cn("rounded-da-sm px-1.5 font-da-mono text-[11px]", on ? "bg-da-primary text-da-primary-fg" : "bg-da-muted text-da-fg")}
                          >
                            {it.count}
                          </span>
                        )}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </nav>
        <div className="border-t border-da-border p-3">
          <a
            href="#settings"
            className="da-focus flex h-9 items-center gap-2.5 rounded-da-md px-2.5 text-sm font-medium text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg"
          >
            <Settings aria-hidden className="size-4" /> Settings
          </a>
          <div className="mt-2 flex items-center gap-2.5 px-2.5 py-1.5">
            <span aria-hidden className="grid size-8 place-items-center rounded-full bg-da-muted text-xs font-semibold">
              {user.initials}
            </span>
            <span className="min-w-0 text-sm">
              <span className="block truncate font-semibold">{user.name}</span>
              <span className="block truncate text-xs text-da-muted-fg">{user.email}</span>
            </span>
          </div>
        </div>
      </aside>
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-14 items-center gap-2 border-b border-da-border bg-da-surface px-4 lg:hidden">
          <button
            type="button"
            aria-label="Open menu"
            aria-expanded={open}
            aria-controls={id}
            onClick={() => setOpen(true)}
            className="da-focus grid size-9 place-items-center rounded-da-md hover:bg-da-muted"
          >
            <Menu aria-hidden className="size-5" />
          </button>
          <span className="font-da-display font-extrabold">{brand}</span>
        </div>
        <main className="flex-1">{children}</main>
      </div>
    </div>
  );
}

export default AppSidebar;