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

"use client";
import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

/**
 * Left sidebar navigation with collapsible sections.
 * Organized by workflow phase: Research, Execution, Analytics, Settings.
 */

interface NavSection {
  title: string;
  icon: string;
  items: { label: string; href: string }[];
}

const SECTIONS: NavSection[] = [
  {
    title: "Research",
    icon: "📊",
    items: [
      { label: "Overview", href: "/" },
      { label: "Chart Lab", href: "/chart-lab" },
      { label: "Institutional", href: "/institutional" },
      { label: "Market Outlook", href: "/market-outlook" },
    ],
  },
  {
    title: "Execution",
    icon: "⚡",
    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: "🔬",
    items: [
      { label: "Filings", href: "/filings" },
      { label: "Options DD", href: "/options-dd" },
    ],
  },
  {
    title: "Settings",
    icon: "⚙️",
    items: [
      { label: "Profile / Auth", href: "/settings" },
    ],
  },
];

export function SidebarNav() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});

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

  return (
    <aside className="w-52 border-r border-[#2a2b3a] bg-[#121318] flex-shrink-0 hidden lg:block">
      <nav className="p-3 space-y-1">
        {SECTIONS.map((section) => (
          <div key={section.title} className="mb-1">
            {/* Section Header */}
            <button
              onClick={() => toggleCollapse(section.title)}
              className="w-full flex items-center justify-between px-2 py-1.5 text-xs font-semibold text-[#8a8b9a] hover:text-[#e6e7ec] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4f8cff] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0b0f] rounded-lg"
            >
              <span className="flex items-center gap-2">
                <span>{section.icon}</span>
                <span>{section.title}</span>
              </span>
              <span className="text-[10px] transition-transform duration-200" style={{ transform: collapsed[section.title] ? "rotate(-90deg)" : "none" }}>
                ▼
              </span>
            </button>

            {/* Section Items */}
            {!collapsed[section.title] && (
              <div className="ml-4 mt-1 space-y-0.5">
                {section.items.map((item) => {
                  const isActive = pathname === item.href;
                  return (
                    <Link
                      key={item.label}
                      href={item.href}
                      className={`block px-2 py-1.5 rounded-lg text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4f8cff] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0b0f] ${
                        isActive
                          ? "bg-[#4f8cff]/20 text-[#4f8cff] border-l-2 border-[#4f8cff]"
                          : "text-[#8a8b9a] hover:text-[#e6e7ec] hover:bg-[#1a1b24]"
                      }`}
                    >
                      {item.label}
                    </Link>
                  );
                })}
              </div>
            )}
          </div>
        ))}
      </nav>
    </aside>
  );
}