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

// Layout
export const COMPETITIONS_MAX_WIDTH = 689;
export const HEADER_CARD_HEIGHT = 96;

// Stagger animation
export const getStaggerAnimationSx = (
  index: number,
  delay = 80,
): SxProps<Theme> => ({
  '@keyframes slideInUp': {
    '0%': { opacity: 0, transform: 'translate3d(0, 24px, 0)' },
    '100%': { opacity: 1, transform: 'translate3d(0, 0, 0)' },
  },
  animation: 'slideInUp 300ms ease-out both',
  animationDelay: `${index * delay}ms`,
});

// Competitions page styles
export const loadingContainerSx: SxProps<Theme> = {
  width: '100%',
  height: '100%',
  alignItems: 'center',
  justifyContent: 'center',
};

export const competitionsContainerSx: SxProps<Theme> = {
  flex: 1,
  overflowY: 'auto',
  width: '100%',
  alignItems: 'center',
  px: { xs: 2, md: 0 },
  py: { xs: 2, md: 4 },
  gap: 2,
};

export const competitionsListSx: SxProps<Theme> = {
  width: '100%',
  maxWidth: COMPETITIONS_MAX_WIDTH,
  gap: 2,
};

// Card styles
export const footerBadgeSx: SxProps<Theme> = theme => ({
  py: 0.5,
  px: 2,
  backgroundColor: theme.palette.new.background.feedback.info,
  borderTop: `1px solid ${theme.palette.new.border.states.info}`,
  textAlign: 'center',
});

export const footerBadgeTextSx: SxProps<Theme> = theme => ({
  color: theme.palette.new.text.feedback.info,
});

// Competition Detail Layout
export const DETAIL_MAX_WIDTH = 864;
export const DETAIL_MAX_WIDTH_MOBILE = 360;

// Competition Detail page styles
export const detailContainerSx: SxProps<Theme> = {
  flex: 1,
  overflowY: 'auto',
  width: '100%',
  alignItems: 'center',
  px: { xs: 2, md: 0 },
  gap: 2,
};

export const detailContentSx: SxProps<Theme> = {
  width: '100%',
  maxWidth: { xs: '100%', md: DETAIL_MAX_WIDTH },
  py: { xs: 0, md: 4 },
  gap: 2,
  flexShrink: 0,
};

// Info cards container
export const infoCardsContainerSx: SxProps<Theme> = {
  gap: 2,
  width: '100%',
};

// Ranking card styles
export const rankingCardSx: SxProps<Theme> = theme => ({
  p: 2,
  backgroundColor: theme.palette.new.background.elements.default,
  borderRadius: 2,
  boxShadow: `0px 4px 8px ${theme.palette.new.shadows['4dp']}`,
});

export const rankingCardContentSx: SxProps<Theme> = {
  flexDirection: 'row',
  alignItems: 'center',
  gap: 1,
};

export const rankingAvatarSx: SxProps<Theme> = theme => ({
  width: 40,
  height: 40,
  backgroundColor: theme.palette.new.background.elements.brand,
  borderRadius: '100%',
  alignItems: 'center',
  justifyContent: 'center',
});

// Podium card styles
export const podiumCardSx: SxProps<Theme> = theme => ({
  p: 2,
  backgroundColor: theme.palette.new.background.elements.default,
  borderRadius: 2,
  boxShadow: `0px 4px 8px ${theme.palette.new.shadows['4dp']}`,
  cursor: 'pointer',
});

// Pending prediction card styles
export const pendingPredictionCardSx: SxProps<Theme> = theme => ({
  p: 2,
  backgroundColor: theme.palette.new.background.elements.default,
  borderRadius: 2,
  boxShadow: `0px 4px 8px ${theme.palette.new.shadows['4dp']}`,
});

export const warningFooterBadgeSx: SxProps<Theme> = theme => ({
  width: 'calc(100% + 32px)',
  mx: -2,
  mb: -2,
  mt: 2,
  py: 0.5,
  px: 2,
  backgroundColor: theme.palette.new.background.feedback.warning,
  borderTop: `1px solid ${theme.palette.new.border.states.warning}`,
  textAlign: 'center',
});

export const warningFooterTextSx: SxProps<Theme> = theme => ({
  color: theme.palette.new.text.feedback.warning,
  fontWeight: 600,
});

// Cards row layout (podium + pending prediction)
export const infoCardsRowSx: SxProps<Theme> = {
  display: 'flex',
  flexDirection: { xs: 'column', md: 'row' },
  gap: 2,
  width: '100%',
  alignItems: 'stretch',
  '& > *': {
    flex: { xs: 'none', md: 1 },
    minHeight: { xs: 'auto', md: 0 },
  },
};

