// cursor.jsx — custom magnetic cursor
const { useEffect, useRef, useState } = React;

function Cursor() {
  const ringRef = useRef(null);
  const dotRef = useRef(null);
  const labelRef = useRef(null);
  const stateRef = useRef({ x: 0, y: 0, tx: 0, ty: 0 });
  const [variant, setVariant] = useState("");
  const [label, setLabel] = useState("");

  useEffect(() => {
    const ring = ringRef.current, dot = dotRef.current, lbl = labelRef.current;
    let raf;
    const onMove = (e) => {
      stateRef.current.tx = e.clientX;
      stateRef.current.ty = e.clientY;
      if (dot) {
        dot.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
      }
      if (lbl) {
        lbl.style.transform = `translate(${e.clientX + 28}px, ${e.clientY + 28}px)`;
      }
    };
    const tick = () => {
      const s = stateRef.current;
      s.x += (s.tx - s.x) * 0.18;
      s.y += (s.ty - s.y) * 0.18;
      if (ring) ring.style.transform = `translate(${s.x}px, ${s.y}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    tick();
    window.addEventListener("mousemove", onMove);

    // Detect element under mouse periodically (not on every move for perf)
    const onOver = (e) => {
      const t = e.target.closest("[data-cursor]");
      if (t) {
        const v = t.getAttribute("data-cursor");
        const l = t.getAttribute("data-cursor-label") || "";
        setVariant(v); setLabel(l);
      } else {
        setVariant(""); setLabel("");
      }
    };
    document.addEventListener("mouseover", onOver);
    document.addEventListener("mouseout", onOver);

    // Magnetic buttons
    const magneticEls = () => document.querySelectorAll("[data-magnetic]");
    const handlers = new WeakMap();
    const attach = () => {
      magneticEls().forEach(el => {
        if (handlers.has(el)) return;
        const inner = el.querySelector(".magnetic-inner") || el;
        const enter = () => el.classList.add("is-mag");
        const move = (e) => {
          const r = el.getBoundingClientRect();
          const x = (e.clientX - (r.left + r.width / 2)) * 0.35;
          const y = (e.clientY - (r.top + r.height / 2)) * 0.35;
          inner.style.transform = `translate(${x}px, ${y}px)`;
        };
        const leave = () => { inner.style.transform = "translate(0, 0)"; el.classList.remove("is-mag"); };
        el.addEventListener("mouseenter", enter);
        el.addEventListener("mousemove", move);
        el.addEventListener("mouseleave", leave);
        handlers.set(el, { enter, move, leave });
      });
    };
    attach();
    const mo = new MutationObserver(attach);
    mo.observe(document.body, { childList: true, subtree: true });

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseover", onOver);
      document.removeEventListener("mouseout", onOver);
      mo.disconnect();
    };
  }, []);

  return (
    <React.Fragment>
      <div ref={ringRef} className={`cursor ${variant ? "is-" + variant : ""}`}></div>
      <div ref={dotRef} className="cursor__dot"></div>
      <div ref={labelRef} className={`cursor__label ${label ? "show" : ""}`}>{label}</div>
    </React.Fragment>
  );
}

window.Cursor = Cursor;