import Link from "next/link";
import type { Metadata } from "next";
import { Chip, Empty, HealthPill, PageHeader, Panel, Stat, Table, Td } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtBytes, fmtInt, fmtMs, fmtPct, relTime, utcDateTime, utcTime } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Connector health", description: "Live health of every connector family and sensor: success rate, latency, HTTP codes, noise ratios, queue depth and engine heartbeat." };

/** A heartbeat older than two minutes means the scheduler stopped publishing. */
function heartbeatStale(at: string | undefined): boolean {
  return Boolean(at) && Date.now() - new Date(at as string).getTime() > 120_000;
}

export default async function HealthPage() {
  const h = await api.health();
  const byHealth = Object.fromEntries((h?.sensors_by_health ?? []).map((x) => [x.health, x.n]));
  const tp = h?.throughput;
  const eng = h?.engine ?? null;
  const engStale = heartbeatStale(eng?.at);
  const healthy = byHealth.UP ?? 0;
  const degraded = (byHealth.DEGRADED ?? 0) + (byHealth.RATE_LIMITED ?? 0);
  const failed = byHealth.ERROR ?? 0;
  return (
    <>
      <PageHeader compact kicker="Public observability" title="Connector health" description="Every connector exposes UP / DEGRADED / ERROR / RATE_LIMITED with 24 h success rate, latency, changes and events. Noisy sensors point to canonicalizer work, not more LLM calls." />

      <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-4 xl:grid-cols-8 xl:divide-y-0">
        <Stat label="Healthy" value={fmtInt(healthy)} tone="signal" hint="sensors UP" />
        <Stat label="Degraded" value={fmtInt(degraded)} tone={degraded ? "warn" : undefined} hint={`${fmtInt(byHealth.RATE_LIMITED ?? 0)} rate-limited`} />
        <Stat label="Failed" value={fmtInt(failed)} tone={failed ? "hot" : undefined} hint="consecutive errors" />
        <Stat label="Checks / min" value={tp ? tp.checks_per_min.toFixed(1) : "—"} hint={tp ? `${fmtInt(tp.checks_5m)} in 5 min` : undefined} />
        <Stat label="Events / min" value={tp ? tp.events_per_min.toFixed(2) : "—"} tone="signal" hint={tp ? `${fmtInt(tp.events_5m)} in 5 min · ${fmtInt(tp.changes_5m)} raw` : undefined} />
        <Stat label="304 ratio" value={fmtPct(tp?.not_modified_ratio ?? null)} hint="conditional GET hits · 5 min" />
        <Stat label="Queue depth" value={fmtInt(tp?.queue_due ?? 0)} tone={(tp?.queue_due ?? 0) > 500 ? "warn" : undefined} hint="sensors due now" />
        <Stat label="Avg latency" value={fmtMs(tp?.avg_latency_5m_ms)} hint={`${fmtInt(tp?.noise_filtered_24h ?? 0)} noise filtered · 24 h`} />
      </div>

      <div className="mb-4 flex flex-wrap items-center gap-x-3 gap-y-1 rounded-md border border-line bg-panel px-3 py-2 font-mono text-[11.5px] text-fg-muted tabular">
        <span className="flex items-center gap-1.5">
          <span className={`inline-block size-2 rounded-full ${eng && !engStale ? "bg-signal animate-pulse-dot" : "bg-warn"}`} />
          <span className="label !text-fg-subtle">engine</span>
          <span className={eng && !engStale ? "text-signal" : "text-warn"}>{eng ? (engStale ? "STALE" : "LIVE") : "NO HEARTBEAT"}</span>
        </span>
        {eng ? (
          <>
            <span>in flight {eng.inflight ?? 0} / {eng.concurrency ?? "—"}</span>
            <span>due {fmtInt(eng.due)}</span>
            <span>busy hosts {eng.busyHosts?.length ?? 0}</span>
            <span className={eng.circuitOpen?.length ? "text-warn" : ""}>circuit open {eng.circuitOpen?.length ?? 0}</span>
            {eng.version && <span>v{eng.version}</span>}
            {eng.at && <span className="text-fg-subtle" title={utcDateTime(eng.at)}>heartbeat {utcTime(eng.at)} UTC · {relTime(eng.at)}</span>}
          </>
        ) : (
          <span className="text-fg-subtle">the scheduler publishes a heartbeat to Redis every few seconds; none is visible right now.</span>
        )}
        <span className="ml-auto text-fg-subtle">WS clients {fmtInt(h?.live.clients ?? 0)} · {fmtInt(h?.live.published ?? 0)} published since start</span>
      </div>

      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {(h?.connectors ?? []).map((c) => (
          <Panel key={c.connector} title={<span className="flex items-center gap-2 normal-case tracking-normal"><span className="font-mono text-[13px] text-fg">{c.connector}</span><HealthPill health={c.status} /></span>}>
            <dl className="grid grid-cols-2 gap-y-1 text-[12.5px]">
              <dt className="text-fg-subtle">Success rate</dt><dd className="text-right font-mono tabular">{fmtPct(c.success_rate ?? null, 1)}</dd>
              <dt className="text-fg-subtle">Runs 24 h</dt><dd className="text-right font-mono tabular">{fmtInt(c.runs_24h)}</dd>
              <dt className="text-fg-subtle">Errors 24 h</dt><dd className="text-right font-mono tabular">{fmtInt(c.errors_24h)}</dd>
              <dt className="text-fg-subtle">Avg latency</dt><dd className="text-right font-mono tabular">{fmtMs(c.avg_latency_ms)}</dd>
              <dt className="text-fg-subtle">Changes / events 24 h</dt><dd className="text-right font-mono tabular">{fmtInt(c.changes_24h)} / {fmtInt(c.events_24h)}</dd>
              <dt className="text-fg-subtle">Last success</dt><dd className="text-right font-mono tabular">{c.last_success_at ? relTime(c.last_success_at) : "—"}</dd>
            </dl>
            <div className="mt-2 flex flex-wrap gap-1">
              {Object.entries(c.http_codes ?? {}).sort((a, b) => b[1] - a[1]).map(([code, n]) => (
                <Chip key={code} tone={code.startsWith("2") || code === "304" ? "ok" : code.startsWith("4") ? "warn" : code === "0" || code.startsWith("5") ? "danger" : "default"}>{code} · {n}</Chip>
              ))}
            </div>
            {c.last_error && <p className="mt-2 truncate font-mono text-[11px] text-danger" title={c.last_error}>{c.last_error}</p>}
          </Panel>
        ))}
        {!h?.connectors.length && <Panel dense><Empty>Health rollups appear after the first minute of engine activity.</Empty></Panel>}
      </div>

      <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        <Panel title="Sensors by connector" dense>
          {h?.sensors_by_connector?.length ? (
            <Table head={["Connector", "Sensors", "Up", "Up ratio", "Avg latency"]}>
              {h.sensors_by_connector.map((c) => (
                <tr key={c.connector}>
                  <Td mono>{c.connector}</Td>
                  <Td mono>{fmtInt(c.sensors)}</Td>
                  <Td mono>{fmtInt(c.up)}</Td>
                  <Td mono className={c.sensors && c.up / c.sensors < 0.9 ? "text-warn" : ""}>{fmtPct(c.sensors ? c.up / c.sensors : null)}</Td>
                  <Td mono>{fmtMs(c.avg_latency_ms)}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty />
          )}
        </Panel>
        <Panel title="Sensors by status" dense>
          {h?.sensors_by_status?.length ? (
            <Table head={["Status", "Sensors"]}>
              {h.sensors_by_status.map((s) => (
                <tr key={s.status}>
                  <Td><HealthPill health={s.status} /></Td>
                  <Td mono>{fmtInt(s.n)}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty />
          )}
          <p className="border-t border-line px-3 py-2 text-[11px] text-fg-subtle">PENDING → VALIDATED → ACTIVE is the sensor lifecycle; DISABLED sensors are kept for evidence but never scheduled.</p>
        </Panel>
      </div>

      <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
        <Panel title="Degraded sensors" dense>
          {h?.degraded_sensors.length ? (
            <Table head={["Sensor", "Source", "Health", "Errors", "HTTP", "Last error", "Last check"]}>
              {h.degraded_sensors.map((s) => (
                <tr key={s.id}>
                  <Td><Link href={`/sensor/${s.id}`} className="hover:underline">{s.name}</Link><div className="max-w-[18rem] truncate font-mono text-[10.5px] text-fg-subtle">{s.url}</div></Td>
                  <Td><Link href={`/source/${s.source_id}`} className="hover:underline">{s.source_id}</Link></Td>
                  <Td><HealthPill health={s.health} /></Td>
                  <Td mono>{s.consecutive_errors}</Td>
                  <Td mono>{s.last_status ?? "—"}</Td>
                  <Td className="max-w-[16rem] truncate text-danger"><span title={s.last_error ?? ""}>{s.last_error}</span></Td>
                  <Td mono className="whitespace-nowrap text-fg-subtle">{s.last_check_at ? relTime(s.last_check_at) : "—"}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty>All sensors healthy.</Empty>
          )}
        </Panel>
        <Panel title="Noisy sensors (raw vs meaningful)" dense>
          {h?.noisy_sensors.length ? (
            <Table head={["Sensor", "Source", "Raw", "Meaningful", "Noise ratio"]}>
              {h.noisy_sensors.map((s) => (
                <tr key={s.id}>
                  <Td><Link href={`/sensor/${s.id}`} className="hover:underline">{s.name}</Link></Td>
                  <Td><Link href={`/source/${s.source_id}`} className="hover:underline">{s.source_id}</Link></Td>
                  <Td mono>{s.raw_changes}</Td>
                  <Td mono>{s.meaningful_changes}</Td>
                  <Td mono className={(s.noise_ratio ?? 0) > 0.9 ? "text-warn" : ""}>{s.noise_ratio !== null ? fmtPct(Number(s.noise_ratio), 1) : "—"}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty>Noise ratios appear once sensors have ≥ 5 raw changes.</Empty>
          )}
        </Panel>
      </div>

      <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
        <Panel title="Top failing domains" dense>
          {h?.top_failing_domains?.length ? (
            <Table head={["Host", "Failures", "Last error"]}>
              {h.top_failing_domains.map((f) => (
                <tr key={f.host}>
                  <Td mono><Link href={`/domain/${f.host}`} className="hover:underline">{f.host}</Link></Td>
                  <Td mono className="text-danger">{fmtInt(f.failures)}</Td>
                  <Td className="max-w-[20rem] truncate font-mono text-[11px] text-fg-muted"><span title={f.last_error ?? ""}>{f.last_error ?? "—"}</span></Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty>No failing domains right now.</Empty>
          )}
        </Panel>
        <Panel title="Slowest sensors" dense>
          {h?.slowest_sensors?.length ? (
            <Table head={["Sensor", "Source", "Connector", "Avg latency"]}>
              {h.slowest_sensors.map((s) => (
                <tr key={s.id}>
                  <Td><Link href={`/sensor/${s.id}`} className="hover:underline">{s.name}</Link></Td>
                  <Td><Link href={`/source/${s.source_id}`} className="hover:underline">{s.source_id}</Link></Td>
                  <Td mono>{s.connector}</Td>
                  <Td mono className={s.avg_latency_ms > 10_000 ? "text-warn" : ""}>{fmtMs(s.avg_latency_ms)}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty />
          )}
        </Panel>
      </div>

      <Panel title="Daily metrics" dense className="mt-4">
        {h?.daily.length ? (
          <Table head={["Day", "Checks", "304", "Bytes", "Raw changes", "Events", "Silent", "Errors", "LLM calls", "LLM tokens in/out"]}>
            {h.daily.map((d) => (
              <tr key={String(d.day)}>
                <Td mono>{String(d.day)}</Td>
                <Td mono>{fmtInt(Number(d.checks))}</Td>
                <Td mono>{fmtInt(Number(d.not_modified))}</Td>
                <Td mono>{fmtBytes(Number(d.bytes))}</Td>
                <Td mono>{fmtInt(Number(d.raw_changes))}</Td>
                <Td mono>{fmtInt(Number(d.events))}</Td>
                <Td mono>{fmtInt(Number(d.silent_events))}</Td>
                <Td mono>{fmtInt(Number(d.errors))}</Td>
                <Td mono>{fmtInt(Number(d.llm_calls))}</Td>
                <Td mono>{fmtInt(Number(d.llm_input_tokens))} / {fmtInt(Number(d.llm_output_tokens))}</Td>
              </tr>
            ))}
          </Table>
        ) : (
          <Empty />
        )}
      </Panel>
      <p className="mt-3 text-[11px] text-fg-subtle">Rollups refresh every minute from sensor runs; raw counters are in <code>/api/v1/health/connectors</code> and <code>/api/metrics</code> (Prometheus). Operators: <Link href="/ops" className="hover:text-fg">/ops</Link>.</p>
    </>
  );
}