import { useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { useMutation, useQueryClient } from 'react-query';
import { useNavigate } from 'react-router-dom';

import { useModal } from '@material-hu/hooks/useModal';
import {
  IconEdit,
  IconInfoCircle,
  IconPlus,
  IconTrash,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { colorPalette } from '@material-hu/theme/hugo/colors';

import HuMenuList from '@material-hu/components/composed-components/MenuList';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuPagination from '@material-hu/components/design-system/Inputs/Pagination';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import StateCard from '@material-hu/components/design-system/StateCard';
import HuTable from '@material-hu/components/design-system/Table';
import HuTableBody from '@material-hu/components/design-system/Table/components/TableBody';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import HuTableHead from '@material-hu/components/design-system/Table/components/TableHead';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';
import HuTitle from '@material-hu/components/design-system/Title';

import {
  capabilityToi18nKey,
  useCustomServerTranslation,
} from 'src/hooks/useCustomServerTranslation';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { deleteCompetition } from 'src/services/prodeService';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

import CompetitionStatusPill from '../components/CompetitionStatusChip';
import DeleteCompetitionModal from '../components/DeleteCompetitionModal';
import useCompetitionList from '../hooks/useCompetitionList';
import { prodeKeys } from '../queries';
import { prodeLinks } from '../routes';
import { type Competition } from '../types';

const PAGE_SIZE = 20;
const SKELETON_COUNT = 5;

const ProdeList = () => {
  const { t } = useLokaliseTranslation([
    'sportsPool',
    'general',
    'dashboard_sidebar_app',
  ]);
  const HuGoThemeProvider = useHuGoTheme();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { enqueueSnackbar } = useHuSnackbar();
  const [page, setPage] = useState(1);
  const getCustomTitle = useCustomServerTranslation();

  const pageTitle = getCustomTitle(
    capabilityToi18nKey(UserPermissions.VIEW_SPORTS_POOL),
  );

  const { data, isLoading, isError, refetch } = useCompetitionList();

  const { mutate: mutateDelete, isLoading: isDeleting } = useMutation(
    (id: number) => deleteCompetition(id),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(prodeKeys.competitionList());
        enqueueSnackbar({
          title: t('admin.competition_deleted'),
          variant: 'success',
        });
        deleteModal.closeModal();
      },
      onError: () => {
        enqueueSnackbar({
          title: t('admin.error_deleting_competition'),
          variant: 'error',
        });
        deleteModal.closeModal();
      },
    },
  );

  const deleteModal = useModal(
    DeleteCompetitionModal,
    { maxWidth: 'sm' },
    {
      onConfirm: (id: number) => mutateDelete(id),
      onCancel: () => deleteModal.closeModal(),
      loading: isDeleting,
    },
  );

  const competitions: Competition[] = data ?? [];
  const totalPages = Math.max(1, Math.ceil(competitions.length / PAGE_SIZE));
  const paginated = competitions.slice(
    (page - 1) * PAGE_SIZE,
    page * PAGE_SIZE,
  );

  const handleRowClick =
    (competitionId: number) => (event: React.MouseEvent) => {
      const isButtonOrLink = (event.target as HTMLElement).closest('button, a');
      if (isButtonOrLink) return;
      navigate(prodeLinks.competition(competitionId));
    };

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(pageTitle)}</title>
      </Helmet>
      <Stack sx={{ height: '100%', flexDirection: 'column' }}>
        <Stack
          sx={{
            backgroundColor: colorPalette.hugoBackground.neutralBg,
            flex: 1,
            py: 3,
            px: 3,
            gap: 2,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              pb: 2,
            }}
          >
            <HuTitle
              variant="L"
              title={pageTitle}
            />
            <Button
              variant="contained"
              onClick={() => navigate(prodeLinks.new())}
              startIcon={<IconPlus size={16} />}
            >
              {t('admin.create_competition')}
            </Button>
          </Stack>

          {isLoading && (
            <Stack sx={{ gap: 1 }}>
              {Array.from({ length: SKELETON_COUNT }).map((_, i) => (
                <Skeleton
                  key={i}
                  height={52}
                />
              ))}
            </Stack>
          )}

          {!isLoading && isError && (
            <StateCard
              icon={IconInfoCircle}
              variant="primary"
              title={t('admin.list.error_title')}
              description={t('admin.list.error_description')}
              primaryAction={{
                label: t('general:retry'),
                onClick: () => refetch(),
              }}
            />
          )}

          {!isLoading && !isError && competitions.length === 0 && (
            <StateCard
              icon={IconInfoCircle}
              variant="primary"
              title={t('admin.list.empty_title')}
              description={t('admin.list.empty_description')}
            />
          )}

          {!isLoading && !isError && competitions.length > 0 && (
            <>
              <HuTableContainer>
                <HuTable>
                  <HuTableHead>
                    <HuTableRow headerRow>
                      <HuTableCell
                        headerCell
                        sx={{ width: '100%' }}
                      >
                        {t('admin.list.col_name')}
                      </HuTableCell>
                      <HuTableCell headerCell>
                        {t('admin.list.col_status')}
                      </HuTableCell>
                      <HuTableCell headerCell />
                    </HuTableRow>
                  </HuTableHead>
                  <HuTableBody>
                    {paginated.map(competition => (
                      <HuTableRow
                        key={competition.id}
                        onClick={handleRowClick(competition.id)}
                        sx={{ cursor: 'pointer' }}
                      >
                        <HuTableCell>{competition.name}</HuTableCell>
                        <HuTableCell>
                          <CompetitionStatusPill status={competition.status} />
                        </HuTableCell>
                        <HuTableCell>
                          <HuMenuList
                            options={[
                              {
                                Icon: IconEdit,
                                title: t('general:edit'),
                                onClick: () =>
                                  navigate(
                                    prodeLinks.competition(competition.id),
                                  ),
                              },
                              {
                                Icon: IconTrash,
                                title: t('general:delete'),
                                onClick: () =>
                                  deleteModal.showModal({
                                    competitionId: competition.id,
                                  }),
                              },
                            ]}
                            position="left"
                          />
                        </HuTableCell>
                      </HuTableRow>
                    ))}
                  </HuTableBody>
                </HuTable>
              </HuTableContainer>

              {totalPages > 1 && (
                <Stack sx={{ alignItems: 'center', mt: 2 }}>
                  <HuPagination
                    type="basic"
                    page={page}
                    totalPages={totalPages}
                    onChangePage={newPage => setPage(newPage)}
                  />
                </Stack>
              )}
            </>
          )}
        </Stack>
      </Stack>

      {deleteModal.modal}
    </HuGoThemeProvider>
  );
};

export default ProdeList;