import { useEffect, useState } from "react";
import LoginPage from "./pages/LoginPage";
import ModeSelectPage from "./pages/ModeSelectPage";
import QuizPage from "./pages/QuizPage";

function App() {
  const [authenticated, setAuthenticated] = useState(false);
  const [mode, setMode] = useState(null);

  useEffect(() => {
    const isAuth = sessionStorage.getItem("authenticated") === "true";
    const savedMode = sessionStorage.getItem("mode");
    if (isAuth) setAuthenticated(true);
    if (savedMode) setMode(savedMode);
  }, []);

  const handleModeSelect = (newMode) => {
    sessionStorage.setItem("mode", newMode);
    setMode(newMode);
  };

  if (!authenticated) return <LoginPage onSuccess={() => setAuthenticated(true)} />;
  if (!mode) return <ModeSelectPage onSelect={handleModeSelect} />;
  return <QuizPage mode={mode} onBack={() => setMode(null)} />;
}

export default App;
