// CIL[BEGIN chunk_id="workbenchsidebar_workbenchsidebar_1785096505" type="component" identity="WorkbenchSidebar" parent="none"]
// CIL[DOC-MACRO purpose="Render the Workbench sidebar navigation with role switching and incident badge"]
// CIL[DOC-RESPONSIBILITY responsibility="Display navigation links, role selector, and active incident count for the Workbench app"]
// CIL[DOC-CONTEXT module="workbench.components" layer="frontend-component" related_files="[\"custom/apps/workbench/hooks/useWorkbenchRole.ts\",\"custom/apps/workbench/index.tsx\"]"]
// CIL[DOC-CONTRACT inputs="React.ComponentProps<typeof Sidebar>" outputs="JSX sidebar" errors="none" side_effects="navigates via router, fetches incident count"]
// CIL[DOC-MICRO logic_summary="Renders a shadcn Sidebar with menu sections, a role-select dropdown, and an incident badge fetched from admin-data" notable_decisions="[]"]
// CIL[DOC-CONFIDENCE pass="first" score="0.90" flags="none"]
// CIL[DOC-STABILITY stability="stable"]
// CIL[DOC-AUDIENCE audience="developer"]
import * as React from 'react'
import { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { useAppPath } from '@core/hooks/useAppPath'
import {
  LayoutDashboard,
  Siren,
  ClipboardList,
  Map,
  Calendar,
  ListTodo,
  CircleParking,
  BookOpen,
  FlaskConical,
  Gauge,
  ChevronRight,
  ChevronDown,
  Library,
  ScrollText,
  Inbox,
  Lightbulb,
  Search,
  FolderGit2,
  Users,
} from 'lucide-react'
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarSeparator,
} from '@core/components/ui/sidebar'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@core/components/ui/collapsible'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@core/components/ui/select'
import { Badge } from '@core/components/ui/badge'
import { apiFetch } from '@core/lib/api'
import { useWorkbenchRole } from '../hooks/useWorkbenchRole'
import { useAuth } from '@core/contexts/AuthContext'

const ROLE_LABELS: Record<string, string> = {
  product: 'Product',
  engineering: 'Engineering',
  devops: 'DevOps',
  qa: 'QA',
  delivery: 'Delivery',
  docs: 'Docs',
  support: 'Support',
  sales: 'Sales',
  management: 'Management',
  proserve: 'Proserve',
}

type NavItem = {
  title: string
  url: string
  icon: React.ElementType
  isRole?: boolean
}

const GLOBAL_ITEMS: NavItem[] = [
  { title: 'Command Center', url: '/dashboard', icon: LayoutDashboard, isRole: false },
]

const INTAKE_ITEMS: NavItem[] = [
  { title: 'Ideas', url: '/intake/ideas', icon: Lightbulb, isRole: false },
  { title: 'Discovery Board', url: '/intake/discovery-board', icon: Search, isRole: false },
]

const ROADMAP_ITEMS: NavItem[] = [
  { title: 'Initiatives', url: '/planning/initiatives-board', icon: Map, isRole: false },
  { title: 'Epics', url: '/planning/epics-board', icon: Map, isRole: false },
]

const ROLE_VIEWS: NavItem[] = [
  { title: 'Dashboard', url: '/dashboard', icon: Gauge },
  { title: 'Kanban Board', url: '/board', icon: ClipboardList },
]

const PLANNING_ITEMS: NavItem[] = [
  { title: 'Prioritization', url: '/prioritization', icon: ListTodo },
  { title: 'Sprints', url: '/prioritization/sprints', icon: Calendar },
  { title: 'Backlog', url: '/prioritization/backlog', icon: ListTodo },
  { title: 'Parking Lot', url: '/prioritization/parking-lot', icon: CircleParking },
]

const SPECIALTY_ITEMS: NavItem[] = [
  { title: 'Docs Kanban', url: '/docs-tickets', icon: BookOpen },
  { title: 'Test Plan Kanban', url: '/test-plans', icon: FlaskConical },
]

const DEVOPS_ITEMS: NavItem[] = [
  { title: 'DevOps Dashboard', url: '/devops/dashboard', icon: Gauge, isRole: false },
]

const CIL_ITEMS: NavItem[] = [
  { title: 'CIL Projects', url: '/knowledge/cil/projects', icon: FolderGit2, isRole: false },
]

const CROSS_ROLE_ITEMS: NavItem[] = [
  { title: 'Knowledge Base', url: '/knowledge/dashboard', icon: Library, isRole: false },
  { title: 'Logging', url: '/logging/logs', icon: ScrollText, isRole: false },
]

const RESOLVED_INCIDENT_STATUSES = ['resolved', 'postmortem_complete']

function buildUrl(item: NavItem, appPath: (p: string) => string, role: string) {
  return appPath(item.isRole === false ? item.url : `/work/${role}${item.url}`)
}

function isActive(item: NavItem, pathname: string, appPath: (p: string) => string, role: string) {
  return pathname.startsWith(buildUrl(item, appPath, role))
}

