import React, { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useState } from "react";

import { Box, Button, IconButton, Typography } from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";

import DashboardIcon from "@mui/icons-material/Dashboard";
import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
import ViewKanbanIcon from "@mui/icons-material/ViewKanban";
import BusinessIcon from "@mui/icons-material/Business";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import SettingsIcon from "@mui/icons-material/Settings";
import AlarmIcon from "@mui/icons-material/Alarm";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import ShieldIcon from "@mui/icons-material/Shield";
import SearchIcon from "@mui/icons-material/Search";
import MemoryIcon from "@mui/icons-material/Memory";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";

import { Navigate, Route, Routes, useLocation, useNavigate, useParams, createBrowserRouter, RouterProvider } from "react-router-dom";

import { ToastProvider } from "./toast";
import { ConfirmProvider } from "./confirm";
import { PromptProvider } from "./prompt";

import JobTable from "./components/JobTable";
import NotificationsPopover from "./components/NotificationsPopover";
import type { JobTableColumns } from "./components/JobTable";
import { I18nProvider, useI18n } from "./i18n/I18nProvider";
import LoginPage from "./views/LoginPage";
import LandingPage from "./views/LandingPage";
import ForgotPasswordPage from "./views/ForgotPasswordPage";
import ResetPasswordPage from "./views/ResetPasswordPage";
import VerifyEmailPage from "./views/VerifyEmailPage";
import MicrosoftLegacyRelinkPage from "./views/MicrosoftLegacyRelinkPage";
import RouteErrorPage from "./views/RouteErrorPage";
import { api } from "./api";
import { resolveCaptureUrl } from "./captureUrl";
import { clearAuthClientState, setAuthUserKey } from "./auth";
import { AccountPlanProvider } from "./accountPlan";
import AppShell, { NavItem } from "./layout/AppShell";
import { getThemeModePref, setThemeModePref, subscribeToThemePreferenceChanges, ThemeModePref } from "./themePrefs";
import JobTrackerThemeProvider from "./ThemeProvider";

const AddJobModal = lazy(() => import("./components/AddJobModal"));
const KanbanBoard = lazy(() => import("./components/KanbanBoard"));
const DashboardView = lazy(() => import("./components/DashboardView"));
const JobDiscoveryPage = lazy(() => import("./views/JobDiscoveryPage"));
const CompaniesTable = lazy(() => import("./components/CompaniesTable"));
const SettingsView = lazy(() => import("./components/SettingsView"));
const RemindersView = lazy(() => import("./components/RemindersView"));
const QuickCommandDialog = lazy(() => import("./components/QuickCommandDialog"));
const ProfilePage = lazy(() => import("./views/ProfilePage"));
const CareerWorkspacePage = lazy(() => import("./views/CareerWorkspacePage"));
const CvBuilderPage = lazy(() => import("./views/CvBuilderPage"));
const ApplicationWorkspacePage = lazy(() => import("./views/ApplicationWorkspacePage"));
const CvBuilderEditor = lazy(() => import("./views/CvBuilderEditor"));
const PublicCvPage = lazy(() => import("./views/PublicCvPage"));
const ConnectedAccountsPage = lazy(() => import("./views/ConnectedAccountsPage"));
const AdminAuditPage = lazy(() => import("./views/AdminAuditPage"));
const AdminUsersPage = lazy(() => import("./views/AdminUsersPage"));
const AdminSystemPage = lazy(() => import("./views/AdminSystemPage"));
const CorrespondenceInboxPage = lazy(() => import("./views/CorrespondenceInboxPage"));
const OperationsPage = lazy(() => import("./views/OperationsPage"));
const NotFoundPage = lazy(() => import("./views/NotFoundPage"));

type AuthConfig = { requireAuth: boolean };
type ThemeControls = { themeMode: ThemeModePref; onThemeModeChange: (value: ThemeModePref) => void };
const ThemeControlsContext = createContext<ThemeControls | null>(null);
type MeResponse = {
  provider?: "local" | "google" | "external";
  id?: string;
  email?: string;
  userName?: string;
  firstName?: string;
  lastName?: string;
  displayName?: string;
  avatarImageDataUrl?: string;
  roles?: string[];
  plan?: "free" | "pro";
  entitlements?: { ai?: boolean; proThemes?: boolean };
  appVersion?: string;
  appCommitSha?: string;
};

