// Custom cursor — a small eye that follows the mouse, blinks on click.
// Pupil tracks the screen center (so it looks at "the void"), giving an
// inverse effect: as the user looks at the page, the cursor-eye looks back at them.

const { useEffect: useCursorEffect, useRef: useCursorRef, useState: useCursorState } = React;

function CursorEye({ palette }) {
  const ref = useCursorRef(null);
  const irisRef = useCursorRef(null);
  const lidTopRef = useCursorRef(null);
  const lidBotRef = useCursorRef(null);
  const [hidden, setHidden] = useCursorState(true);

  useCursorEffect(() => {
    let rx = window.innerWidth / 2;
    let ry = window.innerHeight / 2;
    let tx = rx;
    let ty = ry;
    let blinkUntil = 0;

    function onMove(e) {
      tx = e.clientX;
      ty = e.clientY;
      if (hidden) setHidden(false);
    }
    function onDown() {
      blinkUntil = performance.now() + 220;
    }
    function onLeave() {
      setHidden(true);
    }
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mousedown', onDown);
    window.addEventListener('mouseleave', onLeave);

    let raf;
    function tick() {
      // Smooth chase
      rx += (tx - rx) * 0.28;
      ry += (ty - ry) * 0.28;
      const node = ref.current;
      if (node) {
        node.style.transform = `translate(${rx - 22}px, ${ry - 14}px)`;
      }
      // Iris: looks toward viewport center (inverted gaze trick)
      const cx = window.innerWidth / 2;
      const cy = window.innerHeight / 2;
      const dx = cx - rx;
      const dy = cy - ry;
      const mag = Math.sqrt(dx * dx + dy * dy) || 1;
      const max = 5;
      const norm = Math.min(1, mag / 200);
      const ix = (dx / mag) * max * norm;
      const iy = (dy / mag) * max * norm;
      if (irisRef.current) {
        irisRef.current.setAttribute('transform', `translate(${22 + ix} ${14 + iy})`);
      }
      // Blink on click
      const now = performance.now();
      let lid = 0;
      if (now < blinkUntil) {
        const t = 1 - (blinkUntil - now) / 220;
        lid = t < 0.5 ? t * 2 : (1 - t) * 2;
      }
      const lidH = lid * 14;
      if (lidTopRef.current) lidTopRef.current.setAttribute('height', lidH);
      if (lidBotRef.current) {
        lidBotRef.current.setAttribute('y', 28 - lidH);
        lidBotRef.current.setAttribute('height', lidH);
      }
      raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mousedown', onDown);
      window.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  return (
    <div
      ref={ref}
      style={{
        position: 'fixed',
        left: 0,
        top: 0,
        width: 44,
        height: 28,
        pointerEvents: 'none',
        zIndex: 999,
        opacity: hidden ? 0 : 1,
        transition: 'opacity 200ms',
        mixBlendMode: 'normal',
      }}
    >
      <svg width={44} height={28} viewBox="0 0 44 28" style={{ overflow: 'visible' }}>
        <defs>
          <clipPath id="cursor-clip">
            <path d="M 2 14 Q 22 -1 42 14 Q 22 29 2 14 Z" />
          </clipPath>
        </defs>
        <path d="M 2 14 Q 22 -1 42 14 Q 22 29 2 14 Z" fill={palette.sclera} stroke={palette.pupil} strokeWidth={1.2} />
        <g clipPath="url(#cursor-clip)">
          <g ref={irisRef} transform="translate(22 14)">
            <circle cx={0} cy={0} r={7} fill={palette.iris} />
            <circle cx={0} cy={0} r={3.2} fill={palette.pupil} />
            <circle cx={-1.7} cy={-1.7} r={0.9} fill="#fff" opacity={0.95} />
          </g>
          <rect ref={lidTopRef} x={0} y={0} width={44} height={0} fill={palette.pupil} />
          <rect ref={lidBotRef} x={0} y={28} width={44} height={0} fill={palette.pupil} />
        </g>
      </svg>
    </div>
  );
}

window.CursorEye = CursorEye;