// CIL[BEGIN chunk_id="ServicesPage_module_header_1785000051" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="Render the Workbench Services observability page"]
// CIL[DOC-RESPONSIBILITY responsibility="Show service health derived from trace root_span_name aggregates"]
// CIL[DOC-CONTEXT module="workbench.pages.observe.ServicesPage" layer="frontend-page" related_files="[\"custom/apps/workbench/functions/custom_workbench-observability.ts\",\"custom/apps/workbench/pages/observe/UptimePage.tsx\"]"]
// CIL[DOC-CONTRACT inputs="none" outputs="JSX Services page" errors="fetch errors rendered inline" side_effects="calls /api/custom_workbench-observability"]
// CIL[DOC-MICRO logic_summary="Provides a time range selector, fetches trace stats, aggregates health by root_span_name, and renders summary cards and a service health table" notable_decisions=["Treats each distinct root_span_name as a service","Health is based on error rate thresholds"]]
// CIL[DOC-CONFIDENCE pass="first" score="0.90" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]
import { useEffect, useMemo, useState, Fragment } from 'react'
import { apiFetch } from '@core/lib/api'
import { formatDateTime, formatNumber } from '@core/lib/utils'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import { NativeSelect } from '@core/components/ui/native-select'
import { LoadingSpinner } from '@core/components/ui/LoadingSpinner'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@core/components/ui/table'
import { Pagination } from '../../components/Pagination'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  Cell,
  CartesianGrid,
} from 'recharts'
import { Server, Activity, AlertTriangle, CheckCircle, ChevronDown, ChevronRight } from 'lucide-react'
// CIL[END chunk_id="ServicesPage_module_header_1785000051"]

// CIL[BEGIN chunk_id="ServicesPage_servicesPage_1785000051" type="function" identity="ServicesPage" parent="ServicesPage_module_header_1785000051"]
// CIL[DOC-MACRO purpose="Services observability page implementation"]
// CIL[DOC-RESPONSIBILITY responsibility="Aggregate trace stats by service and display health"]
// CIL[DOC-CONTEXT module="workbench.pages.observe.ServicesPage" layer="frontend-page" related_files="[\"custom/apps/workbench/functions/custom_workbench-observability.ts\"]"]
// CIL[DOC-CONTRACT inputs="none" outputs="JSX" errors="fetch errors rendered inline" side_effects="network requests on mount and range change"]
// CIL[DOC-MICRO logic_summary="Fetches trace stats for the selected range, aggregates counts and durations by root_span_name, and renders health cards and a sorted service table" notable_decisions=["Services with >5% error rate are degraded, >20% are erroring"]]
// CIL[DOC-CONFIDENCE pass="first" score="0.90" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]

const RANGE_OPTIONS = [
  { label: 'Last hour', value: '1h', ms: 60 * 60 * 1000 },
  { label: 'Last 24 hours', value: '24h', ms: 24 * 60 * 60 * 1000 },
  { label: 'Last 7 days', value: '7d', ms: 7 * 24 * 60 * 60 * 1000 },
  { label: 'Last 30 days', value: '30d', ms: 30 * 24 * 60 * 60 * 1000 },
]

function rangeDates(value: string) {
  const now = new Date()
  const option = RANGE_OPTIONS.find((o) => o.value === value) || RANGE_OPTIONS[1]
  return {
    from: new Date(now.getTime() - option.ms).toISOString(),
    to: now.toISOString(),
  }
}

interface TraceRow {
  trace_id: string
  root_span_name: string
  started_at: string
  duration_ms: number
  span_count: number
  error_count: number
  outcome: string
}

interface ServiceHealth {
  name: string
  traces: number
  errors: number
  avg_duration_ms: number
  last_started_at: string
  error_rate: number
}

