import { Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';

type Props = {
  totalBlocked: number;
  accountCount: number;
  isLegend?: boolean;
};

/**
 * Kompakte Stats: nur "Blockiert gesamt" prominent + kleines Status-Pill.
 * Kein Block-Rate, kein Next-Scan — Mode steht auf den Cards.
 */
export function MailStatsRow({ totalBlocked, accountCount, isLegend }: Props) {
  const { t } = useTranslation();

  return (
    <View
      style={{
        backgroundColor: '#fff',
        borderRadius: 16,
        borderWidth: 1,
        borderColor: '#e5e5e5',
        paddingHorizontal: 18,
        paddingVertical: 16,
      }}
    >
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <View style={{ flex: 1 }}>
          <Text
            style={{
              fontSize: 11,
              fontFamily: 'Nunito_600SemiBold',
              color: '#a3a3a3',
              textTransform: 'uppercase',
              letterSpacing: 0.6,
            }}
          >
            {t('mail.stats_blocked')}
          </Text>
          <Text
            style={{
              fontSize: 32,
              fontFamily: 'Nunito_800ExtraBold',
              color: '#dc2626',
              marginTop: 2,
              lineHeight: 36,
            }}
          >
            {totalBlocked.toLocaleString()}
          </Text>
          <Text
            style={{
              fontSize: 12,
              fontFamily: 'Nunito_400Regular',
              color: '#737373',
              marginTop: 2,
            }}
          >
            {t('mail.stats_account_summary', { count: accountCount })}
          </Text>
        </View>

        {/* Mode pill */}
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 10,
            paddingVertical: 6,
            borderRadius: 999,
            backgroundColor: isLegend ? '#f0fdf4' : '#eff6ff',
          }}
        >
          <Ionicons
            name={isLegend ? 'flash' : 'time-outline'}
            size={13}
            color={isLegend ? '#16a34a' : '#2563eb'}
            style={{ marginRight: 5 }}
          />
          <Text
            style={{
              fontSize: 12,
              fontFamily: 'Nunito_700Bold',
              color: isLegend ? '#16a34a' : '#2563eb',
            }}
          >
            {isLegend ? t('mail.live') : t('mail.scheduled')}
          </Text>
        </View>
      </View>
    </View>
  );
}