import {
  Suspense,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useState,
} from 'react';
import { useLocation } from 'react-router-dom';

import Backdrop from '@material-hu/mui/Backdrop';
import Drawer from '@material-hu/mui/Drawer';
import { useTheme } from '@material-hu/mui/styles';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

import HuSidebar from '@material-hu/components/design-system/Sidebar';
import { SIDEBAR_WIDTH } from '@material-hu/components/design-system/Sidebar/constants';

import { EVENTS_SOCKETS } from 'src/constants/sockets';
import useAuth from 'src/contexts/JWTContext';
import { useLayoutMetrics } from 'src/contexts/LayoutMetricsContext';
import { useSidebarContext } from 'src/contexts/SidebarContext';
import useSocket from 'src/contexts/SocketContext';
import useFeatureFlag from 'src/hooks/useFeatureFlag';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { lazyRetry } from 'src/lazyLoad';
import { FeatureFlags } from 'src/types/featureFlags';
import { Module, ModuleGroup } from 'src/types/modules';
import { insertIf } from 'src/utils/arrayUtils';

import Scrollbar from 'src/components/Scrollbar';

import { filterSidebarItems } from '../utils';

import NavSection from './NavSection';
import SidebarSkeleton from './SidebarSkeleton';
import { type SidebarNavItem } from './types';

const InsightsItem = lazyRetry(() => import('./items/InsightsItem'));
const ReferralsItem = lazyRetry(() => import('./items/ReferralsItem'));
const UsersItem = lazyRetry(() => import('./items/UsersItem'));
const GroupsItem = lazyRetry(() => import('./items/GroupsItem'));
const SegmentationItem = lazyRetry(() => import('./items/SegmentationItem'));
const ReportsItem = lazyRetry(() => import('./items/ReportsItem'));
const RegionsItem = lazyRetry(() => import('./items/RegionsItem'));
const WorkSchedulesItem = lazyRetry(() => import('./items/WorkSchedulesItem'));
const TimeTrackingItem = lazyRetry(() => import('./items/TimeTrackingItem'));
const ArticlesItem = lazyRetry(() => import('./items/ArticlesItem'));
const LibrariesItem = lazyRetry(() => import('./items/LibrariesItem'));
const FormsItem = lazyRetry(() => import('./items/FormsItem'));
const SurveysItem = lazyRetry(() => import('./items/SurveysItem'));
const RecruitingItem = lazyRetry(() => import('./items/RecruitingItem'));
const TaliItem = lazyRetry(() => import('./items/TaliItem'));
const PeopleExperienceItem = lazyRetry(
  () => import('./items/PeopleExperienceItem'),
);
const LearningItem = lazyRetry(() => import('./items/LearningItem'));
const ServiceManagementItem = lazyRetry(
  () => import('./items/ServiceManagementItem'),
);
const OnboardingItem = lazyRetry(() => import('./items/OnboardingItem'));
const EmployeeLifecycleItem = lazyRetry(
  () => import('./items/EmployeeLifecycleItem'),
);
const AcknowledgementsItem = lazyRetry(
  () => import('./items/AcknowledgementsItem'),
);
const AgentsItem = lazyRetry(() => import('./items/AgentsItem'));
const FilesItem = lazyRetry(() => import('./items/FilesItem'));
const DocumentsItem = lazyRetry(() => import('./items/DocumentsItem'));
const WidgetsItem = lazyRetry(() => import('./items/WidgetsItem'));
const TimeOffItem = lazyRetry(() => import('./items/TimeOffItem'));
const CompetenciesItem = lazyRetry(() => import('./items/CompetenciesItem'));
const PerformanceItem = lazyRetry(() => import('./items/PerformanceItem'));
const GoalsItem = lazyRetry(() => import('./items/GoalsItem'));
const CommunicationsItem = lazyRetry(
  () => import('./items/CommunicationsItem'),
);
const ProdeItem = lazyRetry(() => import('./items/ProdeItem'));
const SettingsItem = lazyRetry(() => import('./items/SettingsItem'));
const MiniAppsItem = lazyRetry(() => import('./items/MiniAppsItem'));

