// CIL[BEGIN chunk_id="WorkbenchDashboard_module_header_1784572423" type="module_header" identity="module_header" parent="none"]
import { useEffect, useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import { useAppPath } from '@core/hooks/useAppPath'
import { useNavigate } from 'react-router-dom'
import { useActiveSev1 } from '../hooks/useActiveSev1'
import {
  Siren,
  Wrench,
  Gauge,
  ShieldCheck,
  Truck,
  Library,
  ScrollText,
  LayoutDashboard,
} from 'lucide-react'
import { apiFetch } from '@core/lib/api'
// CIL[END chunk_id="WorkbenchDashboard_module_header_1784572423"]
// CIL[BEGIN chunk_id="WorkbenchDashboard_statcard_1784572423" type="function" identity="StatCard" parent="none"]
function StatCard({
  title,
  value,
  icon: Icon,
  href,
  alert,
}: {
  title: string
  value: string
  icon: React.ElementType
  href: string
  alert?: boolean
}) {
  const navigate = useNavigate()
  const appPath = useAppPath()
  return (
    <Card
      className={`cursor-pointer hover:shadow-md transition-shadow ${alert ? 'border-red-500 bg-red-50' : ''}`}
      onClick={() => navigate(appPath(href))}
    >
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className={`text-sm font-medium ${alert ? 'text-red-700' : 'text-muted-foreground'}`}>{title}</CardTitle>
        <Icon className={`h-4 w-4 ${alert ? 'text-red-600' : 'text-muted-foreground'}`} />
      </CardHeader>
      <CardContent>
        <div className={`text-3xl font-bold ${alert ? 'text-red-700' : ''}`}>{value}</div>
      </CardContent>
    </Card>
  )
}
// CIL[END chunk_id="WorkbenchDashboard_statcard_1784572423"]
// CIL[BEGIN chunk_id="WorkbenchDashboard_dashboard_1784572423" type="function" identity="WorkbenchDashboard" parent="none"]
export default function WorkbenchDashboard() {
  const activeSev1 = useActiveSev1()
  const [counts, setCounts] = useState<Record<string, number>>({})

  useEffect(() => {
    let cancelled = false
    async function load() {
      const endpoints = [
        { key: 'engineering', url: '/api/admin-data?entity=items&type_slug=workbench_work_item&status=active&limit=500' },
        { key: 'pipeline_runs', url: '/api/admin-data?entity=items&type_slug=workbench_pipeline_run&status=running&limit=200' },
        { key: 'deployments', url: '/api/admin-data?entity=items&type_slug=workbench_deployment&status=active&limit=200' },
        { key: 'services_unhealthy', url: '/api/admin-data?entity=items&type_slug=workbench_service&limit=200' },
        { key: 'test_cases', url: '/api/admin-data?entity=items&type_slug=workbench_test_case&limit=200' },
        { key: 'kb', url: '/api/admin-data?entity=items&type_slug=kb-spine-internal&limit=200' },
        { key: 'logs', url: '/api/admin-data?entity=logs&limit=1' },
      ]
      const next: Record<string, number> = {}
      await Promise.all(
        endpoints.map(async ({ key, url }) => {
          try {
            const r = await apiFetch(url)
            const json = await r.json()
            const items = Array.isArray(json?.data) ? json.data : []
            if (key === 'services_unhealthy') {
              next[key] = items.filter((i: any) => i.data?.health_status !== 'healthy' && i.data?.health_status !== 'unknown').length
            } else {
              next[key] = items.length
            }
          } catch {
            next[key] = 0
          }
        })
      )
      if (!cancelled) setCounts(next)
    }
    load()
    return () => { cancelled = true }
  }, [])

  const totalWorkItems = counts.engineering ?? '—'
  const devopsCount = (counts.pipeline_runs ?? 0) + (counts.deployments ?? 0) + (counts.services_unhealthy ?? 0)
  const qaCount = counts.test_cases ?? '—'
  const deliveryCount = counts.deployments ?? '—'
  const kbCount = counts.kb ?? '—'
  const logCount = counts.logs ?? '—'

  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Command Center</h1>
        <p className="text-muted-foreground">Engineering workbench overview</p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <StatCard title="Incident" value={activeSev1 ? 'Active SEV1' : 'All Clear'} icon={Siren} href="/incident/board" alert={activeSev1} />
        <StatCard title="Engineering Board" value={String(totalWorkItems)} icon={Wrench} href="/engineering/board" />
        <StatCard title="DEVOPS" value={String(devopsCount)} icon={Gauge} href="/devops/dashboard" />
        <StatCard title="QA" value={String(qaCount)} icon={ShieldCheck} href="/qa/dashboard" />
        <StatCard title="Delivery" value={String(deliveryCount)} icon={Truck} href="/delivery" />
        <StatCard title="Knowledge Base" value={String(kbCount)} icon={Library} href="/knowledge/dashboard" />
        <StatCard title="Logging" value={String(logCount)} icon={ScrollText} href="/logging/logs" />
        <StatCard title="Command Center" value={String(totalWorkItems)} icon={LayoutDashboard} href="/dashboard" />
      </div>
    </div>
  )
}
// CIL[END chunk_id="WorkbenchDashboard_dashboard_1784572423"]