import { LineChart, Line, ResponsiveContainer, YAxis, ReferenceDot } from "recharts";
import type { CartesSparklinePoint } from "../../../shared/types";

export interface KpiSparklineProps {
  data: CartesSparklinePoint[];
  color?: string;
  height?: number;
}

/**
 * Compact line chart with the reference month (the last point) highlighted
 * by a filled dot. Rendered inside the KPI cards on the Cartes page.
 */
export default function KpiSparkline({
  data,
  color = "var(--primary)",
  height = 40,
}: KpiSparklineProps) {
  if (data.length === 0) {
    return <div style={{ width: "100%", height }} />;
  }

  const chartData = data.map((p, index) => ({ index, value: p.value, month: p.month }));
  const lastIndex = chartData.length - 1;
  const lastValue = chartData[lastIndex]?.value ?? 0;

  return (
    <ResponsiveContainer width="100%" height={height}>
      <LineChart data={chartData} margin={{ top: 4, right: 6, bottom: 2, left: 2 }}>
        <YAxis hide domain={["dataMin", "dataMax"]} />
        <Line
          type="monotone"
          dataKey="value"
          stroke={color}
          strokeWidth={1.75}
          dot={false}
          isAnimationActive={false}
        />
        <ReferenceDot
          x={lastIndex}
          y={lastValue}
          r={3.5}
          fill={color}
          stroke="var(--card)"
          strokeWidth={1.5}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}
