import type { Metadata } from 'next';
import { ProbesTable } from '@/components/detail/Tables';
import { MapIsland } from '@/components/map/MapIsland';
import { Section, Stat } from '@/components/ui/primitives';
import { apiGet, apiTry } from '@/lib/api';
import { fmtInt, fmtPct } from '@/lib/format';
import type { Latency, Probe, Region } from '@/lib/types';

export const dynamic = 'force-dynamic';
export const metadata: Metadata = { title: 'Probe network', description: 'The InternetPressure Observability Network: our own measurement probes, where they sit, who hosts them, and whether they are fresh.' };

export default async function ProbesPage() {
  const [{ probes }, regions, latency] = await Promise.all([apiGet<{ probes: Probe[] }>('/api/v1/probes'), apiTry<{ regions: Region[] }>('/api/v1/pressure/regions'), apiTry<Latency>('/api/v1/latency')]);
  const online = probes.filter((p) => p.status === 'online').length;
  const regionsCovered = new Set(probes.map((p) => p.region)).size;
  const countries = new Set(probes.map((p) => p.country)).size;
  const meas = probes.reduce((a, p) => a + p.measurements_1h, 0);
  const uptime = probes.length ? probes.reduce((a, p) => a + p.uptime_24h, 0) / probes.length : null;
  const byProbe = new Map((latency?.by_probe ?? []).map((b) => [b.probe_id, b]));
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">Observability network</p>
        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">Probes</h1>
        <p className="mt-1 max-w-[760px] text-[13px] text-ink-2">Lightweight Go agents running as ordinary clients from MacLustr (Québec), OVHcloud (Québec, France) and rented hosts abroad. They never scan, never bypass anything and never send more traffic than a normal user would. Positions are approximate on purpose.</p>
        <div className="mt-4 grid grid-cols-3 gap-4 sm:grid-cols-6">
          <Stat label="online" value={<span style={{ color: online < probes.length ? 'var(--warn)' : undefined }}>{`${online}/${probes.length}`}</span>} />
          <Stat label="regions" value={fmtInt(regionsCovered)} />
          <Stat label="countries" value={fmtInt(countries)} />
          <Stat label="measurements / h" value={fmtInt(meas)} />
          <Stat label="avg uptime 24h" value={fmtPct(uptime, 2)} />
          <Stat label="capabilities" value="http · dns · ping · tr" />
        </div>
      </header>
      <Section label="Map">
        <MapIsland initial={{ regions: regions?.regions ?? null, countries: null, probes, fronts: null, incidents: null, matrix: latency?.matrix ?? null }} initialMode="probes" height="h-[280px] sm:h-[380px]" />
      </Section>
      <Section label="Network" right={<span>{fmtInt(probes.length)} probes</span>}>
        <ProbesTable probes={probes} />
      </Section>
      {latency && (
        <Section label="Per-probe latency view" right={<span>medians over the current window · z vs each probe&apos;s own baseline</span>}>
          <div className="scroll-x -mx-3 px-3">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Probe</th>
                  <th className="r">RTT p50</th>
                  <th className="r">TTFB p50</th>
                  <th className="r">Loss</th>
                  <th className="r">z</th>
                </tr>
              </thead>
              <tbody>
                {probes.map((p) => {
                  const b = byProbe.get(p.probe_id);
                  return (
                    <tr key={p.probe_id}>
                      <td className="num text-ink">{p.probe_id}</td>
                      <td className="num r">{b ? `${b.rtt_ms_median.toFixed(1)} ms` : '—'}</td>
                      <td className="num r">{b ? `${b.ttfb_ms_median.toFixed(1)} ms` : '—'}</td>
                      <td className="num r" style={{ color: b && b.loss_pct >= 1 ? 'var(--p-high)' : undefined }}>
                        {b ? `${b.loss_pct.toFixed(1)} %` : '—'}
                      </td>
                      <td className="num r" style={{ color: b && Math.abs(b.z) >= 3 ? 'var(--p-high)' : undefined }}>
                        {b ? b.z.toFixed(1) : '—'}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Section>
      )}
    </div>
  );
}