// Full height card wrapper for equal height cards in row
export const fullHeightCardSx: SxProps<Theme> = {
  display: 'flex',
  flexDirection: 'column',
  flex: 1,
  alignSelf: 'stretch',
};

// Match section styles
export const matchSectionHeaderSx: SxProps<Theme> = {
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'space-between',
  p: { xs: 2, md: 0 },
};

export const matchFiltersContainerSx: SxProps<Theme> = {
  flexDirection: 'row',
  gap: 1,
  flexWrap: 'wrap',
  p: { xs: 2, md: 0 },
  pt: { xs: 0, md: 2 },
};

// Match card styles
const matchCardBaseSx = (theme: Theme) => ({
  p: 2,
  backgroundColor: theme.palette.new.background.elements.default,
  borderRadius: 2,
  boxShadow: `0px 4px 8px ${theme.palette.new.shadows['4dp']}`,
  cursor: 'pointer',
});

export const matchCardSx: SxProps<Theme> = theme => matchCardBaseSx(theme);

export const matchCardSelectedSx: SxProps<Theme> = theme => ({
  ...matchCardBaseSx(theme),
  border: `2px solid ${theme.palette.newBase?.brand[500]}`,
});

export const matchTeamsRowSx: SxProps<Theme> = {
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: 2,
};

export const matchTeamSx: SxProps<Theme> = {
  flexDirection: { xs: 'column', md: 'row' },
  alignItems: 'center',
  gap: { xs: 0.5, md: 1 },
  flex: 1,
};

export const matchScoreContainerSx: SxProps<Theme> = {
  alignItems: 'center',
  minWidth: 60,
};

export const matchVenueSx: SxProps<Theme> = {
  pt: 1,
  textAlign: 'center',
};

// Podium Modal styles
export const PODIUM_MODAL_MAX_WIDTH = 688;

export const podiumModalContainerSx: SxProps<Theme> = {
  width: '100%',
  maxWidth: { xs: '100%', md: PODIUM_MODAL_MAX_WIDTH },
  mx: 'auto',
  p: { xs: 2, md: 3 },
  gap: 2,
};

export const podiumSlotsContainerSx: SxProps<Theme> = {
  flexDirection: 'row',
  gap: 2,
  justifyContent: 'center',
  width: '100%',
};

const podiumSlotBaseSx = (theme: Theme) => ({
  flex: 1,
  maxWidth: 160,
  p: 2,
  gap: 1,
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: 2,
  border: '1px solid',
  borderColor: theme.palette.new.border.neutral.default,
  backgroundColor: theme.palette.new.background.elements.default,
  cursor: 'pointer',
  minHeight: 115,
});

export const podiumSlotSx: SxProps<Theme> = theme => podiumSlotBaseSx(theme);

export const podiumSlotSelectedSx: SxProps<Theme> = theme => ({
  ...podiumSlotBaseSx(theme),
  backgroundColor: theme.palette.new.background.elements.brand,
  borderColor: theme.palette.newBase?.brand[500],
});

export const podiumSlotFlagSx: SxProps<Theme> = {
  width: 48,
  height: 36,
  borderRadius: 0.5,
  objectFit: 'cover',
};

export const podiumTeamListContainerSx: SxProps<Theme> = theme => ({
  width: '100%',
  backgroundColor: theme.palette.new.background.elements.default,
  borderRadius: 2,
  overflow: 'hidden',
});

export const podiumTeamRowSx: SxProps<Theme> = theme => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'space-between',
  p: 2,
  borderBottom: '1px solid',
  borderColor: theme.palette.new.border.neutral.divider,
  '&:last-child': {
    borderBottom: 'none',
  },
});

export const podiumTeamInfoSx: SxProps<Theme> = {
  flexDirection: 'row',
  alignItems: 'center',
  gap: 1.5,
};

export const podiumTeamFlagSx: SxProps<Theme> = {
  width: 32,
  height: 24,
  borderRadius: 0.5,
  objectFit: 'cover',
};

export const podiumSaveButtonContainerSx: SxProps<Theme> = theme => ({
  position: 'sticky',
  bottom: 0,
  left: 0,
  right: 0,
  p: 2,
  backgroundColor: theme.palette.new.background.elements.default,
});

export const podiumLoadMoreContainerSx: SxProps<Theme> = theme => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'space-between',
  p: 2,
  borderTop: '1px solid',
  borderColor: theme.palette.new.border.neutral.divider,
});

// Prizes Tab styles
export const prizesTabContainerSx: SxProps<Theme> = {
  gap: 2,
};

export const prizesSubTabsContainerSx: SxProps<Theme> = {
  flexDirection: 'row',
  gap: 1,
  flexWrap: 'wrap',
};

