import { useState } from 'react';
import { ChexuanGame } from './games/chexuan/ChexuanGame';
import { MahjongGame } from './games/mahjong/MahjongGame';
import { GameSelect } from './screens/GameSelect';
import { Lobby } from './screens/Lobby';
import { DEFAULT_ROOM_BY_GAME, type GameId, type GameRoom } from './navigation';
import './App.css';

type Screen = 'lobby' | 'select' | 'chexuan' | 'mahjong';

function App() {
  const [screen, setScreen] = useState<Screen>('lobby');
  const [selectedGame, setSelectedGame] = useState<GameId>('chexuan');
  const [selectedRoom, setSelectedRoom] = useState<GameRoom>(
    () => DEFAULT_ROOM_BY_GAME.chexuan,
  );

  const handleEnterSelect = (gameId: GameId) => {
    setSelectedGame(gameId);
    setSelectedRoom(DEFAULT_ROOM_BY_GAME[gameId]);
    setScreen('select');
  };

  const handleEnterRoom = (room: GameRoom) => {
    setSelectedRoom(room);
    setScreen(selectedGame);
  };

  return (
    <div className="app">
      <div className="phone">
        {screen === 'lobby' && <Lobby onSelectGame={handleEnterSelect} />}

        {screen === 'select' && (
          <GameSelect
            gameId={selectedGame}
            onBack={() => setScreen('lobby')}
            onEnterRoom={handleEnterRoom}
          />
        )}

        {screen === 'chexuan' && (
          <ChexuanGame
            room={selectedRoom}
            onExit={() => setScreen('select')}
            onHome={() => setScreen('lobby')}
          />
        )}

        {screen === 'mahjong' && (
          <MahjongGame
            room={selectedRoom}
            onExit={() => setScreen('select')}
            onHome={() => setScreen('lobby')}
          />
        )}
      </div>
    </div>
  );
}

export default App;
