import { useEffect, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { FormProvider } from 'react-hook-form';
import { type TFunction, Trans } from 'react-i18next';
import { useNavigate } from 'react-router';

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import { useModal } from '@material-hu/hooks/useModal';
import {
  IconChevronDown,
  IconChevronUp,
  IconDownload,
  IconMail,
  IconUserExclamation,
  IconUserPlus,
} from '@material-hu/icons/tabler';
import Container from '@material-hu/mui/Container';
import IconButton from '@material-hu/mui/IconButton/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import MenuList from '@material-hu/components/composed-components/MenuList';
import Avatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete';
import Menu from '@material-hu/components/design-system/Menu';
import MenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import StateCard from '@material-hu/components/design-system/StateCard';
import Title from '@material-hu/components/design-system/Title';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { UserStatus } 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 useUsersPermissions from '../hooks/useUsersPermissions';
import { usersRoutes } from '../routes';

import InviteUser from './components/InviteUser';
import NotifyInactiveModal from './components/NotifyInactiveModal';
import UsersTable from './components/UsersTable';
import { useDownloadUsersDrawerContent } from './hooks/useDownloadUsersDrawerContent';
import useInfiniteUsersSearch from './hooks/useInfiniteUsersSearch';

const List = () => {
  const { t } = useLokaliseTranslation('users');
  const navigate = useNavigate();
  const HuGoThemeProvider = useHuGoTheme();
  const {
    canCreateUser,
    canBulkCreateUsers,
    canBulkDeleteUsers,
    canBulkDeactivateUsers,
    canBulkUpdateProfileFields,
    canBulkBossAssignment,
    canBulkReviewerAssignment,
    canBulkDepartmentsAssignment,
    canBulkPositionsAssignment,
    canBulkChats,
    canEmailNotifyInactiveUsers,
    canDownloadListingReport,
    canInviteUser,
  } = useUsersPermissions();

  useEffect(() => {
    logEvent(LogEvents.USERS_HOME_VIEWED);
  }, []);

  const [newUserMenuOpen, setNewUserMenuOpen] = useState(false);
  const [inviteUserOpen, setInviteUserOpen] = useState(false);
  const [bulkMenuListKey, setBulkMenuListKey] = useState(0);
  const pageRef = useRef<HTMLDivElement>(null);
  const anchorRef = useRef<HTMLButtonElement>(null);

  const {
    search: { component: Search, value: search, status },
    table: { results: users, count, TableSortingHeader },
    loading: { isLoading, isFetchingNextPage },
    actions: { fetchNextPage, setStatus },
    form,
  } = useInfiniteUsersSearch();

  const USER_STATUS_OPTIONS = [
    { label: t('ALL_USERS'), value: 0 },
    { label: t('USERS_ACTIVE_USERS'), value: UserStatus.ACTIVE },
    { label: t('UNCLAIMED'), value: UserStatus.UNCLAIMED },
    { label: t('DEACTIVATED'), value: UserStatus.DEACTIVATED },
  ];

  const selectedStatusOption =
    USER_STATUS_OPTIONS.find(opt => opt.value === status) ??
    USER_STATUS_OPTIONS[0];

  const handleScrollToTop = () => {
    pageRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const showFilterEmptyState =
    !isLoading && users?.length === 0 && (!!search || !!status);

  const { drawer: downloadUsersDrawer, showDrawer: showDownloadUsersDrawer } =
    useDrawerV2(useDownloadUsersDrawerContent);

  const {
    modal: notifyInactiveUsersModal,
    showModal: showNotifyInactiveUsersModal,
    closeModal: closeInactiveUsersModal,
  } = useModal(
    () => (
      <NotifyInactiveModal
        open={inviteUserOpen}
        onClose={closeInactiveUsersModal}
      />
    ),
    { fullWidth: true, maxWidth: 'md' },
  );

  const pageTitle = t('USERS');

  const newUserOptions = [
    ...insertIf(canCreateUser, {
      icon: IconUserPlus,
      label: t('add_user'),
      onClick: () => navigate(usersRoutes.new()),
    }),
    ...insertIf(canInviteUser, {
      icon: IconMail,
      label: t('invite_user'),
      onClick: () => {
        setNewUserMenuOpen(false);
        setInviteUserOpen(true);
      },
    }),
    ...insertIf(canEmailNotifyInactiveUsers, {
      icon: IconUserExclamation,
      label: t('notify_by_mail'),
      onClick: () => {
        setNewUserMenuOpen(false);
        showNotifyInactiveUsersModal();
      },
    }),
  ];

  const bulkOptionsMenu = [
    ...insertIf(canBulkCreateUsers, {
      title: t('add_user_bulk'),
      onClick: () => navigate(usersRoutes.bulk()),
    }),
    ...insertIf(canBulkDeactivateUsers, {
      title: t('deactivate_user_bulk'),
      onClick: () => navigate(usersRoutes.bulkDeactivate()),
    }),
    ...insertIf(canBulkUpdateProfileFields, {
      title: t('bulk_assign_profile_fields'),
      onClick: () => navigate(usersRoutes.bulkProfileFields()),
    }),
    ...insertIf(canBulkDepartmentsAssignment, {
      title: t('bulk_assign_departments'),
      onClick: () => navigate(usersRoutes.bulkDepartmentsAssignment()),
    }),
    ...insertIf(canBulkPositionsAssignment, {
      title: t('bulk_assign_positions'),
      onClick: () => navigate(usersRoutes.bulkPositionsAssignment()),
    }),
    ...insertIf(canBulkBossAssignment, {
      title: t('bulk_assign_bosses'),
      onClick: () => navigate(usersRoutes.bulkBossAssignment()),
    }),
    ...insertIf(canBulkReviewerAssignment, {
      title: t('bulk_assign_reviewer'),
      onClick: () => navigate(usersRoutes.bulkReviewerAssignment()),
    }),
    ...insertIf(canBulkChats, {
      title: t('bulk_chats'),
      onClick: () => navigate(usersRoutes.bulkChats()),
    }),
    ...insertIf(canBulkDeleteUsers, {
      title: t('delete_user_bulk'),
      onClick: () => navigate(usersRoutes.bulkDelete()),
    }),
  ];

  return (
    <HuGoThemeProvider>
      {notifyInactiveUsersModal}
      {downloadUsersDrawer}
      <Helmet>
        <title>{formatTitle(pageTitle)}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          minHeight: '100%',
          py: 3,
          width: '100%',
        }}
      >
        <Container maxWidth="xl">
          <Stack
            sx={{
              alignItems: 'center',
              justifyContent: 'space-between',
              flexDirection: 'row',
              pb: 4,
            }}
          >
            <Title
              variant="L"
              title={pageTitle}
              description={t('description')}
            />
            <Stack
              sx={{
                flexDirection: 'row',
                gap: 1,
              }}
            >
              {newUserOptions.length > 0 && (
                <Stack
                  sx={{
                    flexDirection: 'row',
                    justifyContent: 'flex-start',
                  }}
                >
                  <Menu
                    open={newUserMenuOpen}
                    onClose={() => setNewUserMenuOpen(false)}
                    anchorEl={anchorRef.current}
                    position="right"
                  >
                    {newUserOptions.map(option => (
                      <MenuItem
                        key={option.label}
                        onClick={() => option.onClick()}
                      >
                        <Stack
                          sx={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            gap: 1,
                          }}
                        >
                          <Avatar
                            Icon={option.icon}
                            size="small"
                          />
                          <Title
                            variant="S"
                            fontWeight="fontWeightSemiBold"
                            title={option.label}
                          />
                        </Stack>
                      </MenuItem>
                    ))}
                  </Menu>
                  <Button
                    variant="primary"
                    focusRipple
                    ref={anchorRef}
                    startIcon={<IconUserPlus />}
                    endIcon={
                      newUserMenuOpen ? <IconChevronUp /> : <IconChevronDown />
                    }
                    size="large"
                    onClick={() => {
                      setNewUserMenuOpen(true);
                      setBulkMenuListKey(k => k + 1);
                    }}
                  >
                    {t('new_user')}
                  </Button>
                </Stack>
              )}
              {bulkOptionsMenu.length > 0 && (
                <MenuList
                  key={bulkMenuListKey}
                  options={bulkOptionsMenu}
                  position="right"
                  fixedDimensions={false}
                  onClick={() => setNewUserMenuOpen(false)}
                  slotProps={{
                    menu: {
                      sx: {
                        maxWidth: '256px',
                        '& .MuiPaper-root': {
                          maxWidth: '100%',
                          overflowX: 'hidden',
                        },
                        '& .MuiMenuItem-root, & .MuiListItem-root': {
                          whiteSpace: 'normal',
                          overflowWrap: 'break-word',
                        },
                      },
                    },
                    button: {
                      variant: 'secondary',
                      size: 'large',
                      sx: { height: '46px' },
                    },
                  }}
                />
              )}
            </Stack>
          </Stack>
          <CardContainer fullWidth>
            <Stack
              sx={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              <Title
                variant="M"
                fontWeight="fontWeightSemiBold"
                title={t('users_list')}
              />
              {canDownloadListingReport && (
                <IconButton
                  variant="secondary"
                  onClick={() => showDownloadUsersDrawer({})}
                >
                  <IconDownload />
                </IconButton>
              )}
            </Stack>
            <Stack
              sx={{ mt: 2 }}
              ref={pageRef}
            >
              <FormProvider {...form}>
                <Stack
                  sx={{
                    flexDirection: 'row',
                    gap: 2,
                    alignItems: 'center',
                    padding: 2,
                    backgroundColor: theme =>
                      theme.palette.new.background.layout.default,
                    borderRadius: 2,
                  }}
                >
                  <Search
                    inputProps={{
                      placeholder: t('query_placeholder'),
                      label: t('general:search'),
                      sx: { flex: 0.75 },
                    }}
                  />
                  <Stack sx={{ flex: 0.25 }}>
                    <HuAutocomplete
                      label={t('user_state')}
                      value={selectedStatusOption}
                      options={USER_STATUS_OPTIONS}
                      onChange={option =>
                        setStatus(option?.value as UserStatus | 0)
                      }
                      disableClearable
                    />
                  </Stack>
                </Stack>
              </FormProvider>
              <Stack
                sx={{
                  mt: showFilterEmptyState ? 2 : 3,
                  mb: showFilterEmptyState ? 0 : 2,
                }}
              >
                <HuSkeleton
                  isLoading={isLoading}
                  variant="text"
                  height={24}
                  width={200}
                >
                  {!showFilterEmptyState && (
                    <Typography>
                      <Trans
                        t={t as TFunction}
                        i18nKey="general:total_users"
                        values={{ count }}
                        components={{ bold: <strong /> }}
                      />
                    </Typography>
                  )}
                </HuSkeleton>
              </Stack>
              {!showFilterEmptyState && (
                <UsersTable
                  onScrollToTop={handleScrollToTop}
                  users={users}
                  isLoading={isLoading}
                  isFetchingNextPage={isFetchingNextPage}
                  totalCount={count}
                  fetchNextPage={fetchNextPage}
                  TableSortingHeader={TableSortingHeader}
                />
              )}
              {showFilterEmptyState && (
                <StateCard
                  title={t('general:empty_search_result')}
                  description={t('people:empty_description')}
                />
              )}
            </Stack>
          </CardContainer>
        </Container>
      </Stack>
      <InviteUser
        open={inviteUserOpen}
        onClose={() => setInviteUserOpen(false)}
      />
    </HuGoThemeProvider>
  );
};

export default List;