// CIL[BEGIN chunk_id="PerformancePage_module_header_1785000031" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="Render the Workbench Performance observability page"]
// CIL[DOC-RESPONSIBILITY responsibility="Load handler duration, request count, and error rate series plus trace stats, then render charts and a slowest-traces table"]
// CIL[DOC-CONTEXT module="workbench.pages.observe.PerformancePage" layer="frontend-page" related_files="[\"custom/apps/workbench/functions/custom_workbench-observability.ts\",\"custom/apps/workbench/components/MetricChart.tsx\"]"]
// CIL[DOC-CONTRACT inputs="none" outputs="JSX Performance page" errors="fetch errors rendered inline" side_effects="calls /api/custom_workbench-observability"]
// CIL[DOC-MICRO logic_summary="Provides a time range selector, fetches three metric series and trace stats, computes duration percentiles, and displays charts and a slowest traces table" notable_decisions=["Reuses MetricChart component","Computes P95 from trace duration_ms array"]]
// 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, cn } 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 { MetricChart } from '../../components/MetricChart'
import { Pagination } from '../../components/Pagination'
import { TraceTree } from '../../components/TraceTree'
import { TrendingUp, Activity, Clock, AlertTriangle, Gauge, ChevronDown, ChevronRight } from 'lucide-react'
// CIL[END chunk_id="PerformancePage_module_header_1785000031"]

// CIL[BEGIN chunk_id="PerformancePage_performancePage_1785000031" type="function" identity="PerformancePage" parent="PerformancePage_module_header_1785000031"]
// CIL[DOC-MACRO purpose="Performance observability page implementation"]
// CIL[DOC-RESPONSIBILITY responsibility="Fetch and display performance metrics and slowest traces"]
// CIL[DOC-CONTEXT module="workbench.pages.observe.PerformancePage" layer="frontend-page" related_files="[\"custom/apps/workbench/pages/observe/UptimePage.tsx\"]"]
// 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 metric series and trace stats for the selected range, renders metric charts, summary cards, and a slowest traces table" notable_decisions=["Uses 1 hour granularity for ranges up to 7 days, 1 day for 30 days"]]
// 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(),
  }
}

function granularityFor(range: string) {
  return range === '30d' ? '1 day' : '1 hour'
}

function percentile(values: number[], p: number) {
  if (values.length === 0) return 0
  const sorted = [...values].sort((a, b) => a - b)
  const idx = Math.max(0, Math.ceil((p / 100) * sorted.length) - 1)
  return sorted[idx]
}

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

