import MaintenanceOverlay from '@/components/common/overlay/MaintenanceOverlay';
import { DemoMaintenance } from '@/components/demo/DemoMaintenance';
import { ThemedLayoutV2 } from '@/components/layout';
import { ThemedSiderV2 } from '@/components/layout/sider';
import { MainConfigContextProvider } from '@/contexts/main-config';
import './polyfills/regex-polyfill';
// import '@/css/Color.scss';
import '@/css/Utilities.scss';
import {
  BankOutlined,
  DollarOutlined,
  InfoCircleOutlined,
  MenuOutlined,
  SettingOutlined,
  UnorderedListOutlined,
  WechatOutlined,
} from '@ant-design/icons';
import {
  DiagramUpLinear,
  DocumentTextLinear,
  DownloadSquareLinear,
  HomeAngle2Linear,
  LibraryLinear,
  SettingsLinear,
  UserRoundedLinear,
  UsersGroupRoundedLinear,
} from '@assessprep/icons/solar';
import { CrossAppLogoutListener } from '@components/common/crossAppLogout/CrossAppLogoutListener';
import { Error } from '@components/common/errorPages/Error';
import { FullLogo, LogoIcon } from '@components/common/logos/Logos';
import { DemoHeader } from '@components/demo/DemoHeader';
import { SiderFooter } from '@components/sider/SiderFooter';
import AppNotice from '@components/ui/appNotice/AppNotice';
import V3UIcomponents from '@components/v3UIComponents/v3UIcomponents';
import CustomAuthenticated from '@contexts/customAuthenticated';
import { useCurrentUser, useEnabledFeatures } from '@hooks/dataHelpers/useCurrentUser';
import useI18nProvider from '@hooks/useI18nProvider';
import { BoardCreate, BoardEdit, BoardsList } from '@pages/boards';
import ConnectivityTest from '@pages/ConnectivityTest';
import EmbeddedResourceItemDetailUuid from '@pages/embeddedResources/EmbeddedResourceItemDetailUuid';
import { EmbedLayout } from '@pages/embeddedResources/layouts/EmbedLayout';
import {
  ExperienceCreate,
  ExperienceEdit,
  ExperienceList,
  ExperienceShow,
} from '@pages/experiences';
import { ExperienceForm } from '@pages/experiences/forms/ExperienceForm';
import { QuestionBankExperienceCreate } from '@pages/experiences/forms/QuestionBankExperienceCreate';
import { QuestionBankExperienceEdit } from '@pages/experiences/forms/QuestionBankExperienceEdit';
import { ExperienceLayout } from '@pages/experiences/layouts';
import { ExperiencePrint } from '@pages/experiences/show/manage/print/ExperiencePrint';
import { FeatureCreate, FeatureEdit, FeaturesList } from '@pages/features';
import { FeedbackList } from '@pages/feedbacks';
import Gradebook from '@pages/gradebook/table/Gradebook';
import { GroupCreate, GroupEdit, GroupShow, GroupsList } from '@pages/groups';
import Help from '@pages/help/Help';
import { IntegrationCreate, IntegrationEdit, IntegrationList } from '@pages/integrations';
import LibraryPage from '@pages/library/LibraryPage';
import { AuthPage } from '@pages/login/AuthPage';
import { OrgProgrammesItemDetail, TermsCreate, TermsEdit, TermsList } from '@pages/orgProgrammes';
import OrgProgramGradesShow from '@pages/orgProgrammes/show/OrgProgramsGrades';
import OrgProgramSubjectShow from '@pages/orgProgrammes/show/OrgProgramSubject';
import { OrgsCreate, OrgsEdit, OrgsList } from '@pages/orgs';
import SchoolsList from '@pages/orgs/show/schoolsList/SchoolsList';
import { OverviewList } from '@pages/overview';
import { PlanCreate, PlanEdit, PlansList } from '@pages/plans';
import { ProgrammesCreate, ProgrammesEdit, ProgrammesList } from '@pages/programmes';
import { PromptCreate } from '@pages/prompts/forms/PromptCreate';
import { PromptEdit } from '@pages/prompts/forms/PromptEdit';
import { PromptList } from '@pages/prompts/list/PromptList';
import { QuestionBanksCreate, QuestionBanksEdit, QuestionBanksList } from '@pages/questionBanks';
import { ResourceSheet } from '@pages/resourceSheet';
import { RoomCreate, RoomEdit, RoomShow, RoomsList } from '@pages/rooms';
import { RubricsCreate, RubricsEdit, RubricsList } from '@pages/rubrics';
import OrgSettings from '@pages/settings/show/OrgSettings';
import {
  ContentAreaDetail,
  StandardCollectionCreate,
  StandardCollectionDetail,
  StandardCollectionsList,
} from '@pages/standardSets';
import { TagCreate, TagEdit, TagsList } from '@pages/tags';
import UnsupportedVersionLayout from '@pages/unsupportedVersionNotice/UnsupportedVersionLayout';
import UnsupportedVersionNotice from '@pages/unsupportedVersionNotice/UnsupportedVersionNotice';
import { UserCreate, UserEdit, UserShow, UsersList } from '@pages/users';
import { ErrorComponent, useThemedLayoutContext } from '@refinedev/antd';
import '@refinedev/antd/dist/reset.css';
import { CanAccess, Refine } from '@refinedev/core';
import routerBindings, {
  CatchAllNavigate,
  DocumentTitleHandler,
  NavigateToResource,
  UnsavedChangesNotifier,
} from '@refinedev/react-router';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { App as AntdApp, Button, Space } from 'antd';
import { useEffect, useMemo } from 'react';
import { LuDoorOpen } from 'react-icons/lu';
import {
  BrowserRouter,
  Navigate,
  Outlet,
  Route,
  Routes,
  useLocation,
  useNavigate,
} from 'react-router';
import './App.scss';
import './i18n';
import { CheckNativeAppUpdate } from './offlineApp/CheckNativeAppUpdate';
import { OfflineApp } from './offlineApp/OfflineApp';
import { checkIfUnsupportedApp, getAppType } from './offlineApp/OfflineAppHelper';
import { accessControlProvider } from './providers/accessControl';
import { apMessageNotificationProvider } from './providers/apMessageNotificationProvider';
import { authProvider } from './providers/authProvider';
import { aiServiceDataProvider, defaultDataProvider } from './providers/dataProvider';

