// ============================================================================
// App — screen routing
// ============================================================================

const { useState: aUseState } = React;

function App() {
  const [screen, setScreen] = aUseState('title'); // title | select | tutorial | combat | gameOver
  const [char, setChar] = aUseState(null);
  const [opp, setOpp] = aUseState(null);
  const [endResult, setEndResult] = aUseState(null);

  if (screen === 'title') {
    return <TitleScreen
      onPlay={() => setScreen('select')}
      onSelect={() => setScreen('select')}
      onTutorial={() => setScreen('tutorial')}
    />;
  }
  if (screen === 'tutorial') {
    return <TutorialScreen onBack={() => setScreen('title')} />;
  }
  if (screen === 'select') {
    return <CharacterSelectScreen
      onStart={(c, o) => { setChar(c); setOpp(o); setScreen('combat'); }}
      onBack={() => setScreen('title')}
    />;
  }
  if (screen === 'combat') {
    return <CombatScreen
      persona={opp.key}
      playerProfile={{ name: char.name, title: char.title, key: char.key }}
      onGameOver={(winner, state) => { setEndResult({ winner, state }); setScreen('gameOver'); }}
      onExit={() => setScreen('select')}
    />;
  }
  if (screen === 'gameOver') {
    return <GameOverScreen
      winner={endResult.winner}
      state={endResult.state}
      onRematch={() => setScreen('combat')}
      onMenu={() => setScreen('title')}
    />;
  }
  return null;
}

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