import { cx } from "@/lib/format";

/** Sources + confidence meter. Confidence is Market Atlas' consensus confidence (0–1), never a market prediction. */
export function ConfidenceMeter({ confidence, sources, proxies, validators, className, compact }: { confidence: number | null | undefined; sources: number | null | undefined; proxies?: number | null; validators?: number | null; className?: string; compact?: boolean }) {
  const c = confidence ?? 0;
  const pct = Math.round(c * 100);
  const tone = c >= 0.85 ? "bg-positive" : c >= 0.6 ? "bg-accent" : c > 0 ? "bg-warning" : "bg-stale";
  const extra = (proxies ?? 0) + (validators ?? 0);
  const extraTitle = extra ? ` · confirmed by ${proxies ?? 0} prox${proxies === 1 ? "y" : "ies"} and ${validators ?? 0} validator${validators === 1 ? "" : "s"}` : "";
  return (
    <span className={cx("inline-flex items-center gap-1.5 whitespace-nowrap text-xs text-ink-2", className)} title={`Consensus confidence ${pct}% · ${sources ?? 0} independent source${sources === 1 ? "" : "s"}${extraTitle}`}>
      <span className="inline-block h-1.5 w-10 overflow-hidden rounded-full bg-surface-3">
        <span className={cx("block h-full rounded-full", tone)} style={{ width: `${pct}%` }} />
      </span>
      {!compact && (
        <span className="mono tnum">
          {pct}% · {sources ?? 0} src
          {extra > 0 && <span className="text-accent" aria-label={`plus ${extra} confirmations`}>{`+${extra}`}</span>}
        </span>
      )}
    </span>
  );
}