Sidebar Dual

"use client";

import { useState, type ReactNode } from "react";
import { BarChart3, CreditCard, FileText, Settings, Users, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarDualSection {
  id: string;
  label: string;
  icon: LucideIcon;
  links: { label: string; href: string }[];
}

export interface SidebarDualProps {
  sections?: SidebarDualSection[];
  defaultSection?: string;
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_SECTIONS: SidebarDualSection[] = [
  {
    id: "ar",
    label: "Receivables",
    icon: FileText,
    links: [
      { label: "Invoices", href: "#invoices" },
      { label: "Credit notes", href: "#credits" },
      { label: "Reminders", href: "#reminders" },
      { label: "Customer portal", href: "#portal" },
    ],
  },
  {
    id: "ap",
    label: "Payables",
    icon: CreditCard,
    links: [
      { label: "Bills", href: "#bills" },
      { label: "Approvals", href: "#approvals" },
      { label: "Payment runs", href: "#runs" },
    ],
  },
  {
    id: "crm",
    label: "Contacts",
    icon: Users,
    links: [
      { label: "Customers", href: "#customers" },
      { label: "Vendors", href: "#vendors" },
    ],
  },
  {
    id: "rep",
    label: "Reports",
    icon: BarChart3,
    links: [
      { label: "Aging", href: "#aging" },
      { label: "Cash flow", href: "#cashflow" },
      { label: "P&L", href: "#pnl" },
    ],
  },
];

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>
  );
}

/** Two-level navigation: a narrow icon rail of top-level sections (tooltips, aria-pressed) and a secondary panel listing the selected section’s pages; the panel hides below md. */
export function SidebarDual({ sections = DEFAULT_SECTIONS, defaultSection = "ar", activeHref = "#invoices", children, className }: SidebarDualProps) {
  const [section, setSection] = useState(defaultSection);
  const current = sections.find((s) => s.id === section) ?? sections[0];
  return (
    <div className={cn("flex min-h-dvh bg-da-surface-2 text-da-fg", className)}>
      <nav
        aria-label="Sections"
        className="sticky top-0 flex h-dvh w-16 shrink-0 flex-col items-center gap-2 border-r border-da-border bg-da-surface py-3 text-da-surface-fg"
      >
        <LedgerlyMark className="mb-3 size-8" />
        {sections.map((s) => (
          <button
            key={s.id}
            type="button"
            title={s.label}
            aria-label={s.label}
            aria-pressed={s.id === current?.id}
            onClick={() => setSection(s.id)}
            className={cn(
              "da-focus da-transition grid size-10 place-items-center rounded-da-md",
              s.id === current?.id ? "bg-da-primary/10 text-da-primary" : "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg",
            )}
          >
            <s.icon aria-hidden className="size-5" />
          </button>
        ))}
        <a
          href="#settings"
          title="Settings"
          aria-label="Settings"
          className="da-focus mt-auto grid size-10 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg"
        >
          <Settings aria-hidden className="size-5" />
        </a>
      </nav>
      {current && (
        <nav aria-label={current.label} className="sticky top-0 hidden h-dvh w-52 shrink-0 border-r border-da-border bg-da-surface-2 p-3 md:block">
          <p className="px-2.5 py-2 font-da-display text-sm font-bold">{current.label}</p>
          <ul key={current.id} className="mt-1 space-y-0.5 transition-opacity duration-(--da-duration) starting:opacity-0">
            {current.links.map((l) => (
              <li key={l.href}>
                <a
                  href={l.href}
                  aria-current={l.href === activeHref ? "page" : undefined}
                  className={cn(
                    "da-focus flex h-8 items-center rounded-da-md px-2.5 text-sm",
                    l.href === activeHref ? "bg-da-surface font-semibold text-da-fg shadow-da-sm" : "text-da-muted-fg hover:text-da-fg",
                  )}
                >
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      )}
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default SidebarDual;