function breadcrumbsFor(path: string, t: (k: any) => string): string[] {
  if (path.startsWith("/dashboard")) return [t("home"), t("analytics"), t("overview")];
  if (path.startsWith("/discover")) return [t("home"), "Discover jobs"];
  if (/^\/jobs\/\d+/.test(path)) return [t("home"), t("jobApplications"), "Job details"];
  if (path.startsWith("/jobs")) return [t("home"), t("jobApplications")];
  if (path.startsWith("/reminders")) return [t("home"), t("reminders")];
  if (path.startsWith("/operations")) return [t("home"), "Operations"];
  if (path.startsWith("/kanban")) return [t("home"), t("kanbanBoard")];
  if (path.startsWith("/companies")) return [t("home"), t("companies")];
  if (path.startsWith("/correspondence/review")) return [t("home"), "Gmail review queue"];
  if (path.startsWith("/correspondence")) return [t("home"), "Correspondence inbox"];
  if (path.startsWith("/trash")) return [t("home"), t("trash")];
  if (path.startsWith("/settings")) return [t("home"), t("settings")];
  if (path.startsWith("/profile")) return [t("home"), t("account"), t("profile")];
  if (path.startsWith("/career/builder")) return [t("home"), "Career Workspace", "CV Builder"];
  if (path.startsWith("/career")) return [t("home"), "Career Workspace"];
  if (path.startsWith("/settings/connected-accounts")) return [t("home"), t("settings"), "Connected accounts"];
  if (path.startsWith("/admin/audit")) return [t("home"), t("admin"), t("auditLog")];
  if (path.startsWith("/admin/users")) return [t("home"), t("admin"), t("users")];
  if (path.startsWith("/admin/system")) return [t("home"), t("admin"), t("system")];
  return [t("home")];
}

function titleFor(path: string, t: (k: any) => string): string {
  if (path === "/dashboard") return t("dashboard");
  if (path.startsWith("/reminders")) return t("reminders");
  if (path.startsWith("/operations")) return "Operations";
  if (path.startsWith("/discover")) return "Discover jobs";
  if (/^\/jobs\/\d+/.test(path)) return "Job details";
  if (path.startsWith("/jobs")) return t("jobApplications");
  if (path.startsWith("/kanban")) return t("kanbanBoard");
  if (path.startsWith("/companies")) return t("companies");
  if (path.startsWith("/correspondence/review")) return "Gmail review queue";
  if (path.startsWith("/correspondence")) return "Correspondence inbox";
  if (path.startsWith("/trash")) return t("trash");
  if (path.startsWith("/settings")) return t("settings");
  if (path.startsWith("/profile")) return t("profile");
  if (path.startsWith("/career/builder")) return "CV Builder";
  if (path.startsWith("/career")) return "Career Workspace";
  if (path.startsWith("/settings/connected-accounts")) return "Connected accounts";
  if (path.startsWith("/admin/audit")) return t("auditLog");
  if (path.startsWith("/admin/users")) return t("users");
  if (path.startsWith("/admin/system")) return t("systemStatus");
  return t("appTitle");
}

function subtitleFor(path: string, t: (k: any) => string): string | undefined {
  if (path === "/dashboard") return t("dashboardPageSubtitle");
  if (path.startsWith("/discover")) return "Search official job-board feeds and save opportunities to your tracker.";
  if (/^\/jobs\/\d+/.test(path)) return "Manage this application, its documents, timeline, and correspondence.";
  if (path.startsWith("/jobs")) return t("jobsPageSubtitle");
  if (path.startsWith("/kanban")) return t("kanbanPageSubtitle");
  if (path.startsWith("/reminders")) return t("remindersPageSubtitle");
  if (path.startsWith("/correspondence/review")) return t("gmailReviewPageSubtitle");
  if (path.startsWith("/correspondence")) return t("correspondencePageSubtitle");
  return undefined;
}

function PageLoader() {
  return <Box sx={{ p: 4 }}><Typography variant="h6">Loading...</Typography></Box>;
}

