import { fmtValue, unitLabel } from '@/lib/format';
import { SourceBadge, type ProvenanceInfo } from './source-badge';
import { ClaimBadge, type ClaimKind } from './badge';

/**
 * Every numeric value on the site renders through <Value>: number + unit, source badge with
 * provenance popover, and a population/period caption (CLAUDE.md UI rules).
 */
export function Value({
  value,
  unit,
  provenance,
  caption,
  claim,
  size = 'md',
  ci,
  estimateType,
  className = '',
}: {
  value: number | string | null | undefined;
  unit?: string | null;
  provenance?: ProvenanceInfo | null;
  caption?: string | null;
  claim?: ClaimKind;
  size?: 'sm' | 'md' | 'lg';
  ci?: [number | null | undefined, number | null | undefined];
  estimateType?: string | null;
  className?: string;
}) {
  const sizeCls = size === 'lg' ? 'text-2xl font-display' : size === 'sm' ? 'text-[13.5px]' : 'text-base';
  const hasCi = ci && ci[0] != null && ci[1] != null;
  return (
    <span className={`inline-flex flex-col items-start ${className}`}>
      <span className="inline-flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5">
        <span className={`ci-num ${sizeCls} text-ink`}>{fmtValue(value, unit)}</span>
        {unit && unit !== 'probability' ? <span className="text-[11.5px] text-ink-3">{unitLabel(unit)}</span> : null}
        {hasCi ? (
          <span className="ci-num text-[11.5px] text-ink-3" title="95% confidence interval as published by the source">
            ({fmtValue(ci![0], unit)}–{fmtValue(ci![1], unit)})
          </span>
        ) : null}
        {estimateType && estimateType !== 'observed' ? <span className="text-[11px] italic text-warn">{estimateType}</span> : null}
        {provenance ? <SourceBadge p={provenance} /> : null}
        {claim ? <ClaimBadge kind={claim} /> : null}
      </span>
      {caption ? <span className="text-[11.5px] leading-4 text-ink-3">{caption}</span> : null}
    </span>
  );
}