/* global React, ReactDOM, LoginGate, Dashboard, RaceLobby, GameTable */

function App() {
  const [screen, setScreen] = React.useState('login');
  const [user, setUser]     = React.useState('');
  const [room, setRoom]     = React.useState({ code: 'LUXE', rounds: 4, race: false });

  return (
    <div className="app-shell" data-screen-label={`0${{login:1,dashboard:2,lobby:3,game:4}[screen]||1} ${screen}`}>
      {screen === 'login' && (
        <LoginGate onLogin={(name) => { setUser(name); setScreen('dashboard'); }} />
      )}
      {screen === 'dashboard' && (
        <Dashboard
          user={user}
          onCreateRoom={(r) => { setRoom({ ...r, race: true }); setScreen('lobby'); }}
          onSolo={() => { setRoom({ code: 'SOLO', rounds: 4, race: false }); setScreen('game'); }}
          onLogout={() => { setUser(''); setScreen('login'); }}
        />
      )}
      {screen === 'lobby' && (
        <RaceLobby
          user={user}
          code={room.code}
          rounds={room.rounds}
          onStart={() => setScreen('game')}
          onLeave={() => setScreen('dashboard')}
        />
      )}
      {screen === 'game' && (
        <GameTable
          user={user}
          code={room.code}
          rounds={room.rounds}
          race={room.race}
          onLeave={() => setScreen(room.race ? 'lobby' : 'dashboard')}
        />
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);