'use client';

import { Stat, StatusDot } from '@/components/ui/primitives';
import { fmt, fmtBytes, fmtInt, fmtPct } from '@/lib/format';
import { Time } from '@/lib/time';
import type { AdminOverview } from '@/lib/types';
import { AdminPage, ErrorNote, Ok, Panel, useAdmin } from './shared';

export function Overview() {
  const { data: o, err, loading, reload } = useAdmin<AdminOverview>('/overview');
  return (
    <AdminPage
      title="Pipeline health"
      desc="Probes, ingest, stores, BGP collectors, engine timings and corroboration connectors. Everything here is about US, not about the Internet."
      right={
        <button type="button" onClick={reload} className="h-8 rounded-[4px] border border-line px-3 text-[12px] text-ink-2 hover:text-ink" disabled={loading}>
          {loading ? 'refreshing…' : 'refresh'}
        </button>
      }
    >
      <ErrorNote err={err} />
      {o && (
        <div className="grid grid-cols-[minmax(0,1fr)] gap-3 lg:grid-cols-2">
          <Panel title="Engine" right={<StatusDot status={o.engine.internal_status} />} className="lg:col-span-2">
            <div className="grid grid-cols-3 gap-4 sm:grid-cols-6">
              <Stat label="last run" value={<Time ts={o.engine.last_run} style="time" />} />
              <Stat label="cycle p50" value={`${fmtInt(o.engine.cycle_ms_p50)} ms`} />
              <Stat label="cycle max" value={<span style={{ color: o.engine.cycle_ms_max > 5000 ? 'var(--warn)' : undefined }}>{`${fmtInt(o.engine.cycle_ms_max)} ms`}</span>} />
              <Stat label="runs 1h" value={fmtInt(o.engine.runs_1h)} />
              <Stat label="errors 1h" value={<span style={{ color: o.engine.errors_1h ? 'var(--bad)' : undefined }}>{fmtInt(o.engine.errors_1h)}</span>} />
              <Stat label="excluded probes" value={o.engine.excluded_probes.length ? o.engine.excluded_probes.join(', ') : 'none'} />
            </div>
          </Panel>

          <Panel title="Probes" right={<span>{o.probes.filter((p) => p.status === 'online').length}/{o.probes.length} online</span>} className="lg:col-span-2">
            <div className="scroll-x">
              <table className="tbl">
                <thead>
                  <tr>
                    <th>Probe</th>
                    <th>Status</th>
                    <th className="r">Uptime 24h</th>
                    <th className="r">Clock</th>
                    <th className="r">Missing 1h</th>
                    <th className="r">Error rate 1h</th>
                    <th className="r">Buffered</th>
                    <th className="r">Spool</th>
                    <th>Version</th>
                    <th className="r">Last health</th>
                  </tr>
                </thead>
                <tbody>
                  {o.probes.map((p) => (
                    <tr key={p.probe_id}>
                      <td className="num text-ink">
                        {p.probe_id} <span className="text-ink-3">{p.region}</span>
                      </td>
                      <td>
                        <StatusDot status={p.status} />
                      </td>
                      <td className="num r" style={{ color: (p.health?.uptime_24h ?? 1) < 0.99 ? 'var(--warn)' : undefined }}>
                        {fmtPct(p.health?.uptime_24h, 2)}
                      </td>
                      <td className="num r" style={{ color: Math.abs(p.health?.clock_offset_ms ?? 0) > 50 ? 'var(--warn)' : undefined }}>
                        {p.health ? `${p.health.clock_offset_ms > 0 ? '+' : ''}${p.health.clock_offset_ms} ms` : '—'}
                      </td>
                      <td className="num r">{fmtPct(p.health?.missing_ratio_1h, 2)}</td>
                      <td className="num r" style={{ color: (p.health?.error_rate_1h ?? 0) > 0.05 ? 'var(--warn)' : undefined }}>
                        {fmtPct(p.health?.error_rate_1h, 2)}
                      </td>
                      <td className="num r" style={{ color: p.health?.buffered ? 'var(--warn)' : undefined }}>
                        {fmtInt(p.health?.buffered)}
                      </td>
                      <td className="num r text-ink-2">{fmtBytes(p.health?.spool_bytes)}</td>
                      <td className="num text-ink-2">{p.health?.version ?? p.version}</td>
                      <td className="num r text-ink-2">
                        <Time ts={p.health?.last_health ?? p.last_seen} style="time" />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Panel>

          <Panel title="Ingest">
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
              <Stat label="batches / min" value={fmtInt(o.ingest.batches_per_min)} />
              <Stat label="measurements / min" value={fmtInt(o.ingest.measurements_per_min)} />
              <Stat label="rejected / min" value={<span style={{ color: o.ingest.rejected_per_min ? 'var(--bad)' : undefined }}>{fmtInt(o.ingest.rejected_per_min)}</span>} />
              <Stat label="last batch" value={<Time ts={o.ingest.last_batch} style="time" />} />
            </div>
          </Panel>

          <Panel title="BGP" right={<Ok ok={o.bgp.fresh} label={o.bgp.fresh ? 'fresh' : 'stale'} />}>
            <div className="grid grid-cols-3 gap-4">
              <Stat label="messages / s" value={fmt(o.bgp.messages_per_s)} />
              <Stat label="collectors fresh" value={`${o.bgp.collectors.filter((c) => c.fresh).length}/${o.bgp.collectors.length}`} />
              <Stat label="reconnects 24h" value={fmtInt(o.bgp.reconnects_24h)} />
            </div>
            <ul className="mt-3 flex flex-wrap gap-1.5">
              {o.bgp.collectors.map((c) => (
                <li key={c.id} className="num rounded-[3px] border border-line px-1.5 py-0.5 text-[11px]" style={{ color: c.fresh ? 'var(--ink)' : 'var(--warn)' }} title={`${c.location} · ${c.peers} peers`}>
                  {c.id}
                </li>
              ))}
            </ul>
          </Panel>

          <Panel title="Stores" className="lg:col-span-2">
            <div className="grid grid-cols-3 gap-4">
              <Stat label="ClickHouse" value={<Ok ok={o.stores.clickhouse.ok} />} sub={`${fmt(o.stores.clickhouse.inserts_per_s)} inserts/s`} />
              <Stat label="Postgres" value={<Ok ok={o.stores.postgres.ok} />} sub={fmtBytes(o.stores.postgres.size_bytes)} />
              <Stat label="Redis" value={<Ok ok={o.stores.redis.ok} />} sub={`${fmtBytes(o.stores.redis.used_memory_bytes)} · ${fmtInt(o.stores.redis.keys)} keys`} />
            </div>
            <div className="scroll-x mt-3"><table className="tbl">
              <thead>
                <tr>
                  <th>ClickHouse table</th>
                  <th className="r">Rows</th>
                  <th className="r">Bytes</th>
                  <th className="r">Oldest</th>
                  <th className="r">Newest</th>
                </tr>
              </thead>
              <tbody>
                {o.stores.clickhouse.tables.map((t) => (
                  <tr key={t.name}>
                    <td className="num text-ink">{t.name}</td>
                    <td className="num r">{fmtInt(t.rows)}</td>
                    <td className="num r text-ink-2">{fmtBytes(t.bytes)}</td>
                    <td className="num r text-ink-2">
                      <Time ts={t.oldest} style="date" />
                    </td>
                    <td className="num r text-ink-2">
                      <Time ts={t.newest} style="time" />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            </div>
          </Panel>

          <Panel title="Corroboration connectors" className="lg:col-span-2">
            <div className="scroll-x">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Connector</th>
                  <th>State</th>
                  <th className="r">Last fetch</th>
                  <th className="r">Incidents declared</th>
                </tr>
              </thead>
              <tbody>
                {o.corroboration.map((c) => (
                  <tr key={c.id}>
                    <td className="text-ink">
                      {c.name} <span className="num text-ink-3">{c.id}</span>
                    </td>
                    <td>
                      <Ok ok={c.ok} />
                    </td>
                    <td className="num r text-ink-2">
                      <Time ts={c.last_fetch} style="time" />
                    </td>
                    <td className="num r">{fmtInt(c.incidents)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            </div>
          </Panel>
        </div>
      )}
    </AdminPage>
  );
}