// Custom cursor — global, follows mouse, expands over [data-cursor="hover"] elements.
// Hides the native cursor when active.

const { useEffect: useEffectCur, useRef: useRefCur, useState: useStateCur } = React;

function CustomCursor({ accent }) {
  // Touch / no-hover devices (phones, tablets) have no pointer to follow, so
  // the cursor would just sit frozen in the middle. Skip it entirely there.
  const isTouch = typeof window !== "undefined" &&
    (window.matchMedia && window.matchMedia("(hover: none), (pointer: coarse)").matches);
  if (isTouch) return null;

  const dotRef = useRefCur(null);
  const ringRef = useRefCur(null);
  const [over, setOver] = useStateCur(false);
  const targetX = useRefCur(0);
  const targetY = useRefCur(0);
  const ringX = useRefCur(0);
  const ringY = useRefCur(0);
  const raf = useRefCur(null);

  useEffectCur(() => {
    document.body.style.cursor = "none";
    document.documentElement.style.cursor = "none";
    const style = document.createElement("style");
    style.id = "no-cursor-anywhere";
    style.textContent = `*, *::before, *::after { cursor: none !important; }`;
    document.head.appendChild(style);
    return () => {
      document.body.style.cursor = "";
      document.documentElement.style.cursor = "";
      style.remove();
    };
  }, []);

  useEffectCur(() => {
    const onMove = (e) => {
      targetX.current = e.clientX;
      targetY.current = e.clientY;
      if (dotRef.current) {
        dotRef.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
      }
      // hover detection
      const el = e.target.closest?.('[data-cursor="hover"]') ||
                 (e.target && document.elementFromPoint(e.clientX, e.clientY)?.closest?.('[data-cursor="hover"]'));
      setOver(!!el);
    };
    const tick = () => {
      ringX.current += (targetX.current - ringX.current) * 0.18;
      ringY.current += (targetY.current - ringY.current) * 0.18;
      if (ringRef.current) {
        ringRef.current.style.transform = `translate(${ringX.current}px, ${ringY.current}px) translate(-50%, -50%)`;
      }
      raf.current = requestAnimationFrame(tick);
    };
    window.addEventListener("mousemove", onMove);
    raf.current = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", onMove);
      cancelAnimationFrame(raf.current);
    };
  }, []);

  return (
    <>
      <div
        ref={ringRef}
        style={{
          position: "fixed", top: 0, left: 0, zIndex: 9999,
          width: over ? 56 : 32, height: over ? 56 : 32,
          borderRadius: 999,
          border: `1px solid ${over ? accent : "rgba(0,0,0,0.5)"}`,
          background: over ? `${accent}1f` : "transparent",
          pointerEvents: "none",
          mixBlendMode: over ? "normal" : "difference",
          transition: "width 220ms cubic-bezier(.2,.7,.2,1), height 220ms cubic-bezier(.2,.7,.2,1), background 220ms ease, border-color 220ms ease",
          willChange: "transform",
        }}
      />
      <div
        ref={dotRef}
        style={{
          position: "fixed", top: 0, left: 0, zIndex: 10000,
          width: 6, height: 6, borderRadius: 999,
          background: over ? accent : "#fff",
          mixBlendMode: over ? "normal" : "difference",
          pointerEvents: "none",
          willChange: "transform",
        }}
      />
    </>
  );
}

window.CustomCursor = CustomCursor;