import Link from "next/link";
import { COVERAGE_STATUS_LABEL, COVERAGE_STATUS_TONE, TIER_LABEL, TIER_TARGET } from "@/lib/coverage";
import { cx } from "@/lib/format";
import type { InstrumentCoverage } from "@/lib/types";

/** "N / T independent sources" + tier chip + coverage status. Works in server and client components. */
export function CoverageBadge({ coverage: c, className, compact }: { coverage: InstrumentCoverage; className?: string; compact?: boolean }) {
  const met = c.families >= c.target.families;
  return (
    <span className={cx("inline-flex flex-wrap items-center gap-1.5 text-xs", className)} title={`${TIER_LABEL[c.tier]} — target ${TIER_TARGET[c.tier]}. ${c.observations} fresh observation(s), ${c.proxies} proxy confirmation(s), ${c.validators} validator(s).`}>
      <span className={cx("mono inline-flex h-5 items-center rounded-[3px] px-1.5 font-medium tnum", met ? "bg-positive-soft text-positive" : "bg-surface-3 text-ink-2")}>
        {c.families} / {c.target.families} independent source{c.target.families === 1 ? "" : "s"}
      </span>
      <Link href={`/coverage?tier=${c.tier}`} className="inline-flex h-5 items-center rounded-[3px] border border-rule px-1.5 text-[10.5px] font-medium uppercase tracking-wide text-ink-2 hover:border-rule-strong" title={TIER_TARGET[c.tier]}>
        tier {c.tier}
      </Link>
      {!compact && <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[c.status])}>{COVERAGE_STATUS_LABEL[c.status]}</span>}
      {!compact && (c.proxies > 0 || c.validators > 0) && (
        <span className="text-[11px] text-ink-3">
          {c.proxies > 0 ? `+${c.proxies} prox${c.proxies === 1 ? "y" : "ies"}` : ""}
          {c.proxies > 0 && c.validators > 0 ? " · " : ""}
          {c.validators > 0 ? `+${c.validators} validator${c.validators === 1 ? "" : "s"}` : ""}
        </span>
      )}
    </span>
  );
}