// Reticle preview SVG component — shows mil-grid with holdovers based on current solution
// Supports mouse drag pan + wheel zoom + reset button.
const Reticle = ({ table, units }) => {
  const size = 240;
  const center = size / 2;
  const milPx = 18; // pixels per MRAD on the reticle preview
  const stroke = '#a8b3a0';

  const [view, setView] = React.useState({ tx: 0, ty: 0, scale: 1 });
  const dragRef = React.useRef(null);
  const svgRef = React.useRef(null);

  function reset() { setView({ tx: 0, ty: 0, scale: 1 }); }

  function onMouseDown(e) {
    e.preventDefault();
    dragRef.current = { x: e.clientX, y: e.clientY, tx: view.tx, ty: view.ty };
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  }
  function onMouseMove(e) {
    const d = dragRef.current; if (!d) return;
    const svg = svgRef.current; if (!svg) return;
    const rect = svg.getBoundingClientRect();
    // Convert pixel delta to viewBox-space delta
    const k = size / rect.width;
    setView(v => ({ ...v, tx: d.tx + (e.clientX - d.x) * k, ty: d.ty + (e.clientY - d.y) * k }));
  }
  function onMouseUp() {
    dragRef.current = null;
    window.removeEventListener('mousemove', onMouseMove);
    window.removeEventListener('mouseup', onMouseUp);
  }

  function onWheel(e) {
    e.preventDefault();
    const svg = svgRef.current; if (!svg) return;
    const rect = svg.getBoundingClientRect();
    const k = size / rect.width;
    // Mouse position in viewBox coords
    const mx = (e.clientX - rect.left) * k;
    const my = (e.clientY - rect.top) * k;
    const factor = Math.exp(-e.deltaY * 0.0015);
    const nextScale = Math.max(0.4, Math.min(8, view.scale * factor));
    // Zoom around the cursor: keep the viewBox-point under cursor stationary
    // P_world = (P_view - tx) / scale  =>  tx_new = P_view - P_world * scale_new
    const wx = (mx - view.tx) / view.scale;
    const wy = (my - view.ty) / view.scale;
    setView({ tx: mx - wx * nextScale, ty: my - wy * nextScale, scale: nextScale });
  }

  React.useEffect(() => {
    const svg = svgRef.current; if (!svg) return;
    // Attach wheel as non-passive so preventDefault works
    const handler = (e) => onWheel(e);
    svg.addEventListener('wheel', handler, { passive: false });
    return () => svg.removeEventListener('wheel', handler);
  }, [view]);

  // Pull a few holdover points (every ~200m if available)
  const holds = (table || []).filter(r => r.range_m % 200 === 0 || r.range_m === 100).slice(0, 8);

  return (
    <div className="reticle-card">
      <div className="panel-h">
        <span>RETICLE / HOLD</span>
        <button className="ghost-btn small" title="Reset view" onClick={reset}>↺ RESET</button>
      </div>
      <div className="reticle-svg-wrap" style={{ position: 'relative' }}>
        <svg ref={svgRef} viewBox={`0 0 ${size} ${size}`} width="100%"
             style={{ background: '#06080a', display: 'block', cursor: dragRef.current ? 'grabbing' : 'grab', userSelect: 'none' }}
             onMouseDown={onMouseDown}>
          <defs>
            <radialGradient id="rgvig" cx="50%" cy="50%" r="55%">
              <stop offset="0%" stopColor="#0a1a1a" stopOpacity="0" />
              <stop offset="100%" stopColor="#000" stopOpacity="0.85" />
            </radialGradient>
            <clipPath id="reticleClip">
              <rect x="0" y="0" width={size} height={size} />
            </clipPath>
          </defs>
          <circle cx={center} cy={center} r={size / 2 - 2} fill="#0a1410" stroke="#1a2018" />
          <g clipPath="url(#reticleClip)" transform={`translate(${view.tx} ${view.ty}) scale(${view.scale})`}>
            {/* mil grid */}
            {[-5,-4,-3,-2,-1,1,2,3,4,5].map(i => (
              <g key={'h' + i}>
                <line x1={center + i * milPx} y1={center - 4} x2={center + i * milPx} y2={center + 4} stroke={stroke} strokeWidth={0.6 / view.scale} />
              </g>
            ))}
            {[-5,-4,-3,-2,-1,1,2,3,4,5].map(i => (
              <g key={'v' + i}>
                <line x1={center - 4} y1={center + i * milPx} x2={center + 4} y2={center + i * milPx} stroke={stroke} strokeWidth={0.6 / view.scale} />
                {i > 0 && <text x={center + 6} y={center + i * milPx + 3} fill={stroke} fontSize={7 / view.scale} fontFamily="monospace">{i}</text>}
              </g>
            ))}
            {/* main crosshair */}
            <line x1={center} y1="14" x2={center} y2={center - 6} stroke={stroke} strokeWidth={1 / view.scale} />
            <line x1={center} y1={center + 6} x2={center} y2={size - 14} stroke={stroke} strokeWidth={1 / view.scale} />
            <line x1="14" y1={center} x2={center - 6} y2={center} stroke={stroke} strokeWidth={1 / view.scale} />
            <line x1={center + 6} y1={center} x2={size - 14} y2={center} stroke={stroke} strokeWidth={1 / view.scale} />
            <circle cx={center} cy={center} r={1.3 / view.scale} fill="#ff8c2a" />
            {/* holdover dots — elevation + wind drift */}
            {holds.map((r, idx) => {
              const elevMil = -r.drop_m / r.range_m * 1000;
              const windMil = (r.wind_m || 0) / r.range_m * 1000;
              const y = center + elevMil * milPx;
              const x = center + windMil * milPx;
              return (
                <g key={r.range_m}>
                  <circle cx={x} cy={y} r={2 / view.scale} fill="#ff8c2a" stroke="#000" strokeWidth={0.4 / view.scale} />
                  <text x={x + 5} y={y + 2.5} fill="#ff8c2a" fontSize={7 / view.scale} fontFamily="monospace">{r.range_m}m · {elevMil.toFixed(1)}↓ {windMil >= 0 ? windMil.toFixed(1) + '→' : (-windMil).toFixed(1) + '←'}</text>
                </g>
              );
            })}
          </g>
          <rect x="0" y="0" width={size} height={size} fill="url(#rgvig)" pointerEvents="none" />
        </svg>
      </div>
    </div>
  );
};

window.Reticle = Reticle;