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

import CardContainer from '@material-hu/components/design-system/CardContainer';
import Skeleton from '@material-hu/components/design-system/Skeleton';

import hugoChampion from 'src/assets/images/hugo-trophy.webp';
import { type UserRankingSummary } from 'src/types/prode';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { HEADER_CARD_HEIGHT } from '../constants';
import { useTranslation } from '../i18n';
import SportsPoolHeaderCard from './SportsPoolHeaderCard';

type RankingCardProps = {
  ranking: UserRankingSummary;
  onClick?: () => void;
};

export const RankingCardSkeleton = () => (
  <SportsPoolHeaderCard>
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 2,
        padding: { xs: 2, md: 3 },
      }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1.5 }}>
        <Skeleton
          variant="circular"
          width={40}
          height={40}
        />
        <Stack>
          <Skeleton
            variant="text"
            width={60}
            height={14}
          />
          <Skeleton
            variant="text"
            width={100}
            height={22}
          />
        </Stack>
      </Stack>
      <Skeleton
        variant="rounded"
        width={80}
        height={28}
      />
    </Stack>
  </SportsPoolHeaderCard>
);

const RankingCard = ({ ranking, onClick }: RankingCardProps) => {
  const { t } = useLokaliseTranslation('sportsPool');
  const { t: tLocal } = useTranslation();
  const theme = useTheme();

  const brand500 = theme.palette.newBase?.brand[500];
  const brand800 = theme.palette.newBase?.brand[800];
  const invertedColor = theme.palette.new.text.neutral.inverted;

  return (
    <CardContainer
      fullWidth
      onClick={onClick}
      padding={0}
      sx={{
        background: `linear-gradient(to right, ${brand800}, ${brand500})`,
        position: 'relative',
        overflow: 'hidden',
        height: {
          xs: 'auto',
          md: HEADER_CARD_HEIGHT,
        },
      }}
    >
      <Box
        component="img"
        src={hugoChampion}
        alt=""
        sx={{
          position: 'absolute',
          right: 0,
          bottom: 0,
          height: '100%',
          objectFit: 'contain',
          pointerEvents: 'none',
        }}
      />
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 2,
          padding: 2,
          position: 'relative',
        }}
      >
        <Stack
          sx={{
            flexDirection: 'column',
            gap: 0,
            display: {
              xs: 'flex',
              md: 'none',
            },
          }}
        >
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            sx={{ color: invertedColor, lineHeight: 1 }}
          >
            {tLocal('position')}
          </Typography>
          <Typography
            fontWeight="fontWeightSemiBold"
            sx={{
              color: invertedColor,
              fontSize: '48px',
              lineHeight: 1,
            }}
          >
            {ranking.position !== null
              ? tLocal('numberPosition', { number: ranking.position })
              : '-'}
          </Typography>
          <Typography
            variant="globalXXS"
            sx={{ color: invertedColor, lineHeight: 1 }}
          >
            {t('ranking_page.points', {
              points: ranking.position !== null ? ranking.totalPoints : '-',
            })}
          </Typography>
        </Stack>
        <Stack
          sx={{
            flexDirection: 'column',
            gap: 0,
            display: {
              xs: 'none',
              md: 'flex',
            },
          }}
        >
          <Typography
            fontWeight="fontWeightSemiBold"
            sx={{
              color: invertedColor,
              fontSize: '48px',
              lineHeight: 1,
            }}
          >
            {ranking.position !== null
              ? t('ranking.position', { position: ranking.position })
              : t('ranking.no_position')}
          </Typography>
          <Typography
            variant="globalXXS"
            sx={{ color: invertedColor, lineHeight: 1 }}
          >
            {t('ranking_page.points', {
              points: ranking.position !== null ? ranking.totalPoints : '-',
            })}
          </Typography>
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default RankingCard;