/* Trail — a small chain of pixel pebbles that follow the cursor. Lo-fi. */

function Trail({ enabled = true }) {
  const ref = React.useRef(null);
  const dotsRef = React.useRef([]);
  const targetRef = React.useRef({ x: -100, y: -100 });
  const N = 6;

  React.useEffect(() => {
    if (!enabled) return;
    const layer = ref.current;
    if (!layer) return;

    // create dots
    layer.innerHTML = "";
    const dots = [];
    for (let i = 0; i < N; i++) {
      const d = document.createElement("div");
      d.className = "trail-pebble";
      d.style.left = "0";
      d.style.top = "0";
      // Outer size includes the 1.5px border each side from .trail-pebble CSS.
      const s = 4 + Math.floor((N - i) * 1.2);
      const outer = s + 3; // include border so transform recentres correctly
      d.style.width = s + "px";
      d.style.height = s + "px";
      d.style.opacity = (1 - i / N) * 0.85;
      d.style.background = (i % 3 === 0) ? "var(--ss-mint)"
                          : (i % 3 === 1) ? "var(--ss-pink)"
                          : "var(--ss-bone)";
      layer.appendChild(d);
      dots.push({ el: d, x: -100, y: -100, half: outer / 2 });
    }
    dotsRef.current = dots;

    const onMove = (e) => {
      targetRef.current = { x: e.clientX, y: e.clientY };
    };
    const onLeave = () => {
      targetRef.current = { x: -100, y: -100 };
    };
    window.addEventListener("pointermove", onMove);
    window.addEventListener("pointerleave", onLeave);

    let raf;
    let tick = 0;
    const animate = () => {
      raf = requestAnimationFrame(animate);
      tick += 1;
      // only update every 2 frames for steppy feel
      if (tick % 2) return;

      for (let i = 0; i < dots.length; i++) {
        const d = dots[i];
        if (i === 0) {
          // Lead pebble: snap directly to the cursor — no lag.
          d.x = targetRef.current.x;
          d.y = targetRef.current.y;
        } else {
          // Trailing pebbles: ease toward the previous pebble's centre.
          const t = { x: dots[i - 1].px, y: dots[i - 1].py };
          d.x += (t.x - d.x) * 0.55;
          d.y += (t.y - d.y) * 0.55;
        }
        d.px = d.x; d.py = d.y;
        // Re-centre on the cursor coordinate by subtracting half the pebble's
        // outer footprint — otherwise the lead pebble draws to the bottom-right
        // of the actual pointer position.
        const tx = Math.round(d.x - d.half);
        const ty = Math.round(d.y - d.half);
        d.el.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
      }
    };
    raf = requestAnimationFrame(animate);

    return () => {
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerleave", onLeave);
      cancelAnimationFrame(raf);
      if (layer) layer.innerHTML = "";
    };
  }, [enabled]);

  if (!enabled) return null;
  return <div ref={ref} style={{
    position: "fixed", inset: 0, pointerEvents: "none", zIndex: 8500,
  }}/>;
}

window.Trail = Trail;