import type { Metadata } from "next";
import Link from "next/link";
import { RedundancyPanel } from "@/components/market/redundancy-panel";
import { Empty, Page, PageHeader, Pill, Section, Stat } from "@/components/ui/section";
import { api } from "@/lib/api";
import { COVERAGE_STATUS_LABEL, COVERAGE_STATUS_TONE, TIER_LABEL, TIER_TARGET } from "@/lib/coverage";
import { ASSET_CLASS_LABEL, cx, instrumentHref } from "@/lib/format";
import type { CoverageReport, CoverageTier } from "@/lib/types";

export const metadata: Metadata = {
  title: "Source coverage",
  description: "How many independent source families observe each instrument, redundancy targets by tier, the source-expansion queue and statistically inferred shared upstreams.",
  alternates: { canonical: "/coverage" },
};
export const dynamic = "force-dynamic";

const TIERS: CoverageTier[] = ["A", "B", "C", "D"];
const CLASSES = ["EQUITY", "ETF", "INDEX", "CRYPTO", "FOREX", "COMMODITY", "FUTURE", "TREASURY", "BOND", "INTEREST_RATE"];

export default async function CoveragePage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  const tier = typeof sp.tier === "string" && TIERS.includes(sp.tier as CoverageTier) ? (sp.tier as CoverageTier) : undefined;
  const cls = typeof sp.asset_class === "string" && CLASSES.includes(sp.asset_class) ? sp.asset_class : undefined;
  const qs = new URLSearchParams({ limit: "200" });
  if (tier) qs.set("tier", tier);
  if (cls) qs.set("asset_class", cls);
  const [report, global] = await Promise.all([api<CoverageReport>(`/v1/coverage?${qs}`), tier || cls ? api<CoverageReport>("/v1/coverage?limit=1") : null]);
  const s = report.summary;
  const g = (global ?? report).summary;
  const href = (t?: CoverageTier, c?: string) => {
    const p = new URLSearchParams();
    if (t) p.set("tier", t);
    if (c) p.set("asset_class", c);
    const q = p.toString();
    return `/coverage${q ? `?${q}` : ""}`;
  };
  const byClass = Object.entries(s.byAssetClass).sort((a, b) => b[1].instruments - a[1].instruments);
  return (
    <Page wide>
      <PageHeader
        kicker="Source Mesh"
        title="Source coverage"
        lead="One instrument → many observers → one canonical market state. Market Atlas does not trust a quote: it observes the market through independent paths, counts source families (not URLs), and publishes the consensus with the evidence. This page measures that redundancy and lists where it is still thin."
        actions={
          <Link href="/methodology#source-mesh" className="text-sm text-accent hover:underline">
            How it is computed →
          </Link>
        }
      />
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1.2fr_1fr]">
        <RedundancyPanel coverage={g} prominent />
        <div className="rounded-md border border-rule bg-surface p-4">
          <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Redundancy targets by tier</h3>
          <div className="mt-2 divide-y divide-rule">
            {TIERS.map((t) => {
              const tt = g.tiers[t];
              return (
                <div key={t} className="grid grid-cols-[auto_1fr_auto] items-center gap-3 py-2 text-sm">
                  <Link href={href(t, cls)} className={cx("mono inline-flex h-7 w-7 items-center justify-center rounded border text-xs font-semibold", tier === t ? "border-ink bg-ink text-canvas" : "border-rule text-ink-2 hover:border-rule-strong")}>
                    {t}
                  </Link>
                  <div className="min-w-0">
                    <div className="font-medium">{TIER_LABEL[t].replace(/^Tier [A-D] · /, "")}</div>
                    <div className="truncate text-[11.5px] text-ink-3">{report.targets[t] ?? TIER_TARGET[t]}</div>
                    <div className="mt-1 h-1 overflow-hidden rounded-full bg-surface-3">
                      <span className={cx("block h-full rounded-full", tt.attainment >= 90 ? "bg-positive" : tt.attainment >= 50 ? "bg-accent" : "bg-warning")} style={{ width: `${Math.min(100, tt.attainment)}%` }} />
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="mono tnum">
                      {tt.covered} / {tt.instruments}
                    </div>
                    <div className="text-[11px] text-ink-3">{tt.attainment.toFixed(1)}% covered</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <Section title="By asset class" hint="quoted instruments · share observed by ≥ 2 families · mean independent families">
        <div className="overflow-x-auto rounded-md border border-rule bg-surface">
          <table className="table-dense">
            <thead>
              <tr>
                <th>Asset class</th>
                <th className="text-right">Quoted</th>
                <th className="text-right">Multi-source</th>
                <th className="text-right">Share</th>
                <th className="text-right">Mean families</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {byClass.map(([k, v]) => (
                <tr key={k}>
                  <td className="font-medium">{ASSET_CLASS_LABEL[k] ?? k}</td>
                  <td className="num">{v.instruments}</td>
                  <td className="num">{v.multiSource}</td>
                  <td className="num">
                    <span className="inline-flex items-center gap-2">
                      <span className="inline-block h-1.5 w-16 overflow-hidden rounded-full bg-surface-3">
                        <span className={cx("block h-full rounded-full", v.instruments && v.multiSource / v.instruments >= 0.9 ? "bg-positive" : v.multiSource ? "bg-accent" : "bg-stale")} style={{ width: `${v.instruments ? (v.multiSource / v.instruments) * 100 : 0}%` }} />
                      </span>
                      {v.instruments ? `${Math.round((v.multiSource / v.instruments) * 100)}%` : "—"}
                    </span>
                  </td>
                  <td className="num">{v.meanFamilies.toFixed(2)}</td>
                  <td className="text-right">
                    <Link href={href(tier, k)} className="text-xs text-accent hover:underline">
                      queue →
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      <Section
        title="Source expansion queue"
        hint="instruments below their redundancy target, most valuable gaps first (tier weight × missing families)"
        badge={
          <span className="mono rounded bg-surface-3 px-1.5 py-0.5 text-[10.5px] text-ink-2 tnum">
            {report.queue.length}
            {report.queue.length >= 200 ? "+" : ""}
          </span>
        }
      >
        <div className="mb-3 flex flex-wrap items-center gap-2">
          <span className="text-xs text-ink-3">Tier</span>
          <Pill href={href(undefined, cls)} active={!tier}>
            all
          </Pill>
          {TIERS.map((t) => (
            <Pill key={t} href={href(t, cls)} active={tier === t}>
              {t}
            </Pill>
          ))}
          <span className="ml-2 text-xs text-ink-3">Class</span>
          <Pill href={href(tier)} active={!cls}>
            all
          </Pill>
          {CLASSES.filter((c) => s.byAssetClass[c] || c === cls).map((c) => (
            <Pill key={c} href={href(tier, c)} active={cls === c}>
              {ASSET_CLASS_LABEL[c] ?? c}
            </Pill>
          ))}
        </div>
        {report.queue.length ? (
          <div className="overflow-x-auto rounded-md border border-rule bg-surface">
            <table className="table-dense">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Instrument</th>
                  <th>Tier</th>
                  <th className="text-right">Families / target</th>
                  <th className="text-right">Missing</th>
                  <th className="text-right">Observations</th>
                  <th className="text-right">Proxies · validators</th>
                  <th>Class</th>
                  <th>Status</th>
                  <th className="text-right">Score</th>
                </tr>
              </thead>
              <tbody>
                {report.queue.map((q, i) => (
                  <tr key={q.instrumentId}>
                    <td className="mono text-ink-3">{i + 1}</td>
                    <td>
                      <Link href={instrumentHref(q.instrumentId)} className="hover:underline">
                        <span className="mono font-medium">{q.symbol}</span>
                        <span className="block max-w-[260px] truncate text-[11.5px] text-ink-3">{q.name}</span>
                      </Link>
                    </td>
                    <td>
                      <span className="mono rounded border border-rule px-1.5 text-xs" title={TIER_TARGET[q.tier]}>
                        {q.tier}
                      </span>
                    </td>
                    <td className="num">
                      {q.families} / {q.target.families}
                    </td>
                    <td className="num text-warning">{q.gap > 0 ? `−${q.gap}` : "—"}</td>
                    <td className="num">{q.observations}</td>
                    <td className="num text-ink-2">
                      {q.proxies} · {q.validators}
                    </td>
                    <td className="text-xs text-ink-2">
                      {ASSET_CLASS_LABEL[q.assetClass] ?? q.assetClass}
                      {q.comparability ? <span className="block text-[10.5px] text-ink-3">{q.comparability.toLowerCase()} class</span> : null}
                    </td>
                    <td>
                      <span className={cx("inline-flex h-5 items-center rounded-[3px] px-1.5 text-[10.5px] font-medium uppercase tracking-wide", COVERAGE_STATUS_TONE[q.status])}>{COVERAGE_STATUS_LABEL[q.status]}</span>
                    </td>
                    <td className="num">{Math.round(q.score * 100)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <Empty>Every instrument in this selection meets its redundancy target.</Empty>
        )}
        <p className="mt-2 text-xs text-ink-3">
          A <em>family</em> is a group of sources believed to share an upstream (declared, or inferred statistically). Proxies (stablecoin markets, crosses) and validators (restricted-rights sources) confirm a value but never count as independent families. Score = 65 % family attainment + 35 % observation attainment.
        </p>
      </Section>

      <Section title="Likely shared upstreams" hint="pairs of sources whose values coincide within 2 s on ≥ 92 % of ≥ 120 aligned samples — counted as one family">
        {report.lineage.length ? (
          <div className="overflow-x-auto rounded-md border border-rule bg-surface">
            <table className="table-dense">
              <thead>
                <tr>
                  <th>Source A</th>
                  <th>Source B</th>
                  <th className="text-right">Similarity</th>
                  <th className="text-right">Aligned samples</th>
                  <th className="text-right">Instruments</th>
                </tr>
              </thead>
              <tbody>
                {report.lineage.map((p) => (
                  <tr key={`${p.sourceA}|${p.sourceB}`}>
                    <td>
                      <Link href={`/sources#${p.sourceA}`} className="mono hover:underline">
                        {p.sourceA}
                      </Link>
                    </td>
                    <td>
                      <Link href={`/sources#${p.sourceB}`} className="mono hover:underline">
                        {p.sourceB}
                      </Link>
                    </td>
                    <td className="num">{(p.similarity * 100).toFixed(1)}%</td>
                    <td className="num">{p.samples.toLocaleString("en-US")}</td>
                    <td className="num">{p.instruments}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <Empty>No pair of sources currently looks like a shared upstream. The lineage engine recomputes every five minutes from live observations.</Empty>
        )}
      </Section>

      <div className="mt-8 grid grid-cols-2 gap-4 border-t border-rule pt-6 sm:grid-cols-4">
        <Stat label="Quoted instruments" value={g.quoted.toLocaleString("en-US")} />
        <Stat label="≥ 3 families" value={g.byFamilies[">=3"]} sub="Tier-A target" />
        <Stat label="≥ 5 families" value={g.byFamilies[">=5"]} sub="most observed" />
        <Stat label="No fresh source" value={g.byFamilies["0"]} tone={g.byFamilies["0"] ? "warn" : "muted"} sub="last known value shown as stale" />
      </div>
    </Page>
  );
}