Sparkline Chart

'use client';

import { scaleLinear, smoothPath, areaPath, POSITIVE, NEGATIVE, type Point } from './chart-utils';
import './SparklineChart.css';

/**
 * SparklineChart — Compact inline trend line for tables, KPI tiles and text.
 * Marks the last point and optionally the min/max.
 *
 * @param {number[]} data - Values to plot.
 * @param {string} label - Accessible description (e.g. 'Revenue, last 30 days').
 * @param {string} variant - Visual style (line|area|bars).
 * @param {string} size - Dimensions (sm|md|lg).
 * @param {string} color - Stroke/fill color; defaults to trend status color.
 * @param {boolean} showExtremes - Mark the min and max points.
 * @param {string} className - Extra CSS class.
 */
export interface SparklineChartProps {
  data?: number[];
  label?: string;
  variant?: 'line' | 'area' | 'bars';
  size?: 'sm' | 'md' | 'lg';
  color?: string;
  showExtremes?: boolean;
  className?: string;
}

export function SparklineChart({
  data = [12, 15, 11, 18, 17, 22, 19, 25, 24, 29, 27, 33],
  label = 'Trend, last 12 periods',
  variant = 'area',
  size = 'md',
  color,
  showExtremes = false,
  className = '',
}: SparklineChartProps) {
  const dims = { sm: [80, 24], md: [140, 36], lg: [220, 56] }[size];
  const [W, H] = dims;
  const pad = 3;
  const trendUp = data[data.length - 1] >= data[0];
  const stroke = color ?? (trendUp ? POSITIVE : NEGATIVE);
  const y = scaleLinear(Math.min(...data), Math.max(...data), H - pad, pad);
  const x = (i: number) => pad + (i / Math.max(1, data.length - 1)) * (W - pad * 2);
  const pts: Point[] = data.map((v, i) => [x(i), y(v)]);
  const last = pts[pts.length - 1];
  const minI = data.indexOf(Math.min(...data));
  const maxI = data.indexOf(Math.max(...data));
  const barW = (W - pad * 2) / data.length - 2;
  const change = data[0] ? (((data[data.length - 1] - data[0]) / Math.abs(data[0])) * 100).toFixed(0) : '0';
  return (
    <>
      <svg className={`spark spark--${size} ${className}`} viewBox={`0 0 ${W} ${H}`} width={W} height={H} role="img" aria-label={`${label}: from ${data[0]} to ${data[data.length - 1]} (${trendUp ? '+' : ''}${change}%)`} data-rk-cd2e33="">
        {variant === 'bars' ? (
          data.map((v, i) => {
            const top = y(v);
            return <rect x={pad + i * (barW + 2)} y={top} width={Math.max(1, barW)} height={Math.max(1, H - pad - top)} rx="1.5" fill={stroke} opacity={i === data.length - 1 ? 1 : 0.55} data-rk-cd2e33="" />;
          })
        ) : (
          <>
            {variant === 'area' && <path d={areaPath(pts, H)} fill={stroke} fillOpacity="0.16" data-rk-cd2e33="" />}
            <path d={smoothPath(pts)} fill="none" stroke={stroke} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" data-rk-cd2e33="" />
            {showExtremes && (
              <>
                <circle cx={pts[minI][0]} cy={pts[minI][1]} r="2.5" fill="var(--c-text-3, #8a8a8a)" data-rk-cd2e33="" />
                <circle cx={pts[maxI][0]} cy={pts[maxI][1]} r="2.5" fill="var(--c-text-1, #fff)" data-rk-cd2e33="" />
              </>
            )}
            <circle cx={last[0]} cy={last[1]} r="3" fill={stroke} stroke="var(--chart-surface, #0d0d0f)" strokeWidth="1.5" data-rk-cd2e33="" />
          </>
        )}
      </svg>
    </>
  );
}

export default SparklineChart;

/* SparklineChart — ported from astro-component-kit (charts/SparklineChart.astro) */

.spark:where([data-rk-cd2e33]) {
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
  max-width: 100%;
  height: auto;
}