export function WorkbenchSidebar(props: React.ComponentProps<typeof Sidebar>) {
  const navigate = useNavigate()
  const location = useLocation()
  const appPath = useAppPath()
  const { role, selectRole, roles } = useWorkbenchRole()
  const { user } = useAuth()

  const isTeamAdmin =
    user?.is_system_admin ||
    user?.role === 'engineering_admin' ||
    user?.roles?.some((r: string) => r === 'engineering_admin')

  const [incidentCount, setIncidentCount] = useState(0)
  const [intakeOpen, setIntakeOpen] = useState(false)
  const [roadmapOpen, setRoadmapOpen] = useState(false)
  const [workOpen, setWorkOpen] = useState(false)
  const [devopsOpen, setDevopsOpen] = useState(false)
  const [cilOpen, setCilOpen] = useState(false)
  const [crossRoleOpen, setCrossRoleOpen] = useState(false)
  const [planningOpen, setPlanningOpen] = useState(false)

  useEffect(() => {
    let cancelled = false
    apiFetch('/api/admin-data?entity=items&type_slug=workbench_work_item&limit=200')
      .then(r => (r.ok ? r.json() : { data: [] }))
      .then(json => {
        if (cancelled) return
        const items = Array.isArray(json?.data) ? json.data : []
        const active = items.filter(
          (item: any) =>
            item.data?.work_type === 'incident_followup' &&
            !RESOLVED_INCIDENT_STATUSES.includes(item.data?.incident_status)
        ).length
        setIncidentCount(active)
      })
      .catch(() => {
        if (!cancelled) setIncidentCount(0)
      })
    return () => { cancelled = true }
  }, [])

  return (
    <Sidebar {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" onClick={() => navigate(appPath('/dashboard'))}>
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                <span className="text-sm font-bold">Wb</span>
              </div>
              <div className="flex flex-col gap-0.5 leading-none">
                <span className="font-semibold">Workbench</span>
                <span className="text-xs text-muted-foreground">{ROLE_LABELS[role]}</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {incidentCount > 0 && (
                <SidebarMenuItem>
                  <SidebarMenuButton
                    isActive={location.pathname.startsWith(appPath('/incident'))}
                    onClick={() => navigate(appPath('/incident/dashboard'))}
                    className="text-red-600 hover:bg-red-50 hover:text-red-700 border border-red-300"
                  >
                    <Siren className="h-4 w-4 shrink-0" />
                    <span className="flex-1 text-left">Incident</span>
                    <Badge variant="destructive" className="ml-auto h-5 min-w-5 justify-center rounded-full px-1.5 text-[10px]">
                      {incidentCount}
                    </Badge>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              )}
              {GLOBAL_ITEMS.map(item => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    isActive={isActive(item, location.pathname, appPath, role)}
                    onClick={() => navigate(buildUrl(item, appPath, role))}
                  >
                    <item.icon className="h-4 w-4 shrink-0" />
                    <span>{item.title}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
              <SidebarMenuItem>
                <Collapsible open={intakeOpen} onOpenChange={setIntakeOpen}>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton>
                      <Inbox className="h-4 w-4 shrink-0" />
                      <span className="flex-1 text-left">Intake</span>
                      {intakeOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenu className="ml-4 border-l border-sidebar-border pl-2">
                      {INTAKE_ITEMS.map(item => (
                        <SidebarMenuItem key={item.title}>
                          <SidebarMenuButton
                            isActive={isActive(item, location.pathname, appPath, role)}
                            onClick={() => navigate(buildUrl(item, appPath, role))}
                          >
                            <item.icon className="h-4 w-4 shrink-0" />
                            <span>{item.title}</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      ))}
                    </SidebarMenu>
                  </CollapsibleContent>
                </Collapsible>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <Collapsible open={roadmapOpen} onOpenChange={setRoadmapOpen}>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton>
                      <Map className="h-4 w-4 shrink-0" />
                      <span className="flex-1 text-left">Planning</span>
                      {roadmapOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenu className="ml-4 border-l border-sidebar-border pl-2">
                      {ROADMAP_ITEMS.map(item => (
                        <SidebarMenuItem key={item.title}>
                          <SidebarMenuButton
                            isActive={isActive(item, location.pathname, appPath, role)}
                            onClick={() => navigate(buildUrl(item, appPath, role))}
                          >
                            <item.icon className="h-4 w-4 shrink-0" />
                            <span>{item.title}</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      ))}
                    </SidebarMenu>
                  </CollapsibleContent>
                </Collapsible>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <Collapsible open={workOpen} onOpenChange={setWorkOpen}>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton>
                      <Gauge className="h-4 w-4 shrink-0" />
                      <span className="flex-1 text-left">Work</span>
                      {workOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenu className="ml-4 border-l border-sidebar-border pl-2">
                      <SidebarMenuItem>
                        <div className="px-2 py-1.5 w-full">
                          <Select value={role} onValueChange={selectRole}>
                            <SelectTrigger className="h-8 text-xs w-full">
                              <SelectValue placeholder="Select role" />
                            </SelectTrigger>
                            <SelectContent>
                              {roles.map(r => (
                                <SelectItem key={r} value={r} className="text-xs">
                                  {ROLE_LABELS[r] || r}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      </SidebarMenuItem>
                      {ROLE_VIEWS.map(item => (
                        <SidebarMenuItem key={item.title}>
                          <SidebarMenuButton
                            isActive={isActive(item, location.pathname, appPath, role)}
                            onClick={() => navigate(buildUrl(item, appPath, role))}
                          >
                            <item.icon className="h-4 w-4 shrink-0" />
                            <span>{item.title}</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      ))}
                      <SidebarMenuItem>
                        <Collapsible open={planningOpen} onOpenChange={setPlanningOpen}>
                          <CollapsibleTrigger asChild>
                            <SidebarMenuButton>
                              <Map className="h-4 w-4 shrink-0" />
                              <span className="flex-1 text-left">Planning</span>
                              {planningOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
                            </SidebarMenuButton>
                          </CollapsibleTrigger>
                          <CollapsibleContent>
                            <SidebarMenu className="ml-4 border-l border-sidebar-border pl-2">
                              {PLANNING_ITEMS.map(item => (
                                <SidebarMenuItem key={item.title}>
                                  <SidebarMenuButton
                                    isActive={isActive(item, location.pathname, appPath, role)}
                                    onClick={() => navigate(buildUrl(item, appPath, role))}
                                  >
                                    <item.icon className="h-4 w-4 shrink-0" />
                                    <span>{item.title}</span>
                                  </SidebarMenuButton>
                                </SidebarMenuItem>
                              ))}
                            </SidebarMenu>
                          </CollapsibleContent>
                        </Collapsible>
                      </SidebarMenuItem>
                      {SPECIALTY_ITEMS.map(item => (
                        <SidebarMenuItem key={item.title}>
                          <SidebarMenuButton
                            isActive={isActive(item, location.pathname, appPath, role)}
                            onClick={() => navigate(buildUrl(item, appPath, role))}
                          >
                            <item.icon className="h-4 w-4 shrink-0" />
                            <span>{item.title}</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      ))}
                    </SidebarMenu>
                  </CollapsibleContent>
                </Collapsible>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
        <SidebarSeparator />
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <Collapsible open={devopsOpen} onOpenChange={setDevopsOpen}>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton>
                      <Gauge className="h-4 w-4 shrink-0" />
                      <span className="flex-1 text-left">DevOps</span>
                      {devopsOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenu className="ml-4 border-l border-sidebar-border pl-2">
                      {DEVOPS_ITEMS.map(item => (
                        <SidebarMenuItem key={item.title}>
                          <SidebarMenuButton
                            isActive={isActive(item, location.pathname, appPath, role)}
                            onClick={() => navigate(buildUrl(item, appPath, role))}
                          >
                            <item.icon className="h-4 w-4 shrink-0" />
                            <span>{item.title}</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      ))}
                    </SidebarMenu>
                  </CollapsibleContent>
                </Collapsible>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
        <SidebarSeparator />
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <Collapsible open={cilOpen} onOpenChange={setCilOpen}>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton>
                      <FolderGit2 className="h-4 w-4 shrink-0" />
                      <span className="flex-1 text-left">CIL</span>
                      {cilOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenu className="ml-4 border-l border-sidebar-border pl-2">
                      {CIL_ITEMS.map(item => (
                        <SidebarMenuItem key={item.title}>
                          <SidebarMenuButton
                            isActive={isActive(item, location.pathname, appPath, role)}
                            onClick={() => navigate(buildUrl(item, appPath, role))}
                          >
                            <item.icon className="h-4 w-4 shrink-0" />
                            <span>{item.title}</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      ))}
                    </SidebarMenu>
                  </CollapsibleContent>
                </Collapsible>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
        <SidebarSeparator />
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <Collapsible open={crossRoleOpen} onOpenChange={setCrossRoleOpen}>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton>
                      <Library className="h-4 w-4 shrink-0" />
                      <span className="flex-1 text-left">Cross-Role</span>
                      {crossRoleOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenu className="ml-4 border-l border-sidebar-border pl-2">
                      {CROSS_ROLE_ITEMS.map(item => (
                        <SidebarMenuItem key={item.title}>
                          <SidebarMenuButton
                            isActive={isActive(item, location.pathname, appPath, role)}
                            onClick={() => navigate(buildUrl(item, appPath, role))}
                          >
                            <item.icon className="h-4 w-4 shrink-0" />
                            <span>{item.title}</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      ))}
                      {isTeamAdmin && (
                        <SidebarMenuItem>
                          <SidebarMenuButton
                            isActive={location.pathname === appPath('/team')}
                            onClick={() => navigate(appPath('/team'))}
                          >
                            <Users className="h-4 w-4 shrink-0" />
                            <span>Team</span>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      )}
                    </SidebarMenu>
                  </CollapsibleContent>
                </Collapsible>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  )
}
// CIL[END chunk_id="workbenchsidebar_workbenchsidebar_1785096505"]