/* @component-map
 * App — Main container, handles screen switching and game state coordination
 * HomeScreen — Logo, preview grid, and menu buttons
 * ModeScreen — Game mode selection (Marathon, Sprint, Ultra)
 * GameScreen — Main game canvas, side panels, and touch controls
 * PauseScreen — Pause overlay with resume/restart/quit options
 * ScoreScreen — Game over / victory results with stats
 * Notification — Floating notification overlay for combos/tetrises
 * @end-component-map */

import { HomeScreen } from './components/HomeScreen.jsx';
import { ModeScreen } from './components/ModeScreen.jsx';
import { GameScreen } from './components/GameScreen.jsx';
import { PauseScreen } from './components/PauseScreen.jsx';
import { ScoreScreen } from './components/ScoreScreen.jsx';
import { useCallback, useState } from 'react';
import { Notification } from './components/Notification.jsx';

function App() {
  const [screen, setScreen] = useState('home');
  const [gameMode, setGameMode] = useState('marathon');
  const [gameKey, setGameKey] = useState(0);
  const [finalStats, setFinalStats] = useState(null);
  const [notif, setNotif] = useState({ text: '', color: 'white', visible: false });

  const startGame = useCallback((mode) => {
    setGameMode(mode);
    setGameKey(k => k + 1);
    setScreen('game');
  }, []);

  const handlePause = useCallback(() => setScreen('pause'), []);
  const handleResume = useCallback(() => setScreen('game'), []);
  const handleRestart = useCallback(() => {
    setGameKey(k => k + 1);
    setScreen('game');
  }, []);
  const handleQuit = useCallback(() => setScreen('home'), []);

  const handleGameEnd = useCallback((stats) => {
    setFinalStats(stats);
    setTimeout(() => setScreen('score'), 400);
  }, []);

  const showNotif = useCallback((text, color) => {
    setNotif({ text, color: color || 'white', visible: true });
    setTimeout(() => setNotif(n => ({ ...n, visible: false })), 1000);
  }, []);

  return (
    <div className="app-root">
      {screen === 'home' && <HomeScreen onPlay={() => setScreen('mode')} />}
      {screen === 'mode' && <ModeScreen onSelect={startGame} onBack={() => setScreen('home')} />}
      {(screen === 'game' || screen === 'pause') && (
        <GameScreen
          key={gameKey}
          mode={gameMode}
          paused={screen === 'pause'}
          onPause={handlePause}
          onResume={handleResume}
          onEnd={handleGameEnd}
          showNotif={showNotif}
        />
      )}
      {screen === 'pause' && (
        <PauseScreen onResume={handleResume} onRestart={handleRestart} onQuit={handleQuit} />
      )}
      {screen === 'score' && (
        <ScoreScreen
          stats={finalStats}
          mode={gameMode}
          onPlayAgain={handleRestart}
          onMenu={handleQuit}
        />
      )}
      <Notification text={notif.text} color={notif.color} visible={notif.visible} />
    </div>
  );
}

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