investor-flow/app/src/components/SidebarNav.tsx

"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BarChart3,
  Zap,
  Microscope,
  Shield,
  Settings,
  ChevronDown,
  Search,
  type LucideIcon,
} from "lucide-react";

/**
 * Left sidebar navigation with collapsible sections.
 * Chrome is intentionally dimmed (muted text) so the content area reads as primary;
 * the active item gets an accent tint + left bar.
 */

interface NavItem {
  label: string;
  href: string;
}

interface NavSection {
  title: string;
  icon: LucideIcon;
  items: NavItem[];
}

const SECTIONS: NavSection[] = [
  {
    title: "Research",
    icon: BarChart3,
    items: [
      { label: "Overview", href: "/" },
      { label: "Market Outlook", href: "/market-outlook" },
      { label: "Institutional", href: "/institutional" },
      { label: "Charts", href: "/chart-lab" },
    ],
  },
  {
    title: "Execution",
    icon: Zap,
    items: [
      { label: "Trade Plan", href: "/trade-plan" },
      { label: "Execution", href: "/execution" },
      { label: "Trade Closure", href: "/trade-closure" },
      { label: "Daily Focus", href: "/daily-focus" },
    ],
  },
  {
    title: "Analytics",
    icon: Microscope,
    items: [
      { label: "Risk Posture", href: "/risk" },
      { label: "Filings", href: "/filings" },
      { label: "Options DD", href: "/options-dd" },
    ],
  },
  {
    title: "Admin",
    icon: Shield,
    items: [
      { label: "Overview", href: "/admin" },
      { label: "Users", href: "/admin/users" },
      { label: "Queue", href: "/admin/queue" },
      { label: "Audit Logs", href: "/admin/audit-logs" },
      { label: "X Accounts", href: "/admin/x-accounts" },
    ],
  },
  {
    title: "Settings",
    icon: Settings,
    items: [{ label: "Profile / Auth", href: "/settings" }],
  },
];

const STORAGE_KEY = "iflow-nav-collapsed";

function getInitialCollapsed(pathname: string): Record<string, boolean> {
  if (typeof window !== "undefined") {
    try {
      const stored = localStorage.getItem(STORAGE_KEY);
      if (stored) return JSON.parse(stored);
    } catch { /* ignore */ }
  }
  const initial: Record<string, boolean> = {};
  const norm = (pathname || "/").replace(/\/+$/, "") || "/";
  for (const section of SECTIONS) {
    const isActive = section.items.some((item) => item.href === norm);
    initial[section.title] = !isActive;
  }
  return initial;
}

export function SidebarNav() {
  const pathname = usePathname();
  const normalizedPath = (pathname || "/").replace(/\/+$/, "") || "/";
  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    setCollapsed(getInitialCollapsed(pathname));
    setInitialized(true);
  }, []);

  useEffect(() => {
    if (initialized) {
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsed));
      } catch { /* ignore */ }
    }
  }, [collapsed, initialized]);

  const toggleCollapse = (sectionTitle: string) => {
    setCollapsed((prev) => ({ ...prev, [sectionTitle]: !prev[sectionTitle] }));
  };

  const openPalette = () => window.dispatchEvent(new CustomEvent("open-command-palette"));

  return (
    <aside className="w-52 border-r border-line bg-surface-raised flex-shrink-0 hidden lg:block">
      <nav className="flex h-full flex-col p-3">
        <div className="space-y-0.5 flex-1">
          {SECTIONS.map((section) => {
            const Icon = section.icon;
            return (
              <div key={section.title} className="mb-1">
                <button
                  onClick={() => toggleCollapse(section.title)}
                  className="w-full flex items-center justify-between px-2 py-1.5 text-2xs font-semibold uppercase tracking-wide text-fg-muted hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded"
                >
                  <span className="flex items-center gap-2">
                    <Icon className="h-3.5 w-3.5" />
                    <span>{section.title}</span>
                  </span>
                  <ChevronDown
                    className={`h-3 w-3 transition-transform duration-200 ${collapsed[section.title] ? "-rotate-90" : ""}`}
                  />
                </button>

                {!collapsed[section.title] && (
                  <div className="mt-0.5 space-y-0.5">
                    {section.items.map((item) => {
                      const isActive = normalizedPath === item.href;
                      return (
                        <Link
                          key={item.label}
                          href={item.href}
                          className={`block px-2 py-1.5 rounded-md text-xs transition-colors border-l-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent ${
                            isActive
                              ? "bg-accent-soft text-fg border-accent font-medium"
                              : "text-fg-muted hover:text-fg hover:bg-surface-overlay border-transparent"
                          }`}
                        >
                          {item.label}
                        </Link>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Search affordance — opens the command palette */}
        <button
          onClick={openPalette}
          className="mt-2 flex items-center gap-2 w-full rounded-md border border-line bg-surface-sunken px-2 py-1.5 text-xs text-fg-muted hover:text-fg hover:bg-surface-overlay transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
        >
          <Search className="h-3.5 w-3.5" />
          <span>Search</span>
          <kbd className="ml-auto rounded-sm border border-line px-1 py-0.5 text-2xs">⌘K</kbd>
        </button>
      </nav>
    </aside>
  );
}