const DashboardSidebar = () => {
  const theme = useTheme();
  const socket = useSocket();
  const location = useLocation();
  const HuGoThemeProvider = useHuGoTheme();
  const { initialize, instance, modules, permissions } = useAuth();
  const { isSidebarHidden, navbarHeight } = useLayoutMetrics();
  const {
    isSidebarCollapsed: isCollapsed,
    collapseSidebar,
    expandSidebar,
  } = useSidebarContext();
  const isDownMd = useMediaQuery(theme.breakpoints.down('md'));

  const isCerberusEnabled = useFeatureFlag(FeatureFlags.CERBERUS_ENABLED);
  const isAgentsAvailable = useFeatureFlag(
    FeatureFlags.CHATS_V2_SAMMY_ASSISTANT,
  );

  const [openBackdrop, setOpenBackdrop] = useState<boolean>(false);

  useEffect(() => {
    socket.listenEvent(EVENTS_SOCKETS.UPDATED_USER_CAPABILITIES, initialize!);
    return () => {
      socket.closeEvent(EVENTS_SOCKETS.UPDATED_USER_CAPABILITIES, initialize!);
    };
  }, [socket]);

  // biome-ignore lint/correctness/useExhaustiveDependencies: location.pathname is an intentional trigger to re-collapse on every navigation while on mobile
  useLayoutEffect(() => {
    if (isDownMd) collapseSidebar();
  }, [isDownMd, location.pathname, collapseSidebar]);

  const onSelectItem = useCallback(() => {
    if (isDownMd) collapseSidebar(false);
  }, [isDownMd, collapseSidebar]);

  // biome-ignore lint/correctness/useExhaustiveDependencies: location.pathname is intentionally included so each item element is recreated on navigation, forcing items to re-evaluate their `active` state (derived from window.location.pathname). Without this, React's reconciler bails out on identical memoized children and the selected-item highlight gets stuck on the route loaded at mount.
  const sidebarNavItems: SidebarNavItem[] = useMemo(
    () => [
      {
        key: Module.INSIGHTS,
        component: (
          <InsightsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.REFERRALS,
        component: (
          <ReferralsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.USERS,
        component: (
          <UsersItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.GROUPS,
        component: (
          <GroupsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.SEGMENTATIONS,
        component: (
          <SegmentationItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: isCerberusEnabled ? Module.CUSTOM_REPORTS : Module.REPORTS,
        component: (
          <ReportsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.REGIONS,
        component: (
          <RegionsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.PRODE_ADMIN,
        component: (
          <ProdeItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.WORK_SCHEDULES,
        component: (
          <WorkSchedulesItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.TIME_TRACKING,
        component: (
          <TimeTrackingItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.ARTICLES,
        component: (
          <ArticlesItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.KNOWLEDGE_LIBRARIES,
        component: (
          <LibrariesItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.FORMS,
        component: (
          <FormsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.SURVEYS,
        component: (
          <SurveysItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.ATS,
        component: (
          <RecruitingItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: ModuleGroup.ASISTENCIA_INTELIGENTE,
        subModules: [Module.TALI],
        component: (
          <TaliItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.PEOPLE_EXPERIENCE,
        component: (
          <PeopleExperienceItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: isCerberusEnabled ? Module.LEARNING : ModuleGroup.LEARNINGS,
        subModules: isCerberusEnabled
          ? undefined
          : [
              Module.COURSES,
              Module.PATHS,
              Module.LEARNING_SESSIONS,
              Module.LEARNING_SETTINGS,
            ],
        component: (
          <LearningItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: ModuleGroup.SERVICE_MANAGEMENT,
        subModules: [Module.WORKFLOWS],
        component: (
          <ServiceManagementItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.ONBOARDINGS,
        component: (
          <OnboardingItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.EMPLOYEE_LIFECYCLE,
        component: (
          <EmployeeLifecycleItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.ACKNOWLEDGEMENTS,
        component: (
          <AcknowledgementsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      ...insertIf(isAgentsAvailable, {
        key: Module.AI_AGENTS,
        component: (
          <AgentsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      }),
      {
        key: Module.FILES,
        component: (
          <FilesItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.DOCUMENTS,
        component: (
          <DocumentsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.WIDGETS,
        component: (
          <WidgetsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.TIME_OFF,
        component: (
          <TimeOffItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.COMPETENCIES,
        component: (
          <CompetenciesItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.PERFORMANCE_REVIEWS,
        component: (
          <PerformanceItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.GOALS,
        component: (
          <GoalsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.COMMUNICATIONS,
        component: (
          <CommunicationsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.SETTINGS,
        subModules: [
          Module.SETTINGS,
          Module.ROLES_AND_PERMISSIONS,
          Module.SECURITY,
        ],
        component: (
          <SettingsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
      {
        key: Module.MINI_APPS,
        component: (
          <MiniAppsItem
            isCollapsed={isCollapsed}
            onClick={onSelectItem}
          />
        ),
      },
    ],
    [isCollapsed, onSelectItem, isCerberusEnabled, location.pathname],
  );

  const filteredItems = filterSidebarItems(
    sidebarNavItems,
    instance,
    modules,
    permissions,
  );

  const onBackdropMdClick = () => collapseSidebar(false);
  const onBackdropClick = () => setOpenBackdrop(false);

  const content = (
    <HuGoThemeProvider>
      <HuSidebar
        isCollapsed={isCollapsed}
        pathname={location.pathname}
        customNavSection={
          <Suspense
            fallback={
              <SidebarSkeleton
                isCollapsed={isCollapsed}
                navbarHeight={navbarHeight}
              />
            }
          >
            <NavSection filteredItems={filteredItems} />
          </Suspense>
        }
        openMenu={expandSidebar}
      />
    </HuGoThemeProvider>
  );

  if (isSidebarHidden) return null;

  if (isCollapsed) {
    return (
      <>
        <Backdrop
          sx={{ zIndex: 100 }}
          open={openBackdrop}
          onClick={onBackdropClick}
        />
        <Drawer
          anchor="left"
          id="sidebar-drawer"
          open={isCollapsed}
          transitionDuration={0}
          PaperProps={{
            sx: {
              backgroundColor: 'background.paper',
              height: '100%  !important',
              width: 68,
              overflow: 'hidden',
              pt: `${navbarHeight}px`,
            },
          }}
          variant="persistent"
        >
          <Scrollbar options={{ suppressScrollX: true }}>{content}</Scrollbar>
        </Drawer>
      </>
    );
  }

  if (isDownMd) {
    return (
      <Drawer
        anchor="left"
        id="sidebar-drawer"
        onClose={onBackdropMdClick}
        open={!isCollapsed}
        PaperProps={{
          sx: {
            backgroundColor: 'background.paper',
            width: SIDEBAR_WIDTH,
            pt: `${navbarHeight}px`,
          },
        }}
        variant="temporary"
      >
        {content}
      </Drawer>
    );
  }

  return (
    <>
      <Backdrop
        sx={{ zIndex: 100 }}
        open={openBackdrop}
        onClick={onBackdropClick}
      />
      <Drawer
        anchor="left"
        id="sidebar-drawer"
        open={!isCollapsed}
        transitionDuration={0}
        PaperProps={{
          sx: {
            backgroundColor: 'background.paper',
            overflowX: 'hidden',
            width: SIDEBAR_WIDTH,
            pt: `${navbarHeight}px`,
          },
        }}
        variant="persistent"
      >
        <Scrollbar>{content}</Scrollbar>
      </Drawer>
    </>
  );
};

export default DashboardSidebar;