// cursor.jsx — magnetic custom cursor + magnetic-pull for [data-magnetic] elements.
const { useEffect: useCursorEffect, useRef: useCursorRef, useState: useCursorState } = React;

function MagneticCursor({ enabled = true }) {
  const dot = useCursorRef(null);
  const ring = useCursorRef(null);
  const label = useCursorRef(null);
  const state = useCursorRef({ x: innerWidth / 2, y: innerHeight / 2, rx: innerWidth / 2, ry: innerHeight / 2 });
  const [hidden, setHidden] = useCursorState(true);

  useCursorEffect(() => {
    const fine = window.matchMedia('(pointer: fine)').matches;
    if (!enabled || !fine) { document.documentElement.style.cursor = ''; return; }
    document.documentElement.classList.add('cursor-none');

    const s = state.current;
    let raf = 0;
    const onMove = (e) => {
      s.x = e.clientX; s.y = e.clientY;
      if (hidden) setHidden(false);
    };
    const onLeave = () => setHidden(true);

    // hover intent
    const onOver = (e) => {
      const el = e.target.closest('a, button, [data-cursor], input, .work-row, .nav-item');
      if (!el) { setMode('default'); return; }
      const t = el.getAttribute('data-cursor');
      setMode(t || 'link');
    };
    let mode = 'default';
    const setMode = (m) => {
      if (m === mode) return; mode = m;
      const r = ring.current, l = label.current;
      if (!r) return;
      if (m === 'default') { r.style.width = '34px'; r.style.height = '34px'; r.style.opacity = '0.55'; r.style.borderColor = 'currentColor'; if (l) l.textContent = ''; r.classList.remove('cursor-filled'); }
      else if (m === 'link') { r.style.width = '54px'; r.style.height = '54px'; r.style.opacity = '0.9'; if (l) l.textContent = ''; r.classList.remove('cursor-filled'); }
      else { r.style.width = '78px'; r.style.height = '78px'; r.style.opacity = '1'; r.classList.add('cursor-filled'); if (l) l.textContent = m === 'view' ? 'VIEW' : m.toUpperCase(); }
    };

    const tick = () => {
      s.rx += (s.x - s.rx) * 0.16;
      s.ry += (s.y - s.ry) * 0.16;
      if (dot.current) dot.current.style.transform = `translate(${s.x}px, ${s.y}px)`;
      if (ring.current) ring.current.style.transform = `translate(${s.rx}px, ${s.ry}px)`;
      raf = requestAnimationFrame(tick);
    };
    tick();

    // magnetic pull
    const magnets = () => Array.from(document.querySelectorAll('[data-magnetic]'));
    const onMagMove = (e) => {
      magnets().forEach((el) => {
        const r = el.getBoundingClientRect();
        const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
        const dx = e.clientX - cx, dy = e.clientY - cy;
        const dist = Math.hypot(dx, dy);
        const radius = Math.max(r.width, r.height) * 0.9 + 40;
        if (dist < radius) {
          const p = 1 - dist / radius;
          el.style.transform = `translate(${dx * 0.28 * p}px, ${dy * 0.28 * p}px)`;
        } else {
          el.style.transform = '';
        }
      });
    };

    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointermove', onMagMove);
    window.addEventListener('pointerover', onOver);
    document.addEventListener('pointerleave', onLeave);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointermove', onMagMove);
      window.removeEventListener('pointerover', onOver);
      document.removeEventListener('pointerleave', onLeave);
      document.documentElement.classList.remove('cursor-none');
      magnets().forEach((el) => (el.style.transform = ''));
    };
  }, [enabled, hidden]);

  if (!enabled || !window.matchMedia('(pointer: fine)').matches) return null;
  return (
    <div aria-hidden="true" style={{ opacity: hidden ? 0 : 1, transition: 'opacity .25s' }}>
      <div ref={dot} className="cursor-dot" />
      <div ref={ring} className="cursor-ring"><span ref={label} className="cursor-label" /></div>
    </div>
  );
}

window.MagneticCursor = MagneticCursor;