import type { VerdictCount } from "../../lib/report/views";
import type { Verdict, VerdictStyle } from "../../lib/report/verdicts";
import { cn } from "../../lib/utils";

// A fact-check's verdict, from the shared vocabulary (lib/report/verdicts.mjs)
// with the report's overrides applied — the one place a verdict is drawn, so
// the export site, the editor's previews and umtool's report preview agree.
// The colour marks the chip (its dot and edge); the label's text stays in the
// foreground colour so it reads on every base whatever the colour is.

export function VerdictChip({
  verdict,
  style: s,
  count,
  className,
}: {
  verdict: Verdict;
  style: VerdictStyle;
  count?: number;
  className?: string;
}) {
  return (
    <span
      data-verdict={verdict}
      style={{ "--verdict": s.color } as React.CSSProperties}
      className={cn(
        "inline-flex shrink-0 items-center gap-1.5 rounded-full border border-[color:var(--verdict)] bg-[color-mix(in_oklab,var(--verdict)_14%,transparent)] px-2.5 py-0.5 text-xs font-semibold text-foreground",
        className,
      )}
    >
      <span aria-hidden className="size-2 rounded-full bg-[color:var(--verdict)]" />
      {s.label}
      {count !== undefined && <span className="font-mono tabular-nums text-muted-foreground">{count}</span>}
    </span>
  );
}

// A fact-check's tally: one chip per verdict a claim carries, with its count.
export function VerdictTally({
  tally,
  styles,
  className,
}: {
  tally: readonly VerdictCount[];
  styles: Readonly<Record<Verdict, VerdictStyle>>;
  className?: string;
}) {
  if (tally.length === 0) return null;
  return (
    <ul data-verdict-tally="" className={cn("flex flex-wrap gap-2", className)}>
      {tally.map((t) => (
        <li key={t.verdict}>
          <VerdictChip verdict={t.verdict} style={styles[t.verdict]} count={t.count} />
        </li>
      ))}
    </ul>
  );
}