import { IconBallFootball, IconTargetArrow } 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 Skeleton from '@material-hu/components/design-system/Skeleton';

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

import SportsPoolHeaderCard from './SportsPoolHeaderCard';

export const StatsCardSkeleton = () => {
  const theme = useTheme();

  return (
    <SportsPoolHeaderCard>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 2,
          padding: { xs: 2, md: 3 },
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            flex: 1,
            pr: 2,
          }}
        >
          <Skeleton
            variant="circular"
            width={40}
            height={40}
          />
          <Stack sx={{ flex: 1 }}>
            <Skeleton
              variant="text"
              width={80}
              height={17}
            />
            <Skeleton
              variant="text"
              width={60}
              height={22}
            />
          </Stack>
          <Skeleton
            variant="text"
            width={24}
            height={34}
          />
        </Stack>
        <Divider
          orientation="vertical"
          flexItem
          sx={{ borderColor: theme.palette.new.border.neutral.default }}
        />
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            flex: 1,
            pl: 2,
          }}
        >
          <Skeleton
            variant="circular"
            width={40}
            height={40}
          />
          <Stack sx={{ flex: 1 }}>
            <Skeleton
              variant="text"
              width={80}
              height={17}
            />
            <Skeleton
              variant="text"
              width={60}
              height={22}
            />
          </Stack>
          <Skeleton
            variant="text"
            width={24}
            height={34}
          />
        </Stack>
      </Stack>
    </SportsPoolHeaderCard>
  );
};

const StatsCard = ({ ranking }: { ranking: UserRankingSummary }) => {
  const { t } = useLokaliseTranslation('sportsPool');
  const theme = useTheme();

  const brandBg = theme.palette.new.background.elements.brand;
  const brandColor = theme.palette.newBase?.brand[900];
  const textLighter = theme.palette.new.text.neutral.lighter;
  const textDefault = theme.palette.new.text.neutral.default;
  const borderDefault = theme.palette.new.border.neutral.default;

  return (
    <SportsPoolHeaderCard>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: { xs: 1, sm: 2 },
          height: '100%',
          padding: { xs: 2, md: 3 },
        }}
      >
        {/* Positive Results */}
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: { xs: 0.5, sm: 1 },
            flex: 1,
            pr: { xs: 1, sm: 2 },
          }}
        >
          <Stack
            sx={{
              width: 40,
              height: 40,
              borderRadius: '100px',
              backgroundColor: brandBg,
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <IconBallFootball
              size={24}
              color={brandColor}
            />
          </Stack>
          <Stack sx={{ flex: 1 }}>
            <Typography
              variant="globalXXS"
              sx={{ color: textLighter }}
            >
              {t('ranking_page.results_label')}
            </Typography>
            <Typography
              variant="globalS"
              fontWeight={600}
              sx={{ color: textDefault }}
            >
              {t('ranking_page.positive_title')}
            </Typography>
          </Stack>
          <Typography
            sx={{
              fontSize: 24,
              fontWeight: 600,
              lineHeight: '140%',
              color: textDefault,
            }}
          >
            {ranking.correctResults}
          </Typography>
        </Stack>

        <Divider
          orientation="vertical"
          flexItem
          sx={{ borderColor: borderDefault }}
        />

        {/* Exact Results */}
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: { xs: 0.5, sm: 1 },
            flex: 1,
            pl: { xs: 1, sm: 2 },
          }}
        >
          <Stack
            sx={{
              width: 40,
              height: 40,
              borderRadius: '100px',
              backgroundColor: brandBg,
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <IconTargetArrow
              size={24}
              color={brandColor}
            />
          </Stack>
          <Stack sx={{ flex: 1 }}>
            <Typography
              variant="globalXXS"
              sx={{ color: textLighter }}
            >
              {t('ranking_page.results_label')}
            </Typography>
            <Typography
              variant="globalS"
              fontWeight={600}
              sx={{ color: textDefault }}
            >
              {t('ranking_page.exact_title')}
            </Typography>
          </Stack>
          <Typography
            sx={{
              fontSize: 24,
              fontWeight: 600,
              lineHeight: '140%',
              color: textDefault,
            }}
          >
            {ranking.exactResults}
          </Typography>
        </Stack>
      </Stack>
    </SportsPoolHeaderCard>
  );
};

export default StatsCard;