function ServiceTraces({ serviceName, traces }: { serviceName: string; traces: TraceRow[] }) {
  const serviceTraces = traces
    .filter((t) => (t.root_span_name || 'unknown') === serviceName)
    .sort((a, b) => new Date(b.started_at).getTime() - new Date(a.started_at).getTime())
    .slice(0, 10)

  if (serviceTraces.length === 0) {
    return <p className="text-xs text-muted-foreground">No recent traces for this service.</p>
  }

  return (
    <div className="overflow-auto max-h-72">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Trace</TableHead>
            <TableHead>Started</TableHead>
            <TableHead className="text-right">Duration</TableHead>
            <TableHead className="text-right">Errors</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {serviceTraces.map((row) => (
            <TableRow key={row.trace_id}>
              <TableCell className="font-mono text-xs">{row.trace_id?.slice(0, 8)}…</TableCell>
              <TableCell className="text-xs text-muted-foreground">{formatDateTime(row.started_at)}</TableCell>
              <TableCell className="text-right text-sm">{row.duration_ms.toFixed(0)} ms</TableCell>
              <TableCell className="text-right text-sm">{formatNumber(row.error_count)}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

export default function ServicesPage() {
  const [range, setRange] = useState('24h')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [traces, setTraces] = useState<TraceRow[]>([])
  const [servicePage, setServicePage] = useState(1)
  const [servicePageSize, setServicePageSize] = useState(10)
  const [serviceExpanded, setServiceExpanded] = useState<string | null>(null)

  const load = async () => {
    const { from, to } = rangeDates(range)
    setLoading(true)
    setError(null)
    try {
      const res = await apiFetch(`/api/custom_workbench-observability?action=traces&date_from=${encodeURIComponent(from)}&date_to=${encodeURIComponent(to)}`)
      const json = await res.json()
      if (json.error) throw new Error(json.error)
      const tracePayload = json.data || { data: [], total: 0 }
      setTraces((tracePayload.data || []).map((r: any) => ({
        ...r,
        duration_ms: Number(r.duration_ms || 0),
        span_count: Number(r.span_count || 0),
        error_count: Number(r.error_count || 0),
      })))
    } catch (e: any) {
      setError(e.message || 'Failed to load service data')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    load()
    setServicePage(1)
  }, [range])

  const services = useMemo<ServiceHealth[]>(() => {
    const map = new Map<string, { count: number; errors: number; durationSum: number; last: string }>()
    traces.forEach((t) => {
      const name = t.root_span_name || 'unknown'
      const existing = map.get(name) || { count: 0, errors: 0, durationSum: 0, last: '' }
      existing.count += 1
      existing.errors += t.error_count
      existing.durationSum += t.duration_ms
      if (!existing.last || t.started_at > existing.last) existing.last = t.started_at
      map.set(name, existing)
    })
    return Array.from(map.entries())
      .map(([name, data]) => ({
        name,
        traces: data.count,
        errors: data.errors,
        avg_duration_ms: data.count ? data.durationSum / data.count : 0,
        last_started_at: data.last,
        error_rate: data.count ? data.errors / data.count : 0,
      }))
      .sort((a, b) => b.error_rate - a.error_rate || b.traces - a.traces)
  }, [traces])

  const pagedServices = useMemo(() => {
    const start = (servicePage - 1) * servicePageSize
    return services.slice(start, start + servicePageSize)
  }, [services, servicePage, servicePageSize])

  const chartData = useMemo(
    () =>
      services
        .slice(0, 10)
        .map((s) => ({ name: s.name, error_rate: Number((s.error_rate * 100).toFixed(1)) }))
        .sort((a, b) => b.error_rate - a.error_rate),
    [services]
  )

  const healthy = services.filter((s) => s.error_rate < 0.05)
  const degraded = services.filter((s) => s.error_rate >= 0.05 && s.error_rate < 0.2)
  const erroring = services.filter((s) => s.error_rate >= 0.2)

  function healthBadge(s: ServiceHealth) {
    if (s.error_rate >= 0.2) {
      return <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-red-100 text-red-700">Erroring</span>
    }
    if (s.error_rate >= 0.05) {
      return <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-700">Degraded</span>
    }
    return <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-green-100 text-green-700">Healthy</span>
  }

  return (
    <div className="p-4 lg:p-6 space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className="flex items-center gap-3">
          <Server className="h-6 w-6 text-primary" />
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Services</h1>
            <p className="text-sm text-muted-foreground">Service health and trace aggregates</p>
          </div>
        </div>
        <NativeSelect value={range} onChange={(e) => setRange(e.target.value)} className="w-40">
          {RANGE_OPTIONS.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </NativeSelect>
      </div>

      {error && (
        <div className="rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
          {error}
        </div>
      )}

      {loading && !services.length && (
        <div className="flex items-center justify-center py-12">
          <LoadingSpinner className="w-8 h-8" />
        </div>
      )}

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Services</CardTitle>
            <Server className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{formatNumber(services.length)}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-green-700">Healthy</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-green-700">{formatNumber(healthy.length)}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-amber-700">Degraded</CardTitle>
            <Activity className="h-4 w-4 text-amber-600" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-amber-700">{formatNumber(degraded.length)}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-red-700">Erroring</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-red-700">{formatNumber(erroring.length)}</div>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Top Service Error Rates</CardTitle>
        </CardHeader>
        <CardContent>
          {chartData.length === 0 ? (
            <p className="text-sm text-muted-foreground">No service data for the selected range.</p>
          ) : (
            <div className="h-64">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={chartData} layout="vertical" margin={{ left: 80, right: 20, top: 10, bottom: 10 }}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
                  <XAxis type="number" tick={{ fontSize: 11 }} unit="%" />
                  <YAxis
                    type="category"
                    dataKey="name"
                    tick={{ fontSize: 11 }}
                    width={120}
                  />
                  <Tooltip formatter={(value: any) => [`${value}%`, 'Error rate']} />
                  <Bar dataKey="error_rate" radius={[0, 4, 4, 0]}>
                    {chartData.map((entry, index) => (
                      <Cell
                        key={`cell-${index}`}
                        fill={entry.error_rate >= 20 ? '#ef4444' : entry.error_rate >= 5 ? '#f59e0b' : '#22c55e'}
                      />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Service Health</CardTitle>
        </CardHeader>
        <CardContent>
          {services.length === 0 ? (
            <p className="text-sm text-muted-foreground">No services recorded in the selected range.</p>
          ) : (
            <div className="overflow-auto max-h-96">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-8"></TableHead>
                    <TableHead>Service</TableHead>
                    <TableHead className="text-right">Traces</TableHead>
                    <TableHead className="text-right">Errors</TableHead>
                    <TableHead className="text-right">Error Rate</TableHead>
                    <TableHead className="text-right">Avg Duration</TableHead>
                    <TableHead>Last Seen</TableHead>
                    <TableHead>Health</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {pagedServices.map((s) => (
                    <Fragment key={s.name}>
                      <TableRow
                        className="cursor-pointer hover:bg-muted/50"
                        onClick={() => setServiceExpanded(serviceExpanded === s.name ? null : s.name)}
                      >
                        <TableCell>
                          {serviceExpanded === s.name ? (
                            <ChevronDown className="h-4 w-4 text-muted-foreground" />
                          ) : (
                            <ChevronRight className="h-4 w-4 text-muted-foreground" />
                          )}
                        </TableCell>
                        <TableCell className="text-sm font-medium">{s.name}</TableCell>
                        <TableCell className="text-right text-sm">{formatNumber(s.traces)}</TableCell>
                        <TableCell className="text-right text-sm">{formatNumber(s.errors)}</TableCell>
                        <TableCell className="text-right text-sm">{(s.error_rate * 100).toFixed(1)}%</TableCell>
                        <TableCell className="text-right text-sm">{s.avg_duration_ms.toFixed(0)} ms</TableCell>
                        <TableCell className="text-xs text-muted-foreground">{formatDateTime(s.last_started_at)}</TableCell>
                        <TableCell>{healthBadge(s)}</TableCell>
                      </TableRow>
                      {serviceExpanded === s.name && (
                        <TableRow>
                          <TableCell colSpan={8} className="bg-muted/30 p-4">
                            <ServiceTraces serviceName={s.name} traces={traces} />
                          </TableCell>
                        </TableRow>
                      )}
                    </Fragment>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
          <Pagination
            page={servicePage}
            pageSize={servicePageSize}
            total={services.length}
            onChange={setServicePage}
            onPageSizeChange={setServicePageSize}
          />
        </CardContent>
      </Card>
    </div>
  )
}
// CIL[END chunk_id="ServicesPage_servicesPage_1785000051"]