// CIL[BEGIN chunk_id="EngineeringDashboard_module_header_1784761401" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="Render an overview dashboard for the Engineering workspace"]
// CIL[DOC-RESPONSIBILITY responsibility="Fetch aggregated counts of work items, epics, sprints, and docs; surface quick links"]
// CIL[DOC-CONTEXT module="workbench.pages.engineering.EngineeringDashboard" layer="frontend-page" related_files="[\"custom/apps/workbench/components/WorkbenchSidebar.tsx\",\"custom/apps/workbench/pages/work/WorkBoardPage.tsx\",\"custom/apps/workbench/pages/work/PrioritizationPage.tsx\"]"]
// CIL[DOC-CONTRACT inputs="none" outputs="JSX dashboard" errors="fetch errors rendered inline" side_effects="calls /api/admin-data counts"]
// CIL[DOC-MICRO logic_summary="Loads lightweight counts for engineering types and renders navigation cards" notable_decisions="[]"]
// CIL[DOC-CONFIDENCE pass="first" score="0.9" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppPath } from '@core/hooks/useAppPath'
import { apiFetch } from '@core/lib/api'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import { Button } from '@core/components/ui/button'
import { useWorkbenchRole } from '../../hooks/useWorkbenchRole'
import {
  ClipboardList,
  Map,
  Calendar,
  ListTodo,
  CircleParking,
  BookOpen,
  FlaskConical,
  LayoutDashboard,
} from 'lucide-react'
// CIL[END chunk_id="EngineeringDashboard_module_header_1784761401"]

// CIL[BEGIN chunk_id="EngineeringDashboard_engineeringDashboard_1784761401" type="function" identity="EngineeringDashboard" parent="none"]
// CIL[DOC-MACRO description="Implementation of EngineeringDashboard" macro="Renders and manages EngineeringDashboard UI state"]
// CIL[DOC-CONTRACT input_spec="none" output_spec="JSX" side_effects="none"]
// CIL[DOC-STABILITY stability="experimental"]
interface CountCardProps {
  title: string
  count: number
  icon: React.ElementType
  onClick: () => void
}

function CountCard({ title, count, icon: Icon, onClick }: CountCardProps) {
  return (
    <Card className="cursor-pointer hover:bg-muted/50 transition-colors" onClick={onClick}>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <Icon className="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{count}</div>
      </CardContent>
    </Card>
  )
}

export default function EngineeringDashboard() {
  const navigate = useNavigate()
  const appPath = useAppPath()
  const { role } = useWorkbenchRole()
  const [counts, setCounts] = useState({
    workItems: 0,
    epics: 0,
    sprints: 0,
    parking: 0,
    docs: 0,
    testPlans: 0,
  })
  const [loading, setLoading] = useState(true)

  function matchesTeam(team: any) {
    const t = team || 'unassigned'
    return t === role || t === '*' || t === 'unassigned'
  }

  useEffect(() => {
    const load = async () => {
      try {
        const loadCount = async (typeSlug: string, filterFn?: (r: any) => boolean) => {
          const res = await apiFetch(`/api/admin-data?entity=items&type_slug=${typeSlug}&limit=500`)
          const json = await res.json()
          const data = Array.isArray(json?.data) ? json.data : []
          if (!filterFn) return data.length
          return data.filter(filterFn).length
        }
        const [workItems, epics, sprints, parking, docs, testPlans] = await Promise.all([
          loadCount('workbench_work_item', r => matchesTeam(r.data?.team)),
          loadCount('workbench_epic', r => matchesTeam(r.data?.team)),
          loadCount('workbench_sprint', r => matchesTeam(r.data?.team)),
          loadCount('workbench_work_item', r => r.status === 'parking' && matchesTeam(r.data?.team)),
          loadCount('workbench_work_item', r => r.data?.work_type === 'doc' && matchesTeam(r.data?.team)),
          loadCount('workbench_work_item', r => r.data?.work_type === 'test_plan' && matchesTeam(r.data?.team)),
        ])
        setCounts({ workItems, epics, sprints, parking, docs, testPlans })
      } catch {
        // ignore
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [role])

  const roleLabel = role ? role[0].toUpperCase() + role.slice(1) : 'Workbench'

  const cards = [
    { title: 'Kanban Board', count: counts.workItems, icon: ClipboardList, path: `/${role}/board` },
    { title: 'Epics', count: counts.epics, icon: Map, path: `/${role}/planning/epics` },
    { title: 'Sprints', count: counts.sprints, icon: Calendar, path: `/${role}/planning/sprints` },
    { title: 'Parking Lot', count: counts.parking, icon: CircleParking, path: `/${role}/parking-lot` },
    { title: 'Docs', count: counts.docs, icon: BookOpen, path: `/${role}/docs-tickets` },
    { title: 'Test Plans', count: counts.testPlans, icon: FlaskConical, path: `/${role}/test-plans` },
  ]

  return (
    <div className="p-4 lg:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <LayoutDashboard className="h-6 w-6 text-primary" />
          <h1 className="text-2xl font-bold tracking-tight">{roleLabel} Dashboard</h1>
        </div>
        <Button size="sm" onClick={() => navigate(appPath(`/${role}/planning/prioritization`))}>
          Open Prioritization
        </Button>
      </div>

      {loading ? (
        <div className="text-sm text-muted-foreground">Loading dashboard…</div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {cards.map(card => (
            <CountCard
              key={card.title}
              title={card.title}
              count={card.count}
              icon={card.icon}
              onClick={() => navigate(appPath(card.path))}
            />
          ))}
        </div>
      )}

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Quick Links</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-wrap gap-2">
          <Button variant="outline" size="sm" onClick={() => navigate(appPath(`/${role}/planning/prioritization`))}>Prioritization</Button>
          <Button variant="outline" size="sm" onClick={() => navigate(appPath(`/${role}/planning/backlog`))}>Backlog</Button>
          <Button variant="outline" size="sm" onClick={() => navigate(appPath(`/${role}/items/new`))}>New Work Item</Button>
          <Button variant="outline" size="sm" onClick={() => navigate(appPath(`/${role}/planning/epics/new`))}>New Epic</Button>
          <Button variant="outline" size="sm" onClick={() => navigate(appPath(`/${role}/planning/sprints/new`))}>New Sprint</Button>
        </CardContent>
      </Card>
    </div>
  )
}
// CIL[END chunk_id="EngineeringDashboard_engineeringDashboard_1784761401"]