/** Server-renderable sparkline (no hover; used inside dense tables and stat tiles). */
export function Sparkline({ values, width = 96, height = 24, tone = 'auto', className }: { values: number[]; width?: number; height?: number; tone?: 'auto' | 'neutral' | 'index'; className?: string }) {
  const v = values.filter((x) => Number.isFinite(x));
  if (v.length < 2) return <span className={`inline-block ${className ?? ''}`} style={{ width, height }} aria-hidden />;
  const min = Math.min(...v);
  const max = Math.max(...v);
  const pad = 2;
  const sx = (i: number) => pad + (i / (v.length - 1)) * (width - pad * 2);
  const sy = (y: number) => (max === min ? height / 2 : pad + (height - pad * 2) - ((y - min) / (max - min)) * (height - pad * 2));
  const d = v.map((y, i) => `${i === 0 ? 'M' : 'L'}${sx(i).toFixed(1)},${sy(y).toFixed(1)}`).join(' ');
  const up = v[v.length - 1]! >= v[0]!;
  const color = tone === 'neutral' ? 'var(--ri-fg-subtle)' : tone === 'index' ? 'var(--ri-index)' : up ? 'var(--ri-gain)' : 'var(--ri-loss)';
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={`inline-block align-middle ${className ?? ''}`} aria-hidden>
      <path d={d} fill="none" stroke={color} strokeWidth={1.5} strokeLinejoin="round" strokeLinecap="round" />
      <circle cx={sx(v.length - 1)} cy={sy(v[v.length - 1]!)} r={2} fill={color} />
    </svg>
  );
}