// AGENT_TARGET: gravity-jump-tester — tap-to-jump astronaut showing real gravity per planet

const EARTH_JUMP_MS = 1100; // full up-and-down arc on Earth

// AGENT_TARGET: gravity-jump-tester — GravityJumpTester main component
function GravityJumpTester({ planet, gravityRatio }) {
  const ratio = gravityRatio > 0 ? gravityRatio : 1;
  // hang time ∝ 1/sqrt(g) — same takeoff force means higher jump on low-g worlds
  const duration = EARTH_JUMP_MS / Math.sqrt(ratio);
  const maxHeightPx = Math.min(160, Math.max(18, Math.round(76 / ratio)));

  const [progress, setProgress] = useState(0);
  const [jumping, setJumping] = useState(false);
  const animRef = useRef(null);
  const startRef = useRef(null);

  function startJump() {
    if (jumping) return;
    if (animRef.current) cancelAnimationFrame(animRef.current);
    setJumping(true);
    setProgress(0);
    startRef.current = performance.now();
    if (typeof playKidSound === "function") playKidSound("pop");

    function tick(now) {
      const t = Math.min((now - startRef.current) / duration, 1);
      setProgress(Math.sin(t * Math.PI)); // sine arc: 0→1→0
      if (t < 1) {
        animRef.current = requestAnimationFrame(tick);
      } else {
        setProgress(0);
        setJumping(false);
      }
    }
    animRef.current = requestAnimationFrame(tick);
  }

  useEffect(
    () => () => {
      if (animRef.current) cancelAnimationFrame(animRef.current);
    },
    [],
  );

  const heightPx = Math.round(progress * maxHeightPx);
  const jumpHeightBar = (maxHeightPx / 160) * 100;
  const multLabel =
    ratio < 0.1
      ? "∞× height — you'd orbit!"
      : `${(1 / ratio).toFixed(1)}× Earth jump`;
  const feelLabel =
    ratio < 0.3
      ? "So light — you'd float away!"
      : ratio < 0.7
        ? "Long dreamy leap"
        : ratio < 1.3
          ? "Just like home on Earth"
          : ratio < 3
            ? "Short, heavy hop"
            : "Can barely leave the ground!";

  return (
    <div
      className="gravity-jump-card"
      style={{ "--planet-color": planet.color || "#5599ff" }}
    >
      <div className="gravity-jump-label">GRAVITY JUMP</div>
      <div
        className="gravity-jump-stage"
        role="button"
        tabIndex={0}
        aria-label={jumping ? "Jumping…" : "Tap to jump!"}
        onClick={() => startJump()}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") startJump();
        }}
      >
        <div
          className="gravity-jump-astronaut"
          aria-hidden="true"
          style={{ bottom: `${24 + heightPx}px` }}
        >
          👨‍🚀
        </div>
        <div className="gravity-jump-ground" />
        {!jumping && <div className="gravity-jump-prompt">Tap to jump!</div>}
      </div>
      <div className="gravity-jump-height-meter" aria-label="Jump height meter">
        <span>
          <i>
            <b style={{ width: `${jumpHeightBar}%` }} />
          </i>
          <small>{maxHeightPx}px jump arc</small>
        </span>
      </div>
      <div className="gravity-jump-stats">
        <strong>{multLabel}</strong>
        <span>{feelLabel}</span>
      </div>
    </div>
  );
}