import { IconInfoCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import { useTheme } from '@material-hu/mui/styles';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { TournamentPredictionResponse } from 'src/types/prode';
import { useLokaliseTranslation } from 'src/utils/i18n';

import TeamFlag from './TeamFlag';

type PodiumPlacementItemProps = {
  emoji: string;
  label: string;
  team?: {
    flagUrl?: string | null;
    emoji?: string | null;
    countryCode?: string | null;
    name?: string;
    localizedName?: string | null;
  } | null;
  showBorder?: boolean;
};

const PodiumPlacementItem = ({
  emoji,
  label,
  team,
  showBorder = true,
}: PodiumPlacementItemProps) => {
  const theme = useTheme();

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 2,
        py: 1.5,
        ...(showBorder && {
          borderBottom: '1px solid',
          borderColor: theme.palette.new.border.neutral.divider,
        }),
      }}
    >
      <Typography sx={{ fontSize: 32 }}>{emoji}</Typography>
      <Stack>
        <Typography
          variant="globalXXS"
          sx={{ color: theme.palette.new.text.neutral.lighter }}
        >
          {label}
        </Typography>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 0.5,
          }}
        >
          {team && (
            <TeamFlag
              countryCode={team.countryCode}
              flagUrl={team.flagUrl}
              name={team.name}
              emoji={team.emoji}
              size={18}
            />
          )}
          <Typography
            variant="globalS"
            fontWeight={600}
          >
            {team?.localizedName ?? team?.name}
          </Typography>
        </Stack>
      </Stack>
    </Stack>
  );
};

type PodiumPreviewContentProps = {
  prediction: TournamentPredictionResponse['prediction'];
  deadline?: string;
  isOpen?: boolean;
  onModify: () => void;
};

const PodiumPreviewContent = ({
  prediction,
  deadline,
  isOpen,
  onModify,
}: PodiumPreviewContentProps) => {
  const { t } = useLokaliseTranslation('sportsPool');
  const theme = useTheme();

  if (!prediction) return null;

  return (
    <Stack sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Content */}
      <Stack sx={{ flex: 1, p: 2, py: 0, gap: 0 }}>
        <PodiumPlacementItem
          emoji="🏆"
          label={t('podium.champion')}
          team={prediction.championTeam}
        />
        <PodiumPlacementItem
          emoji="🥈"
          label={t('podium.runner_up')}
          team={prediction.runnerUpTeam}
        />
        <PodiumPlacementItem
          emoji="🥉"
          label={t('podium.third_place')}
          team={prediction.thirdPlaceTeam}
          showBorder={false}
        />
      </Stack>

      {/* Footer */}
      <Stack
        sx={{
          p: 2,
          pb: { xs: 3, md: 2 },
          gap: 1.5,
          borderTop: '1px solid',
          borderColor: theme.palette.new.border.neutral.divider,
          mt: 'auto',
        }}
      >
        {deadline && isOpen && (
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 0.5,
              justifyContent: 'center',
            }}
          >
            <IconInfoCircle
              size={14}
              color={theme.palette.new.text.neutral.lighter}
            />
            <Typography
              variant="globalXXS"
              sx={{ color: theme.palette.new.text.neutral.lighter }}
            >
              {t('ranking_page.can_modify_until', { date: deadline })}
            </Typography>
          </Stack>
        )}
        {isOpen && (
          <Button
            fullWidth
            variant="primary"
            size="large"
            onClick={onModify}
          >
            {t('ranking_page.modify_podium')}
          </Button>
        )}
      </Stack>
    </Stack>
  );
};

export default PodiumPreviewContent;
