import { SCORE_COMPONENTS, SCORE_COMPONENT_LABELS, type ComponentScores } from '@justice-choice/types';
import { COMPONENT_COLOR, DEFAULT_WEIGHTS, LEDGER_GROUPS } from './ledger';

/**
 * The score ledger: one horizontal bar of 100 points where each segment is a component's
 * weighted contribution. The empty remainder is the distance to a perfect score.
 */
export function ScoreLedger({
  components,
  weights = DEFAULT_WEIGHTS,
  total,
  size = 'md',
  animate = false,
  label,
}: {
  components: ComponentScores;
  weights?: ComponentScores | null;
  total: number;
  size?: 'sm' | 'md' | 'lg';
  animate?: boolean;
  label?: string;
}) {
  const w = weights ?? DEFAULT_WEIGHTS;
  const h = size === 'lg' ? 'h-4' : size === 'sm' ? 'h-2' : 'h-2.5';
  const description = SCORE_COMPONENTS.map((k) => `${SCORE_COMPONENT_LABELS[k]} ${(components[k] * w[k]).toFixed(1)}`).join(', ');
  return (
    <div className="flex items-center gap-3">
      <div
        role="img"
        aria-label={`${label ?? 'Score'} ${total.toFixed(1)} of 100. ${description}`}
        className={`relative flex ${h} w-full overflow-hidden rounded-full bg-sunken ${animate ? 'ledger-animate' : ''}`}
      >
        {SCORE_COMPONENTS.map((k, i) => {
          const pts = components[k] * w[k];
          return (
            <span
              key={k}
              title={`${SCORE_COMPONENT_LABELS[k]}: ${components[k].toFixed(0)}/100 × ${Math.round(w[k] * 100)}% = ${pts.toFixed(1)} pts`}
              className="block h-full border-r-2 border-[var(--surface)] last:border-r-0"
              style={{ width: `${pts}%`, background: COMPONENT_COLOR[k], animationDelay: animate ? `${i * 55}ms` : undefined }}
            />
          );
        })}
      </div>
      <span className={`num shrink-0 text-right font-semibold text-ink ${size === 'lg' ? 'w-14 text-xl' : 'w-10 text-sm'}`}>{total.toFixed(1)}</span>
    </div>
  );
}

export function LedgerLegend({ weights = DEFAULT_WEIGHTS }: { weights?: ComponentScores | null; compact?: boolean }) {
  const w = weights ?? DEFAULT_WEIGHTS;
  return (
    <div className="grid gap-5 sm:grid-cols-3">
      {LEDGER_GROUPS.map((g) => (
        <div key={g.key}>
          <p className="flex items-center gap-2 text-sm font-semibold text-ink">
            <span aria-hidden className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: COMPONENT_COLOR[g.components[0]] }} />
            {g.label}
            <span className="num ml-auto font-normal text-muted">{Math.round(g.components.reduce((s, k) => s + w[k], 0) * 100)}%</span>
          </p>
          <ul className="mt-1.5 space-y-1 text-sm text-ink-2">
            {g.components.map((k) => (
              <li key={k} className="flex justify-between gap-2 pl-[1.125rem]">
                <span>{SCORE_COMPONENT_LABELS[k]}</span>
                <span className="num text-muted">{Math.round(w[k] * 100)}%</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}