import type { EvolutionPoint } from '../lib/eras';

/** 时速演进曲线（SVG）：横轴年代、纵轴最高时速，体现"科学感"主线。*/
export function EvolutionCurve({ points }: { points: EvolutionPoint[] }) {
  if (points.length < 2) return null;
  const W = 720;
  const H = 180;
  const padX = 36;
  const padY = 24;
  const decades = points.map((p) => p.decade);
  const speeds = points.map((p) => p.maxSpeed);
  const minD = Math.min(...decades);
  const maxD = Math.max(...decades);
  const maxS = Math.max(...speeds);
  const spanD = Math.max(1, maxD - minD);

  const x = (d: number) => padX + ((d - minD) / spanD) * (W - padX * 2);
  const y = (s: number) => H - padY - (s / maxS) * (H - padY * 2);

  const line = points.map((p) => `${x(p.decade)},${y(p.maxSpeed)}`).join(' ');
  const area = `${padX},${H - padY} ${line} ${W - padX},${H - padY}`;

  return (
    <svg
      className="evo"
      viewBox={`0 0 ${W} ${H}`}
      role="img"
      aria-label="中国机车最高时速演进曲线"
      data-testid="evolution-curve"
    >
      <defs>
        <linearGradient id="evoFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#4ea1ff" stopOpacity="0.35" />
          <stop offset="1" stopColor="#4ea1ff" stopOpacity="0" />
        </linearGradient>
      </defs>
      <polygon points={area} fill="url(#evoFill)" />
      <polyline
        points={line}
        fill="none"
        stroke="#4ea1ff"
        strokeWidth="2.5"
        strokeLinejoin="round"
      />
      {points.map((p) => (
        <g key={p.decade}>
          <circle cx={x(p.decade)} cy={y(p.maxSpeed)} r="3.5" fill="#9ed0ff" />
          {(p.decade === minD ||
            p.decade === maxD ||
            p.maxSpeed === maxS) && (
            <text
              x={x(p.decade)}
              y={y(p.maxSpeed) - 10}
              fontSize="11"
              fill="#cdd5e0"
              textAnchor="middle"
            >
              {p.maxSpeed}km/h
            </text>
          )}
          <text
            x={x(p.decade)}
            y={H - 6}
            fontSize="10"
            fill="#8b93a1"
            textAnchor="middle"
          >
            {p.decade}s
          </text>
        </g>
      ))}
    </svg>
  );
}