export default function PerformancePage() {
  const [range, setRange] = useState('24h')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [avgDuration, setAvgDuration] = useState<any[]>([])
  const [requests, setRequests] = useState<any[]>([])
  const [errorRate, setErrorRate] = useState<any[]>([])
  const [traces, setTraces] = useState<TraceRow[]>([])
  const [tracePage, setTracePage] = useState(1)
  const [tracePageSize, setTracePageSize] = useState(10)
  const [traceExpanded, setTraceExpanded] = useState<string | null>(null)

  const load = async () => {
    const { from, to } = rangeDates(range)
    const granularity = granularityFor(range)
    setLoading(true)
    setError(null)
    try {
      const base = `/api/custom_workbench-observability?date_from=${encodeURIComponent(from)}&date_to=${encodeURIComponent(to)}`
      const [avgRes, reqRes, errRes, traceRes] = await Promise.all([
        apiFetch(`${base}&action=metric&metric_name=avg_handler_duration&granularity=${encodeURIComponent(granularity)}`),
        apiFetch(`${base}&action=metric&metric_name=request_count&granularity=${encodeURIComponent(granularity)}`),
        apiFetch(`${base}&action=metric&metric_name=error_rate&granularity=${encodeURIComponent(granularity)}`),
        apiFetch(`${base}&action=traces`),
      ])
      const [avgJson, reqJson, errJson, traceJson] = await Promise.all([
        avgRes.json(),
        reqRes.json(),
        errRes.json(),
        traceRes.json(),
      ])
      if (avgJson.error) throw new Error(avgJson.error)
      if (reqJson.error) throw new Error(reqJson.error)
      if (errJson.error) throw new Error(errJson.error)
      if (traceJson.error) throw new Error(traceJson.error)
      setAvgDuration((avgJson.data || []).map((r: any) => ({ bucket: r.bucket, value: Number(r.value) })))
      setRequests((reqJson.data || []).map((r: any) => ({ bucket: r.bucket, value: Number(r.value) })))
      setErrorRate((errJson.data || []).map((r: any) => ({ bucket: r.bucket, value: Number(r.value) })))
      const tracePayload = traceJson.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 performance data')
    } finally {
      setLoading(false)
    }
  }

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

  const durations = useMemo(() => traces.map((t) => t.duration_ms).filter((v) => v > 0), [traces])
  const avgDur = useMemo(() => (durations.length ? durations.reduce((a, b) => a + b, 0) / durations.length : 0), [durations])
  const p95 = useMemo(() => percentile(durations, 95), [durations])
  const maxDur = useMemo(() => (durations.length ? Math.max(...durations) : 0), [durations])
  const totalRequests = useMemo(() => requests.reduce((sum, r) => sum + r.value, 0), [requests])
  const totalErrors = useMemo(() => traces.reduce((sum, t) => sum + t.error_count, 0), [traces])
  const sortedTraces = useMemo(() => [...traces].sort((a, b) => b.duration_ms - a.duration_ms), [traces])
  const slowestTraces = useMemo(() => {
    const start = (tracePage - 1) * tracePageSize
    return sortedTraces.slice(start, start + tracePageSize)
  }, [sortedTraces, tracePage, tracePageSize])

  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">
          <TrendingUp className="h-6 w-6 text-primary" />
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Performance</h1>
            <p className="text-sm text-muted-foreground">Handler durations, throughput, and slow traces</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 && !requests.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">Avg Duration</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{avgDur.toFixed(0)} ms</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">P95 Duration</CardTitle>
            <Gauge className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{p95.toFixed(0)} ms</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Max Duration</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{maxDur.toFixed(0)} ms</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Total Requests</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{formatNumber(totalRequests)}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-red-700">Error Traces</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-red-700">{formatNumber(totalErrors)}</div>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <MetricChart
          title="Avg Handler Duration"
          data={avgDuration}
          dataKey="Duration"
          color="#10b981"
          formatter={(v) => `${Number(v).toFixed(0)} ms`}
          yTickFormatter={(v) => `${Number(v).toFixed(0)} ms`}
        />
        <MetricChart
          title="Request Volume"
          data={requests}
          dataKey="Requests"
          color="#3b82f6"
          formatter={(v) => formatNumber(Number(v))}
        />
        <MetricChart
          title="Error Rate"
          data={errorRate}
          dataKey="Error rate"
          color="#ef4444"
          formatter={(v) => `${(Number(v) * 100).toFixed(1)}%`}
          yTickFormatter={(v) => `${(Number(v) * 100).toFixed(0)}%`}
        />
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Slowest Traces</CardTitle>
        </CardHeader>
        <CardContent>
          {slowestTraces.length === 0 ? (
            <p className="text-sm text-muted-foreground">No traces in the selected range.</p>
          ) : (
            <>
              <div className="overflow-auto max-h-96">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-8"></TableHead>
                      <TableHead>Trace</TableHead>
                      <TableHead>Root Span</TableHead>
                      <TableHead>Started</TableHead>
                      <TableHead className="text-right">Duration</TableHead>
                      <TableHead className="text-right">Spans</TableHead>
                      <TableHead className="text-right">Errors</TableHead>
                      <TableHead>Outcome</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {slowestTraces.map((row) => (
                      <Fragment key={row.trace_id}>
                        <TableRow
                          className="cursor-pointer hover:bg-muted/50"
                          onClick={() => setTraceExpanded(traceExpanded === row.trace_id ? null : row.trace_id)}
                        >
                          <TableCell>
                            {traceExpanded === row.trace_id ? (
                              <ChevronDown className="h-4 w-4 text-muted-foreground" />
                            ) : (
                              <ChevronRight className="h-4 w-4 text-muted-foreground" />
                            )}
                          </TableCell>
                          <TableCell className="font-mono text-xs">{row.trace_id?.slice(0, 8)}…</TableCell>
                          <TableCell className="text-sm">{row.root_span_name || '—'}</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.span_count)}</TableCell>
                          <TableCell className="text-right text-sm">{formatNumber(row.error_count)}</TableCell>
                          <TableCell>
                            <span
                              className={cn(
                                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
                                row.error_count > 0 || row.outcome === 'failure'
                                  ? 'bg-red-100 text-red-700'
                                  : 'bg-green-100 text-green-700'
                              )}
                            >
                              {row.error_count > 0 || row.outcome === 'failure' ? 'Error' : 'OK'}
                            </span>
                          </TableCell>
                        </TableRow>
                        {traceExpanded === row.trace_id && (
                          <TableRow>
                            <TableCell colSpan={8} className="bg-muted/30 p-4">
                              <TraceTree traceId={row.trace_id} />
                            </TableCell>
                          </TableRow>
                        )}
                      </Fragment>
                    ))}
                  </TableBody>
                </Table>
              </div>
              <Pagination
                page={tracePage}
                pageSize={tracePageSize}
                total={traces.length}
                onChange={setTracePage}
                onPageSizeChange={setTracePageSize}
              />
            </>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
// CIL[END chunk_id="PerformancePage_performancePage_1785000031"]