if (typeof window !== 'undefined') {
  const env = import.meta.env.VITE_MODE;
  const isDevMode = env === 'development1';
  const isStagingMode = env === 'staging1';

  console.log('isDevMode ==>', isDevMode);
  console.log('isStagingMode ==>', isStagingMode);
  // Only load react-scan in development or staging environments, never in production
  if (isDevMode || isStagingMode) {
    import('react-scan')
      .then((module) => {
        console.log('scan ' + (isDevMode ? 'enabled' : 'disabled'));
        module.scan({
          enabled: isDevMode, // enabled in dev, disabled in staging
          log: isDevMode, // logs render info to console only in dev mode
        });
      })
      .catch((err) => console.error('Failed to load react-scan:', err));
  }
}

const CustomTitle = ({ collapsed }: { collapsed: boolean }) => {
  const { siderCollapsed, setSiderCollapsed, mobileSiderOpen, setMobileSiderOpen } =
    useThemedLayoutContext();

  const unCollapsedTitle = (
    <Space>
      {/* <Button
        type="text"
        // size="small"
        onClick={() => setSiderCollapsed(true)}
        icon={<MenuOutlined />}
      ></Button> */}
      <FullLogo height={40} />
    </Space>
  );

  const collapsedTitle = (
    <Space direction="vertical" className={'text-center m-t-10'} size={0}>
      <Button
        type="text"
        // size="small"
        onClick={() => setSiderCollapsed(false)}
        icon={<MenuOutlined />}
      ></Button>
      <LogoIcon />
    </Space>
  );

  return collapsed ? collapsedTitle : unCollapsedTitle;
};

const AppLayout = () => {
  const currentUser = useCurrentUser();
  const appType = getAppType();
  const enabledFeatures = useEnabledFeatures();
  const isUnsupportedApp = checkIfUnsupportedApp(appType, enabledFeatures, currentUser);
  const navigate = useNavigate();
  console.log('isUnsupportedApp ==>', isUnsupportedApp);

  useEffect(() => {
    if (isUnsupportedApp) {
      navigate('/unsupported');
    }
  }, [isUnsupportedApp, navigate]);

  return (
    <CustomAuthenticated key="authenticated-inner" fallback={<CatchAllNavigate to="/auth/login" />}>
      <AppNotice />
      <DemoHeader />
      <ThemedLayoutV2
        Header={() => {
          return null;
        }}
        Sider={(props) => (
          <ThemedSiderV2
            {...props}
            fixed
            Title={({ collapsed }) => <CustomTitle collapsed={collapsed} />}
            render={({ items, logout, collapsed }) => {
              return (
                <>
                  {items}
                  {<SiderFooter logout={logout} collapsed={collapsed} />}
                </>
              );
            }}
          />
        )}
      >
        <Outlet />
      </ThemedLayoutV2>
    </CustomAuthenticated>
  );
};

