/* @component-map
 * App — Main container, role selection, tab navigation [app.jsx]
 * TeacherView — Teacher dashboard with quiz management [components/TeacherView.jsx]
 * QuizBuilder — Create/edit quizzes with multiple choice questions [components/QuizBuilder.jsx]
 * LiveQuiz — Run a live quiz session as teacher [components/LiveQuiz.jsx]
 * StudentView — Student join + answer interface [components/StudentView.jsx]
 * Scoreboard — Live scoreboard component [components/Scoreboard.jsx]
 * @end-component-map */

import { useState } from 'react';
import { TeacherView } from './components/TeacherView.jsx';
import { StudentView } from './components/StudentView.jsx';

function App() {
  const [role, setRole] = useState(null);

  if (!role) {
    return (
      <div className="role-select-screen">
        <div className="role-select-container">
          <div className="logo-icon">🎓</div>
          <h1 className="app-title">QuizPulse</h1>
          <p className="app-subtitle">Real-time classroom quizzes</p>
          <div className="role-cards">
            <button className="role-card teacher-card" onClick={() => setRole('teacher')}>
              <span className="role-emoji">📚</span>
              <span className="role-label">I'm a Teacher</span>
              <span className="role-desc">Create & run quizzes</span>
            </button>
            <button className="role-card student-card" onClick={() => setRole('student')}>
              <span className="role-emoji">✋</span>
              <span className="role-label">I'm a Student</span>
              <span className="role-desc">Join & answer quizzes</span>
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          <span className="header-logo">🎓</span>
          <span className="header-title">QuizPulse</span>
        </div>
        <button className="switch-role-btn" onClick={() => setRole(null)}>Switch Role</button>
      </header>
      <main className="app-main">
        {role === 'teacher' ? <TeacherView /> : <StudentView />}
      </main>
    </div>
  );
}

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