import Link from "next/link";
import { cx } from "@/lib/format";
import type { CoverageSummary } from "@/lib/types";

/** Source Redundancy block (server component). Numbers come from the coverage engine, never hard-coded. */
export function RedundancyPanel({ coverage: c, className, prominent }: { coverage: CoverageSummary; className?: string; prominent?: boolean }) {
  const f = c.byFamilies;
  const bars: Array<[string, number, string]> = [
    ["≥ 5 sources", f[">=5"], "bg-positive"],
    ["≥ 3", f[">=3"] - f[">=5"], "bg-accent"],
    ["2", f[">=2"] - f[">=3"], "bg-warning"],
    ["single source", f["1"], "bg-stale"],
  ];
  const pct = (n: number) => (c.quoted ? (n / c.quoted) * 100 : 0);
  const tierA = c.tiers.A;
  return (
    <div className={cx("rounded-md border border-rule bg-surface p-4", className)}>
      <div className="flex items-baseline justify-between gap-3">
        <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Source redundancy</h3>
        <Link href="/coverage" className="text-xs text-accent hover:underline">
          Source coverage →
        </Link>
      </div>
      <div className={cx("mt-1 flex flex-wrap items-baseline gap-x-2", prominent && "gap-x-3")}>
        <span className={cx("mono font-semibold tnum", prominent ? "text-3xl" : "text-2xl")}>{c.multiSource}</span>
        <span className="text-sm text-ink-2">
          of <span className="mono tnum">{c.quoted}</span> quoted instruments observed through ≥ 2 independent source families
        </span>
      </div>
      <div className="mt-3 flex h-2 overflow-hidden rounded-full bg-surface-3" aria-hidden>
        {bars.map(([label, n, cls]) => (n > 0 ? <span key={label} className={cls} style={{ width: `${pct(n)}%` }} title={`${n} ${label}`} /> : null))}
      </div>
      <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-[11.5px] sm:grid-cols-4">
        {bars.map(([label, n, cls]) => (
          <span key={label} className="inline-flex items-center gap-1.5 text-ink-2">
            <span className={cx("inline-block h-1.5 w-1.5 rounded-full", cls)} />
            <span className="mono tnum">{n}</span> {label}
          </span>
        ))}
      </div>
      <div className="mt-3 border-t border-rule pt-3">
        <div className="flex items-baseline justify-between text-xs">
          <span className="text-ink-3">Weighted redundancy score</span>
          <span className="mono tnum font-medium">{c.weightedScore.toFixed(1)}%</span>
        </div>
        <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-surface-3">
          <span className="block h-full rounded-full bg-accent" style={{ width: `${Math.min(100, c.weightedScore)}%` }} />
        </div>
        <dl className="mt-2 grid grid-cols-2 gap-x-4 text-xs">
          <Row k="Tier A majors covered" v={`${tierA.covered} / ${tierA.instruments}`} sub={`${tierA.attainment.toFixed(0)}% · target ≥ 3 families`} />
          <Row k="Tier B liquid covered" v={`${c.tiers.B.covered} / ${c.tiers.B.instruments}`} sub={`${c.tiers.B.attainment.toFixed(0)}% · target ≥ 2 families`} />
          <Row k="Proxies confirming" v={`${c.proxiesConfirming}`} sub="stablecoin markets, crosses" />
          <Row k="Validators confirming" v={`${c.validatorsConfirming}`} sub="restricted-rights cross-checks" />
        </dl>
      </div>
    </div>
  );
}

function Row({ k, v, sub }: { k: string; v: string; sub?: string }) {
  return (
    <div className="border-b border-rule py-1">
      <div className="flex items-baseline justify-between">
        <dt className="text-ink-3">{k}</dt>
        <dd className="mono tnum">{v}</dd>
      </div>
      {sub && <div className="text-[10.5px] text-ink-3">{sub}</div>}
    </div>
  );
}