// A small ant that wanders the screen with smooth perlin-ish drift, occasionally
// drifts toward the cursor for a bit, then loses interest.

const { useEffect, useRef } = React;

function Ant({ size = 14, baseSpeed = 60 }) {
  const ref = useRef(null);

  useEffect(() => {
    let raf;
    let last = performance.now();
    let x = window.innerWidth * 0.4;
    let y = window.innerHeight * 0.6;
    let heading = Math.random() * Math.PI * 2;
    let mouse = { x: x, y: y, active: false };
    let interestMode = false;
    let interestUntil = 0;
    let nextInterestCheck = performance.now() + 4000 + Math.random() * 4000;
    let speed = baseSpeed;

    function onMove(e) {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
      mouse.active = true;
    }
    window.addEventListener("mousemove", onMove);

    function tick(now) {
      const dt = Math.min(0.05, (now - last) / 1000);
      last = now;

      // Maybe become interested in the cursor.
      if (now > nextInterestCheck) {
        nextInterestCheck = now + 5000 + Math.random() * 6000;
        if (mouse.active && Math.random() < 0.5) {
          interestMode = true;
          interestUntil = now + 2500 + Math.random() * 2000;
        }
      }
      if (now > interestUntil) interestMode = false;

      // Steering
      let targetHeading = heading;
      if (interestMode) {
        const dx = mouse.x - x;
        const dy = mouse.y - y;
        targetHeading = Math.atan2(dy, dx);
      } else {
        // wander: small random drift on heading
        targetHeading = heading + (Math.random() - 0.5) * 1.4;
      }
      // smooth heading
      const diff = ((targetHeading - heading + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
      heading += diff * (interestMode ? 0.08 : 0.04);

      // Movement w/ a stop-and-go feel (ants pause)
      const wobble = 0.7 + 0.5 * Math.sin(now / 180);
      const stop = Math.sin(now / 700) > 0.95 ? 0.15 : 1; // brief pauses
      x += Math.cos(heading) * speed * dt * wobble * stop;
      y += Math.sin(heading) * speed * dt * wobble * stop;

      // Bounce off edges with a small margin
      const m = 16;
      if (x < m) { x = m; heading = Math.PI - heading; }
      if (x > window.innerWidth - m) { x = window.innerWidth - m; heading = Math.PI - heading; }
      if (y < m) { y = m; heading = -heading; }
      if (y > window.innerHeight - m) { y = window.innerHeight - m; heading = -heading; }

      const el = ref.current;
      if (el) {
        const deg = (heading * 180) / Math.PI + 90;
        el.style.transform = `translate(${x - size / 2}px, ${y - size / 2}px) rotate(${deg}deg)`;
      }
      raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", onMove);
    };
  }, [size, baseSpeed]);

  // Tiny ant SVG: 3 body segments, 6 legs, 2 antennae. Aimed "up" (north).
  return (
    <div className="ant-stage" aria-hidden="true">
      <div className="ant" ref={ref} style={{ width: size, height: size }}>
        <svg viewBox="-10 -14 20 28" width={size} height={size * 1.4}>
          {/* legs */}
          <g stroke="var(--charcoal)" strokeWidth="0.9" strokeLinecap="round" fill="none">
            <path d="M 0 -2 L -7 -7" />
            <path d="M 0 -2 L 7 -7" />
            <path d="M 0 0 L -8 0" />
            <path d="M 0 0 L 8 0" />
            <path d="M 0 2 L -7 7" />
            <path d="M 0 2 L 7 7" />
            {/* antennae */}
            <path d="M -1.5 -7 q -2 -3 -4 -4" />
            <path d="M 1.5 -7 q 2 -3 4 -4" />
          </g>
          {/* body: head, thorax, abdomen */}
          <ellipse cx="0" cy="-7" rx="2.4" ry="2.6" fill="var(--charcoal)" />
          <ellipse cx="0" cy="-1" rx="2" ry="2.4" fill="var(--charcoal)" />
          <ellipse cx="0" cy="5" rx="3.2" ry="4.2" fill="var(--charcoal)" />
        </svg>
      </div>
    </div>
  );
}

window.Ant = Ant;