const WIDTH = 400;
const MID_Y = 50;

// H-4：親密度以波形振幅呈現——關係越深，波峰越高。
function buildPoints(amplitude: number): string {
  const clamped = Math.max(0, Math.min(100, amplitude));
  const scale = 0.4 + (clamped / 100) * 1.1;
  const up1 = MID_Y - 15 * scale;
  const down = MID_Y + 26 * scale;
  const up2 = MID_Y - 22 * scale;

  const points: Array<[number, number]> = [
    [0, MID_Y],
    [150, MID_Y],
    [168, MID_Y],
    [178, up1],
    [188, down],
    [198, up2],
    [208, MID_Y],
    [WIDTH, MID_Y],
  ];

  return points.map(([x, y]) => `${x},${y.toFixed(1)}`).join(" ");
}

export interface HeartbeatWaveProps {
  amplitude?: number; // 0~100，對應親密度
  animateOnMount?: boolean; // 是否播放「由左至右畫出」的載入動畫
  className?: string;
}

export function HeartbeatWave({ amplitude = 50, animateOnMount = true, className }: HeartbeatWaveProps) {
  return (
    <svg viewBox={`0 0 ${WIDTH} 100`} className={className} role="img" aria-label="心跳波形">
      <polyline
        points={buildPoints(amplitude)}
        fill="none"
        stroke="currentColor"
        strokeWidth="3"
        strokeLinecap="round"
        strokeLinejoin="round"
        className={animateOnMount ? "heartbeat-wave-line heartbeat-wave-animate" : "heartbeat-wave-line"}
      />
    </svg>
  );
}