// @design-system: primitives/ConfidenceBar

/**
 * ConfidenceBar — visual horizontal bar showing AI confidence (0–1).
 *
 * Colors:
 *   - 0.0–0.49 → danger (red)
 *   - 0.5–0.79  → warning (amber)
 *   - 0.8–1.0   → success (green)
 *
 * @example
 * <ConfidenceBar value={0.92} label="0.92" />
 */

import { cn } from '@/lib/cn';

export interface ConfidenceBarProps {
  /** Confidence value 0–1 */
  value: number;
  /** Optional text label; defaults to percentage string */
  label?: string;
  className?: string;
}

function getTone(value: number): 'success' | 'warning' | 'danger' {
  if (value >= 0.8) return 'success';
  if (value >= 0.5) return 'warning';
  return 'danger';
}

const TONE_TRACK: Record<'success' | 'warning' | 'danger', string> = {
  success: 'bg-success-500',
  warning: 'bg-warning-500',
  danger: 'bg-danger-500',
};

export function ConfidenceBar({ value, label, className }: ConfidenceBarProps) {
  const pct = Math.max(0, Math.min(1, value)) * 100;
  const tone = getTone(value);
  const displayLabel = label ?? `${Math.round(pct)}%`;

  return (
    <div
      className={cn('flex items-center gap-2', className)}
      aria-label={`Confidence: ${displayLabel}`}
    >
      <div
        className="h-1.5 w-16 overflow-hidden rounded-full bg-neutral-200"
        role="progressbar"
        aria-valuenow={Math.round(pct)}
        aria-valuemin={0}
        aria-valuemax={100}
      >
        <div
          className={cn('h-full rounded-full transition-all', TONE_TRACK[tone])}
          style={{ width: `${pct}%` }}
        />
      </div>
      <span className="text-text-muted text-xs tabular-nums">{displayLabel}</span>
    </div>
  );
}