const V2UrlsRedirect = () => {
  const location = useLocation();
  const currentUrl = location.pathname + location.search;

  let redirectUrl = '';

  if (currentUrl.includes('/tests/')) {
    // Extract just the UUID from the URL
    const uuidMatch = currentUrl.match(/\/tests\/([^/]+)/);
    const uuid = uuidMatch ? uuidMatch[1] : '';
    const urlAfterUuid = currentUrl.split(`/tests/${uuid}`)[1]?.split('?')[0] || '';

    // Build redirect URL
    redirectUrl = `/assessments/${uuid}`;

    const validRedirectTabs = ['deliver', 'monitor', 'grade', 'analytics'];
    const matchingTab = validRedirectTabs.find((tab) => urlAfterUuid.includes(tab));

    if (matchingTab) {
      redirectUrl = redirectUrl.concat(urlAfterUuid);
    }

    // Preserve query parameters if any
    const queryString = location.search;
    if (queryString) {
      redirectUrl = redirectUrl + queryString;
    }
  } else {
    redirectUrl = '/';
  }

  return <Navigate to={redirectUrl} replace />;
};

function App() {
  const i18nProvider = useI18nProvider();
  const currentUser = useCurrentUser();
  const { translate } = i18nProvider;
  const appType = getAppType();
  const enabledFeatures = useEnabledFeatures();
  const isRoomManagementEnabled = enabledFeatures?.enable_room_management;
  const isCommonAssessmentEnabled = enabledFeatures?.separate_common_assessment_tab;
  console.log('isRoomManagementEnabled ==>', isRoomManagementEnabled);
  const notDistrictQbAuthor =
    currentUser?.org?.org_type !== 'district' && currentUser?.role === 'qb_author';

  useEffect(() => {
    const loadingSpinner = document.getElementById('main-loading-spinner');
    if (loadingSpinner) {
      loadingSpinner.style.display = 'none';
    }
  }, []);

  useEffect(() => {
    const cookieConsent = document.querySelector('.cc-window') as HTMLDivElement;
    if (cookieConsent) {
      cookieConsent.style.display = appType !== 'web' ? 'none' : '';
    }
  }, [appType]);

  // Memoize resources array to re-render when currentUser changes
  // !IMPORTANT: this is using name.list permission by default to show the item in the sider menu but can use other actions also by passing like in org settings
  const resources = useMemo(
    () => [
      {
        name: 'orgs',
        list: '/orgs',
        create: '/orgs/create',
        edit: '/orgs/edit/:id',
        show: '/orgs/:orgId/settings',
        meta: {
          label:
            currentUser?.role === 'support'
              ? translate('CommonText.schools')
              : translate('CommonText.orgs'),
          icon: <BankOutlined />,
          // parent: currentUser?.role === 'support' ? '' : 'superadmin_settings',
        },
      },
      {
        name: 'overviews',
        list: '/overview',
        meta: {
          label: translate('CommonText.overview'),
          // icon: <HomeOutlined />,
          icon: <HomeAngle2Linear />,
        },
      },
      {
        name: 'experiences',
        list: '/assessments',
        create: '/assessments/create',
        edit: '/assessments/edit/:id',
        meta: {
          label:
            currentUser?.role === 'parent'
              ? translate('LibraryPage.assessments')
              : translate('CommonText.my_assessments'),
          icon: <DocumentTextLinear />,
        },
        // show: "/experience/show/:id",
      },
      {
        name: 'librarys',
        list: notDistrictQbAuthor ? '/library/tests' : '/library/explore',
        //passed isentifier to make sider menu item active when on /library/tests
        identifier: 'library/tests',
        meta: { label: translate('CommonText.library'), icon: <LibraryLinear /> },
      },
      {
        name: 'common_assessments',
        list: '/common_assessments/explore',
        meta: {
          label: translate('CommonText.common_assessments'),
          icon: <UnorderedListOutlined />,
        },
        options: {
          hide:
            !isCommonAssessmentEnabled ||
            (currentUser?.role === 'admin' && currentUser?.org?.org_type === 'district'),
        },
      },
      {
        name: 'gradebooks',
        list: '/gradebook',
        meta: { label: translate('CommonText.gradebook'), icon: <DiagramUpLinear /> },
      },
      {
        name: 'users',
        list: '/users',
        create: '/users/create',
        edit: '/users/edit/:id',
        show: '/users/show/:id',
        meta: {
          label: translate('CommonText.users'),
          icon: <UserRoundedLinear />,
        },
      },
      {
        name: 'groups',
        list: '/groups',
        create: '/groups/create',
        edit: '/groups/edit/:id',
        show: '/groups/show/:id',
        meta: { label: translate('CommonText.classes'), icon: <UsersGroupRoundedLinear /> },
      },
      {
        name: 'schools',
        list: '/schools',
        meta: {
          label: translate('CommonText.schools'),
          icon: <BankOutlined />,
        },
      },
      {
        name: 'rooms',
        list: '/rooms',
        create: '/rooms/create',
        edit: '/rooms/edit/:id',
        show: '/rooms/show/:id',
        meta: {
          label: translate('CommonText.rooms'),
          icon: <LuDoorOpen />,
        },
        options: {
          hide: !isRoomManagementEnabled,
        },
      },
      {
        name: 'org_settings',
        list: '/settings/programs',
        show: '/settings/programs',
        meta: {
          label: translate('CommonText.settings'),
          icon: <SettingsLinear />,
          // action: 'settings', // check this permission instead of default list to show the item in the sider menu = not using - 2 orgs as names in resources causing issues so using org_settings as name
        },
      },
      {
        name: 'superadmin_settings',
        list: '/settings',
        meta: {
          label: translate('CommonText.superadmin_more_settings'),
          icon: <SettingOutlined />,
        },
      },
      {
        name: 'features',
        list: '/features',
        create: '/features/create',
        edit: '/features/edit/:id',
        show: '/features/show/:id',
        meta: {
          label: translate('CommonText.features'),
          icon: <DollarOutlined />,
          parent: 'superadmin_settings',
        },
      },
      {
        name: 'plans',
        list: '/plans',
        create: '/plans/create',
        edit: '/plans/edit/:id',
        show: '/plans/show/:id',
        meta: {
          label: translate('CommonText.plans'),
          icon: <DollarOutlined />,
          parent: 'superadmin_settings',
        },
      },
      {
        name: 'questionbanks',
        list: '/questionbanks',
        create: '/questionbanks/create',
        edit: '/questionbanks/edit/:id',
        meta: {
          label: translate('CommonText.questionbanks'),
          icon: <UnorderedListOutlined />,
          parent: 'superadmin_settings',
        },
      },
      {
        name: 'feedbacks',
        list: '/feedbacks',
        show: '/feedbacks/show/:id',
        meta: {
          label: translate('CommonText.feedback'),
          icon: <WechatOutlined />,
          parent: currentUser?.role === 'support' ? '' : 'superadmin_settings',
        },
      },
      {
        name: 'tags',
        list: '/tags',
        create: '/tags/create',
        edit: '/tags/edit/:id',
        show: '/tags/show/:id',
        meta: {
          label: translate('CommonText.tags'),
          icon: <UnorderedListOutlined />,
          parent: 'superadmin_settings',
        },
      },
      {
        name: 'standard_sets',
        list: '/standard-sets',
        create: '/standard-sets/create',
        edit: '/standard-sets/:id',
        show: '/standard-sets/:id',
        meta: {
          label: translate('CommonText.standard_sets'),
          icon: <UnorderedListOutlined />,
          // Show in main menu for non-district qb_author, otherwise under superadmin_settings
          parent: notDistrictQbAuthor ? undefined : 'superadmin_settings',
        },
      },
      {
        name: 'programmes',
        list: '/programmes',
        create: '/programmes/create',
        edit: '/programmes/edit/:id',
        show: '/programmes/show/:id',
        meta: {
          label: translate('CommonText.programmes'),
          icon: <UnorderedListOutlined />,
          parent: 'superadmin_settings',
        },
      },
      {
        name: 'rubrics',
        list: '/rubrics',
        create: '/rubrics/create',
        edit: '/rubrics/edit/:id',
        meta: {
          label: translate('CommonText.rubrics'),
          icon: <UnorderedListOutlined />,
          parent: 'superadmin_settings',
        },
      },
      {
        name: 'integrations',
        list: '/integrations',
        create: '/integrations/create',
        edit: '/integrations/edit/:id',
        meta: {
          icon: <UnorderedListOutlined />,
          parent: 'superadmin_settings',
        },
      },
      {
        name: 'prompts',
        list: '/prompts',
        create: '/prompts/create',
        edit: '/prompts/edit/:id',
        meta: {
          label: translate('CommonText.prompts_dashboard'),
          parent: 'superadmin_settings',
          icon: <SettingOutlined />,
        },
      },
      {
        name: 'boards',
        list: '/boards',
        create: '/boards/create',
        edit: '/boards/edit/:id',
        show: '/boards/show/:id',
        meta: {
          label: translate('CommonText.boards'),
          icon: <UnorderedListOutlined />,
          parent: 'superadmin_settings',
        },
      },
      {
        name: 'resource_sheets',
        list: '/resource-sheets',
        meta: {
          label: translate('CommonText.resource_sheet'),
          icon: <UnorderedListOutlined />,
          parent: 'superadmin_settings',
        },
      },

      // ONLY add here if we want to show in the side menu
      // {
      //   name: 'embedded-resources',
      //   url: '/embed/:uuid',
      //   title: 'Embedded Resources',
      //   resourceName: 'embeddedResources',
      //   crudConfig: {},
      //   singleResourceName: 'embed_resource',
      //   meta: {
      //     label: translate('CommonText.embedded_resources'),
      //     icon: <SettingOutlined />,
      //   },
      //   options: {
      //     hide: true, // Hide from navigation since it's accessed via direct URL
      //   },
      // },
      {
        name: 'helps',
        list: '/help',
        meta: {
          label: translate('CommonText.help'),
          icon: <InfoCircleOutlined />,
        },
      },
      {
        name: 'download_apps',
        list: '/download-apps',
        meta: {
          label: translate('CommonText.download_apps'),
          icon: <DownloadSquareLinear />,
        },
      },
      {
        name: 'ui-components',
        list: '/ui-components',
        meta: {
          label: 'UI Components',
          icon: <UnorderedListOutlined />,
        },
      },
      {
        name: 'unsupported',
        list: '/unsupported',
        meta: {
          label: translate('CommonText.unsupported_version_notice'),
          icon: <SettingOutlined />,
        },
      },
    ],
    [notDistrictQbAuthor, translate, isRoomManagementEnabled, isCommonAssessmentEnabled]
  );

  const NavigateToDefaultPage = () => {
    let defaultPage = '/assessments';
    if (currentUser?.role === 'superadmin') {
      defaultPage = '/orgs';
    }
    if (currentUser?.role === 'support') {
      defaultPage = '/orgs';
    }
    if (currentUser?.org?.org_type === 'district') {
      defaultPage = '/library/explore';
    }
    if (notDistrictQbAuthor) {
      defaultPage = '/library/tests';
    }
    return <Navigate to={defaultPage} replace />;
  };

  return (
    <BrowserRouter>
      {/* <RefineKbarProvider> */}
      <MainConfigContextProvider>
        <AntdApp>
          {/* <OnlineStatusContextProvider> */}
          {/* <DevtoolsProvider> */}
          <MaintenanceOverlay>
            <Refine
              key={`refine-${currentUser?.id}`} // Force re-render when user change
              dataProvider={{
                default: defaultDataProvider,
                aiService: aiServiceDataProvider,
              }}
              i18nProvider={i18nProvider}
              notificationProvider={apMessageNotificationProvider}
              routerProvider={routerBindings}
              authProvider={authProvider}
              accessControlProvider={accessControlProvider}
              resources={resources}
              options={{
                syncWithLocation: true,
                warnWhenUnsavedChanges: true,
                disableTelemetry: true,
                useNewQueryKeys: true,
                reactQuery: {
                  clientConfig: {
                    defaultOptions: {
                      queries: {
                        staleTime: Infinity,
                        retry: 1,
                        networkMode: 'always', // Always attempt to refetch even if the browser reports offline.
                      },
                      mutations: {
                        networkMode: 'always', // Ensure mutations aren't blocked by navigator.onLine checks.
                      },
                    },
                  },
                },
                // projectId: "I0NThk-HGVdW5-tRoWLI",
              }}
            >
              <Routes>
                <Route element={<AppLayout />}>
                  <Route index element={<NavigateToDefaultPage />} />
                  <Route path="/assessments">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="experiences"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ExperienceList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="experiences"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ExperienceCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="experiences"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ExperienceEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/connectivity-test">
                    <Route index element={<ConnectivityTest />} />
                  </Route>

                  <Route path="/overview">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="overviews"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <OverviewList />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/questionbanks">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="questionbanks"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <QuestionBanksList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="questionbanks"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <QuestionBanksCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="questionbanks"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <QuestionBanksEdit />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="show/:libraryId/experience/create"
                      element={
                        <CanAccess
                          resource="questionbank_experiences"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <QuestionBankExperienceCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="show/:libraryId/experience/edit/:id"
                      element={
                        <CanAccess
                          resource="questionbank_experiences"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <QuestionBankExperienceEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/rubrics">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="rubrics"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <RubricsList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="rubrics"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <RubricsCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="rubrics"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <RubricsEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/library">
                    <Route
                      path="tests"
                      element={
                        <CanAccess
                          resource="librarys"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <LibraryPage />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="explore"
                      element={
                        <CanAccess
                          resource="librarys"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <LibraryPage />
                        </CanAccess>
                      }
                    />
                    {/* This route is used to show the resources list in the library page */}
                    <Route
                      path="resources"
                      element={
                        <CanAccess
                          resource="librarys"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <LibraryPage />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="tests/:qbId"
                      element={
                        <CanAccess
                          resource="librarys"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <LibraryPage />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="tests/:qbId/create"
                      element={
                        <CanAccess
                          resource="librarys"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ExperienceForm mode="create" />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="tests/:qbId/edit/:id"
                      element={
                        <CanAccess
                          resource="librarys"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <QuestionBankExperienceEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/common_assessments">
                    <Route
                      path="tests"
                      element={
                        <CanAccess
                          resource="common_assessments"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <LibraryPage isCommonAssessmentBank={true} />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="explore"
                      element={
                        <CanAccess
                          resource="common_assessments"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <LibraryPage isCommonAssessmentBank={true} />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/gradebook">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="gradebooks"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <Gradebook />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/schools">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="schools"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <SchoolsList />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/users">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="users"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <UsersList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="users"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <UserEdit />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="users"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <UserCreate />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/groups">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="groups"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <GroupsList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="groups"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <GroupCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="groups"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <GroupEdit />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="show/:id"
                      element={
                        <CanAccess
                          resource="groups"
                          action="show"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <GroupShow />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/rooms">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="rooms"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <RoomsList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="rooms"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <RoomCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="rooms"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <RoomEdit />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="show/:id"
                      element={
                        <CanAccess
                          resource="rooms"
                          action="show"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <RoomShow />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route
                    path="/settings"
                    element={
                      <CanAccess
                        resource="org_settings"
                        action="list"
                        fallback={<NavigateToDefaultPage />}
                      >
                        <OrgSettings />
                      </CanAccess>
                    }
                  >
                    <Route index element={<Navigate to="/settings" replace />} />
                    <Route path="general" element={null} />
                    <Route path="bulk-import" element={null} />
                    <Route path="enable-py" element={null} />
                    <Route path="permissions" element={null} />
                    <Route path="audit-logs" element={null} />
                    <Route path="standard-sets" element={null} />
                    <Route path="grading-scales" element={null} />
                    <Route path="integrations" element={null} />
                    <Route path="oneroster-import" element={null} />
                    <Route path="ai-usage" element={null} />
                    <Route path="features" element={null} />
                    <Route
                      path="programs"
                      element={
                        <CanAccess
                          resource="org_programmes"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <OrgProgrammesItemDetail />
                        </CanAccess>
                      }
                    />
                    <Route path="programs/:programId" element={<OrgProgrammesItemDetail />}>
                      <Route index element={<Navigate to="subjects" replace />} />
                      <Route path="grades" element={<OrgProgramGradesShow />} />
                      <Route path="subjects" element={<OrgProgramSubjectShow />} />
                      <Route path="terms">
                        <Route
                          index
                          element={
                            <CanAccess
                              resource="terms"
                              action="list"
                              fallback={<NavigateToDefaultPage />}
                            >
                              <TermsList />
                            </CanAccess>
                          }
                        />
                        <Route
                          path="create"
                          element={
                            <CanAccess
                              resource="terms"
                              action="create"
                              fallback={<NavigateToDefaultPage />}
                            >
                              <TermsCreate />
                            </CanAccess>
                          }
                        />
                        <Route
                          path="edit/:termsId"
                          element={
                            <CanAccess
                              resource="terms"
                              action="edit"
                              fallback={<NavigateToDefaultPage />}
                            >
                              <TermsEdit />
                            </CanAccess>
                          }
                        />
                      </Route>
                    </Route>
                  </Route>
                  <Route path="/help">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="helps"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <Help />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/resource-sheets">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="resource_sheets"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ResourceSheet />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/features">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="features"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <FeaturesList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="features"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <FeatureCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="features"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <FeatureEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/download-apps">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="download_apps"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <OfflineApp />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/ui-components">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="ui-components"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <V3UIcomponents />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/profile">
                    <Route index element={<UserShow />} />
                  </Route>
                  <Route path="/orgs">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="orgs"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <OrgsList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="orgs"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <OrgsCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="orgs"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <OrgsEdit />
                        </CanAccess>
                      }
                    />
                    <Route
                      path=":orgId/settings"
                      element={
                        <CanAccess
                          resource="orgs"
                          action="list" // depends on list permission for superadmin/support
                          fallback={<NavigateToDefaultPage />}
                        >
                          <OrgSettings />
                        </CanAccess>
                      }
                    >
                      <Route index element={<Navigate to="programs" replace />} />
                      <Route path="general" element={null} />
                      <Route path="bulk-import" element={null} />
                      <Route path="enable-py" element={null} />
                      <Route path="permissions" element={null} />
                      <Route path="audit-logs" element={null} />
                      <Route path="standard-sets" element={null} />
                      <Route path="grading-scales" element={null} />
                      <Route path="integrations" element={null} />
                      <Route path="oneroster-import" element={null} />
                      <Route path="ai-usage" element={null} />
                      <Route path="features" element={null} />
                      <Route
                        path="programs"
                        element={
                          <CanAccess
                            resource="org_programmes"
                            action="list"
                            fallback={<NavigateToDefaultPage />}
                          >
                            <OrgProgrammesItemDetail />
                          </CanAccess>
                        }
                      />
                      <Route path="programs/:programId" element={<OrgProgrammesItemDetail />}>
                        <Route index element={<Navigate to="subjects" replace />} />
                        <Route path="grades" element={<OrgProgramGradesShow />} />
                        <Route path="subjects" element={<OrgProgramSubjectShow />} />
                        <Route path="terms">
                          <Route
                            index
                            element={
                              <CanAccess
                                resource="terms"
                                action="list"
                                fallback={<NavigateToDefaultPage />}
                              >
                                <TermsList />
                              </CanAccess>
                            }
                          />
                          <Route
                            path="create"
                            element={
                              <CanAccess
                                resource="terms"
                                action="create"
                                fallback={<NavigateToDefaultPage />}
                              >
                                <TermsCreate />
                              </CanAccess>
                            }
                          />
                          <Route
                            path="edit/:termsId"
                            element={
                              <CanAccess
                                resource="terms"
                                action="edit"
                                fallback={<NavigateToDefaultPage />}
                              >
                                <TermsEdit />
                              </CanAccess>
                            }
                          />
                        </Route>
                      </Route>
                    </Route>
                  </Route>
                  <Route path="/boards">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="boards"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <BoardsList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="boards"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <BoardCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="boards"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <BoardEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/programmes">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="programmes"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ProgrammesList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="programmes"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ProgrammesCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="programmes"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ProgrammesEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/plans">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="plans"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <PlansList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="plans"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <PlanCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="plans"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <PlanEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/prompts">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="prompts"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <PromptList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="prompts"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <PromptCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="prompts"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <PromptEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/feedbacks">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="feedbacks"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <FeedbackList />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/tags">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="tags"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <TagsList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="tags"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <TagCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="tags"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <TagEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/standard-sets">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="standard_sets"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <StandardCollectionsList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="standard_sets"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <StandardCollectionCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path=":id"
                      element={
                        <CanAccess
                          resource="standard_sets"
                          action="show"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <StandardCollectionDetail />
                        </CanAccess>
                      }
                    />
                    <Route
                      path=":standardCollectionId/content-areas/:id"
                      element={
                        <CanAccess
                          resource="standard_sets"
                          action="show"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <ContentAreaDetail />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="/integrations">
                    <Route
                      index
                      element={
                        <CanAccess
                          resource="integrations"
                          action="list"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <IntegrationList />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="create"
                      element={
                        <CanAccess
                          resource="integrations"
                          action="create"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <IntegrationCreate />
                        </CanAccess>
                      }
                    />
                    <Route
                      path="edit/:id"
                      element={
                        <CanAccess
                          resource="integrations"
                          action="edit"
                          fallback={<NavigateToDefaultPage />}
                        >
                          <IntegrationEdit />
                        </CanAccess>
                      }
                    />
                  </Route>
                  <Route path="*" element={<ErrorComponent />} />
                </Route>
                <Route path="/embed" element={<EmbedLayout />}>
                  <Route path=":uuid/*" element={<EmbeddedResourceItemDetailUuid />} />
                </Route>

                <Route
                  path="/assessments"
                  element={
                    <CustomAuthenticated
                      key="authenticated-experience-show"
                      fallback={<CatchAllNavigate to="/auth/login" />}
                    >
                      <ExperienceLayout />
                    </CustomAuthenticated>
                  }
                >
                  <Route path="/assessments">
                    <Route path=":id/*" element={<ExperienceShow />} />
                  </Route>
                </Route>

                <Route
                  path="/e/tests/:id/*"
                  element={
                    <CustomAuthenticated
                      key="authenticated-v2-urls-redirect-e"
                      fallback={<CatchAllNavigate to="/auth/login" />}
                    >
                      <V2UrlsRedirect />
                    </CustomAuthenticated>
                  }
                />
                <Route
                  path="/u/tests/:id/*"
                  element={
                    <CustomAuthenticated
                      key="authenticated-v2-urls-redirect-u"
                      fallback={<CatchAllNavigate to="/auth/login" />}
                    >
                      <V2UrlsRedirect />
                    </CustomAuthenticated>
                  }
                />

                <Route
                  path="/print"
                  element={
                    <CustomAuthenticated
                      key="authenticated-experience-print"
                      fallback={<CatchAllNavigate to="/auth/login" />}
                    >
                      <Outlet />
                    </CustomAuthenticated>
                  }
                >
                  <Route
                    path="assessments/:uuid"
                    element={
                      // <CanAccess
                      //   resource="experiences"
                      //   action="show"
                      //   fallback={<NavigateToDefaultPage />}
                      // >
                      <ExperiencePrint />
                      // </CanAccess>
                    }
                  />
                </Route>

                <Route path="/maintenance/resetting-demo" element={<DemoMaintenance />} />

                <Route element={<UnsupportedVersionLayout />}>
                  <Route path="/unsupported" element={<UnsupportedVersionNotice />} />
                </Route>

                <Route
                  element={
                    <CustomAuthenticated key="authenticated-outer" fallback={<Outlet />}>
                      <NavigateToResource />
                    </CustomAuthenticated>
                  }
                >
                  <Route path="/auth/login" element={<AuthPage type="login" />} />
                  <Route path="/auth/register" element={<AuthPage type="register" />} />
                  <Route
                    path="/auth/forgot-password"
                    element={<AuthPage type="forgotPassword" />}
                  />
                  <Route path="/auth/set-password" element={<AuthPage type="resetPassword" />} />
                  <Route path="/auth/text-code-login" element={<AuthPage type="textCodeLogin" />} />
                  <Route path="/auth/qr-code-login" element={<AuthPage type="qrCodeLogin" />} />
                  <Route path="/guest/join" element={<AuthPage type="guestLogin" />} />
                </Route>

                <Route path="/error" element={<Error />} />

                <Route path="/seb_quit.html" element={<>SEB Quit</>} />

                <Route path="/cross-app-logout" element={<CrossAppLogoutListener />} />
              </Routes>
              <UnsavedChangesNotifier />
              {/* <RefineKbar /> */}
              <DocumentTitleHandler
                handler={() => 'AssessPrep - Next Generation Assessment Platform'}
              />
              <ReactQueryDevtools initialIsOpen={false} />
            </Refine>
            {/* <DevtoolsPanel /> */}
            <CheckNativeAppUpdate />
          </MaintenanceOverlay>
          {/* </DevtoolsProvider> */}
          {/* </OnlineStatusContextProvider> */}
        </AntdApp>
      </MainConfigContextProvider>
      {/* </RefineKbarProvider> */}
    </BrowserRouter>
  );
}

export default App;