// CIL[BEGIN chunk_id="SignalsPage_module_header_1785000141" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="Render the Workbench Signals observability page with range filtering, a signals-over-time chart, and a paginated expandable signal list"]
// CIL[DOC-RESPONSIBILITY responsibility="Fetch workbench_signal records, filter by selected time range, display a time-series chart, and paginate/expand the signal list"]
// CIL[DOC-CONTEXT module="workbench.pages.observe.SignalsPage" layer="frontend-page" related_files="[\"custom/apps/workbench/components/Pagination.tsx\",\"custom/apps/workbench/components/MetricChart.tsx\"]"]
// CIL[DOC-CONTRACT inputs="none" outputs="JSX Signals page" errors="fetch errors rendered inline" side_effects="calls /api/admin-data"]
// CIL[DOC-MICRO logic_summary="Provides a time range selector, fetches workbench_signal records, buckets counts by hour or day, and renders a chart, summary cards, and a paginated list" notable_decisions=["Buckets signals by startOfHour for 1h/24h ranges and startOfDay for 7d/30d","Expands a row to show the raw record data"]]
// 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 { MetricChart } from '../../components/MetricChart'
import { Pagination } from '../../components/Pagination'
import { Siren, Signal, AlertTriangle, CheckCircle, ChevronDown, ChevronRight } from 'lucide-react'
import { format, parseISO, startOfHour, startOfDay } from 'date-fns'
// CIL[END chunk_id="SignalsPage_module_header_1785000141"]

// CIL[BEGIN chunk_id="SignalsPage_signalspage_1785000141" type="function" identity="SignalsPage" parent="SignalsPage_module_header_1785000141"]
// CIL[DOC-MACRO purpose="Signals observability page implementation"]
// CIL[DOC-RESPONSIBILITY responsibility="Display signals filtered by time range with a chart and paginated list"]
// CIL[DOC-CONTEXT module="workbench.pages.observe.SignalsPage" layer="frontend-page" related_files="[\"custom/apps/workbench/index.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 signals, filters to the selected range, computes chart data and severity counts, and renders a chart, cards, and a paginated expandable list" notable_decisions=[]]
// 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),
    to: now,
  }
}

function bucketSignal(signal: any, range: string) {
  const created = signal.created_at ? parseISO(signal.created_at) : new Date()
  return range === '7d' || range === '30d'
    ? startOfDay(created).toISOString()
    : startOfHour(created).toISOString()
}

export default function SignalsPage() {
  const [range, setRange] = useState('24h')
  const [signals, setSignals] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [expanded, setExpanded] = useState<string | null>(null)

  useEffect(() => {
    setLoading(true)
    setError(null)
    setPage(1)
    apiFetch('/api/admin-data?entity=items&type_slug=workbench_signal&limit=1000')
      .then((r) => r.json())
      .then((json) => setSignals(Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : []))
      .catch((e) => setError(e.message || 'Failed to load signals'))
      .finally(() => setLoading(false))
  }, [range])

  const { from, to } = useMemo(() => rangeDates(range), [range])

  const filteredSignals = useMemo(() => {
    return signals.filter((s) => {
      const created = s.created_at ? parseISO(s.created_at) : null
      return created && created >= from && created <= to
    })
  }, [signals, from, to])

  const chartData = useMemo(() => {
    const buckets: Record<string, number> = {}
    filteredSignals.forEach((s) => {
      const key = bucketSignal(s, range)
      buckets[key] = (buckets[key] || 0) + 1
    })
    return Object.entries(buckets)
      .map(([bucket, value]) => ({ bucket, value }))
      .sort((a, b) => new Date(a.bucket).getTime() - new Date(b.bucket).getTime())
  }, [filteredSignals, range])

  const activeSignals = filteredSignals.filter((s) => s.status === 'open' || s.status === 'active')
  const resolvedSignals = filteredSignals.filter((s) => s.status === 'resolved' || s.status === 'closed')
  const errorSignals = filteredSignals.filter((s) => s.status === 'error' || s.status === 'critical')

  const pagedSignals = useMemo(() => {
    const start = (page - 1) * pageSize
    return filteredSignals.slice(start, start + pageSize)
  }, [filteredSignals, page, pageSize])

  function signalBadge(status: string) {
    if (status === 'error' || status === 'critical') {
      return <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-red-100 text-red-700">{status}</span>
    }
    if (status === 'open' || status === 'active') {
      return <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-700">{status}</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">{status || 'ok'}</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">
          <Signal className="h-6 w-6 text-primary" />
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Signals</h1>
            <p className="text-sm text-muted-foreground">Operational signals and alerts over time</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 && !signals.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">Signals</CardTitle>
            <Siren className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">{formatNumber(filteredSignals.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">Active</CardTitle>
            <Signal className="h-4 w-4 text-amber-600" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-amber-700">{formatNumber(activeSignals.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">Critical</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-red-700">{formatNumber(errorSignals.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">Resolved</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-green-700">{formatNumber(resolvedSignals.length)}</div>
          </CardContent>
        </Card>
      </div>

      <MetricChart
        title="Signals Over Time"
        data={chartData}
        dataKey="Signals"
        color="#3b82f6"
        formatter={(v) => formatNumber(Number(v))}
      />

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Signal List</CardTitle>
        </CardHeader>
        <CardContent>
          {pagedSignals.length === 0 ? (
            <p className="text-sm text-muted-foreground">No signals in the selected range.</p>
          ) : (
            <>
              <div className="overflow-auto max-h-96">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-8"></TableHead>
                      <TableHead>Signal</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Source</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Created</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {pagedSignals.map((s) => (
                      <Fragment key={s.id}>
                        <TableRow
                          className="cursor-pointer hover:bg-muted/50"
                          onClick={() => setExpanded(expanded === s.id ? null : s.id)}
                        >
                          <TableCell>
                            {expanded === s.id ? (
                              <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.title || 'Untitled'}</TableCell>
                          <TableCell className="text-sm">{s.data?.signal_type || '—'}</TableCell>
                          <TableCell className="text-sm">{s.data?.source_app || '—'}</TableCell>
                          <TableCell>{signalBadge(s.status)}</TableCell>
                          <TableCell className="text-xs text-muted-foreground">{formatDateTime(s.created_at)}</TableCell>
                        </TableRow>
                        {expanded === s.id && (
                          <TableRow>
                            <TableCell colSpan={6} className="bg-muted/30 p-4">
                              <pre className="text-xs overflow-auto">{JSON.stringify(s, null, 2)}</pre>
                            </TableCell>
                          </TableRow>
                        )}
                      </Fragment>
                    ))}
                  </TableBody>
                </Table>
              </div>
              <Pagination
                page={page}
                pageSize={pageSize}
                total={filteredSignals.length}
                onChange={setPage}
                onPageSizeChange={setPageSize}
              />
            </>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
// CIL[END chunk_id="SignalsPage_signalspage_1785000141"]