import { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { FormProvider, useForm } from 'react-hook-form';
import { useInfiniteQuery, useMutation } from 'react-query';
import { useNavigate } from 'react-router';
import { useSearchParams } from 'react-router-dom';

import { times } from 'lodash-es';
import { useModal } from '@material-hu/hooks/useModal';
import {
  IconDeviceDesktopAnalytics,
  IconEdit,
  IconInfoCircle,
  IconPlus,
  IconToggleLeft,
  IconToggleRight,
  IconTrash,
} from '@material-hu/icons/tabler';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';
import { type Theme } from '@material-hu/mui/styles';

import HuAccordion from '@material-hu/components/design-system/Accordion';
import HuBreadcrumbs from '@material-hu/components/design-system/Breadcrumbs';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuDialog from '@material-hu/components/design-system/Dialog';
import StateCard from '@material-hu/components/design-system/StateCard';
import HuTitle from '@material-hu/components/design-system/Title';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { queryClient } from 'src/config/react-query';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useLocalStorage from 'src/hooks/useLocalStorage';
import { type RequestError } from 'src/types/services';
import { type User } from 'src/types/user';
import { insertIf } from 'src/utils/arrayUtils';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';
import { getFullname } from 'src/utils/userUtils';

import InfiniteList from 'src/components/InfiniteList/InfiniteList';

import useServiceMgmtPermissions from '../hooks/useServiceMgmtPermissions';
import useSnackbar from '../hooks/useSnackbar';
import { serviceManagementKeys } from '../queries';
import { serviceManagementRoutes } from '../routes';
import {
  checkAgentGroupDeletability,
  createHelpDesk,
  deleteHelpDesk,
  editHelpDesk,
  getHelpDesksHydrated,
} from '../services';
import {
  type AgentGroup,
  AgentGroupStatus,
  type AgentGroupUsage,
  type HelpDesk,
  ServiceManagementRole,
} from '../types';
import { isSameUserList } from '../utils';

import AgentGroupDetailDrawer from './components/AgentGroupDetailDrawer';
import AgentGroupListItem from './components/AgentGroupListItem';
import AgentGroupUsageAlertBody from './components/AgentGroupUsageAlertBody';
import CreateHelpDeskDrawer from './components/CreateHelpDeskDrawer';
import HelpDeskListItemSkeleton from './components/HelpDeskListItemSkeleton';
import useAgentGroup from './hooks/useAgentGroup';

export const HELP_DESKS_LIMIT = 10;

export type HelpDeskForm = {
  name: string;
  coordinators: User[];
  segmentations: number[];
};

const HelpDesksPage = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation(['service_management', 'general']);
  const { showSnackbar } = useSnackbar();
  const navigate = useNavigate();

  const {
    canCreateAgentGroupsAndDesks,
    canDeleteAgentGroupsAndDesks,
    canEditAgentGroupsAndDesks,
  } = useServiceMgmtPermissions();

  const [searchParams] = useSearchParams();
  const navigatedFromHelpDeskId = searchParams.get('hd');

  const [isCreateHelpDeskDrawerOpen, setIsCreateHelpDeskDrawerOpen] =
    useState(false);
  const [selectedHelpDesk, setSelectedHelpDesk] = useState<HelpDesk | null>(
    null,
  );
  const [isAgentGroupDetailsDrawerOpen, setIsAgentGroupDetailsDrawerOpen] =
    useState(false);
  const [selectedAgentGroup, setSelectedAgentGroup] =
    useState<AgentGroup | null>(null);

  const [appliedSegmentations, setAppliedSegmentations] = useState<number[]>(
    [],
  );
  const [duplicateEntityError, setDuplicateEntityError] = useState<
    string | null
  >(null);
  const [agentGroupUsageError, setAgentGroupUsageError] =
    useState<AgentGroupUsage | null>(null);
  // Keep track of the modal state to
  const [isCantDeleteModalOpen, setIsCantDeleteModalOpen] = useState(false);

  const helpDeskForm = useForm<HelpDeskForm>({
    defaultValues: {
      name: '',
      coordinators: [],
      segmentations: [], // Segmentation item ids to filter by
    },
    mode: 'onBlur',
  });

  const {
    deactivateAgentGroupMutation,
    activateAgentGroupMutation,
    deleteAgentGroupMutation,
  } = useAgentGroup({});

  const {
    data,
    isLoading,
    isError,
    refetch,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
    isSuccess,
  } = useInfiniteQuery(
    serviceManagementKeys.helpDesks.list(HELP_DESKS_LIMIT),
    ({ pageParam = 1 }) =>
      getHelpDesksHydrated({ page: pageParam, limit: HELP_DESKS_LIMIT }),
    {
      getNextPageParam: lastPage =>
        lastPage.data.page === lastPage.data.totalPages
          ? undefined
          : lastPage.data.page + 1,
      onError: () => {
        // do nothing: prevent global error handling
      },
    },
  );

  const helpDesks = data?.pages.flatMap(page => page.data.items) ?? [];
  const isEmpty = !helpDesks.length && !isLoading && !isError;

  // Keep track of which help desks are expanded, and automatically scroll to the help desk navigated from (if any)
  const [hasScrolled, setHasScrolled] = useState(false);
  const [expandedHelpDesks, setExpandedHelpDesks] = useLocalStorage(
    'expanded-help-desks',
    helpDesks?.length > 0 ? [helpDesks[0].id] : [],
  );

  const createHelpDeskMutation = useMutation({
    mutationFn: (values: Omit<HelpDeskForm, 'segmentations'>) =>
      createHelpDesk({
        ...values,
        coordinators: values.coordinators.map(c => c.id),
      }),
    onSuccess: response => {
      const createdHelpDesk = response.data;
      setIsCreateHelpDeskDrawerOpen(false);
      queryClient.invalidateQueries(
        serviceManagementKeys.helpDesks.list(HELP_DESKS_LIMIT),
      );
      cleanFormValues();
      showSnackbar({
        title: t('help_desk_creation_success', {
          name: createdHelpDesk.name,
        }),
        variant: 'success',
      });
      logEvent(LogEvents.SERVICE_MGMT_HELP_DESK_CREATED, {
        role: ServiceManagementRole.ADMIN,
        help_desk_id: createdHelpDesk.id,
      });
    },
    onError: (error: RequestError, res) => {
      if (error.response?.data.code === 'DUPLICATE_ENTITY') {
        setDuplicateEntityError(res.name);
        helpDeskForm.setError('name', {
          message: t('name_already_in_use'),
        });
      } else {
        showSnackbar({
          title: t('help_desk_creation_error'),
          description: t('try_again_later'),
          variant: 'error',
        });
      }
    },
  });

  const editHelpDeskMutation = useMutation({
    mutationFn: (values: Omit<HelpDeskForm, 'segmentations'>) =>
      editHelpDesk(selectedHelpDesk?.id ?? '', {
        ...values,
        coordinators: values.coordinators.map(c => c.id),
      }),
    onSuccess: response => {
      const editedHelpDesk = response.data;
      setIsCreateHelpDeskDrawerOpen(false);
      cleanFormValues();
      queryClient.invalidateQueries(
        serviceManagementKeys.helpDesks.list(HELP_DESKS_LIMIT),
      );
      showSnackbar({
        title: t('help_desk_updated_success', {
          name: editedHelpDesk.name,
        }),
        variant: 'success',
      });
      setDuplicateEntityError(null);
    },
    onError: (error: RequestError, res) => {
      if (error.response?.data.code === 'DUPLICATE_ENTITY') {
        setDuplicateEntityError(res.name);
        helpDeskForm.setError('name', {
          message: t('name_already_in_use'),
        });
      } else {
        showSnackbar({
          title: t('help_desk_updated_error'),
          description: t('try_again_later'),
          variant: 'error',
        });
      }
    },
  });

  const deleteHelpDeskMutation = useMutation({
    mutationFn: (id: string) => deleteHelpDesk(id),
    onSuccess: () => {
      queryClient.invalidateQueries(
        serviceManagementKeys.helpDesks.list(HELP_DESKS_LIMIT),
      );
      showSnackbar({
        title: t('help_desk_delete_success', {
          name: selectedHelpDesk?.name,
        }),
        variant: 'success',
      });
      logEvent(LogEvents.SERVICE_MGMT_HELP_DESK_DELETED, {
        role: ServiceManagementRole.ADMIN,
        help_desk_id: selectedHelpDesk?.id,
      });
    },
    onError: () => {
      showSnackbar({
        title: t('help_desk_delete_error'),
        description: t('try_again_later'),
        variant: 'error',
      });
    },
  });

  const handleViewAgentGroupDetails = (agentGroup: AgentGroup) => {
    setSelectedAgentGroup(agentGroup);
    setIsAgentGroupDetailsDrawerOpen(true);
  };

  const handleToggleAgentGroupStatus = async (agentGroup: AgentGroup) => {
    if (agentGroup.status === AgentGroupStatus.ACTIVE) {
      // Check if group can be deactivated -> No service items are assigned to it
      try {
        const response = await checkAgentGroupDeletability(agentGroup.id);

        if (response.data.catalogItems.length === 0) {
          deactivateAgentGroupMutation.mutate(agentGroup);
        } else {
          // Agent group cannot be deactivated, show modal explaining why
          setAgentGroupUsageError(response.data);
          setSelectedAgentGroup(agentGroup);
          cantDeactivateAgentGroupModal.showModal();
        }
      } catch (_error) {
        // If check fails, show error
        showSnackbar({
          title: t('agent_group_delete_error'),
          description: t('try_again_later'),
          variant: 'error',
        });
      }
    } else {
      activateAgentGroupMutation.mutate(agentGroup);
    }
  };

  const handleEditAgentGroup = (helpDeskId: string, agentGroupId: string) => {
    navigate(serviceManagementRoutes.agentGroupEdit(helpDeskId, agentGroupId));
  };

  const handleDeleteAgentGroup = async (agentGroup: AgentGroup) => {
    setSelectedAgentGroup(agentGroup);
    try {
      // Check if the agent group can be deleted
      const response = await checkAgentGroupDeletability(agentGroup.id);

      if (
        response.data.catalogItems.length === 0 &&
        response.data.taskRelatedCatalogItems.length === 0
      ) {
        // Agent group can be deleted, show modal to confirm deletion
        confirmDeleteAgentGroupModal.showModal();
      } else {
        // Agent group cannot be deleted, show modal explaining why
        setAgentGroupUsageError(response.data);
        openCantDeleteAgentGroupModal();
      }
    } catch (_error) {
      // If check fails, show error
      setSelectedAgentGroup(null);
      showSnackbar({
        title: t('agent_group_delete_error'),
        description: t('try_again_later'),
        variant: 'error',
      });
    }
  };

  const handleCreateAgentGroup = (helpDeskId: string) => {
    navigate(serviceManagementRoutes.agentGroupCreate(helpDeskId));
  };

  const handleConfirmEditHelpDesk = () => {
    helpDeskForm.handleSubmit(values => {
      const { segmentations, ...helpDeskData } = values;
      editHelpDeskMutation.mutate(helpDeskData, {
        onSuccess: () => {
          cleanFormValues();
        },
      });
    })();
  };

  const handleCreateHelpDesk = () => {
    helpDeskForm.handleSubmit(values => {
      const { segmentations, ...helpDeskData } = values;
      createHelpDeskMutation.mutate(helpDeskData, {
        onSuccess: () => {
          cleanFormValues();
        },
      });
    })();
  };

  const handleCloseAgentGroupDetailsDrawer = () => {
    setIsAgentGroupDetailsDrawerOpen(false);
    setSelectedAgentGroup(null);
  };

  const handleEditHelpDesk = (helpDesk: HelpDesk) => {
    setSelectedHelpDesk(helpDesk);
    helpDeskForm.reset({
      name: helpDesk.name,
      coordinators: helpDesk.coordinators,
    });
    setIsCreateHelpDeskDrawerOpen(true);
  };

  const handleDeleteHelpDesk = (helpDesk: HelpDesk) => {
    if (helpDesk.agentGroups.length > 0) {
      cantDeleteHelpDeskModal.showModal();
    } else {
      setSelectedHelpDesk(helpDesk);
      confirmDeleteHelpDeskModal.showModal();
    }
  };

  const handleConfirmDeleteHelpDesk = () => {
    deleteHelpDeskMutation.mutate(selectedHelpDesk?.id ?? '', {
      onSettled: () => {
        confirmDeleteHelpDeskModal.closeModal();
        setSelectedHelpDesk(null);
      },
    });
  };

  const handleCloseCreateHelpDeskDrawer = () => {
    const isEdit = !!selectedHelpDesk;

    // If is editing, check if the help desk has been edited
    if (isEdit) {
      const formValues = helpDeskForm.getValues();
      const hasChanges =
        formValues.name !== selectedHelpDesk?.name ||
        !isSameUserList(formValues.coordinators, selectedHelpDesk.coordinators);

      if (hasChanges) {
        confirmExitModal.showModal();
      } else {
        setIsCreateHelpDeskDrawerOpen(false);
        cleanFormValues();
      }
    } else {
      // Check if the form has been edited
      if (helpDeskForm.formState.isDirty) {
        confirmExitModal.showModal();
      } else {
        setIsCreateHelpDeskDrawerOpen(false);
        cleanFormValues();
      }
    }
  };

  const cleanFormValues = () => {
    helpDeskForm.reset({
      name: '',
      coordinators: [],
      segmentations: [],
    });
    setAppliedSegmentations([]);
    setSelectedHelpDesk(null);
    setDuplicateEntityError(null);
  };

  const handleConfirmCloseCreateDrawer = () => {
    confirmExitModal.closeModal();
    setIsCreateHelpDeskDrawerOpen(false);
    cleanFormValues();
  };

  const confirmExitModal = useModal(
    () => (
      <HuDialog
        title={t('confirm_exit_title')}
        textBody={t('confirm_exit_description')}
        onClose={confirmExitModal.closeModal}
        primaryButtonProps={{
          variant: 'primary',
          children: t('continue_editing'),
          onClick: confirmExitModal.closeModal,
        }}
        secondaryButtonProps={{
          variant: 'tertiary',
          children: t('exit_without_saving'),
          onClick: handleConfirmCloseCreateDrawer,
        }}
      />
    ),
    {
      maxWidth: 'sm',
    },
  );

  const cantDeleteHelpDeskModal = useModal(
    () => (
      <HuDialog
        title={t('cant_delete_help_desk_title')}
        textBody={t('cant_delete_help_desk_description_group')}
        onClose={cantDeleteHelpDeskModal.closeModal}
        primaryButtonProps={{
          variant: 'primary',
          children: t('understood'),
          onClick: cantDeleteHelpDeskModal.closeModal,
        }}
      />
    ),
    {
      maxWidth: 'sm',
    },
  );

  const resetAgentGroupStates = (withTimeout = false) => {
    if (withTimeout) {
      setTimeout(() => {
        setSelectedAgentGroup(null);
        setAgentGroupUsageError(null);
      }, 150);
    } else {
      setSelectedAgentGroup(null);
      setAgentGroupUsageError(null);
    }
  };

  const openCantDeleteAgentGroupModal = () => {
    cantDeleteAgentGroupModal.showModal();
    setIsCantDeleteModalOpen(true);
  };

  const closeCantDeleteAgentGroupModal = () => {
    cantDeleteAgentGroupModal.closeModal();
    setIsCantDeleteModalOpen(false);
  };

  const cantDeleteAgentGroupModal = useModal(
    () => (
      <HuDialog
        title={t('cant_delete_agent_group_service_items_title')}
        body={
          <AgentGroupUsageAlertBody
            agentGroupUsage={agentGroupUsageError}
            agentGroup={selectedAgentGroup}
            action="deletion"
          />
        }
        onClose={() => {
          closeCantDeleteAgentGroupModal();
          resetAgentGroupStates(true);
        }}
        primaryButtonProps={{
          variant: 'primary',
          children: t('go_to_catalog'),
          onClick: () =>
            window.open(serviceManagementRoutes.serviceItems(), '_blank'),
          disabled: deactivateAgentGroupMutation.isLoading,
        }}
        secondaryButtonProps={{
          variant: 'tertiary',
          children: t('deactivate_group'),
          loading: deactivateAgentGroupMutation.isLoading,
          onClick: () => {
            if (!selectedAgentGroup || !agentGroupUsageError) return;

            if (agentGroupUsageError?.catalogItems.length > 0) {
              cantDeactivateAgentGroupModal.showModal();
            } else {
              deactivateAgentGroupMutation.mutate(selectedAgentGroup, {
                onSettled: () => {
                  closeCantDeleteAgentGroupModal();
                  resetAgentGroupStates(true);
                },
              });
            }
          },
        }}
      />
    ),
    {
      maxWidth: 'sm',
    },
  );

  const cantDeactivateAgentGroupModal = useModal(
    () => (
      <HuDialog
        title={t('cant_deactivate_agent_group_title')}
        body={
          <AgentGroupUsageAlertBody
            agentGroupUsage={agentGroupUsageError}
            agentGroup={selectedAgentGroup}
            action="deactivation"
          />
        }
        onClose={() => {
          cantDeactivateAgentGroupModal.closeModal();
          if (!isCantDeleteModalOpen) {
            resetAgentGroupStates(true);
          }
        }}
        primaryButtonProps={{
          variant: 'primary',
          children: t('go_to_catalog'),
          onClick: () =>
            window.open(serviceManagementRoutes.serviceItems(), '_blank'),
          loading: deactivateAgentGroupMutation.isLoading,
        }}
        secondaryButtonProps={{
          variant: 'tertiary',
          children: t('general:close'),
          onClick: () => {
            cantDeactivateAgentGroupModal.closeModal();
            if (!isCantDeleteModalOpen) {
              resetAgentGroupStates(true);
            }
          },
        }}
      />
    ),
    {
      maxWidth: 'sm',
    },
  );

  const confirmDeleteHelpDeskModal = useModal(
    () => (
      <HuDialog
        title={t('confirm_delete_help_desk_title')}
        textBody={t('confirm_delete_help_desk_description')}
        onClose={confirmDeleteHelpDeskModal.closeModal}
        primaryButtonProps={{
          variant: 'primary',
          children: t('general:delete'),
          onClick: handleConfirmDeleteHelpDesk,
          loading: deleteHelpDeskMutation.isLoading,
        }}
        secondaryButtonProps={{
          variant: 'tertiary',
          children: t('general:cancel'),
          disabled: deleteHelpDeskMutation.isLoading,
          onClick: () => {
            confirmDeleteHelpDeskModal.closeModal();
            setSelectedHelpDesk(null);
          },
        }}
      />
    ),
    {
      maxWidth: 'sm',
    },
  );

  const handleConfirmDeleteAgentGroup = () => {
    if (!selectedAgentGroup) return;
    deleteAgentGroupMutation.mutate(selectedAgentGroup, {
      onSettled: () => {
        confirmDeleteAgentGroupModal.closeModal();
        setSelectedAgentGroup(null);
      },
    });
  };

  const confirmDeleteAgentGroupModal = useModal(
    () => (
      <HuDialog
        title={t('confirm_delete_agent_group_title')}
        textBody={t('confirm_delete_agent_group_description')}
        onClose={confirmDeleteAgentGroupModal.closeModal}
        primaryButtonProps={{
          variant: 'primary',
          children: t('general:delete'),
          onClick: handleConfirmDeleteAgentGroup,
          loading: deleteAgentGroupMutation.isLoading,
        }}
        secondaryButtonProps={{
          variant: 'tertiary',
          children: t('general:cancel'),
          disabled: deleteAgentGroupMutation.isLoading,
          onClick: () => {
            confirmDeleteAgentGroupModal.closeModal();
            setSelectedAgentGroup(null);
          },
        }}
      />
    ),
    {
      maxWidth: 'sm',
    },
  );

  const handleChangeExpand = (helpDeskId: string) => {
    setExpandedHelpDesks(prev => {
      if (prev.includes(helpDeskId)) {
        return prev.filter(id => id !== helpDeskId);
      }
      return [...prev, helpDeskId];
    });
  };

  useEffect(() => {
    if (navigatedFromHelpDeskId) {
      const elem = document.getElementById(
        `help-desk-${navigatedFromHelpDeskId}`,
      );
      if (elem && !hasScrolled) {
        elem.scrollIntoView({ behavior: 'smooth' });
        setHasScrolled(true);
      }
    }
  }, [hasScrolled, helpDesks, navigatedFromHelpDeskId]);

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('help_desk_title'))}</title>
      </Helmet>
      <Stack
        sx={{
          minHeight: 1,
          width: 1,
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
        }}
      >
        {confirmExitModal.modal}
        {confirmDeleteHelpDeskModal.modal}
        {cantDeleteHelpDeskModal.modal}
        {cantDeleteAgentGroupModal.modal}
        {confirmDeleteAgentGroupModal.modal}
        {cantDeactivateAgentGroupModal.modal}
        <FormProvider {...helpDeskForm}>
          <CreateHelpDeskDrawer
            open={isCreateHelpDeskDrawerOpen}
            onClose={handleCloseCreateHelpDeskDrawer}
            onConfirm={
              selectedHelpDesk
                ? handleConfirmEditHelpDesk
                : handleCreateHelpDesk
            }
            onCancel={handleCloseCreateHelpDeskDrawer}
            loading={
              createHelpDeskMutation.isLoading || editHelpDeskMutation.isLoading
            }
            isEdit={!!selectedHelpDesk}
            appliedSegmentations={appliedSegmentations}
            setAppliedSegmentations={setAppliedSegmentations}
            duplicateEntity={duplicateEntityError}
            selectedHelpDesk={selectedHelpDesk}
          />
        </FormProvider>
        <AgentGroupDetailDrawer
          open={isAgentGroupDetailsDrawerOpen}
          onClose={handleCloseAgentGroupDetailsDrawer}
          agentGroupId={selectedAgentGroup?.id}
        />
        <Container
          maxWidth="lg"
          sx={{
            alignItems: 'flex-start',
            display: 'flex',
            flexDirection: 'column',
            gap: 3,
            pt: 2,
            pb: 4,
            px: 2,
            marginInline: 'auto',
            width: 1,
            height: '100%',
          }}
          disableGutters
        >
          <HuBreadcrumbs
            links={[
              {
                onClick: () =>
                  navigate(serviceManagementRoutes.agentManagement()),
                title: t('agent_management_title'),
              },
              {
                onClick: () => navigate(serviceManagementRoutes.helpDesks()),
                title: t('help_desk_title'),
              },
            ]}
          />
          <Stack
            sx={{
              width: 1,
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <HuTitle
              title={t('help_desk_title')}
              variant="XL"
            />
            {canCreateAgentGroupsAndDesks && (
              <Button
                startIcon={<IconPlus size={16} />}
                variant="contained"
                size="small"
                color="primary"
                onClick={() => setIsCreateHelpDeskDrawerOpen(true)}
                sx={{
                  fontSize: '14px',
                  fontWeight: 600,
                }}
              >
                {t('help_desk_new')}
              </Button>
            )}
          </Stack>
          {isLoading && (
            <Stack sx={{ gap: 3, width: 1 }}>
              {times(3).map(index => (
                <HelpDeskListItemSkeleton key={index} />
              ))}
            </Stack>
          )}
          {isEmpty && (
            <StateCard
              title={t('help_desk_empty_title')}
              description={t('help_desk_empty_description')}
              primaryAction={
                canCreateAgentGroupsAndDesks
                  ? {
                      label: t('help_desk_empty_cta'),
                      onClick: () => setIsCreateHelpDeskDrawerOpen(true),
                    }
                  : undefined
              }
            />
          )}
          {isError && (
            <StateCard
              variant="error"
              title={t('help_desk_error_title')}
              description={t('help_desk_error_description')}
              primaryAction={{
                label: t('try_again'),
                onClick: () => refetch(),
                variant: 'secondary',
              }}
            />
          )}
          {!isLoading && !isError && (
            <InfiniteList
              isEmpty={isEmpty}
              hasNextPage={!!hasNextPage}
              isSuccess={isSuccess}
              isFetchingNextPage={isFetchingNextPage}
              fetchNextPage={fetchNextPage}
              renderSkeleton={
                <Stack sx={{ gap: 3, width: 1, mt: 3 }}>
                  {times(3).map(index => (
                    <HelpDeskListItemSkeleton key={index} />
                  ))}
                </Stack>
              }
              sx={{ width: 1 }}
            >
              <Stack sx={{ gap: 3, width: 1 }}>
                {helpDesks.map(helpDesk => (
                  <HuCardContainer
                    key={helpDesk.id}
                    fullWidth
                    padding={0}
                    id={`help-desk-${helpDesk.id}`}
                  >
                    <HuAccordion
                      sx={{ p: 0 }}
                      avatar={{
                        Icon: IconDeviceDesktopAnalytics,
                        color: 'highlight',
                      }}
                      onChange={() => handleChangeExpand(helpDesk.id)}
                      defaultExpanded={expandedHelpDesks.includes(helpDesk.id)}
                      customDetail={
                        helpDesk.agentGroups.length > 0 ? (
                          <Stack sx={{ gap: 2 }}>
                            {[...helpDesk.agentGroups]
                              .sort((a, b) => a.name.localeCompare(b.name))
                              .map(agentGroup => (
                                <AgentGroupListItem
                                  key={agentGroup.id}
                                  agentGroup={agentGroup}
                                  menuOptions={[
                                    {
                                      Icon: IconInfoCircle,
                                      title: t('details'),
                                      onClick: () =>
                                        handleViewAgentGroupDetails(agentGroup),
                                    },
                                    ...insertIf(canEditAgentGroupsAndDesks, {
                                      Icon: IconEdit,
                                      title: t('general:edit'),
                                      onClick: () =>
                                        handleEditAgentGroup(
                                          helpDesk.id,
                                          agentGroup.id,
                                        ),
                                    }),
                                    ...insertIf(canEditAgentGroupsAndDesks, {
                                      Icon:
                                        agentGroup.status ===
                                        AgentGroupStatus.ACTIVE
                                          ? IconToggleRight
                                          : IconToggleLeft,
                                      title:
                                        agentGroup.status ===
                                        AgentGroupStatus.ACTIVE
                                          ? t('general:deactivate')
                                          : t('general:activate'),
                                      onClick: () =>
                                        handleToggleAgentGroupStatus(
                                          agentGroup,
                                        ),
                                    }),
                                    ...insertIf(canDeleteAgentGroupsAndDesks, {
                                      Icon: IconTrash,
                                      title: t('general:delete'),
                                      onClick: () =>
                                        handleDeleteAgentGroup(agentGroup),
                                    }),
                                  ]}
                                />
                              ))}
                            {canCreateAgentGroupsAndDesks && (
                              <Button
                                variant="tertiary"
                                size="large"
                                fullWidth
                                startIcon={<IconPlus size={16} />}
                                onClick={() =>
                                  handleCreateAgentGroup(helpDesk.id)
                                }
                              >
                                {t('agent_group_new')}
                              </Button>
                            )}
                          </Stack>
                        ) : (
                          <StateCard
                            title={t('help_desk_empty_agent_groups_title')}
                            description={t(
                              'help_desk_empty_agent_groups_description',
                            )}
                            primaryAction={
                              canCreateAgentGroupsAndDesks
                                ? {
                                    label: t(
                                      'help_desk_empty_agent_groups_cta',
                                    ),
                                    onClick: () =>
                                      handleCreateAgentGroup(helpDesk.id),
                                    variant: 'outlined',
                                    size: 'small',
                                  }
                                : undefined
                            }
                            slotProps={{
                              card: {
                                sx: {
                                  borderRadius: 2,
                                  border: 'none',
                                  backgroundColor: (theme: Theme) =>
                                    theme.palette.new.background.layout.default,
                                },
                              },
                            }}
                          />
                        )
                      }
                      description={
                        <HuTooltip
                          description={helpDesk.coordinators
                            .map(c => getFullname(c))
                            .join(', ')}
                          direction="bottom"
                          delay={400}
                        >
                          <span>
                            {t('coordinators_count', {
                              count: helpDesk.coordinators.length,
                            })}
                          </span>
                        </HuTooltip>
                      }
                      elevation={0}
                      menuList={
                        canEditAgentGroupsAndDesks ||
                        canDeleteAgentGroupsAndDesks
                          ? {
                              options: [
                                ...insertIf(canEditAgentGroupsAndDesks, {
                                  Icon: IconEdit,
                                  title: t('general:edit'),
                                  onClick: () => handleEditHelpDesk(helpDesk),
                                }),
                                ...insertIf(canDeleteAgentGroupsAndDesks, {
                                  Icon: IconTrash,
                                  title: t('general:delete'),
                                  onClick: () => handleDeleteHelpDesk(helpDesk),
                                }),
                              ],
                              position: 'right',
                            }
                          : undefined
                      }
                      title={helpDesk.name}
                    />
                  </HuCardContainer>
                ))}
              </Stack>
            </InfiniteList>
          )}
        </Container>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default HelpDesksPage;