import { lazy, Suspense, useEffect } from "react";
import type { PlayerSession, ShellPhase } from "./types";
import { useManastormAdminStore } from "../game/manastormAdminStore";

const ManastormSelectScreen = lazy(() => import("../ui/ManastormSelectScreen").then((module) => ({ default: module.ManastormSelectScreen })));
const ArenaSelectScreen = lazy(() => import("../ui/ArenaSelectScreen").then((module) => ({ default: module.ArenaSelectScreen })));
const ArenaRuntime = lazy(() => import("../ArenaRuntime"));

function ShelvedTransition() {
  return <div className="world-transition"><span>HM</span><strong>Opening expedition</strong><small>Preparing the next screen...</small></div>;
}

export function ShelvedModeRoute({
  phase,
  session,
}: {
  readonly phase: ShellPhase;
  readonly session: PlayerSession | null;
}) {
  const refreshManastormConfig = useManastormAdminStore((state) => state.refresh);

  useEffect(() => {
    void refreshManastormConfig(session);
  }, [refreshManastormConfig, session]);

  let screen = null;
  if (phase === "manastorms") screen = <ManastormSelectScreen />;
  else if (phase === "arenas") screen = <ArenaSelectScreen />;
  else if (phase === "arena-game") screen = <ArenaRuntime />;
  return <Suspense fallback={<ShelvedTransition />}>{screen}</Suspense>;
}