import { useMemo } from 'react';

import { IconTrophy, IconUsersGroup } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { type CriteriaEntry } from '@material-hu/components/composed-components/audience/Audience/types';
import Alert from '@material-hu/components/design-system/Alert';
import CardContainer from '@material-hu/components/design-system/CardContainer';

import { useLokaliseTranslation } from 'src/utils/i18n';

import useGetAudienceCount from 'src/components/Audience/hooks/useGetAudienceCount';
import { criteriasToSegmentationExpression } from 'src/components/Audience/utils/criteriasToSegmentationExpression';

import { MAX_CONTENT_WIDTH, WORLD_CUP_LEAGUE_ID } from '../../constants';
import useCreateCompetition from '../../hooks/useCreateCompetition';
import { criteriasToAudiencePayload } from '../../utils/criteriasToAudiencePayload';
import { type BasicInfoValues } from '../types';

import StepLayout from './StepLayout';

function SummaryField({
  Icon,
  label,
  value,
}: {
  Icon: React.ElementType;
  label: string;
  value: string;
}) {
  const theme = useTheme();

  return (
    <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
      <Stack
        sx={{
          width: 40,
          height: 40,
          borderRadius: '50%',
          backgroundColor: ({ palette }) => palette.new.background.layout.brand,
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
        }}
      >
        <Icon
          size={24}
          color={theme.palette.new.text.neutral.brand}
        />
      </Stack>
      <Stack>
        <Typography
          variant="globalXS"
          sx={{ color: ({ palette }) => palette.new.text.neutral.lighter }}
        >
          {label}
        </Typography>
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
          sx={{ color: ({ palette }) => palette.new.text.neutral.default }}
        >
          {value}
        </Typography>
      </Stack>
    </Stack>
  );
}

interface Props {
  basicInfo: BasicInfoValues;
  criterias: CriteriaEntry[];
  onBack: () => void;
}

const SummaryStep = ({ basicInfo, criterias, onBack }: Props) => {
  const { t } = useLokaliseTranslation('sportsPool');
  const { mutate, isLoading: isCreating } = useCreateCompetition();

  const hasNoCriterias = criterias.length === 0;

  const expression = useMemo(
    () =>
      hasNoCriterias ? null : criteriasToSegmentationExpression(criterias),
    [criterias, hasNoCriterias],
  );

  const { data: audienceCount, isLoading: isCountLoading } =
    useGetAudienceCount(expression);

  const handleCreate = () => {
    if (hasNoCriterias) return;
    mutate({
      leagueId: WORLD_CUP_LEAGUE_ID,
      name: basicInfo.name,
      audience: criteriasToAudiencePayload(criterias),
    });
  };

  const displayCount = audienceCount ?? 0;

  return (
    <StepLayout
      onNext={handleCreate}
      onBack={onBack}
      slotProps={{
        root: { sx: { alignItems: 'center' } },
        submitButton: {
          label: t('admin.create_competition'),
          loading: isCreating,
          disabled: isCountLoading || displayCount === 0,
        },
      }}
    >
      <Stack
        sx={{
          width: '100%',
          maxWidth: MAX_CONTENT_WIDTH,
          px: 4,
          py: 3,
          gap: 3,
        }}
      >
        <Stack sx={{ gap: 0.5 }}>
          <Typography
            variant="globalM"
            fontWeight="fontWeightSemiBold"
          >
            {t('admin.summary.title')}
          </Typography>
          <Typography
            variant="globalS"
            color="text.secondary"
          >
            {t('admin.summary.description')}
          </Typography>
        </Stack>

        <Stack sx={{ gap: 1 }}>
          <CardContainer fullWidth>
            <Stack sx={{ gap: 2 }}>
              <SummaryField
                Icon={IconTrophy}
                label={t('admin.summary.name')}
                value={basicInfo.name}
              />
              <Divider />
              <SummaryField
                Icon={IconUsersGroup}
                label={t('admin.summary.collaborator_count')}
                value={isCountLoading ? '...' : String(displayCount)}
              />
            </Stack>
          </CardContainer>

          {!isCountLoading && displayCount === 0 && (
            <Alert
              severity="warning"
              title={t('admin.summary.no_participants')}
              description={t('admin.summary.no_participants_description')}
            />
          )}
        </Stack>
      </Stack>
    </StepLayout>
  );
};

export default SummaryStep;