import { Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../../../lib/theme';
import { OnboardingShell } from '../OnboardingShell';
import { LyraBubble } from '../LyraBubble';
import { CTABar } from '../CTABar';

export function PrivacySlide({
  onNext,
  current,
  total,
}: {
  onNext: () => void;
  current: number;
  total: number;
}) {
  const { t } = useTranslation();
  const colors = useColors();

  return (
    <OnboardingShell
      current={current}
      total={total}
      cta={<CTABar primaryLabel={t('onboarding.privacy.cta_primary')} onPrimary={onNext} />}
    >
      <LyraBubble text={t('onboarding.lyra.privacy.body')} emotion="empathy" />

      <View
        style={{
          marginTop: 28,
          padding: 16,
          borderRadius: 14,
          backgroundColor: colors.surfaceElevated,
          borderWidth: 1,
          borderColor: colors.border,
          gap: 14,
        }}
      >
        <PromiseRow
          icon="eye-off-outline"
          text={t('onboarding.privacy.promise_alias')}
          colors={colors}
        />
        <PromiseRow
          icon="lock-closed-outline"
          text={t('onboarding.privacy.promise_minimal')}
          colors={colors}
        />
        <PromiseRow
          icon="ban-outline"
          text={t('onboarding.privacy.promise_no_ads')}
          colors={colors}
        />
        <PromiseRow
          icon="server-outline"
          text={t('onboarding.privacy.promise_germany')}
          colors={colors}
        />
      </View>
    </OnboardingShell>
  );
}

function PromiseRow({
  icon,
  text,
  colors,
}: {
  icon: keyof typeof Ionicons.glyphMap;
  text: string;
  colors: import('../../../lib/theme').ColorScheme;
}) {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
      <View
        style={{
          width: 32,
          height: 32,
          borderRadius: 10,
          backgroundColor: 'rgba(34,197,94,0.12)',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Ionicons name={icon} size={18} color={colors.success} />
      </View>
      <Text
        style={{
          flex: 1,
          fontFamily: 'Nunito_600SemiBold',
          fontSize: 14,
          lineHeight: 20,
          color: colors.text,
        }}
      >
        {text}
      </Text>
    </View>
  );
}