"use client";

// Leichter SVG-Verlaufsgraph (Sparkline mit Fläche) — ohne externe Abhängigkeiten.
export function MiniChart({
  points,
  color = "#9ed7ff",
  height = 56,
  width = 240,
  showDots = false,
}: {
  points: number[];
  color?: string;
  height?: number;
  width?: number;
  showDots?: boolean;
}) {
  if (points.length < 2) {
    return <div className="minichart-empty" style={{ height }}>Zu wenige Datenpunkte für einen Verlauf.</div>;
  }
  const pad = 6;
  const min = Math.min(...points);
  const max = Math.max(...points);
  const span = max - min || 1;
  const stepX = (width - pad * 2) / (points.length - 1);
  const x = (i: number) => pad + i * stepX;
  const y = (v: number) => pad + (height - pad * 2) * (1 - (v - min) / span);

  const line = points.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
  const area = `${line} L${x(points.length - 1).toFixed(1)},${height - pad} L${x(0).toFixed(1)},${height - pad} Z`;
  const gid = `mc-${color.replace("#", "")}`;

  return (
    <svg className="minichart" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" role="img" aria-hidden="true">
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.32" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill={`url(#${gid})`} />
      <path d={line} fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
      {showDots ? points.map((v, i) => <circle key={i} cx={x(i)} cy={y(v)} r={2.2} fill={color} />) : null}
      <circle cx={x(points.length - 1)} cy={y(points[points.length - 1])} r={3} fill={color} />
    </svg>
  );
}