interface Shot {
  index: number;
  x: number;  // 0-1 normalized
  y: number;  // 0-1 normalized
  precision: number;
}

interface TargetVisualizationProps {
  shots: Shot[];
  variant?: 'human' | 'longRange';
}

const TARGETS = {
  human: { image: 'HumanTarget.png', ratio: 0.7183098591549296, maxW: 320 },
  longRange: { image: 'longRangeTarget.PNG', ratio: 1, maxW: 480 },
};

function TargetVisualization({ shots, variant = 'human' }: TargetVisualizationProps) {
  const { image, ratio, maxW } = TARGETS[variant];
  const VB_H = 100;
  const VB_W = VB_H * ratio;

  return (
    <div style={{
      width: '100%',
      maxWidth: maxW,
      margin: '0 auto',
      aspectRatio: `${ratio}`,
    }}>
      <svg
        viewBox={`0 0 ${VB_W} ${VB_H}`}
        width="100%"
        height="100%"
        style={{ display: 'block' }}
      >
        {/* Background target image — fills the entire viewBox */}
        <image
          href={`${import.meta.env.BASE_URL}${image}`}
          x="0"
          y="0"
          width={VB_W}
          height={VB_H}
          preserveAspectRatio="none"
        />
        {/* Shot markers */}
        {shots.map((shot) => {
          const cx = shot.x * VB_W;
          const cy = shot.y * VB_H;
          return (
            <g key={shot.index}>
              <circle
                cx={cx}
                cy={cy}
                r={1.2}
                fill="#00e5ff"
                stroke="#000"
                strokeWidth={0.3}
                opacity={0.9}
              />
              <text
                x={cx + 2}
                y={cy + 1}
                fill="#00e5ff"
                fontSize={2.8}
                fontWeight="bold"
                stroke="#000"
                strokeWidth={0.15}
                paintOrder="stroke"
              >
                {shot.index}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

export default TargetVisualization;
