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,
  Briefcase,
  Compass,
  Microscope,
  Shield,
  Settings,
  ChevronDown,
  type LucideIcon,
} from "lucide-react";
import { api } from "@/lib/trpc";
import { useFeatureAccess, type ModuleKey } from "@/lib/useFeatureAccess";
import { useWorkspaceProfile } from "@/lib/useWorkspaceProfile";
import { useActiveSymbolGuarded } from "@/stores/active-symbol-store";
import type { NavItemId } from "@/lib/workspace-profile";
import { scrollAppMainToTopSoon } from "@/lib/scroll-app-main";

/**
 * Left sidebar — management-centered sections, filtered by module access + workspace density.
 */

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

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

const SECTIONS: NavSection[] = [
  {
    title: "Research",
    icon: BarChart3,
    module: "research",
    items: [
      { label: "Symbol", href: "/", navId: "research" },
      { label: "Market Outlook", href: "/market-outlook", navId: "market" },
      { label: "Charts", href: "/chart-lab", navId: "charts" },
      { label: "Screener", href: "/screener", navId: "screener" },
      { label: "Institutional", href: "/institutional", navId: "institutional" },
      { label: "Dealer Flow", href: "/dealer-flow", navId: "dealer-flow" },
      { label: "Confluence", href: "/confluence", navId: "confluence" },
    ],
  },
  {
    title: "Book",
    icon: Briefcase,
    module: "execution",
    items: [
      { label: "Portfolio", href: "/portfolio", navId: "portfolio" },
      { label: "Risk", href: "/risk", navId: "risk" },
      { label: "Tracked Funds", href: "/funds", navId: "funds" },
    ],
  },
  {
    title: "Process",
    icon: Compass,
    module: "execution",
    items: [
      { label: "Get Started", href: "/guided-start", navId: "guided-start" },
      { label: "Decision plan", href: "/plan", navId: "plan" },
      { label: "Theses", href: "/theses", navId: "theses" },
      { label: "Journal", href: "/journal", navId: "journal" },
      { label: "Strategies", href: "/strategies", navId: "strategies" },
      { label: "Strategy lab", href: "/lab", navId: "lab" },
      { label: "Position considerations", href: "/exits", navId: "exits" },
      { label: "Goals", href: "/daily-focus", navId: "goals" },
    ],
  },
  {
    title: "Tools",
    icon: Microscope,
    module: "analytics",
    items: [
      { label: "Alerts", href: "/alerts", navId: "alerts" },
      { label: "Reports", href: "/reports", navId: "reports" },
      { label: "Filings", href: "/filings", navId: "filings" },
      { label: "Options DD", href: "/options-dd", navId: "options" },
    ],
  },
  {
    title: "Admin",
    icon: Shield,
    module: "admin",
    items: [
      { label: "Overview", href: "/admin", navId: "admin" },
      { label: "Users", href: "/admin/users", navId: "admin" },
      { label: "Queue", href: "/admin/queue", navId: "admin" },
      { label: "Audit Logs", href: "/admin/audit-logs", navId: "admin" },
      { label: "X Accounts", href: "/admin/x-accounts", navId: "admin" },
      { label: "SMTP", href: "/admin/smtp", navId: "admin" },
    ],
  },
  {
    title: "Settings",
    icon: Settings,
    module: "settings",
    items: [{ label: "Profile / Auth", href: "/settings", navId: "settings" }],
  },
];

const STORAGE_KEY = "iflow-nav-collapsed";

function getInitialCollapsed(pathname: string, visibleSections: NavSection[]): 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 visibleSections) {
    const isActive = section.items.some((item) => item.href === norm);
    initial[section.title] = !isActive;
  }
  return initial;
}

