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];
}

// Shown for a page whose feature is switched off for this school: what the
// feature is, plus "Request access" / "Contact support" emails to EpiqMinds.
const PLATFORM_SUPPORT = "support@epiqminds.com";
const mailto = (subject, body) =>
  `mailto:${PLATFORM_SUPPORT}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

function FeatureOff({ go, session, nav, route }) {
  const home = session && session.authed ? `/app/${{ superadmin: "admin", content_manager: "content" }[session.role] || session.role}` : "/login";
  const f = ((nav && nav.offFeatures) || []).find((x) => x.pages.some((p) => route === p || route.startsWith(p + "/")));
  const label = f ? f.label : "This feature";
  const school = (nav && nav.brand && nav.brand.name) || "our school";
  const who = session && session.authed ? `${session.name || ""} <${session.email || ""}> (${session.role})` : "";
  const request = mailto(
    `Request access: ${label} for ${school}`,
    `Hi EpiqMinds team,\n\nWe'd like ${label} turned on for ${school} (${location.host}).\n\nRequested by: ${who}\n`
  );
  const contact = mailto(`Question from ${school}`, `Hi EpiqMinds team,\n\n\n\n— ${who} · ${location.host}`);
  return (
    <div className="codeland" style={{ padding: "48px 16px", display: "flex", justifyContent: "center" }}>
      <div className="card" style={{ maxWidth: 480, width: "100%", textAlign: "center", padding: 32 }}>
        <div style={{ fontSize: 34, marginBottom: 8 }} aria-hidden="true">🔒</div>
        {f && <div className="chip flat" style={{ marginBottom: 12 }}>{f.group}</div>}
        <div className="display" style={{ fontSize: 24, marginBottom: 8 }}>{label}</div>
        {f && <p style={{ color: "var(--ink)", margin: "0 0 8px", fontSize: 15 }}>{f.help}</p>}
        <p style={{ color: "var(--ink-soft)", margin: "0 0 24px" }}>
          {f ? "It isn't" : "This feature isn't"} included for {school} yet. Ask us and we'll switch it on.
        </p>
        <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
          <a className="btn btn-primary" href={request} style={{ textDecoration: "none" }}>Request access</a>
          <a className="btn btn-ghost" href={contact} style={{ textDecoration: "none" }}>Contact support</a>
          <button className="btn btn-ghost" onClick={() => go(home)}>Go back</button>
        </div>
        <p style={{ color: "var(--ink-mute)", fontSize: 12, margin: "18px 0 0" }}>{PLATFORM_SUPPORT}</p>
      </div>
    </div>
  );
}

function App() {
  const [route, go] = useHashRoute();
  const [session, setSession] = useSession();
  const nav = useNav();
  // Brand + feature switches on load; the user's menus once signed in.
  React.useEffect(() => { if (!session.loading) loadNavigation(); }, [session.loading, session.authed, session.role]);
  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' && !route.startsWith('/app/') && pageBlocked(nav, route)) return <FeatureOff go={go} session={session} nav={nav} route={route} />;
  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 (pageBlocked(nav, route)) content = <FeatureOff go={go} session={session} nav={nav} route={route} />;
    else 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>
        {featureOn(nav, "chatbot") && <ChatbotWidget/>}
      </div>
    );
  }

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

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