Sidebar Collapsible

"use client";

import { useState, type ReactNode } from "react";
import { ArrowLeftRight, BarChart3, FileText, Home, PanelLeftClose, PanelLeftOpen, Receipt, Settings, Users, Wallet, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarCollapsibleProps {
  brand?: string;
  items?: { label: string; href: string; icon: LucideIcon }[];
  activeHref?: string;
  defaultCollapsed?: boolean;
  onCollapsedChange?: (collapsed: boolean) => void;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_ITEMS = [
  { label: "Overview", href: "#overview", icon: Home },
  { label: "Invoices", href: "#invoices", icon: FileText },
  { label: "Bills", href: "#bills", icon: Receipt },
  { label: "Transactions", href: "#tx", icon: ArrowLeftRight },
  { label: "Cards", href: "#cards", icon: Wallet },
  { label: "Vendors", href: "#vendors", icon: Users },
  { 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>
  );
}

/** Sidebar that collapses from 240px to a 64px icon rail with a toggle button (aria-expanded); collapsed items keep tooltips (title) and sr-only labels. Always a rail on small screens. */
export function SidebarCollapsible({
  brand = "Ledgerly",
  items = DEFAULT_ITEMS,
  activeHref = "#tx",
  defaultCollapsed = false,
  onCollapsedChange,
  children,
  className,
}: SidebarCollapsibleProps) {
  const [collapsed, setCollapsed] = useState(defaultCollapsed);
  const toggle = () => {
    setCollapsed(!collapsed);
    onCollapsedChange?.(!collapsed);
  };
  const label = cn("truncate", collapsed ? "sr-only" : "max-md:sr-only");
  return (
    <div className={cn("flex min-h-dvh bg-da-surface-2 text-da-fg", className)}>
      <aside
        aria-label="Sidebar"
        className={cn(
          "sticky top-0 flex h-dvh shrink-0 flex-col border-r border-da-border bg-da-surface text-da-surface-fg transition-[width] duration-(--da-duration-slow) ease-da motion-reduce:transition-none",
          collapsed ? "w-16" : "w-16 md:w-60",
        )}
      >
        <div className="flex h-14 items-center gap-2 overflow-hidden border-b border-da-border px-[18px] font-da-display font-extrabold">
          <LedgerlyMark />
          <span className={label}>{brand}</span>
        </div>
        <nav aria-label="Main" className="flex-1 overflow-x-hidden overflow-y-auto p-3">
          <ul className="space-y-1">
            {items.map((it) => {
              const on = it.href === activeHref;
              return (
                <li key={it.href}>
                  <a
                    href={it.href}
                    title={it.label}
                    aria-current={on ? "page" : undefined}
                    className={cn(
                      "da-focus da-transition flex h-10 items-center gap-3 rounded-da-md px-3 text-sm font-medium",
                      on ? "bg-da-primary text-da-primary-fg" : "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg",
                    )}
                  >
                    <it.icon aria-hidden className="size-4 shrink-0" />
                    <span className={label}>{it.label}</span>
                  </a>
                </li>
              );
            })}
          </ul>
        </nav>
        <div className="space-y-1 border-t border-da-border p-3">
          <a
            href="#settings"
            title="Settings"
            className="da-focus flex h-10 items-center gap-3 rounded-da-md px-3 text-sm font-medium text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg"
          >
            <Settings aria-hidden className="size-4 shrink-0" />
            <span className={label}>Settings</span>
          </a>
          <button
            type="button"
            onClick={toggle}
            aria-expanded={!collapsed}
            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
            className="da-focus hidden h-10 w-full items-center gap-3 rounded-da-md px-3 text-sm font-medium text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg md:flex"
          >
            {collapsed ? <PanelLeftOpen aria-hidden className="size-4 shrink-0" /> : <PanelLeftClose aria-hidden className="size-4 shrink-0" />}
            <span aria-hidden className={label}>
              Collapse
            </span>
          </button>
        </div>
      </aside>
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default SidebarCollapsible;