import { Helmet } from 'react-helmet-async';

import { IconTrophy } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { type Theme, type SxProps } from '@material-hu/mui/styles';

import HuSpinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import HuEmptyState from 'src/components/HuEmptyState';
import ModulePageHeader from 'src/components/ModulePageHeader';

import CompetitionCard from './components/CompetitionCard';
import { loadingContainerSx } from './constants';
import { useSportsPoolTheme } from './context/SportsPoolThemeContext';
import useCompetitions from './hooks/useCompetitions';

const pageRootSx: SxProps<Theme> = {
  backgroundColor: theme => theme.palette.new.background.layout.default,
  height: '100%',
  minHeight: '100%',
  p: 3,
  gap: 2,
};

const SportsPoolCompetitions = () => {
  const { t } = useLokaliseTranslation('sportsPool');
  const themeParam = useSportsPoolTheme();
  const HuGoThemeProvider = useHuGoTheme(themeParam);

  const { competitions, accessData, isLoading } = useCompetitions();

  const moduleName = accessData?.moduleName || t('title');

  if (isLoading) {
    return (
      <HuGoThemeProvider>
        <Stack sx={pageRootSx}>
          <Stack sx={loadingContainerSx}>
            <HuSpinner />
          </Stack>
        </Stack>
      </HuGoThemeProvider>
    );
  }

  if (!accessData?.hasAccess) {
    return (
      <HuGoThemeProvider>
        <Helmet>
          <title>{formatTitle(moduleName)}</title>
        </Helmet>
        <Stack sx={pageRootSx}>
          <ModulePageHeader
            icon={<IconTrophy />}
            title={moduleName}
          />
          <HuEmptyState
            titleProps={{
              title: t('competitions.no_access_title'),
              description: t('competitions.no_access_description'),
            }}
          />
        </Stack>
      </HuGoThemeProvider>
    );
  }

  if (!competitions || competitions.length === 0) {
    return (
      <HuGoThemeProvider>
        <Helmet>
          <title>{formatTitle(moduleName)}</title>
        </Helmet>
        <Stack sx={pageRootSx}>
          <ModulePageHeader
            icon={<IconTrophy />}
            title={moduleName}
          />
          <HuEmptyState
            titleProps={{
              title: t('competitions.empty'),
              description: t('competitions.empty_description'),
            }}
          />
        </Stack>
      </HuGoThemeProvider>
    );
  }

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(moduleName)}</title>
      </Helmet>
      <Stack sx={pageRootSx}>
        <ModulePageHeader
          icon={<IconTrophy />}
          title={moduleName}
        />
        <Stack
          sx={{
            display: 'grid',
            gap: 2,
            gridTemplateColumns: {
              xs: '1fr',
              md: 'repeat(2, 1fr)',
              lg: 'repeat(3, 1fr)',
              xl: 'repeat(4, 1fr)',
            },
          }}
        >
          {competitions.map((competition, index) => (
            <CompetitionCard
              key={competition.id}
              competition={competition}
              index={index}
            />
          ))}
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default SportsPoolCompetitions;