import { confidenceLabel, fmtRelative, cn } from '@/lib/format';
import { Badge } from './primitives';

/** §191: every estimate carries sample size, confidence and freshness. */
export function Evidence({ confidence, sampleSize, updatedAt, sampleLabel = 'sales', className }: { confidence: number | null | undefined; sampleSize: number | null | undefined; updatedAt: Date | string | null | undefined; sampleLabel?: string; className?: string }) {
  const label = confidenceLabel(confidence);
  const tone = label === 'High' ? 'gain' : label === 'Medium' ? 'index' : label === 'Low' ? 'alert' : 'neutral';
  return (
    <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted', className)}>
      <Badge tone={tone}>Confidence: {label}</Badge>
      {sampleSize !== null && sampleSize !== undefined ? (
        <span className="num">
          {sampleSize.toLocaleString('en-US')} {sampleLabel} used
        </span>
      ) : null}
      {updatedAt ? <span>Updated {fmtRelative(updatedAt)}</span> : null}
    </div>
  );
}

export function ScoreMeter({ value, label, tone = 'index', className }: { value: number | null | undefined; label: string; tone?: 'index' | 'rarity' | 'gain' | 'alert'; className?: string }) {
  const fill = tone === 'rarity' ? 'var(--ri-rarity)' : tone === 'gain' ? 'var(--ri-gain)' : tone === 'alert' ? 'var(--ri-alert)' : 'var(--ri-index)';
  const track = tone === 'rarity' ? 'var(--ri-rarity-bg)' : tone === 'gain' ? 'var(--ri-gain-bg)' : tone === 'alert' ? 'var(--ri-alert-bg)' : 'var(--ri-index-bg)';
  return (
    <div className={cn('flex flex-col gap-1', className)}>
      <div className="flex items-baseline justify-between text-[11px]">
        <span className="font-medium uppercase tracking-wider text-subtle">{label}</span>
        <span className="num font-semibold text-fg">{value === null || value === undefined ? '—' : `${Math.round(value)}/100`}</span>
      </div>
      <div className="h-1.5 w-full overflow-hidden rounded-full" style={{ background: track }} aria-hidden>
        {value !== null && value !== undefined ? <div className="h-full rounded-full" style={{ width: `${Math.max(0, Math.min(100, value))}%`, background: fill }} /> : null}
      </div>
    </div>
  );
}