/* global React */
// VectorPad — interactive vector-tracking overlay for the About headshot.
// Native React port of the spec'd framer-motion/Tailwind component:
//   • spring-smoothed crosshairs (stiffness 300, damping 28) lag the cursor
//   • hover reticle: center dot + bracket frame w/ corner accents + ping wave
//   • press: reticle tightens, "TARGET_ACQUIRED" label appears (mono, bottom-right)
//   • low-opacity grid that brightens on hover
//   • 4s radar sweep loop
//   • live COORD_X / COORD_Y readout panels, dim on leave
//   • pointer-leave resets to center and animates out
// Palette: cyan -> #2896B8 (Blue Green), red -> #0B5159 (Dark Teal).

const VP_BLUE = "#2896B8";
const VP_TEAL = "#0B5159";

function VectorPad() {
  const { useRef, useState, useEffect } = React;
  const wrap = useRef(null);
  const raf = useRef(0);
  // spring state: current (c) + velocity (v) in 0..1 normalized coords
  const sp = useRef({ cx: 0.5, cy: 0.5, vx: 0, vy: 0, tx: 0.5, ty: 0.5 });
  const cross = useRef(null);
  const vline = useRef(null);
  const hline = useRef(null);
  const reticle = useRef(null);
  const tilt = useRef(null);
  const xVal = useRef(null);
  const yVal = useRef(null);
  const [hover, setHover] = useState(false);
  const [press, setPress] = useState(false);

  useEffect(() => {
    // spring integration — stiffness 300, damping 28, mass 1
    const K = 300, D = 28, dtMax = 1 / 60;
    let last = performance.now();
    const tick = (now) => {
      let dt = (now - last) / 1000; last = now;
      if (dt > dtMax) dt = dtMax;
      const s = sp.current;
      for (const ax of ["x", "y"]) {
        const c = ax === "x" ? s.cx : s.cy;
        const t = ax === "x" ? s.tx : s.ty;
        const v = ax === "x" ? s.vx : s.vy;
        const a = K * (t - c) - D * v;
        const nv = v + a * dt;
        const nc = c + nv * dt;
        if (ax === "x") { s.cx = nc; s.vx = nv; } else { s.cy = nc; s.vy = nv; }
      }
      const px = (s.cx * 100).toFixed(2), py = (s.cy * 100).toFixed(2);
      if (vline.current) vline.current.style.left = px + "%";
      if (hline.current) hline.current.style.top = py + "%";
      if (reticle.current) reticle.current.style.transform = "translate(" + px + "cqw," + py + "cqh) translate(-50%,-50%)";
      // velocity-driven tilt: rotateX from vy, rotateY from vx (clamped, subtle)
      if (tilt.current) {
        const rx = Math.max(-16, Math.min(16, s.vy * 9));
        const ry = Math.max(-16, Math.min(16, -s.vx * 9));
        tilt.current.style.transform = "rotateX(" + rx.toFixed(1) + "deg) rotateY(" + ry.toFixed(1) + "deg)";
      }
      if (xVal.current) xVal.current.textContent = String(Math.round(s.cx * 100)).padStart(3, "0");
      if (yVal.current) yVal.current.textContent = String(Math.round(s.cy * 100)).padStart(3, "0");
      raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, []);

  const onMove = (e) => {
    const r = wrap.current.getBoundingClientRect();
    sp.current.tx = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
    sp.current.ty = Math.min(1, Math.max(0, (e.clientY - r.top) / r.height));
  };
  const onLeave = () => { setHover(false); setPress(false); sp.current.tx = 0.5; sp.current.ty = 0.5; };

  return (
    <div ref={wrap} className={"vpad" + (hover ? " is-hover" : "") + (press ? " is-press" : "")}
      onPointerEnter={() => setHover(true)}
      onPointerMove={onMove}
      onPointerLeave={onLeave}
      onPointerDown={() => setPress(true)}
      onPointerUp={() => setPress(false)}
      style={{ "--vp-blue": VP_BLUE, "--vp-teal": VP_TEAL }}>

      {/* low-opacity grid, brightens on hover */}
      <div className="vpad-grid" />

      {/* spring crosshair lines */}
      <div ref={vline} className="vpad-vline" />
      <div ref={hline} className="vpad-hline" />

      {/* reticle that springs to cursor */}
      <div ref={reticle} className="vpad-reticle">
        <div ref={tilt} className="vpad-tilt">
          {/* center dot */}
          <span className="vpad-dot" />
          {/* outer box with glow + corner accents */}
          <span className="vpad-box">
            <span className="vpad-corner tl" /><span className="vpad-corner tr" />
            <span className="vpad-corner bl" /><span className="vpad-corner br" />
          </span>
        </div>
      </div>

      {/* live coordinate readouts */}
      <div className="vpad-readout vpad-rx">
        <span className="vpad-rk">COORD_X</span><span className="vpad-rv"><span ref={xVal}>050</span>%</span>
      </div>
      <div className="vpad-readout vpad-ry">
        <span className="vpad-rk">COORD_Y</span><span className="vpad-rv"><span ref={yVal}>050</span>%</span>
      </div>

      {/* press label */}
      <div className="vpad-target">TARGET_ACQUIRED</div>
    </div>
  );
}

Object.assign(window, { VectorPad });