// Prediction Modal styles
export const predictionModalContainerSx: SxProps<Theme> = {
  p: 3,
  gap: 3,
  alignItems: 'center',
};

export const predictionScoreRowSx: SxProps<Theme> = {
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  gap: 2,
  width: '100%',
};

export const predictionTeamSx: SxProps<Theme> = {
  alignItems: 'center',
  gap: 0.5,
};

export const predictionScoreInputSx: SxProps<Theme> = theme => ({
  width: 64,
  height: 64,
  borderRadius: theme.shape.borderRadiusM,
  border: '1px solid',
  borderColor: theme.palette.new.border.neutral.divider,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: theme.palette.new.background.elements.default,
});

export const predictionScoreButtonSx: SxProps<Theme> = theme => ({
  width: 40,
  height: 40,
  borderRadius: 1,
  border: '1px solid',
  borderColor: theme.palette.new.border.neutral.brand,
  color: theme.palette.newBase?.brand[500],
  minWidth: 0,
  '&:hover': {
    backgroundColor: theme.palette.new.background.elements.brand,
  },
});

export const predictionFlagSx: SxProps<Theme> = {
  width: 48,
  height: 36,
  borderRadius: 0.5,
  objectFit: 'contain',
};

// Match card border & pill styles
export type MatchCardVariant =
  | 'finished'
  | 'withPrediction'
  | 'pendingPrediction'
  | 'default';

export const matchCardVariantSx: Record<MatchCardVariant, SxProps<Theme>> = {
  finished: theme => ({
    border: '1px solid',
    borderColor: theme.palette.new.border.neutral.default,
  }),
  withPrediction: theme => ({
    border: '1px solid',
    borderColor: theme.palette.new.border.states.success,
  }),
  pendingPrediction: theme => ({
    border: '1px solid',
    borderColor: theme.palette.new.border.states.warning,
  }),
  default: {},
};

export const matchScoreLargeSx: SxProps<Theme> = theme => ({
  '@media (max-width: 400px)': { fontSize: theme.typography.globalM.fontSize },
});

export const matchPredictionBadgeStyles: SxProps<Theme> = {
  position: 'absolute',
  width: 16,
  height: 16,
  borderRadius: '100%',
  backgroundColor: theme => theme.palette.new.background.feedback.success,
  border: theme => `1px solid ${theme.palette.newBase?.green[400]}`,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
};

export const matchCardScoreBoxWithPredictionSx: SxProps<Theme> = theme => ({
  px: 1.5,
  py: 1,
  borderRadius: 1,
  border: `1px solid ${theme.palette.newBase?.green[200]}`,
  minWidth: 48,
  height: 48,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: theme.palette.new.background.elements.default,
  '@media (max-width: 400px)': {
    px: 1,
    py: 0.5,
  },
});

export const matchCardScoreBoxSx = (theme: Theme) => ({
  px: 1.5,
  py: 1,
  borderRadius: 1,
  border: `1px solid ${theme.palette.new.border.neutral.default}`,
  minWidth: 48,
  height: 48,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: theme.palette.new.background.elements.default,
  '@media (max-width: 400px)': {
    px: 1,
    py: 0.5,
  },
});

export const matchPredictionPillSx: SxProps<Theme> = theme => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  px: 1,
  py: 0.5,
  backgroundColor: theme.palette.new.background.elements.default,
  border: `1px solid ${theme.palette.new.border.neutral.default}`,
  borderRadius: 2,
});

export const matchPointsPillPositiveSx: SxProps<Theme> = theme => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  px: 1,
  py: 0.5,
  backgroundColor: theme.palette.new.background.feedback.success,
  border: `1px solid ${theme.palette.newBase?.green[200]}`,
  borderRadius: 2,
});

export const matchPointsPillZeroSx: SxProps<Theme> = theme => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  px: 1,
  py: 0.5,
  backgroundColor: theme.palette.new.background.feedback.warning,
  border: `1px solid ${theme.palette.newBase?.sunshine[400]}`,
  borderRadius: 2,
});

export const matchCardCompleteBadgeSx: SxProps<Theme> = theme => ({
  width: 'calc(100% + 32px)',
  mx: -2,
  mb: -2,
  mt: 1,
  py: 0.5,
  px: 2,
  backgroundColor: theme.palette.new.background.feedback.warning,
  borderTop: `1px solid ${theme.palette.new.border.states.warning}`,
  textAlign: 'center',
  cursor: 'pointer',
});

// Match detail modal styles
export const matchDetailHeaderSx: SxProps<Theme> = {
  pb: 2,
};

export const matchDetailPointsListSx: SxProps<Theme> = {
  py: 2,
  gap: 1,
};
