import { useState } from 'react';
import GameMap from './components/GameMap';
import MainMenu from './components/MainMenu';
import Sidebar from './components/Sidebar';
import Topbar from './components/Topbar';
import { GameStore } from './game/GameStore';
import { clearSave } from './game/persistence';
import './App.css';

type Screen = 'menu' | 'game';

function App() {
  const [store] = useState(() => new GameStore());
  // Always starts on the menu, regardless of whether a save exists — loading straight into a
  // resumed game on every page (re)load isn't what was asked for.
  const [screen, setScreen] = useState<Screen>('menu');

  function handleNewGame() {
    clearSave();
    setScreen('game');
  }

  function handleExitToMenu() {
    store.save();
    setScreen('menu');
  }

  // Called after a death overlay is acknowledged: the store already wiped the save itself the
  // moment the character was caught, so this just returns to the menu without saving over it.
  function handleDeath() {
    setScreen('menu');
  }

  if (screen === 'menu') {
    return <MainMenu onNewGame={handleNewGame} onContinue={() => setScreen('game')} />;
  }

  return (
    <div className="app">
      <Topbar store={store} onExitToMenu={handleExitToMenu} />
      <div className="main-row">
        <Sidebar store={store} />
        <GameMap store={store} onDeath={handleDeath} />
      </div>
    </div>
  );
}

export default App;