import { fmtValue, unitLabel } from '@/lib/format';

export interface CompareBarDatum {
  label: string;
  value: number | null; // null = no figure (rendered as "—", never as zero)
  note?: string | null; // e.g. "2024 · observed" or "registry level: Lung cancer"
  href?: string;
  muted?: boolean;
}

/**
 * Compact horizontal bar list for the compare page (one small chart per metric). Bars are plain
 * divs so the block stays responsive on narrow screens; the number always accompanies the bar and
 * missing values are shown as a dash, never as an empty bar of length zero.
 */
export function CompareBars({ title, unit, data, caption }: { title: string; unit?: string | null; data: CompareBarDatum[]; caption?: React.ReactNode }) {
  const values = data.map((d) => d.value).filter((v): v is number => v != null && Number.isFinite(v));
  const max = Math.max(...values, Number.EPSILON);
  return (
    <figure className="min-w-0 border-t border-rule-strong pt-2">
      <figcaption className="mb-1.5 flex items-baseline justify-between gap-2 text-[12.5px]">
        <span className="font-medium text-ink">{title}</span>
        {unit ? <span className="text-[11px] text-ink-3">{unitLabel(unit)}</span> : null}
      </figcaption>
      <ol className="space-y-1.5" aria-label={`${title} — bar comparison`}>
        {data.map((d, i) => {
          const has = d.value != null && Number.isFinite(d.value);
          const pct = has ? Math.max(1, (Math.abs(d.value!) / max) * 100) : 0;
          return (
            <li key={`${d.label}-${i}`} className="text-[12.5px]">
              <div className="flex items-baseline justify-between gap-2">
                <span className="min-w-0 truncate text-ink-2">
                  {d.href ? (
                    <a className="ci-link" href={d.href}>
                      {d.label}
                    </a>
                  ) : (
                    d.label
                  )}
                </span>
                <span className="ci-num shrink-0 text-ink">{has ? fmtValue(d.value, unit) : '—'}</span>
              </div>
              <div className="mt-0.5 h-[7px] w-full bg-paper-3" role="presentation">
                {has ? <div className="h-full" style={{ width: `${pct}%`, background: d.muted ? 'var(--color-ink-4)' : 'var(--color-accent)' }} /> : null}
              </div>
              {d.note ? <div className="mt-0.5 text-[11px] text-ink-3">{d.note}</div> : null}
            </li>
          );
        })}
      </ol>
      {caption ? <p className="mt-1.5 text-[11.5px] text-ink-3">{caption}</p> : null}
    </figure>
  );
}