/* @component-map
 * App — Main container, handles view switching between lobby and game
 * Lobby — Room name and player name input, join button
 * Game — Main game area with scoreboard, status, canvas, word display, keyboard
 * Scoreboard — Displays player scores and round info
 * StatusBanner — Shows current game status messages
 * HangmanCanvas — Draws the hangman figure on canvas
 * WordDisplay — Shows word slots with revealed/hidden letters
 * WordInput — Input for the setter to enter a word
 * Keyboard — On-screen letter keyboard for guessing
 * @end-component-map */

import { useCollection, useAuth } from '@deplixo/sdk';
import { Lobby } from './components/Lobby.jsx';
import { useCallback, useEffect, useState } from 'react';
import { Game } from './components/Game.jsx';

function App() {
  const [view, setView] = useState('lobby');
  const [roomName, setRoomName] = useState('');
  const [playerName, setPlayerName] = useState('');
  const { user } = useAuth();
  const { items: gameItems, add, update, loading } = useCollection('hangman-games', { personal: true });

  const gameState = gameItems.length > 0 ? gameItems[0] : null;

  const handleJoin = useCallback((room, name) => {
    setRoomName(room);
    setPlayerName(name);
    setView('game');
  }, []);

  const handleBack = useCallback(() => {
    setView('lobby');
  }, []);

  return (
    <div className="app-container">
      <h1>Hangman Duel</h1>
      <p className="subtitle">2-player word guessing game</p>
      {view === 'lobby' ? (
        <Lobby onJoin={handleJoin} />
      ) : (
        <Game
          roomName={roomName}
          playerName={playerName}
          userId={user?.id}
          onBack={handleBack}
        />
      )}
    </div>
  );
}

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