/* global React */
// Custom cursor — outer ring lags, inner dot tracks exactly.
// Disabled on touch devices and when prefers-reduced-motion.

const CustomCursor = () => {
  const ringRef = React.useRef(null);
  const dotRef = React.useRef(null);
  const stateRef = React.useRef({
    x: -100, y: -100,
    rx: -100, ry: -100,
    over: false, hover: false, down: false,
  });

  React.useEffect(() => {
    // Skip on touch / reduced motion
    const isTouch = matchMedia("(pointer: coarse)").matches;
    const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (isTouch || reduceMotion) return;

    document.documentElement.classList.add("has-custom-cursor");

    const ring = ringRef.current;
    const dot = dotRef.current;
    if (!ring || !dot) return;

    const HOVER_SEL = 'a, button, .btn, .agent-card, .why-cell, .case-card, .problem-card, input, [data-cursor-hover]';

    const onMove = (e) => {
      const s = stateRef.current;
      s.x = e.clientX;
      s.y = e.clientY;
      s.over = true;
      // Check hover target
      const el = e.target;
      s.hover = !!(el && el.closest && el.closest(HOVER_SEL));
    };
    const onLeave = () => { stateRef.current.over = false; };
    const onDown = () => { stateRef.current.down = true; };
    const onUp = () => { stateRef.current.down = false; };

    window.addEventListener("mousemove", onMove, { passive: true });
    window.addEventListener("mouseout", (e) => {
      if (!e.relatedTarget && !e.toElement) stateRef.current.over = false;
    });
    document.addEventListener("mouseenter", onLeave);
    window.addEventListener("mousedown", onDown);
    window.addEventListener("mouseup", onUp);

    let raf;
    const tick = () => {
      const s = stateRef.current;
      // Lerp ring toward target
      s.rx += (s.x - s.rx) * 0.18;
      s.ry += (s.y - s.ry) * 0.18;

      const visibility = s.over ? 1 : 0;
      const hoverScale = s.hover ? 1.8 : 1;
      const downScale = s.down ? 0.85 : 1;

      ring.style.transform = `translate3d(${s.rx}px, ${s.ry}px, 0) translate(-50%, -50%) scale(${hoverScale * downScale})`;
      ring.style.opacity = visibility * (s.hover ? 1 : 0.85);
      ring.style.borderColor = s.hover
        ? "oklch(0.78 0.2 295 / 0.9)"
        : "oklch(0.7 0.18 295 / 0.55)";
      ring.style.background = s.hover
        ? "oklch(0.6 0.22 295 / 0.12)"
        : "transparent";

      dot.style.transform = `translate3d(${s.x}px, ${s.y}px, 0) translate(-50%, -50%) scale(${s.hover ? 0 : downScale})`;
      dot.style.opacity = visibility * (s.hover ? 0 : 1);

      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mousedown", onDown);
      window.removeEventListener("mouseup", onUp);
      document.documentElement.classList.remove("has-custom-cursor");
    };
  }, []);

  return (
    <React.Fragment>
      <div ref={ringRef} className="cursor-ring" aria-hidden="true" />
      <div ref={dotRef} className="cursor-dot" aria-hidden="true" />
    </React.Fragment>
  );
};

window.CustomCursor = CustomCursor;