/* @component-map
 * App — Main container, role selection, room routing [app.jsx]
 * HostView — Host creates room, manages questions, controls game flow [components/HostView.jsx]
 * PlayerView — Player joins room, answers questions [components/PlayerView.jsx]
 * QuestionManager — Host adds/edits questions [components/QuestionManager.jsx]
 * GamePlay — Live game screen for host (question display, timer, leaderboard) [components/GamePlay.jsx]
 * PlayerGame — Live game screen for player (answer submission, feedback) [components/PlayerGame.jsx]
 * Leaderboard — Live leaderboard component [components/Leaderboard.jsx]
 * @end-component-map */

import { useState } from 'react';
import { useIdentity } from '@deplixo/sdk';
import { HostView } from './components/HostView.jsx';
import { PlayerView } from './components/PlayerView.jsx';

// PROGRESS:sc_001:complete:Setting up the trivia game shell

function App() {
  const { user, loading } = useIdentity();
  const [role, setRole] = useState(null);

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-spinner"></div>
        <p>Loading Trivia Party...</p>
      </div>
    );
  }

  if (!role) {
    return (
      <div className="role-select-screen">
        <div className="role-header">
          <h1 className="app-title">🎀 Trivia Party</h1>
          <p className="app-subtitle">The sweetest trivia game around!</p>
          <p className="welcome-name">Hey, {user.name}!</p>
        </div>
        <div className="role-cards">
          <button className="role-card host-card" onClick={() => setRole('host')}>
            <span className="role-icon">🎤</span>
            <span className="role-label">Host a Game</span>
            <span className="role-desc">Create a room, add questions, and run the show</span>
          </button>
          <button className="role-card player-card" onClick={() => setRole('player')}>
            <span className="role-icon">🎮</span>
            <span className="role-label">Join a Game</span>
            <span className="role-desc">Enter a room code and compete for the top spot</span>
          </button>
        </div>
        <button className="back-subtle" style={{ visibility: 'hidden' }}>Back</button>
      </div>
    );
  }

  return (
    <div className="app-container">
      {role === 'host' ? (
        <HostView user={user} onBack={() => setRole(null)} />
      ) : (
        <PlayerView user={user} onBack={() => setRole(null)} />
      )}
    </div>
  );
}

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