export function SidebarNav({ collapsed: panelCollapsed, onToggle }: { collapsed?: boolean; onToggle?: () => void }) {
  const pathname = usePathname();
  const normalizedPath = (pathname || "/").replace(/\/+$/, "") || "/";
  const { modules, loading } = useFeatureAccess();
  const { isNavVisible, density } = useWorkspaceProfile();
  const activeSymbol = useActiveSymbolGuarded();
  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
  const [initialized, setInitialized] = useState(false);
  const [unackedCount, setUnackedCount] = useState(0);

  // Research → "Symbol" shows the focused ticker, e.g. "Symbol: IREN"
  const itemLabel = (item: { label: string }) =>
    item.label === "Symbol" && activeSymbol ? (
      <span>Symbol: <span className="text-accent font-medium">{activeSymbol}</span></span>
    ) : item.label;

  const visibleSections = SECTIONS
    .filter((s) => modules.includes(s.module))
    .map((s) => ({
      ...s,
      items: s.items.filter((item) => isNavVisible(item.navId)),
    }))
    .filter((s) => s.items.length > 0);

  useEffect(() => {
    const fetchCount = () => api.alerts.unackedCount().then((r) => setUnackedCount(r.count)).catch(() => {});
    fetchCount();
    const handler = () => fetchCount();
    window.addEventListener("alert-dismissed", handler);
    return () => window.removeEventListener("alert-dismissed", handler);
  }, []);

  useEffect(() => {
    setCollapsed(getInitialCollapsed(pathname, visibleSections));
    setInitialized(true);
    // eslint-disable-next-line react-hooks/exhaustive-deps -- re-init when module/density loading settles
  }, [loading, density]);

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

  return (
    <aside className={`border-r border-line bg-surface-raised flex-shrink-0 hidden lg:flex items-stretch transition-all duration-200 ${panelCollapsed ? "w-14" : "w-52"}`}>
      <div className="flex-1 min-w-0 overflow-hidden">
        <nav className={`h-full ${panelCollapsed ? "p-2" : "p-3"}`}>
          {panelCollapsed ? (
            <div className="space-y-2">
              {visibleSections.map((section) => {
                const Icon = section.icon;
                return (
                  <div key={section.title} className="flex justify-center">
                    <div className="relative group">
                      <button
                        onClick={onToggle}
                        className="p-1.5 rounded text-fg-muted hover:text-fg hover:bg-surface-overlay transition-colors"
                        title={section.title}
                      >
                        <Icon className="h-4 w-4" />
                      </button>
                      <div className="absolute left-full ml-1 top-0 z-50 hidden group-hover:block">
                        <div className="rounded border border-line bg-surface-raised px-2 py-1 text-2xs text-fg whitespace-nowrap shadow-xl">
                          {section.title}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="space-y-0.5">
              {visibleSections.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 itemPath = item.href.split("#")[0] || "/";
                          const isActive =
                            itemPath === "/"
                              ? normalizedPath === "/"
                              : normalizedPath === itemPath;
                          const showBadge = item.label === "Alerts" && unackedCount > 0;
                          return (
                            <Link
                              key={item.label}
                              href={item.href}
                              // Nested <main> is the scroller; Next window restore is a no-op.
                              // Same-route + cross-page: force main to top after click.
                              scroll={false}
                              onClick={() => {
                                // Mark intent so home page can reassert after its own mount.
                                try {
                                  sessionStorage.setItem("iflow-nav-scroll-top", "1");
                                } catch { /* ignore */ }
                                scrollAppMainToTopSoon();
                              }}
                              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"
                              }`}
                            >
                              <span className="flex items-center justify-between">
                                <span>{itemLabel(item)}</span>
                                {showBadge && (
                                  <span className="rounded-full bg-accent px-1.5 py-0.5 text-2xs text-white">{unackedCount}</span>
                                )}
                              </span>
                            </Link>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </nav>
      </div>

      <button
        onClick={onToggle}
        className="w-3.5 shrink-0 border-l border-line bg-surface-raised hover:bg-surface-overlay cursor-pointer transition-colors self-stretch"
        title={panelCollapsed ? "Expand sidebar" : "Collapse sidebar"}
      />
    </aside>
  );
}