resolutionflow/frontend/src/components/layout/Sidebar.tsx

import { useEffect, useState } from 'react'
import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, BotMessageSquare, BookOpen, Sparkles, Terminal } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection'
import { NavItem } from './NavItem'
import { sessionsApi, treesApi } from '@/api'

export function Sidebar() {
  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
  const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar)

  const pinnedItems = usePinnedFlowsStore((s) => s.items)
  const loadPinned = usePinnedFlowsStore((s) => s.load)
  const unpinFlow = usePinnedFlowsStore((s) => s.unpin)

  const [activeSessionCount, setActiveSessionCount] = useState(0)
  const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0, maintenance: 0 })

  // Load pinned flows on mount
  useEffect(() => {
    loadPinned()
  }, [loadPinned])

  // Fetch sidebar data on mount
  useEffect(() => {
    const fetchData = async () => {
      try {
        const [activeSessions, allTrees] = await Promise.all([
          sessionsApi.list({ completed: false, size: 50 }).catch(() => []),
          treesApi.list({ sort_by: 'name' }).catch(() => []),
        ])
        setActiveSessionCount(activeSessions.length)

        const total = allTrees.length
        const troubleshooting = allTrees.filter(t => t.tree_type === 'troubleshooting').length
        const procedural = allTrees.filter(t => t.tree_type === 'procedural').length
        const maintenance = allTrees.filter(t => t.tree_type === 'maintenance').length
        setTreeCounts({ total, troubleshooting, procedural, maintenance })
      } catch {
        // Silently handle errors
      }
    }
    fetchData()
  }, [])

  const handleSidebarWheel = (e: React.WheelEvent<HTMLElement>) => {
    const sidebar = e.currentTarget
    const canSidebarScroll = sidebar.scrollHeight > sidebar.clientHeight
    const atTop = sidebar.scrollTop <= 0
    const atBottom = sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1

    // If sidebar can't consume wheel movement, forward it to main content scroller.
    if (!canSidebarScroll || (e.deltaY < 0 && atTop) || (e.deltaY > 0 && atBottom)) {
      const main = document.querySelector('.main-content') as HTMLElement | null
      if (main) {
        main.scrollTop += e.deltaY
        e.preventDefault()
      }
    }
  }

  return (
    <nav
      className="sidebar flex flex-col border-r"
      style={{
        background: 'rgba(16, 17, 20, 0.5)',
        backdropFilter: 'var(--glass-blur-light)',
        WebkitBackdropFilter: 'var(--glass-blur-light)',
        borderColor: 'var(--glass-border)',
      }}
      onWheel={handleSidebarWheel}
    >
      {sidebarCollapsed ? (
        <>
          {/* Collapsed: icon-only nav */}
          <div className="flex flex-col items-center px-1.5 py-3 space-y-1">
            <NavItem href="/" icon={LayoutGrid} label="Dashboard" collapsed />
            <NavItem href="/trees" icon={Box} label="All Flows" matchPaths={['/trees', '/flows']} collapsed />
            <NavItem href="/my-trees" icon={PenLine} label="Flow Editor" collapsed />
            <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
            <NavItem href="/shares" icon={FileText} label="Exports" collapsed />
            <NavItem href="/assistant" icon={BotMessageSquare} label="AI Assistant" collapsed />
            <NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
            <NavItem href="/scripts" icon={Terminal} label="Script Library" collapsed />
            <NavItem href="/kb-accelerator" icon={Sparkles} label="KB Accelerator" collapsed />
            <NavItem href="/analytics" icon={BarChart3} label="Analytics" collapsed />
            <NavItem href="/guides" icon={BookOpen} label="User Guides" collapsed />
            <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" collapsed />
          </div>
        </>
      ) : (
        <>
          {/* Pinned Flows */}
          <PinnedFlowsSection flows={pinnedItems} onUnpin={unpinFlow} />

          <div style={{ borderBottom: '1px solid var(--glass-border)' }} />

          {/* Primary Navigation */}
          <div className="px-3 py-2 space-y-0.5">
            <NavItem href="/" icon={LayoutGrid} label="Dashboard" />
            <NavItem
              href="/trees"
              icon={Box}
              label="All Flows"
              badge={treeCounts.total || undefined}
              matchPaths={['/trees', '/flows']}
              children={[
                { href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: treeCounts.troubleshooting || undefined },
                { href: '/trees?type=procedural', label: 'Projects', count: treeCounts.procedural || undefined },
                { href: '/trees?type=maintenance', label: 'Maintenance', count: treeCounts.maintenance || undefined },
              ]}
            />
            <NavItem href="/my-trees" icon={PenLine} label="Flow Editor" />
            <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
            <NavItem href="/shares" icon={FileText} label="Exports" />
            <NavItem href="/assistant" icon={BotMessageSquare} label="AI Assistant" />
            <NavItem href="/step-library" icon={Bookmark} label="Step Library" />
            <NavItem href="/scripts" icon={Terminal} label="Script Library" />
            <NavItem href="/kb-accelerator" icon={Sparkles} label="KB Accelerator" />
            <NavItem href="/analytics" icon={BarChart3} label="Analytics" />
          </div>
        </>
      )}

      {/* Spacer — pushes footer to bottom */}
      <div className="flex-1" />

      {/* Footer */}
      <div
        className={cn(
          "border-t",
          sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
        )}
        style={{ borderColor: 'var(--glass-border)' }}
      >
        {!sidebarCollapsed && (
          <>
            <NavItem href="/guides" icon={BookOpen} label="User Guides" />
            <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" />
            <NavItem href="/account" icon={Settings} label="Account" />
          </>
        )}
        <button
          onClick={toggleSidebar}
          className={cn(
            "flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors",
            sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2"
          )}
          title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
        >
          {sidebarCollapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={18} />}
          {!sidebarCollapsed && <span>Collapse</span>}
        </button>
      </div>
    </nav>
  )
}