/**
 * llmindex.io — shared UI primitives (score display with mandatory CI whiskers)
 * Author:  Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * License: Proprietary — © Simon-Pierre Boucher, all rights reserved
 */
import type { ReactElement } from 'react';

export interface ScoreBarProps {
  score: number;
  scoreLow: number;
  scoreHigh: number;
  max?: number;
}

/**
 * Horizontal score bar with a CI whisker. Uncertainty is always rendered —
 * a score without its CI is a methodology violation (§8).
 */
export function ScoreBar({ score, scoreLow, scoreHigh, max = 1000 }: ScoreBarProps): ReactElement {
  const pct = (v: number): number => Math.min(100, Math.max(0, (v / max) * 100));
  return (
    <div className="relative h-2 w-full rounded bg-zinc-200" title={`${score} (95% CI ${scoreLow}–${scoreHigh})`}>
      <div className="absolute h-2 rounded bg-emerald-500/80" style={{ width: `${pct(score)}%` }} />
      <div
        className="absolute top-1/2 h-3 -translate-y-1/2 border-y border-zinc-500/80"
        style={{ left: `${pct(scoreLow)}%`, width: `${Math.max(0.5, pct(scoreHigh) - pct(scoreLow))}%` }}
      />
    </div>
  );
}

export function ScoreValue({ score, scoreLow, scoreHigh }: ScoreBarProps): ReactElement {
  return (
    <span className="tabular-nums">
      <span className="font-semibold text-zinc-900">{score}</span>{' '}
      <span className="text-xs text-zinc-600">
        [{scoreLow}–{scoreHigh}]
      </span>
    </span>
  );
}

export function DemoBanner(): ReactElement {
  return (
    <div className="rounded-md border border-amber-300 bg-amber-50 px-4 py-2 text-sm text-amber-800">
      Demo data — these scores are deterministic placeholders, not a real evaluation. They will be
      replaced by the first published IRT fit run.
    </div>
  );
}

export function formatUsd(v: number | null | undefined): string {
  if (v == null) return '—';
  return v < 1 ? `$${v.toFixed(3)}` : `$${v.toFixed(2)}`;
}

export function formatMs(v: number | null | undefined): string {
  if (v == null) return '—';
  return v >= 1000 ? `${(v / 1000).toFixed(1)}s` : `${Math.round(v)}ms`;
}