rebreak-monorepo/apps/rebreak-native/components/blocker/ProtectionCard.tsx

import { View, Text, Switch, Pressable, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import type { ProtectionState } from '../../lib/protection';
import { colors } from '../../lib/theme';

type Props = {
  state: ProtectionState;
  loading: boolean;
  /** Aktiviert den Schutz. UI sollte missingLayers den User durchsteppen lassen. */
  onActivate: () => Promise<void>;
  /** Click 1 of 3 — öffnet ProtectionDetailsSheet. KEIN direktes deactivate! */
  onPressSettings: () => void;
};

export function ProtectionCard({ state, loading, onActivate, onPressSettings }: Props) {
  const { t } = useTranslation();
  const isActive = state.phase === 'active' || state.phase === 'cooldownActive';
  const isCooldown = state.phase === 'cooldownActive';

  const subtitle = (() => {
    if (state.phase === 'inactive') return t('blocker.protection_subtitle_inactive');
    if (state.phase === 'cooldownActive') return t('blocker.protection_subtitle_cooldown');
    if (state.plan === 'free') {
      return t('blocker.protection_subtitle_free', { count: state.blocklistCount });
    }
    if (state.plan === 'legend') {
      return t('blocker.protection_subtitle_legend');
    }
    return t('blocker.protection_subtitle_pro');
  })();

  const cardBg = isCooldown ? '#fef3c7' : isActive ? '#dcfce7' : '#ffffff';
  const cardBorder = isCooldown ? '#fcd34d' : isActive ? '#86efac' : '#e5e5e5';
  const iconBg = isCooldown ? '#fde68a' : isActive ? '#bbf7d0' : '#f5f5f5';
  const iconColor = isCooldown ? '#d97706' : isActive ? '#16a34a' : '#a3a3a3';

  return (
    <View
      style={{
        backgroundColor: cardBg,
        borderWidth: 1,
        borderColor: cardBorder,
        borderRadius: 18,
        padding: 14,
      }}
    >
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
        <View
          style={{
            width: 44,
            height: 44,
            borderRadius: 14,
            backgroundColor: iconBg,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Ionicons
            name={isActive ? 'shield-checkmark' : 'shield-outline'}
            size={22}
            color={iconColor}
          />
        </View>
        <View style={{ flex: 1 }}>
          <Text
            style={{
              fontSize: 15,
              fontFamily: 'Nunito_700Bold',
              color: '#0a0a0a',
            }}
          >
            {t('blocker.protection_card_title')}
          </Text>
          <Text
            style={{
              fontSize: 12,
              fontFamily: 'Nunito_400Regular',
              color: '#525252',
              marginTop: 2,
            }}
          >
            {subtitle}
          </Text>
        </View>

        {/* Loading: Spinner. Inactive: Switch zum aktivieren. Active: Settings-Icon */}
        {loading ? (
          <ActivityIndicator color={iconColor} />
        ) : isActive ? (
          <Pressable
            onPress={onPressSettings}
            hitSlop={10}
            style={({ pressed }) => ({
              width: 36,
              height: 36,
              borderRadius: 18,
              backgroundColor: '#ffffff',
              alignItems: 'center',
              justifyContent: 'center',
              opacity: pressed ? 0.6 : 1,
              shadowColor: '#000',
              shadowOffset: { width: 0, height: 1 },
              shadowOpacity: 0.05,
              shadowRadius: 2,
            })}
            accessibilityLabel={t('blocker.protection_settings_a11y')}
          >
            <Ionicons name="settings-outline" size={18} color="#525252" />
          </Pressable>
        ) : (
          <Switch
            value={false}
            onValueChange={(v) => {
              if (v) onActivate();
            }}
            trackColor={{ true: '#16a34a' }}
          />
        )}
      </View>

      {/* Stats-Row nur wenn aktiv und kein Cooldown */}
      {state.phase === 'active' && (
        <View
          style={{
            flexDirection: 'row',
            gap: 10,
            marginTop: 14,
            paddingTop: 12,
            borderTopWidth: 1,
            borderTopColor: 'rgba(0,0,0,0.06)',
          }}
        >
          <Stat label={t('blocker.protection_stat_domains')} value={formatCount(state.blocklistCount)} />
          <Stat label={t('blocker.protection_stat_method')} value={t('blocker.protection_stat_method_dns')} />
          <Stat label={t('blocker.protection_stat_status')} value={t('blocker.protection_stat_status_live')} valueColor={colors.success} />
        </View>
      )}
    </View>
  );
}

function Stat({
  label,
  value,
  valueColor = '#0a0a0a',
}: {
  label: string;
  value: string;
  valueColor?: string;
}) {
  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <Text style={{ fontSize: 16, fontFamily: 'Nunito_800ExtraBold', color: valueColor }}>
        {value}
      </Text>
      <Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#737373' }}>
        {label}
      </Text>
    </View>
  );
}

function formatCount(n: number): string {
  if (n >= 1000) return `${Math.floor(n / 1000)}k+`;
  return String(n);
}