import React from 'react';

const TONE_COLORS = {
  success: '#10b981',
  danger: '#ef4444',
  brand: '#ff6900',
  info: '#2563eb',
  neutral: '#94a3b8',
};

/**
 * Sparkline — tiny pure-SVG trend line (no chart.js).
 *
 * <Sparkline data={[64, 66, 70, 68, 74]} tone="success" />
 */
const Sparkline = ({
  data = [],
  width = 72,
  height = 24,
  tone = 'success',
  strokeWidth = 2,
  className = '',
  ariaLabel = 'trend',
}) => {
  if (!Array.isArray(data) || data.length < 2) {
    return null;
  }

  const values = data.map((v) => (Number.isFinite(Number(v)) ? Number(v) : 0));
  const min = Math.min(...values);
  const max = Math.max(...values);
  const range = max - min || 1;
  const pad = strokeWidth;

  const points = values.map((v, i) => {
    const x = pad + (i / (values.length - 1)) * (width - pad * 2);
    const y = pad + (1 - (v - min) / range) * (height - pad * 2);
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  });

  const color = TONE_COLORS[tone] || TONE_COLORS.neutral;
  const last = points[points.length - 1].split(',');

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      className={className}
      role="img"
      aria-label={ariaLabel}
    >
      <polyline
        points={points.join(' ')}
        fill="none"
        stroke={color}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <circle cx={last[0]} cy={last[1]} r={strokeWidth + 0.5} fill={color} />
    </svg>
  );
};

export default Sparkline;