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

export interface BarDatum {
  label: string;
  value: number;
  href?: string;
  muted?: boolean;
}

/**
 * Horizontal bar chart in pure SVG (no chart library). Single hue; labels carry the meaning.
 * Values are formatted with the metric unit; bars never start anywhere but zero.
 */
export function BarChart({ data, unit, maxBars = 15, ariaLabel }: { data: BarDatum[]; unit?: string | null; maxBars?: number; ariaLabel: string }) {
  const rows = data.slice(0, maxBars);
  if (rows.length === 0) return null;
  const max = Math.max(...rows.map((r) => Math.abs(r.value)), Number.EPSILON);
  const rowH = 22;
  const labelW = 190;
  const valueW = 74;
  const width = 640;
  const barW = width - labelW - valueW - 8;
  const height = rows.length * rowH + 4;
  return (
    <figure className="w-full overflow-x-auto">
      <svg viewBox={`0 0 ${width} ${height}`} width="100%" role="img" aria-label={ariaLabel} className="block min-w-[480px] text-ink" style={{ maxHeight: height }}>
        <title>{ariaLabel}</title>
        {rows.map((r, i) => {
          const y = i * rowH + 2;
          const w = Math.max(1, (Math.abs(r.value) / max) * barW);
          const fill = r.muted ? 'var(--color-ink-4)' : 'var(--color-accent)';
          return (
            <g key={`${r.label}-${i}`}>
              <text x={labelW - 8} y={y + rowH / 2 + 4} textAnchor="end" fontSize="12" fill="var(--color-ink-2)">
                {r.label.length > 30 ? `${r.label.slice(0, 29)}…` : r.label}
              </text>
              <rect x={labelW} y={y + 4} width={w} height={rowH - 8} fill={fill} />
              <text x={labelW + w + 6} y={y + rowH / 2 + 4} fontSize="12" fill="var(--color-ink)" style={{ fontVariantNumeric: 'tabular-nums' }}>
                {fmtValue(r.value, unit)}
              </text>
            </g>
          );
        })}
      </svg>
    </figure>
  );
}