// Orbital navigation: section labels rotating around a central waveform.
// User can drag to spin; auto-spin idle.

const { useEffect, useRef, useState } = React;

function OrbitalNav({ items, onSelect }) {
  const [angle, setAngle] = useState(0);
  const [hover, setHover] = useState(-1);
  const dragging = useRef(false);
  const last = useRef(null);
  const vel = useRef(0.06); // base auto-spin speed (deg/frame)
  const ringRef = useRef(null);

  useEffect(() => {
    let raf;
    const tick = () => {
      if (!dragging.current) {
        setAngle((a) => a + vel.current);
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const onDown = (e) => {
    dragging.current = true;
    last.current = { x: e.clientX, y: e.clientY };
  };
  const onMove = (e) => {
    if (!dragging.current || !ringRef.current) return;
    const r = ringRef.current.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    const a1 = Math.atan2(last.current.y - cy, last.current.x - cx);
    const a2 = Math.atan2(e.clientY - cy, e.clientX - cx);
    const delta = (a2 - a1) * (180 / Math.PI);
    setAngle((a) => a + delta);
    vel.current = delta * 0.6 || vel.current;
    last.current = { x: e.clientX, y: e.clientY };
  };
  const onUp = () => {
    dragging.current = false;
    // damp toward base auto-spin
    const target = 0.06;
    const damp = () => {
      vel.current = vel.current * 0.9 + target * 0.1;
      if (Math.abs(vel.current - target) > 0.005) requestAnimationFrame(damp);
      else vel.current = target;
    };
    damp();
  };

  useEffect(() => {
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
    };
  }, []);

  const RADIUS = 320;
  return (
    <div
      ref={ringRef}
      className="orbit-ring"
      onMouseDown={onDown}
      style={{ position: "absolute", inset: 0, pointerEvents: "auto", cursor: dragging.current ? "grabbing" : "grab" }}
    >
      {items.map((it, i) => {
        const a = (i / items.length) * 360 + angle;
        const rad = (a * Math.PI) / 180;
        const x = Math.cos(rad) * RADIUS;
        const y = Math.sin(rad) * RADIUS;
        // keep labels upright always
        const counter = 0;
        return (
          <a
            key={it.label}
            href={it.href}
            onMouseEnter={() => setHover(i)}
            onMouseLeave={() => setHover(-1)}
            onClick={(e) => {
              if (onSelect) {
                e.preventDefault();
                onSelect(it, i);
              }
            }}
            className="orbit-label"
            style={{
              left: `calc(50% + ${x}px)`,
              top: `calc(50% + ${y}px)`,
              transform: `translate(-50%, -50%) rotate(${counter}deg)`,
              opacity: hover === -1 || hover === i ? 1 : 0.35,
            }}
          >
            <span className="orbit-num mono">{String(i + 1).padStart(2, "0")}</span>
            <span className="orbit-text">{it.label}</span>
          </a>
        );
      })}
    </div>
  );
}

window.OrbitalNav = OrbitalNav;