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 [theme, setTheme] = React.useState(() => localStorage.getItem("cl_theme") || "light");

  const toggleTheme = React.useCallback(() => {
    setTheme((prev) => {
      const next = prev === "dark" ? "light" : "dark";
      localStorage.setItem("cl_theme", next);
      return next;
    });
  }, []);

  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');
      return;
    }
    // Route guard: if logged-in role doesn't match the current portal, redirect to role home
    if (session.authed && session.role) {
      if (session.role === "parent" && (route.startsWith('/app/admin') || route.startsWith('/app/teacher') || route.startsWith('/app/content'))) {
        go('/app/parent');
      } else if (session.role === "teacher" && (route.startsWith('/app/admin') || route.startsWith('/app/parent') || route === '/app/student' || route.startsWith('/app/content'))) {
        go('/app/teacher');
      } else if (session.role === "student" && (route.startsWith('/app/admin') || route.startsWith('/app/teacher') || route.startsWith('/app/parent') || route.startsWith('/app/content'))) {
        go('/app/student');
      } else if (session.role === "content_manager" && (route.startsWith('/app/admin') || route.startsWith('/app/teacher') || route.startsWith('/app/parent') || route.startsWith('/app/student'))) {
        go('/app/content');
      }
    }
  }, [route, session.authed, session.loading, session.role, go]);

  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 === '/first-login') return <FirstLoginScreen go={go} setSession={setSession} session={session} />;
  if (route === '/forgot') return <ForgotScreen go={go} />;
  if (route.startsWith('/enroll')) return <EnrollScreen go={go} session={session} setSession={setSession} />;
  if (route.startsWith('/pay/')) return <PayScreen go={go} />;
  if (route.startsWith('/register/')) return <RegisterScreen go={go} />;
  if (route.startsWith('/verify/')) return <VerifyCertificate go={go} />;

  if (route.startsWith('/app/')) {
    let content = null;
    const isDark = theme === "dark";
    const studentTheme = isDark ? "theme-dark" : "";

    if (route === '/app/student') content = <StudentHome theme={studentTheme} age="younger" go={go} session={session} route={route}/>;
    else if (route === '/app/student/schedule') content = <StudentSchedule theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/student/mission') content = <StudentMission theme={studentTheme} />;
    else if (route === '/app/student/courses') content = <StudentCourseTracking theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/student/progress') content = <StudentProgress theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/student/quiz') content = <StudentQuiz theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/student/certificates') content = <StudentCertificates theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/student/forum') content = <StudentForum theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/student/homework') content = <StudentHomework theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/student/shop') content = <StudentShop theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/student/profile') content = <StudentProfile theme={studentTheme} go={go} session={session}/>;
    else if (route === '/app/teacher') content = <TeacherHome dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/live') content = <TeacherLive dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/content') content = <TeacherContent dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/quizzes') content = <TeacherQuizzes dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/homework') content = <TeacherHomework dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/schedule') content = <TeacherMySchedule dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/attendance') content = <TeacherAttendance dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/analytics') content = <TeacherAnalytics dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/messages') content = <TeacherMessages dark={isDark} go={go} session={session}/>;
    else if (route === '/app/teacher/xp') content = <TeacherAwardXP dark={isDark} go={go} session={session}/>;
    else if (route === '/app/parent') content = <ParentHome dark={isDark} go={go} session={session}/>;
    else if (route === '/app/parent/schedule') content = <ParentSchedule dark={isDark} go={go} session={session}/>;
    else if (route === '/app/parent/shop') content = <ParentShop dark={isDark} session={session}/>;
    else if (route === '/app/admin') content = <AdminHome dark={isDark} go={go}/>;
    else if (route === '/app/admin/students') content = <AdminStudents dark={isDark} go={go}/>;
    else if (route === '/app/admin/teachers') content = <AdminTeachers dark={isDark} go={go}/>;
    else if (route === '/app/admin/batches')  content = <AdminBatches dark={isDark} go={go}/>;
    else if (route === '/app/admin/broadcast') content = <AdminBroadcast dark={isDark} go={go}/>;
    else if (route === '/app/admin/schedule') content = <AdminSchedule dark={isDark} go={go}/>;
    else if (route === '/app/admin/attendance') content = <AdminAttendance dark={isDark} go={go}/>;
    else if (route === '/app/admin/billing') content = <AdminBilling dark={isDark} go={go}/>;
    else if (route === '/app/admin/payments') content = <AdminPayments dark={isDark} go={go}/>;
    else if (route === '/app/admin/kits') content = <AdminKits dark={isDark} go={go}/>;
    else if (route === '/app/admin/courses') content = <AdminCourses dark={isDark} go={go}/>;
    else if (route === '/app/admin/centres') content = <AdminCentres dark={isDark} go={go}/>;
    else if (route === '/app/admin/quizzes') content = <AdminQuizzes dark={isDark} go={go}/>;
    else if (route === '/app/admin/certificates') content = <AdminCertificates dark={isDark} go={go}/>;
    else if (route === '/app/admin/settings') content = <AdminSettings dark={isDark} go={go}/>;
    else if (route === '/app/admin/institutions') content = <AdminInstitutions dark={isDark} go={go}/>;
    else if (route === '/app/admin/leads') content = <AdminInquiries dark={isDark} go={go} session={session}/>;
    else if (route === '/app/admin/parents') content = <AdminParents dark={isDark} go={go}/>;
    else if (route === '/app/admin/enrollments') content = <AdminEnrollments dark={isDark} go={go}/>;
    else if (route === '/app/admin/audit') content = <AdminAudit dark={isDark} go={go}/>;
    else if (route === '/app/admin/users') content = <AdminUsers dark={isDark} go={go}/>;
    else if (route === '/app/admin/roles') content = <AdminRoles dark={isDark} go={go} session={session}/>;
    else if (route === '/app/admin/xp-criteria') content = <AdminXPCriteria dark={isDark} 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>;

    const darkClass = isDark ? "theme-dark" : "";
    return (
      <div className={`codeland ${darkClass}`} style={{ height: "100vh", display: "flex", flexDirection: "column", background: "var(--paper)" }}>
        <AppNav
          session={session}
          route={route}
          go={go}
          logout={logout}
          theme={theme}
          toggleTheme={toggleTheme}
        />
        <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/>);