Dumbbell Chart

'use client';

import ChartFrame from './ChartFrame';
import { scaleLinear, niceTicks, formatValue, colorAt } from './chart-utils';

/**
 * DumbbellChart — Two values per row connected by a bar, showing the gap between
 * a "before" and "after" (or two groups) for each item.
 *
 * @param {Array<{label: string, a: number, b: number}>} items - Pairs to compare.
 * @param {string} aLabel - Name of the first value.
 * @param {string} bLabel - Name of the second value.
 * @param {string} prefix - Value prefix.
 * @param {string} suffix - Value suffix.
 * @param {string} variant - Card style (glass|solid|ghost).
 * @param {string} size - Density (sm|md|lg).
 */
export interface DumbbellChartProps {
  title?: string;
  subtitle?: string;
  items?: Array<{ label: string; a: number; b: number }>;
  aLabel?: string;
  bLabel?: string;
  prefix?: string;
  suffix?: string;
  colors?: string[];
  variant?: 'glass' | 'solid' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export function DumbbellChart({
  title = 'Time to first value',
  subtitle = 'Minutes, before vs after onboarding redesign',
  items = [
    { label: 'Solo devs', a: 34, b: 12 },
    { label: 'Startups', a: 41, b: 18 },
    { label: 'Agencies', a: 52, b: 26 },
    { label: 'Mid-market', a: 63, b: 37 },
    { label: 'Enterprise', a: 88, b: 54 },
  ],
  aLabel = 'Before',
  bLabel = 'After',
  prefix = '',
  suffix = 'm',
  colors,
  variant = 'glass',
  size = 'md',
  className = '',
}: DumbbellChartProps) {
  const W = 640;
  const rowH = 40;
  const m = { t: 8, r: 24, b: 26, l: 110 };
  const H = items.length * rowH + m.t + m.b;
  const ticks = niceTicks(0, Math.max(...items.flatMap((i) => [i.a, i.b])), 5);
  const x = scaleLinear(0, ticks[ticks.length - 1], m.l, W - m.r);
  const ca = colorAt(0, colors);
  const cb = colorAt(1, colors);
  const fmt = (v: number) => formatValue(v, prefix, suffix);
  return (
    <>
      <ChartFrame title={title} subtitle={subtitle} variant={variant} size={size} className={className} legend={[{ label: aLabel, color: ca }, { label: bLabel, color: cb }]} table={{ headers: ['Item', aLabel, bLabel, 'Difference'], rows: items.map((i) => [i.label, fmt(i.a), fmt(i.b), fmt(i.b - i.a)]) }}>
        <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: dumbbell chart comparing ${aLabel} and ${bLabel}`}>
          {ticks.map((t, __i: number) => (
            <g key={__i}>
              <line className="cf-grid" x1={x(t)} x2={x(t)} y1={m.t} y2={H - m.b} />
              <text className="cf-label" x={x(t)} y={H - 8} textAnchor="middle">{fmt(t)}</text>
            </g>
          ))}
          {items.map((it, i) => {
            const cy = m.t + i * rowH + rowH / 2;
            return (
              <g className="cf-mark cf-dim" tabIndex={0} role="img" aria-label={`${it.label}: ${aLabel} ${fmt(it.a)}, ${bLabel} ${fmt(it.b)}`} data-tip-title={it.label} data-tip={`${ca}::${aLabel}: ${fmt(it.a)}|${cb}::${bLabel}: ${fmt(it.b)}|Δ ${fmt(it.b - it.a)}`}>
                <rect x={m.l} y={cy - rowH / 2} width={W - m.l - m.r} height={rowH} fill="transparent" />
                <text className="cf-label" x={m.l - 10} y={cy + 4} textAnchor="end">{it.label}</text>
                <line x1={x(it.a)} x2={x(it.b)} y1={cy} y2={cy} stroke="rgb(var(--ink-rgb, 255 255 255) / 0.22)" strokeWidth="4" strokeLinecap="round" />
                <circle cx={x(it.a)} cy={cy} r="7" fill={ca} stroke="var(--chart-surface, #0d0d0f)" strokeWidth="2" />
                <circle cx={x(it.b)} cy={cy} r="7" fill={cb} stroke="var(--chart-surface, #0d0d0f)" strokeWidth="2" />
              </g>
            );
          })}
        </svg>
      </ChartFrame>
    </>
  );
}

export default DumbbellChart;