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

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

type Props = {
  state: ProtectionState;
  /** Click-1 of 3-Click-Cooldown-Trigger — öffnet ProtectionDetailsSheet. */
  onPressSettings: () => void;
};

/**
 * Wird gezeigt sobald Family Controls aktiv ist — der Schutz ist dann
 * "locked in" und kann nur über den Cooldown-Flow deaktiviert werden.
 * Daher: KEINE Switches mehr, nur ein Settings-Icon das den 3-Click-Flow startet.
 */
export function ProtectionLockedCard({ state, onPressSettings }: Props) {
  const { t } = useTranslation();
  const isCooldown = state.phase === 'cooldownActive';
  const cardBg = isCooldown ? '#fef3c7' : '#dcfce7';
  const cardBorder = isCooldown ? '#fcd34d' : '#86efac';
  const iconBg = isCooldown ? '#fde68a' : '#bbf7d0';
  const iconColor = isCooldown ? '#d97706' : '#16a34a';

  const subtitle = (() => {
    if (isCooldown) return t('blocker.protection_subtitle_cooldown');
    if (state.plan === 'legend') {
      return t('blocker.protection_subtitle_legend');
    }
    if (state.plan === 'pro') {
      return t('blocker.protection_subtitle_pro');
    }
    return t('blocker.protection_subtitle_free', { count: state.blocklistCount });
  })();

  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="shield-checkmark" size={22} color={iconColor} />
        </View>
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#0a0a0a' }}>
            {t('blocker.protection_card_locked_title')}
          </Text>
          <Text
            style={{
              fontSize: 12,
              fontFamily: 'Nunito_400Regular',
              color: '#525252',
              marginTop: 2,
            }}
          >
            {subtitle}
          </Text>
        </View>

        <Pressable
          onPress={onPressSettings}
          hitSlop={10}
          style={({ pressed }) => ({
            opacity: pressed ? 0.6 : 1,
          })}
          accessibilityLabel={t('blocker.protection_settings_a11y')}
        >
          <View style={{
            width: 36,
            height: 36,
            borderRadius: 18,
            backgroundColor: '#ffffff',
            alignItems: 'center',
            justifyContent: 'center',
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.05,
            shadowRadius: 2,
          }}>
            <Ionicons name="settings-outline" size={18} color="#525252" />
          </View>
        </Pressable>
      </View>

      {/* Stats nur wenn aktiv und kein Cooldown */}
      {!isCooldown && (
        <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_native')} />
          <Stat label={t('blocker.protection_stat_status')} value={t('blocker.protection_stat_status_live')} valueColor="#16a34a" />
        </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);
}