import type { Metadata } from "next";
import Link from "next/link";
import { RelativeTime } from "@/components/ui/freshness";
import { Empty, Page, PageHeader, Section, Stat } from "@/components/ui/section";
import { Sparkline } from "@/components/ui/sparkline";
import { StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import { formatDateTime, formatDuration } from "@/lib/format";
import type { DataHealth } from "@/lib/types";

export const metadata: Metadata = { title: "Data health", description: "Live health of Market Atlas' observation network: connector states, freshness, multi-source coverage, confidence and incidents.", alternates: { canonical: "/data-health" } };
export const dynamic = "force-dynamic";

export default async function DataHealthPage() {
  const h = await api<DataHealth>("/v1/data-health");
  const c = h.connectors;
  return (
    <Page wide>
      <PageHeader kicker="Transparency" title="Data health" lead="How well Market Atlas is observing the market right now. These are operational metrics about our own network — freshness, redundancy, agreement, incidents — not statements about market quality." actions={<Link href="/status" className="text-sm text-accent hover:underline">Public status →</Link>} />
      <div className="grid grid-cols-2 gap-4 rounded-md border border-rule bg-surface px-4 py-4 sm:grid-cols-3 lg:grid-cols-6">
        <Stat label="Connectors healthy" value={h.healthy_ratio == null ? "—" : `${Math.round(h.healthy_ratio * 100)}%`} sub={`${c.healthy} / ${c.total}`} tone={h.healthy_ratio != null && h.healthy_ratio < 0.8 ? "warn" : "pos"} />
        <Stat label="Median freshness" value={formatDuration(h.median_freshness_ms)} sub={`p95 ${formatDuration(h.p95_freshness_ms)} · live quotes`} />
        <Stat label="Public quotes" value={h.quotes_public} sub={`${h.quotes_realtime} real time`} />
        <Stat label="Multi-source" value={h.quotes_public ? `${Math.round((h.multi_source_quotes / h.quotes_public) * 100)}%` : "—"} sub={`${h.multi_source_quotes} quotes with ≥ 2 independent sources`} />
        <Stat label="Mean confidence" value={h.mean_confidence == null ? "—" : `${Math.round(h.mean_confidence * 100)}%`} sub={`dispersion ${h.mean_dispersion_bps ?? "—"} bps`} />
        <Stat label="Observations / s" value={h.observations_per_sec.toFixed(1)} sub={`queue ${h.queue_depth}`} />
      </div>
      <div className="mt-3 flex flex-wrap gap-3 text-xs text-ink-2">
        <span className="text-positive">{c.healthy} healthy</span>
        <span className="text-warning">{c.degraded} degraded / stale</span>
        <span className="text-accent">{c.recovering} recovering</span>
        <span className="text-negative">{c.failed} failed</span>
        <span className="text-stale">{c.paused} paused</span>
      </div>
      {h.history.length > 1 && (
        <Section title="Last 48 hours" hint="hourly averages from connector health snapshots">
          <div className="grid grid-cols-1 [&>*]:min-w-0 gap-4 rounded-md border border-rule bg-surface p-4 sm:grid-cols-3">
            <Trend label="Healthy ratio" values={h.history.map((x) => x.healthy_ratio)} fmt={(v) => `${Math.round(v * 100)}%`} />
            <Trend label="Messages / hour" values={h.history.map((x) => x.messages)} fmt={(v) => Math.round(v).toLocaleString("en-US")} />
            <Trend label="Median latency" values={h.history.map((x) => x.latency_ms ?? 0)} fmt={(v) => formatDuration(v)} />
          </div>
        </Section>
      )}
      <Section title="Connectors" href="/connectors">
        <div className="overflow-x-auto rounded-md border border-rule bg-surface">
          <table className="table-dense">
            <thead>
              <tr>
                <th>Connector</th>
                <th>State</th>
                <th className="text-right">Msg / min</th>
                <th className="text-right">Median latency</th>
                <th className="text-right">Instruments</th>
                <th className="text-right">Reliability</th>
                <th>Last message</th>
                <th>Last error</th>
              </tr>
            </thead>
            <tbody>
              {h.by_connector.map((r) => (
                <tr key={r.id}>
                  <td className="mono">{r.id}</td>
                  <td>
                    <StatusBadge status={r.state} />
                  </td>
                  <td className="num">{r.messages_1m}</td>
                  <td className="num">{r.median_latency_ms == null ? "—" : formatDuration(r.median_latency_ms)}</td>
                  <td className="num">{r.instruments}</td>
                  <td className="num">{r.reliability_score ?? "—"}</td>
                  <td className="text-xs text-ink-3">{r.last_message_at ? <RelativeTime value={r.last_message_at} /> : "—"}</td>
                  <td className="max-w-[320px] truncate text-xs text-ink-3" title={r.last_error ?? undefined}>
                    {r.last_error ?? "—"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
      <Section title="Incidents · 7 days" hint="source failures, recoveries, schema drift, divergence">
        {h.incidents.length ? (
          <ul className="divide-y divide-rule rounded-md border border-rule bg-surface px-3">
            {h.incidents.map((i) => (
              <li key={i.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 py-2 text-sm">
                <span className="mono text-xs text-ink-3">{formatDateTime(i.ts, { seconds: true })}</span>
                <StatusBadge status={i.severity} />
                <Link href={`/events/${i.id}`} className="hover:underline">
                  {i.title}
                </Link>
                <span className="mono text-[11px] text-ink-3">{i.type}</span>
              </li>
            ))}
          </ul>
        ) : (
          <Empty>No source incidents in the last 7 days.</Empty>
        )}
      </Section>
    </Page>
  );
}

function Trend({ label, values, fmt }: { label: string; values: number[]; fmt: (v: number) => string }) {
  const last = values[values.length - 1] ?? 0;
  return (
    <div>
      <div className="text-[11px] font-medium uppercase tracking-wide text-ink-3">{label}</div>
      <div className="mono mt-0.5 text-xl font-semibold tnum">{fmt(last)}</div>
      <Sparkline values={values} width={220} height={40} stroke="var(--accent)" className="mt-1 w-full" />
    </div>
  );
}