function LegacyApplicationRedirect() {
  const { id } = useParams();
  const location = useLocation();
  return <Navigate to={`/jobs/${id ?? ""}${location.search}`} replace state={location.state} />;
}

function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMode, onThemeModeChange }: { jobPageSize: 15 | 20 | 25; setJobPageSize: (n: 15 | 20 | 25) => void; jobColumns: JobTableColumns; setJobColumns: (c: JobTableColumns) => void; themeMode: ThemeModePref; onThemeModeChange: (v: ThemeModePref) => void; }) {
  const location = useLocation();
  const navigate = useNavigate();
  const { t } = useI18n();
  const compactHeaderActions = useMediaQuery("(max-width:767.95px)");

  const [addOpen, setAddOpen] = useState(false);
  const [captureUrl, setCaptureUrl] = useState<string | undefined>(undefined);
  const [quickOpen, setQuickOpen] = useState(false);
  const [refreshToken, setRefreshToken] = useState(0);
  const [requireAuth, setRequireAuth] = useState<boolean | null>(null);
  const [authResolved, setAuthResolved] = useState(false);
  const [isAdmin, setIsAdmin] = useState(false);
  const [me, setMe] = useState<MeResponse | null>(null);
  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
  const [reminderCount, setReminderCount] = useState(0);
  const [notificationCount, setNotificationCount] = useState(0);
  const [notificationAnchor, setNotificationAnchor] = useState<HTMLElement | null>(null);

  const path = location.pathname;
  const isJobs = path.startsWith("/jobs");
  const shortcutHint = useMemo(() => (
    typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/.test(navigator.platform) ? "⌘K" : "Ctrl+K"
  ), []);

  useEffect(() => {
    api.get<AuthConfig>("/auth/config").then((r) => setRequireAuth(Boolean(r.data?.requireAuth))).catch(() => setRequireAuth(false));
  }, []);

  // Quick-capture target: bookmarklet (/?add=<url>) or PWA share (url in `add`, or a link
  // embedded in shared `addtext`). Opens Add Job pre-filled and strips the params.
  useEffect(() => {
    const url = resolveCaptureUrl(location.search);
    if (!url) return;
    setCaptureUrl(url);
    setAddOpen(true);
    const params = new URLSearchParams(location.search);
    params.delete("add");
    params.delete("addtext");
    navigate({ pathname: location.pathname, search: params.toString() }, { replace: true });
  }, [location.search, location.pathname, navigate]);
  useEffect(() => {
    let active = true;
    api.get<MeResponse>("/auth/me")
      .then((r) => {
        if (!active) return;
        setMe(r.data);
        setIsAdmin(Boolean(r.data?.roles?.includes("Admin")));
        setAuthUserKey(r.data?.id || r.data?.email || r.data?.userName || null, false);
      })
      .catch(() => {
        if (!active) return;
        setMe(null);
        setIsAdmin(false);
        clearAuthClientState(false);
      })
      .finally(() => {
        if (active) setAuthResolved(true);
      });
    return () => {
      active = false;
    };
  }, []);
  useEffect(() => {
    const load = () => {
      api.get<any[]>("/jobapplications/reminders", { params: { upcomingDays: 14 } }).then((r) => setReminderCount(Array.isArray(r.data) ? r.data.length : 0)).catch(() => setReminderCount(0));
    };
    load();
    const id = window.setInterval(load, 60000);
    return () => window.clearInterval(id);
  }, []);
  useEffect(() => {
    const load = () => {
      api.get<{ count: number }>("/notifications/unread-count").then((r) => setNotificationCount(Math.max(0, Number(r.data?.count) || 0))).catch(() => setNotificationCount(0));
    };
    load();
    const id = window.setInterval(load, 60000);
    window.addEventListener("notifications-changed", load);
    return () => {
      window.clearInterval(id);
      window.removeEventListener("notifications-changed", load);
    };
  }, []);
  useEffect(() => {
    const onAuthChanged = () => {
      setAuthResolved(false);
      api.get<MeResponse>("/auth/me")
        .then((r) => {
          setMe(r.data);
          setIsAdmin(Boolean(r.data?.roles?.includes("Admin")));
          setAuthUserKey(r.data?.id || r.data?.email || r.data?.userName || null, false);
        })
        .catch(() => {
          setMe(null);
          setIsAdmin(false);
          clearAuthClientState(false);
        })
        .finally(() => setAuthResolved(true));
    };

    window.addEventListener("auth-changed", onAuthChanged);
    return () => window.removeEventListener("auth-changed", onAuthChanged);
  }, []);

  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setQuickOpen(true);
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  if (requireAuth === null || !authResolved) return <Box sx={{ p: 4 }}><Typography variant="h6">Loading...</Typography></Box>;
  if (requireAuth && !me) return <Navigate to="/" replace state={{ from: path }} />;

  const pageTitle = titleFor(path, t);
  const pageSubtitle = subtitleFor(path, t);
  const breadcrumbs = breadcrumbsFor(path, t);
  const setAndPersistPageSize = (n: 15 | 20 | 25) => { setJobPageSize(n); window.localStorage.setItem("jobPageSize", String(n)); };
  const setAndPersistColumns = (next: JobTableColumns) => { setJobColumns(next); window.localStorage.setItem("jobColumns", JSON.stringify(next)); };
  const fullName = [me?.firstName, me?.lastName].filter(Boolean).join(" ");

  const nav: NavItem[] = [
    { to: "/dashboard", label: t("dashboard"), icon: <DashboardIcon fontSize="small" />, section: t("manage") },
    { to: "/jobs", label: t("jobApplications"), icon: <WorkOutlineIcon fontSize="small" />, section: t("manage") },
    { to: "/discover", label: "Discover jobs", icon: <SearchIcon fontSize="small" />, section: t("manage") },
    { to: "/reminders", label: t("reminders"), icon: <AlarmIcon fontSize="small" />, badgeCount: reminderCount, section: t("manage") },
    { to: "/kanban", label: t("kanbanBoard"), icon: <ViewKanbanIcon fontSize="small" />, section: t("manage") },
    { to: "/companies", label: t("companies"), icon: <BusinessIcon fontSize="small" />, section: t("manage") },
    { to: "/career", label: "Career Workspace", icon: <DescriptionOutlinedIcon fontSize="small" />, section: t("manage") },
    { to: "/career/builder", label: "CV Builder", icon: <DescriptionOutlinedIcon fontSize="small" />, section: t("manage") },
    { to: "/trash", label: t("trash"), icon: <DeleteOutlineIcon fontSize="small" />, section: t("manage") },
  ];

  const navBottom: NavItem[] = [
    { to: "/admin/audit", label: t("auditLog"), icon: <ShieldIcon fontSize="small" />, hidden: !isAdmin, section: t("admin") },
    { to: "/admin/users", label: t("users"), icon: <AccountCircleIcon fontSize="small" />, hidden: !isAdmin, section: t("admin") },
    { to: "/admin/system", label: t("system"), icon: <MemoryIcon fontSize="small" />, hidden: !isAdmin, section: t("admin") },
    { to: "/profile", label: t("profile"), icon: <AccountCircleIcon fontSize="small" />, section: t("account") },
    { to: "/settings", label: t("settings"), icon: <SettingsIcon fontSize="small" />, section: t("account") },
  ];

  const rightActions = (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: 1,
        flexWrap: "nowrap",
        justifyContent: "flex-end",
        width: { xs: "100%", sm: "auto" },
        flex: { xs: 1, sm: "0 0 auto" },
      }}
    >
      {compactHeaderActions ? (
        <IconButton
          color="secondary"
          size="small"
          title={`${t("quickSearch")} (${shortcutHint})`}
          onClick={() => setQuickOpen(true)}
          sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2.5, width: 42, height: 42, flex: "0 0 auto" }}
        >
          <SearchIcon fontSize="small" />
        </IconButton>
      ) : (
        <Button variant="outlined" startIcon={<SearchIcon />} onClick={() => setQuickOpen(true)} sx={{ gap: 0.5 }}>
          {t("quickSearch")}
          <Box component="span" sx={{ ml: 0.75, px: 0.75, py: 0.125, borderRadius: 1, border: "1px solid", borderColor: "divider", fontSize: 11, fontWeight: 700, color: "text.secondary", lineHeight: 1.6 }}>
            {shortcutHint}
          </Box>
        </Button>
      )}
      {isJobs ? (
        <Button variant="contained" onClick={() => setAddOpen(true)} sx={{ flex: { xs: 1, sm: "0 0 auto" }, minHeight: 42 }}>
          {t("addJob")}
        </Button>
      ) : null}
    </Box>
  );

  return (
    <AccountPlanProvider value={{
      plan: me?.plan === "pro" ? "pro" : "free",
      canUseAi: Boolean(me?.entitlements?.ai),
      canUseProThemes: Boolean(me?.entitlements?.proThemes),
    }}>
      <AppShell
        pageTitle={pageTitle}
        pageSubtitle={pageSubtitle}
        breadcrumbs={breadcrumbs}
        pathname={path}
        nav={nav}
        navBottom={navBottom}
        drawerOpen={mobileDrawerOpen}
        onToggleDrawer={setMobileDrawerOpen}
        onNavigate={(to) => { setMobileDrawerOpen(false); navigate(to); }}
        user={{ email: me?.email, userName: me?.userName, displayName: me?.displayName || fullName || undefined, avatarImageDataUrl: me?.avatarImageDataUrl, roleLabel: isAdmin ? t("superAdmin") : t("user") }}
        buildMetadata={isAdmin && me?.appVersion ? { version: me.appVersion, commitSha: me.appCommitSha } : undefined}
        notificationsCount={notificationCount}
        onOpenNotifications={(anchor) => setNotificationAnchor(anchor)}
        onOpenSettings={() => navigate("/settings")}
        onOpenProfile={() => navigate("/profile")}
        onSignOut={() => { void api.post("/auth/logout").catch(() => undefined).finally(() => { clearAuthClientState(); navigate("/login"); }); }}
        rightActions={rightActions}
      >
        <Suspense fallback={<PageLoader />}>
          <Routes>
            <Route path="/" element={<Navigate to="/dashboard" replace />} />
            <Route path="/dashboard" element={<DashboardView />} />
            <Route path="/discover" element={<JobDiscoveryPage />} />
            <Route path="/jobs" element={<JobTable refreshToken={refreshToken} pageSize={jobPageSize} onPageSizeChange={setAndPersistPageSize} columns={jobColumns} onColumnsChange={setAndPersistColumns} mode="jobs" />} />
            <Route path="/jobs/:id" element={<ApplicationWorkspacePage />} />
            <Route path="/reminders" element={<RemindersView />} />
            <Route path="/operations" element={<OperationsPage />} />
            <Route path="/kanban" element={<KanbanBoard />} />
            <Route path="/companies" element={<CompaniesTable />} />
            <Route path="/correspondence" element={<CorrespondenceInboxPage />} />
            <Route path="/correspondence/review" element={<Navigate to="/correspondence?view=review" replace />} />
            <Route path="/profile" element={<ProfilePage />} />
            <Route path="/applications/:id" element={<LegacyApplicationRedirect />} />
            <Route path="/career" element={<CareerWorkspacePage />} />
            <Route path="/career/builder" element={<CvBuilderPage />} />
            <Route path="/career/builder/:id" element={<CvBuilderEditor />} />
            <Route path="/admin/audit" element={<AdminAuditPage />} />
            <Route path="/admin/users" element={<AdminUsersPage />} />
            <Route path="/admin/system" element={<AdminSystemPage />} />
            <Route path="/trash" element={<JobTable refreshToken={refreshToken} pageSize={jobPageSize} onPageSizeChange={setAndPersistPageSize} columns={jobColumns} onColumnsChange={setAndPersistColumns} mode="trash" />} />
            <Route path="/settings" element={<SettingsView pageSize={jobPageSize} onPageSizeChange={setAndPersistPageSize} columns={jobColumns} onColumnsChange={setAndPersistColumns} themeMode={themeMode} onThemeModeChange={onThemeModeChange} />} />
            <Route path="/settings/connected-accounts" element={<ConnectedAccountsPage />} />
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </Suspense>
      </AppShell>

      <NotificationsPopover
        anchorEl={notificationAnchor}
        onClose={() => setNotificationAnchor(null)}
        onNavigate={(to) => navigate(to)}
        onChanged={() => window.dispatchEvent(new Event("notifications-changed"))}
      />

      <Suspense fallback={null}>
        <AddJobModal open={addOpen} initialUrl={captureUrl} onClose={() => { setAddOpen(false); setCaptureUrl(undefined); }} onCreated={() => { setRefreshToken((t) => t + 1); }} />
        <QuickCommandDialog open={quickOpen} onClose={() => setQuickOpen(false)} onNavigate={(to) => navigate(to)} onOpenAddJob={() => setAddOpen(true)} />
      </Suspense>
    </AccountPlanProvider>
  );
}

