import { useEffect } from "react";
import { playManastormClientCue, stopManastormClientCue } from "./manastormClientCues";
import { useManastormStore } from "./manastormStore";
import { useGameStore } from "./store";

export function ManastormClientCueBridge() {
  const gameMode = useGameStore((state) => state.gameMode);
  const cueRequest = useManastormStore((state) => state.clientCue);

  useEffect(() => {
    if (gameMode !== "manastorm" || !cueRequest) return;
    let current = true;
    void playManastormClientCue(cueRequest.cueId).finally(() => {
      if (!current) return;
      const state = useManastormStore.getState();
      if (state.clientCue?.revision === cueRequest.revision) state.clearClientCue();
    });
    return () => {
      current = false;
    };
  }, [cueRequest, gameMode]);

  useEffect(() => () => stopManastormClientCue(), []);

  return null;
}