import { manastormBubbleFillPercent } from "../game/manastormClientOverlay";
import { ManastormClientCueBridge } from "../game/ManastormClientCueBridge";
import { useManastormStore } from "../game/manastormStore";
import { useGameStore } from "../game/store";

export function ManastormClientOverlay() {
  const gameMode = useGameStore((state) => state.gameMode);
  const status = useManastormStore((state) => state.status);
  const countdown = useManastormStore(
    (state) => state.clientOverlay.nextWaveCountdownSeconds,
  );
  const bubble = useManastormStore((state) => state.clientOverlay.safetyBubble);
  const visible = gameMode === "manastorm"
    && status !== "idle"
    && status !== "failed"
    && status !== "completed";
  const showCountdown = visible && countdown !== null;
  const showBubble = visible && bubble.active;

  return (
    <>
      <ManastormClientCueBridge />
      {showCountdown || showBubble ? (
        <section
          className={`manastorm-client-overlay manastorm-client-overlay--${bubble.severity}`}
          aria-label="Manastorm wave alerts"
          aria-live="polite"
        >
          {showCountdown ? (
            <p className="manastorm-countdown">
              <span>Next wave</span>
              <strong>{countdown}s</strong>
            </p>
          ) : null}
          {showBubble ? (
            <div
              className="manastorm-safety-bubble"
              role="progressbar"
              aria-label={`Safety Bubble: ${bubble.distanceRemaining.toFixed(1)} yards remaining`}
              aria-valuemin={0}
              aria-valuemax={bubble.radius}
              aria-valuenow={bubble.distanceRemaining}
            >
              <p>
                <span>Safety bubble</span>
                <strong>{bubble.distanceRemaining.toFixed(1)} yd</strong>
              </p>
              <i aria-hidden="true">
                <b style={{ width: `${manastormBubbleFillPercent(bubble)}%` }} />
              </i>
            </div>
          ) : null}
        </section>
      ) : null}
    </>
  );
}