import { h } from "preact";
import { PhaserGame, PhaserScene } from "boardgame-phaser";
import { useMemo } from "preact/hooks";
import { IndexScene } from "@/scenes/IndexScene";
import { MapViewerScene } from "@/scenes/MapViewerScene";
import { GridViewerScene } from "@/scenes/GridViewerScene";
import { ShapeViewerScene } from "@/scenes/ShapeViewerScene";
import { GameFlowScene } from "@/scenes/GameFlowScene";
import { PlaceholderEncounterScene } from "@/scenes/PlaceholderEncounterScene";
import { createGameState } from "@/state/gameState";

// 全局游戏状态单例
const gameState = createGameState();

export default function App() {
  const indexScene = useMemo(() => new IndexScene(), []);
  const mapViewerScene = useMemo(() => new MapViewerScene(), []);
  const gridViewerScene = useMemo(() => new GridViewerScene(), []);
  const shapeViewerScene = useMemo(() => new ShapeViewerScene(), []);
  const gameFlowScene = useMemo(() => new GameFlowScene(gameState), []);
  const placeholderEncounterScene = useMemo(
    () => new PlaceholderEncounterScene(gameState),
    [],
  );

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 flex relative justify-center items-center">
        <PhaserGame
          initialScene="IndexScene"
          config={{ width: 1920, height: 1080 }}
        >
          <PhaserScene sceneKey="IndexScene" scene={indexScene as any} />
          <PhaserScene
            sceneKey="MapViewerScene"
            scene={mapViewerScene as any}
          />
          <PhaserScene
            sceneKey="GridViewerScene"
            scene={gridViewerScene as any}
          />
          <PhaserScene
            sceneKey="ShapeViewerScene"
            scene={shapeViewerScene as any}
          />
          <PhaserScene sceneKey="GameFlowScene" scene={gameFlowScene as any} />
          <PhaserScene
            sceneKey="PlaceholderEncounterScene"
            scene={placeholderEncounterScene as any}
          />
        </PhaserGame>
      </div>
    </div>
  );
}