Sidebar Navy

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { ArrowLeftRight, BarChart3, Bell, FileText, Home, Landmark, Menu, Receipt, Search, Wallet, X, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarNavyProps {
  brand?: string;
  items?: { label: string; href: string; icon: LucideIcon; badge?: string }[];
  activeHref?: string;
  balance?: { label: string; value: string };
  children?: ReactNode;
  className?: string;
}

const DEFAULT_ITEMS = [
  { label: "Home", href: "#home", icon: Home },
  { label: "Invoices", href: "#invoices", icon: FileText },
  { label: "Bills", href: "#bills", icon: Receipt, badge: "6" },
  { label: "Transactions", href: "#tx", icon: ArrowLeftRight },
  { label: "Accounts", href: "#accounts", icon: Landmark },
  { label: "Cards", href: "#cards", icon: Wallet },
  { label: "Insights", href: "#insights", icon: BarChart3, badge: "New" },
];

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

/** Dark navy sidebar (fg-colored in light mode, surface in dark mode — dark in both): brand, search field, nav with white-tint active state and badges, and a cash-balance card at the bottom; drawer on mobile. */
export function SidebarNavy({
  brand = "Ledgerly",
  items = DEFAULT_ITEMS,
  activeHref = "#home",
  balance = { label: "Total cash", value: "$2,418,902" },
  children,
  className,
}: SidebarNavyProps) {
  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-bg 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 bg-(--nav) p-3 text-(--ink) [--ink:var(--da-bg)] [--nav:var(--da-fg)] dark:border-r dark:border-da-border dark:[--ink:var(--da-surface-fg)] dark:[--nav:var(--da-surface)] 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-11 items-center gap-2 px-2 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-(--ink)/10 lg:hidden"
          >
            <X aria-hidden className="size-4" />
          </button>
        </div>
        <label className="mt-3 flex h-9 items-center gap-2 rounded-da-md bg-(--ink)/10 px-2.5 text-sm focus-within:ring-2 focus-within:ring-(--ink)/40">
          <Search aria-hidden className="size-4 opacity-70" />
          <span className="sr-only">Search</span>
          <input placeholder="Search" className="min-w-0 flex-1 bg-transparent outline-none placeholder:text-current placeholder:opacity-70" />
          <kbd className="font-da-mono text-[11px] opacity-70">⌘K</kbd>
        </label>
        <nav aria-label="Main" className="mt-4 flex-1 overflow-y-auto">
          <ul className="space-y-0.5">
            {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-(--ink)/15" : "opacity-80 hover:bg-(--ink)/10 hover:opacity-100",
                    )}
                  >
                    <it.icon aria-hidden className="size-4" />
                    <span className="flex-1">{it.label}</span>
                    {it.badge && <span className="rounded-da-sm bg-da-primary px-1.5 text-[11px] font-semibold text-da-primary-fg">{it.badge}</span>}
                  </a>
                </li>
              );
            })}
          </ul>
        </nav>
        <div className="rounded-da-lg bg-(--ink)/10 p-4">
          <p className="text-xs opacity-75">{balance.label}</p>
          <p className="mt-1 font-da-mono text-xl">{balance.value}</p>
          <p className="mt-1 flex items-center gap-1.5 text-xs opacity-75">
            <Bell aria-hidden className="size-3" /> 3 accounts connected
          </p>
        </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 SidebarNavy;