// Sparkline — inline SVG sparkline atom. Pure data-in, SVG-out.
// Two sizes: full-width (28px tall, used in KPI tiles), mini (64×18, used in table cells).

function makePath(data, w, h, padding = 1) {
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const stepX = (w - padding * 2) / (data.length - 1);
  const pts = data.map((v, i) => {
    const x = padding + i * stepX;
    const y = h - padding - ((v - min) / range) * (h - padding * 2);
    return [x, y];
  });
  const line = pts.map((p, i) => (i === 0 ? `M${p[0]} ${p[1]}` : `L${p[0]} ${p[1]}`)).join(" ");
  const area = line + ` L${pts[pts.length - 1][0]} ${h} L${pts[0][0]} ${h} Z`;
  return { line, area, last: pts[pts.length - 1] };
}

function Sparkline({ data, width = 200, height = 28, tone = "primary", mini = false, area = true }) {
  if (!data || data.length < 2) return null;
  const { line, area: areaD, last } = makePath(data, width, height);
  const cls = (mini ? "spark-mini" : "spark") + " " + (tone === "primary" ? "" : tone);
  return (
    <svg className={cls.trim()} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" aria-hidden="true">
      {area && !mini && <path className="area" d={areaD} />}
      <path className="line" d={line} />
      {!mini && <circle className="dot" cx={last[0]} cy={last[1]} r="2.2" />}
    </svg>
  );
}

window.Sparkline = Sparkline;