/* @component-map
 * App — Main container, handles view switching between landing, DM, and player views
 * Landing — Role selection screen with DM and Player cards
 * DMLoginModal — Modal for DM code entry
 * DMSetupModal — Modal for first-time DM setup
 * PlayerJoinModal — Modal for player name entry
 * DMView — DM dashboard with character grid and management
 * PlayerView — Player character sheet with live updates
 * CharacterModal — Add/edit character form modal
 * HPModal — Damage/heal HP adjustment modal
 * NoteModal — Send private note to player modal
 * Toast — Global toast notification component
 * @end-component-map */

import { Landing } from './components/Landing.jsx';
import { DMView } from './components/DMView.jsx';
import { PlayerView } from './components/PlayerView.jsx';
import { useState } from 'react';
import { Toast, ToastProvider } from './components/Toast.jsx';

function App() {
  const [view, setView] = useState('landing');
  const [playerName, setPlayerName] = useState('');

  function enterDM() {
    setView('dm');
  }

  function enterPlayer(name) {
    setPlayerName(name);
    setView('player');
  }

  function logout() {
    setView('landing');
    setPlayerName('');
  }

  return (
    <ToastProvider>
      {view === 'landing' && (
        <Landing onEnterDM={enterDM} onEnterPlayer={enterPlayer} />
      )}
      {view === 'dm' && <DMView onLogout={logout} />}
      {view === 'player' && <PlayerView playerName={playerName} onLogout={logout} />}
      <Toast />
    </ToastProvider>
  );
}

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