function useHashRoute() {
  const [route, setRoute] = React.useState(() => window.location.hash.slice(1) || "/login");
  React.useEffect(() => {
    const onHash = () => setRoute(window.location.hash.slice(1) || "/login");
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const go = React.useCallback((path) => { window.location.hash = path; }, []);
  return [route, go];
}

function useSession() {
  // Session is restored from the httpOnly cookie via /api/auth/me on load.
  const [session, setRaw] = React.useState({ loading: true });
  const setSession = React.useCallback((next) => { setRaw(next); }, []);

  React.useEffect(() => {
    let alive = true;
    authApi
      .me()
      .then((user) => {
        if (!alive) return;
        setRaw(user ? { authed: true, ...user } : {});
      })
      .catch(() => alive && setRaw({}));
    return () => { alive = false; };
  }, []);

  return [session, setSession];
}

function App() {
  const [route, go] = useHashRoute();
  const [session, setSession] = useSession();
  const logout = React.useCallback(async () => {
    await authApi.logout();
    setSession({});
    go('/login');
  }, [setSession, go]);

  React.useEffect(() => {
    // Wait for the session bootstrap before bouncing to /login.
    if (session.loading) return;
    if (route.startsWith('/app/') && !session.authed) go('/login');
  }, [route, session.authed, session.loading]);

  if (session.loading) {
    return (
      <div className="codeland" style={{ height: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--paper)" }}>
        <Spinner />
      </div>
    );
  }


  if (route === '/login') return <LoginScreen go={go} setSession={setSession} session={session} />;
  if (route === '/signup') return <SignupScreen go={go} setSession={setSession} session={session} />;
  if (route === '/otp') return <OtpScreen go={go} setSession={setSession} session={session} />;
  if (route === '/onboarding') return <OnboardingScreen go={go} setSession={setSession} session={session} />;
  if (route === '/forgot') return <ForgotScreen go={go} />;

  if (route.startsWith('/app/')) {
    let content = null;
    const role = session.role || "student";
    if (route === '/app/student') content = <StudentHome theme="" age="younger" go={go} session={session} route={route}/>;
    else if (route === '/app/student/schedule') content = <StudentSchedule go={go} session={session}/>;
    else if (route === '/app/student/mission') content = <StudentMission theme="" />;
    else if (route === '/app/student/courses') content = <StudentCourseTracking theme="" go={go} session={session}/>;
    else if (route === '/app/student/quiz') content = <StudentQuiz theme="" go={go} session={session}/>;
    else if (route === '/app/student/certificates') content = <StudentCertificates theme="" go={go} session={session}/>;
    else if (route === '/app/student/forum') content = <StudentForum theme="" go={go} session={session}/>;
    else if (route === '/app/student/homework') content = <StudentHomework theme="" go={go} session={session}/>;
    else if (route === '/app/student/shop') content = <StudentShop theme="" go={go} session={session}/>;
    else if (route === '/app/student/profile') content = <StudentProfile theme="" go={go} session={session}/>;
    else if (route === '/app/teacher') content = <TeacherHome dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/live') content = <TeacherLive dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/content') content = <TeacherContent dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/quizzes') content = <TeacherQuizzes dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/homework') content = <TeacherHomework dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/schedule') content = <TeacherMySchedule dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/attendance') content = <TeacherAttendance dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/analytics') content = <TeacherAnalytics dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/messages') content = <TeacherMessages dark={false} go={go} session={session}/>;
    else if (route === '/app/teacher/xp') content = <TeacherAwardXP dark={false} go={go} session={session}/>;
    else if (route === '/app/parent') content = <ParentHome dark={false} go={go} session={session}/>;
    else if (route === '/app/parent/schedule') content = <ParentSchedule go={go} session={session}/>;
    else if (route === '/app/parent/shop') content = <ParentShop dark={false} session={session}/>;
    else if (route === '/app/admin') content = <AdminHome dark={true} go={go}/>;
    else if (route === '/app/admin/students') content = <AdminStudents dark={true} go={go}/>;
    else if (route === '/app/admin/teachers') content = <AdminTeachers dark={true} go={go}/>;
    else if (route === '/app/admin/batches')  content = <AdminBatches dark={true} go={go}/>;
    else if (route === '/app/admin/broadcast') content = <AdminBroadcast dark={true} go={go}/>;
    else if (route === '/app/admin/schedule') content = <AdminSchedule dark={true} go={go}/>;
    else if (route === '/app/admin/attendance') content = <AdminAttendance dark={true} go={go}/>;
    else if (route === '/app/admin/billing') content = <AdminBilling dark={true} go={go}/>;
    else if (route === '/app/admin/payments') content = <AdminPayments dark={true} go={go}/>;
    else if (route === '/app/admin/kits') content = <AdminKits dark={true} go={go}/>;
    else if (route === '/app/admin/courses') content = <AdminCourses dark={true} go={go}/>;
    else if (route === '/app/admin/centres') content = <AdminCentres dark={true} go={go}/>;
    else if (route === '/app/admin/quizzes') content = <AdminQuizzes dark={true} go={go}/>;
    else if (route === '/app/admin/certificates') content = <AdminCertificates dark={true} go={go}/>;
    else if (route === '/app/admin/settings') content = <AdminSettings dark={true} go={go}/>;
    else if (route === '/app/admin/institutions') content = <AdminInstitutions dark={true} go={go}/>;
    else if (route === '/app/admin/leads') content = <AdminInquiries dark={true} go={go} session={session}/>;
    else if (route === '/app/admin/audit') content = <AdminAudit dark={true} go={go}/>;
    else if (route === '/app/admin/users') content = <AdminUsers dark={true} go={go}/>;
    else if (route === '/app/admin/roles') content = <AdminRoles dark={true} go={go} session={session}/>;
    else if (route === '/app/admin/xp-criteria') content = <AdminXPCriteria dark={true} go={go}/>;
    else if (route === '/app/content' || route.startsWith('/app/content/')) content = <ContentManagerHome go={go} session={session}/>;
    else content = <div className="codeland" style={{ padding: 48 }}>Unknown app route: {route}</div>;

    return (
      <div style={{ height: "100vh", display: "flex", flexDirection: "column", background: "var(--paper)" }}>
        <AppNav session={session} route={route} go={go} logout={logout} />
        <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>{content}</div>
        <ChatbotWidget/>
      </div>
    );
  }

  return <LoginScreen go={go} setSession={setSession} session={session} />;
}

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