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

/**
 * DEV-STUB für Stage Payment.
 *
 * Production-Variante (Phase 0 vom Strategist-Plan):
 *  - iOS: RevenueCat-Purchase-Sheet öffnet sich für 14-Tage-Pro-Trial
 *  - Web/Android: Stripe-Checkout
 *
 * Aktueller Dev-Stub: zeigt "RevenueCat kommt"-Erklärung + Button der
 * step='pre_protection' im Backend setzt + zum nächsten Slide weiterleitet.
 * Sichtbar als Dev-Banner damit niemand denkt das wäre die finale UX.
 */
export function PaymentSlide({
  onCompleted,
  current,
  total,
}: {
  onCompleted: () => void;
  current: number;
  total: number;
}) {
  const { t } = useTranslation();
  const colors = useColors();

  async function devSkipPayment() {
    await apiFetch('/api/profile/me/onboarding-step', {
      method: 'PATCH',
      body: { step: 'pre_protection' },
    }).catch(() => {});
    invalidateMe();
    onCompleted();
  }

  return (
    <OnboardingShell
      current={current}
      total={total}
      cta={
        <CTABar
          primaryLabel={t('onboarding.payment.cta_dev_skip')}
          onPrimary={devSkipPayment}
        />
      }
    >
      <LyraBubble text={t('onboarding.lyra.payment.body')} emotion="thinking" />

      <View
        style={{
          marginTop: 24,
          padding: 16,
          borderRadius: 14,
          backgroundColor: 'rgba(245,158,11,0.08)',
          borderWidth: 1,
          borderColor: 'rgba(245,158,11,0.30)',
          gap: 10,
        }}
      >
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
          <Ionicons name="construct-outline" size={18} color={colors.warning} />
          <Text
            style={{
              fontFamily: 'Nunito_700Bold',
              fontSize: 12,
              letterSpacing: 0.8,
              color: colors.warning,
              textTransform: 'uppercase',
            }}
          >
            {t('onboarding.payment.dev_label')}
          </Text>
        </View>
        <Text
          style={{
            fontFamily: 'Nunito_400Regular',
            fontSize: 13,
            lineHeight: 19,
            color: colors.text,
          }}
        >
          {t('onboarding.payment.dev_body')}
        </Text>
      </View>
    </OnboardingShell>
  );
}