import React, {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconChevronRight} from '@tabler/icons-react-native';
import {PressableCardContainer, Typography} from '@components';
import {Match, MatchInPrediction} from '@modules/prodev2/interfaces';
import {getMatchLocalTime} from '@modules/prodev2/utils';
import {ICON_SIZES, useTheme} from '@shared/theme';

import {TeamFlag} from '../TeamFlag';
import {styles} from './styles';

export interface Props {
  match: Match | MatchInPrediction;
  onPress?: () => void;
}

export function PendingPredictionCard({match, onPress}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const formattedDate = useMemo(() => {
    // Append T12:00:00 to avoid timezone issues
    const date = new Date(`${match.matchDate}T12:00:00`);
    return date.toLocaleDateString(undefined, {
      weekday: 'long',
      day: '2-digit',
      month: '2-digit',
    });
  }, [match.matchDate]);

  const homeName =
    match.homeTeam?.shortName ||
    match.homeTeam?.localizedName ||
    match.homeTeam?.name ||
    match.homeTeamPlaceholder ||
    t('sportsPool.matches.tbd');
  const awayName =
    match.awayTeam?.shortName ||
    match.awayTeam?.localizedName ||
    match.awayTeam?.name ||
    match.awayTeamPlaceholder ||
    t('sportsPool.matches.tbd');

  return (
    <PressableCardContainer
      onPress={() => onPress?.()}
      backgroundColor={theme.background.elements.default}
      style={styles.cardContent}
      badge={{
        text: t('sportsPool.pending_prediction.complete'),
        variant: 'warning',
      }}>
      <View style={styles.body}>
        <View style={styles.content}>
          <Typography variant="xxs" color={theme.text.neutral.lighter}>
            {t('sportsPool.pending_prediction.title')}
          </Typography>
          <View style={styles.titleRow}>
            <TeamFlag
              countryCode={match.homeTeam?.countryCode}
              emoji={match.homeTeam?.emoji}
              flagUrl={match.homeTeam?.flagUrl}
              name={homeName}
              emojiSize={18}
              imageStyle={styles.flag}
            />
            <Typography
              variant="s"
              weight="semiBold"
              numberOfLines={1}
              style={styles.nameText}>
              {`${homeName} ${t('sportsPool.matches.vs')} ${awayName}`}
            </Typography>
            <TeamFlag
              countryCode={match.awayTeam?.countryCode}
              emoji={match.awayTeam?.emoji}
              flagUrl={match.awayTeam?.flagUrl}
              name={awayName}
              emojiSize={18}
              imageStyle={styles.flag}
            />
          </View>
        </View>

        <View style={styles.sideContent}>
          <Typography variant="xxs" color={theme.text.neutral.lighter}>
            {formattedDate}
          </Typography>
          <Typography variant="xs">
            {getMatchLocalTime(match.matchDate, match.matchTime)}
          </Typography>
        </View>

        <View style={styles.chevron}>
          <IconChevronRight
            size={ICON_SIZES.x6}
            color={theme.text.neutral.default}
          />
        </View>
      </View>
    </PressableCardContainer>
  );
}

export default PendingPredictionCard;