import { Text, TouchableOpacity, 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';

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

  return (
    <OnboardingShell
      current={current}
      total={total}
      cta={
        // Eigenes Layout statt CTABar — zwei gleichwertige Optionen
        <ChoiceBar onYes={onYes} onNo={onNo} t={t} colors={colors} />
      }
    >
      <LyraBubble text={t('onboarding.lyra.diga_choice.body')} emotion="thinking" />

      <View
        style={{
          marginTop: 24,
          padding: 14,
          borderRadius: 12,
          backgroundColor: colors.surfaceElevated,
          flexDirection: 'row',
          alignItems: 'center',
          gap: 10,
        }}
      >
        <Ionicons name="information-circle-outline" size={18} color={colors.brandOrange} />
        <Text
          style={{
            flex: 1,
            fontFamily: 'Nunito_400Regular',
            fontSize: 13,
            lineHeight: 19,
            color: colors.textMuted,
          }}
        >
          {t('onboarding.diga_choice.hint')}
        </Text>
      </View>
    </OnboardingShell>
  );
}

function ChoiceBar({
  onYes,
  onNo,
  t,
  colors,
}: {
  onYes: () => void;
  onNo: () => void;
  t: ReturnType<typeof useTranslation>['t'];
  colors: import('../../../lib/theme').ColorScheme;
}) {
  return (
    <View
      style={{
        paddingHorizontal: 20,
        paddingTop: 12,
        paddingBottom: 24,
        backgroundColor: colors.bg,
        borderTopWidth: 1,
        borderTopColor: colors.border,
        gap: 10,
      }}
    >
      <TouchableOpacity
        onPress={onYes}
        activeOpacity={0.85}
        style={{
          backgroundColor: colors.brandOrange,
          borderRadius: 14,
          paddingVertical: 16,
          alignItems: 'center',
        }}
      >
        <Text
          style={{
            fontFamily: 'Nunito_700Bold',
            fontSize: 16,
            color: '#ffffff',
            letterSpacing: 0.2,
          }}
        >
          {t('onboarding.diga_choice.cta_yes')}
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={onNo}
        activeOpacity={0.7}
        style={{
          backgroundColor: colors.surfaceElevated,
          borderRadius: 14,
          paddingVertical: 16,
          alignItems: 'center',
        }}
      >
        <Text
          style={{
            fontFamily: 'Nunito_600SemiBold',
            fontSize: 15,
            color: colors.text,
          }}
        >
          {t('onboarding.diga_choice.cta_no')}
        </Text>
      </TouchableOpacity>
    </View>
  );
}