import { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../../../lib/theme';
import { apiFetch } from '../../../lib/api';
import { invalidateMe } from '../../../hooks/useMe';
import { OnboardingShell } from '../OnboardingShell';
import { LyraBubble } from '../LyraBubble';
import { CTABar } from '../CTABar';

type RedeemError = 'not_found' | 'already_used' | 'expired' | 'invalid_input';

export function DigaCodeSlide({
  onSuccess,
  onBack,
  current,
  total,
}: {
  /** Wird gerufen wenn der Code erfolgreich eingelöst wurde. Backend hat dann
   *  plan='legend' + onboarding_step='pre_protection' gesetzt. */
  onSuccess: () => void;
  /** Zurück zum DigaChoiceSlide (User hat sich's anders überlegt). */
  onBack: () => void;
  current: number;
  total: number;
}) {
  const { t } = useTranslation();
  const colors = useColors();
  const [code, setCode] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [errorKey, setErrorKey] = useState<RedeemError | null>(null);

  const trimmed = code.trim();
  const valid = trimmed.length >= 6;

  async function redeem() {
    if (!valid || submitting) return;
    setSubmitting(true);
    setErrorKey(null);
    try {
      await apiFetch('/api/onboarding/redeem-diga-code', {
        method: 'POST',
        body: { code: trimmed },
      });
      invalidateMe();
      onSuccess();
    } catch (e: any) {
      // apiFetch wirft Error mit `code` Feld bei strukturierten 4xx
      const code = (e?.code ?? e?.data?.error) as RedeemError | undefined;
      setErrorKey(code ?? 'not_found');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <OnboardingShell
      current={current}
      total={total}
      cta={
        <CTABar
          primaryLabel={t('onboarding.diga_code.cta_primary')}
          onPrimary={redeem}
          primaryDisabled={!valid}
          primaryLoading={submitting}
          secondaryLabel={t('onboarding.diga_code.cta_secondary')}
          onSecondary={onBack}
        />
      }
    >
      <LyraBubble text={t('onboarding.lyra.diga_code.body')} emotion="thinking" />

      <View style={{ marginTop: 24 }}>
        <Text
          style={{
            fontFamily: 'Nunito_700Bold',
            fontSize: 12,
            color: colors.textMuted,
            letterSpacing: 0.8,
            marginBottom: 8,
          }}
        >
          {t('onboarding.diga_code.label')}
        </Text>
        <TextInput
          autoFocus
          value={code}
          onChangeText={(v) => {
            setCode(v.toUpperCase());
            if (errorKey) setErrorKey(null);
          }}
          onSubmitEditing={redeem}
          placeholder="REBREAK-XXXX-XXX"
          placeholderTextColor="#a3a3a3"
          autoCapitalize="characters"
          autoCorrect={false}
          maxLength={32}
          returnKeyType="done"
          style={{
            fontSize: 16,
            lineHeight: 22,
            paddingVertical: 14,
            paddingHorizontal: 16,
            color: colors.text,
            fontFamily: 'Nunito_700Bold',
            letterSpacing: 1,
            backgroundColor: colors.surfaceElevated,
            borderRadius: 12,
            borderWidth: 2,
            borderColor: errorKey ? colors.error : valid ? colors.brandOrange : 'transparent',
          }}
        />
        {errorKey ? (
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 6,
              marginTop: 10,
              paddingHorizontal: 2,
            }}
          >
            <Ionicons name="alert-circle" size={16} color={colors.error} />
            <Text
              style={{
                flex: 1,
                fontFamily: 'Nunito_600SemiBold',
                fontSize: 13,
                color: colors.error,
              }}
            >
              {t(`onboarding.diga_code.error_${errorKey}`)}
            </Text>
          </View>
        ) : (
          <Text
            style={{
              marginTop: 8,
              fontFamily: 'Nunito_400Regular',
              fontSize: 12,
              color: colors.textMuted,
            }}
          >
            {t('onboarding.diga_code.hint')}
          </Text>
        )}
      </View>
    </OnboardingShell>
  );
}