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

type Props = {
  onConnectPress: () => void;
};

/**
 * Leerer Zustand wenn kein Postfach verbunden ist.
 * Hero-CTA öffnet ConnectMailSheet.
 */
export function MailEmptyState({ onConnectPress }: Props) {
  const { t } = useTranslation();
  const colors = useColors();

  return (
    <View
      style={{
        backgroundColor: colors.bg,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: colors.border,
        padding: 28,
        alignItems: 'center',
      }}
    >
      {/* Icon-Circle */}
      <View
        style={{
          width: 72,
          height: 72,
          borderRadius: 36,
          backgroundColor: '#eff6ff',
          borderWidth: 1,
          borderColor: '#bfdbfe',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: 16,
        }}
      >
        <Ionicons name="mail-open-outline" size={34} color="#3b82f6" />
      </View>

      <Text
        style={{
          fontSize: 17,
          fontFamily: 'Nunito_700Bold',
          color: colors.text,
          textAlign: 'center',
          marginBottom: 8,
        }}
      >
        {t('mail.empty_state_title')}
      </Text>

      <Text
        style={{
          fontSize: 13,
          fontFamily: 'Nunito_400Regular',
          color: colors.textMuted,
          textAlign: 'center',
          lineHeight: 19,
          marginBottom: 20,
        }}
      >
        {t('mail.empty_state_subtitle')}
      </Text>

      {/* Privacy-Punkte */}
      <View style={{ alignSelf: 'stretch', gap: 8, marginBottom: 22 }}>
        {(['privacy_1', 'privacy_2', 'privacy_3'] as const).map((key) => (
          <View key={key} style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
            <Ionicons name="checkmark-circle" size={15} color="#16a34a" />
            <Text style={{ fontSize: 12, fontFamily: 'Nunito_400Regular', color: colors.textMuted, flex: 1 }}>
              {t(`mail.${key}`)}
            </Text>
          </View>
        ))}
      </View>

      {/* CTA */}
      <TouchableOpacity
        onPress={onConnectPress}
        activeOpacity={0.85}
        style={{ alignSelf: 'stretch' }}
      >
        <View style={{
          backgroundColor: '#007AFF',
          borderRadius: 14,
          paddingVertical: 14,
          paddingHorizontal: 28,
          alignItems: 'center',
        }}>
          <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
            {t('mail.empty_state_cta')}
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}