function ThemeAwareShell(props: Omit<React.ComponentProps<typeof Shell>, "themeMode" | "onThemeModeChange">) {
  const controls = useContext(ThemeControlsContext);
  if (!controls) throw new Error("Theme controls are unavailable.");
  return <Shell {...props} {...controls} />;
}

export default function App() {
  const systemPrefersDark = useMediaQuery("(prefers-color-scheme: dark)", { defaultMatches: true, noSsr: true });
  const [themeMode, setThemeMode] = useState<ThemeModePref>(() => getThemeModePref());

  useEffect(() => {
    const sync = () => { setThemeMode(getThemeModePref()); };
    return subscribeToThemePreferenceChanges(sync);
  }, []);

  const onThemeModeChange = useCallback((v: ThemeModePref) => { setThemeModePref(v); setThemeMode(v); }, []);
  const themeControls = useMemo(() => ({ themeMode, onThemeModeChange }), [onThemeModeChange, themeMode]);

  const [jobPageSize, setJobPageSize] = useState<15 | 20 | 25>(() => {
    const raw = window.localStorage.getItem("jobPageSize");
    const n = raw ? Number(raw) : 15;
    return (n === 20 || n === 25 ? n : 15) as 15 | 20 | 25;
  });
  const [jobColumns, setJobColumns] = useState<JobTableColumns>(() => {
    const raw = window.localStorage.getItem("jobColumns");
    if (!raw) return { status: true, dateApplied: true, daysSince: true, jobUrl: false };
    try {
      const p = JSON.parse(raw) as Partial<JobTableColumns>;
      return { status: p.status ?? true, dateApplied: p.dateApplied ?? true, daysSince: p.daysSince ?? true, jobUrl: p.jobUrl ?? false };
    } catch {
      return { status: true, dateApplied: true, daysSince: true, jobUrl: false };
    }
  });

  const router = useMemo(() => createBrowserRouter([
    { path: "/", element: <LandingPage />, errorElement: <RouteErrorPage /> },
    { path: "/login", element: <LoginPage />, errorElement: <RouteErrorPage /> },
    { path: "/register", element: <LoginPage initialMode="register" />, errorElement: <RouteErrorPage /> },
    { path: "/forgot-password", element: <ForgotPasswordPage />, errorElement: <RouteErrorPage /> },
    { path: "/reset-password", element: <ResetPasswordPage />, errorElement: <RouteErrorPage /> },
    { path: "/verify-email", element: <VerifyEmailPage />, errorElement: <RouteErrorPage /> },
    { path: "/confirm-email-change", element: <VerifyEmailPage emailChange />, errorElement: <RouteErrorPage /> },
    { path: "/microsoft-legacy-relink", element: <MicrosoftLegacyRelinkPage />, errorElement: <RouteErrorPage /> },
    { path: "/cv/:slug", element: <PublicCvPage />, errorElement: <RouteErrorPage /> },
    { path: "/*", element: <ThemeAwareShell jobPageSize={jobPageSize} setJobPageSize={setJobPageSize} jobColumns={jobColumns} setJobColumns={setJobColumns} />, errorElement: <RouteErrorPage /> },
  ], { future: { v7_relativeSplatPath: true } }), [jobColumns, jobPageSize]);

  return (
    <ToastProvider>
      <ConfirmProvider>
        <PromptProvider>
          <JobTrackerThemeProvider preference={themeMode} systemPrefersDark={systemPrefersDark}>
            <I18nProvider>
              <ThemeControlsContext.Provider value={themeControls}>
                <RouterProvider router={router} />
              </ThemeControlsContext.Provider>
            </I18nProvider>
          </JobTrackerThemeProvider>
        </PromptProvider>
      </ConfirmProvider>
    </ToastProvider>
  );
}