import React from 'react';
import { Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Language } from '../types';
import { useColors } from '../constants/Colors';

type ColorsType = ReturnType<typeof useColors>;

const getCopy = (language: Language, isPro: boolean) => {
  if (language === 'de') {
    return {
      title: isPro ? 'Deine Credits sind aufgebraucht' : 'Deine Gratis-Scans sind aufgebraucht',
      body: (date: string) => (isPro
        ? `Deine Credits erneuern sich am ${date}. Kauf Credits nach, um weiterzuscannen.`
        : `Deine 3 Gratis-Scans erneuern sich am ${date}. Hol dir Pro für unbegrenztes Scannen.`),
      bodyNoDate: isPro
        ? 'Kauf Credits nach, um weiterzuscannen.'
        : 'Hol dir Pro für unbegrenztes Scannen und deinen 7-Tage-Rettungsplan.',
      cta: 'Pro-Pläne ansehen',
      topupsLabel: 'Oder einzelne Credits kaufen',
      later: 'Vielleicht später',
      best: 'BESTE WAHL',
      credits: 'Credits',
    };
  }
  if (language === 'es') {
    return {
      title: isPro ? 'Se acabaron tus créditos' : 'Se acabaron tus escaneos gratis',
      body: (date: string) => (isPro
        ? `Tus créditos se renuevan el ${date}. Compra créditos para seguir escaneando.`
        : `Tus 3 escaneos gratis se renuevan el ${date}. Pásate a Pro para escanear sin límites.`),
      bodyNoDate: isPro
        ? 'Compra créditos para seguir escaneando.'
        : 'Pásate a Pro para escanear sin límites.',
      cta: 'Ver planes Pro',
      topupsLabel: 'O compra créditos sueltos',
      later: 'Quizás más tarde',
      best: 'MEJOR OPCIÓN',
      credits: 'créditos',
    };
  }
  return {
    title: isPro ? "You're out of credits" : "You're out of free scans",
    body: (date: string) => (isPro
      ? `Your credits renew on ${date}. Top up to keep scanning.`
      : `Your 3 free scans renew on ${date}. Upgrade to Pro for unlimited scanning.`),
    bodyNoDate: isPro
      ? 'Top up to keep scanning.'
      : 'Upgrade to Pro for unlimited scanning.',
    cta: 'See Pro Plans',
    topupsLabel: 'Or buy single credits',
    later: 'Maybe later',
    best: 'BEST',
    credits: 'credits',
  };
};

const formatRenewalDate = (iso: string | null | undefined, language: Language): string | null => {
  if (!iso) return null;
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) return null;
  const locale = language === 'de' ? 'de-DE' : language === 'es' ? 'es-ES' : 'en-US';
  return date.toLocaleDateString(locale, { day: 'numeric', month: 'long' });
};

type Props = {
  visible: boolean;
  language: Language;
  colors: ColorsType;
  isPro?: boolean;
  renewsAtIso?: string | null;
  onSeePlans: () => void;
  onTopup: (productId: 'topup_small' | 'topup_medium' | 'topup_large') => void;
  onDismiss: () => void;
};

const TOPUPS = [
  { id: 'topup_small' as const, amount: 30, best: false },
  { id: 'topup_medium' as const, amount: 100, best: false },
  { id: 'topup_large' as const, amount: 250, best: true },
];

export function OutOfCreditsSheet({ visible, language, colors, isPro = false, renewsAtIso, onSeePlans, onTopup, onDismiss }: Props) {
  const copy = getCopy(language, isPro);
  const renewalDate = formatRenewalDate(renewsAtIso, language);

  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onDismiss}>
      <View style={styles.backdrop}>
        <TouchableOpacity
          style={styles.backdropTouchable}
          activeOpacity={1}
          onPress={onDismiss}
          accessibilityRole="button"
          accessibilityLabel={copy.later}
        />
        <View style={[styles.sheet, { backgroundColor: colors.surface }]} accessibilityViewIsModal>
          <View style={[styles.handle, { backgroundColor: colors.border }]} />
          <View style={styles.iconWrap}>
            <View style={[styles.iconCircle, { backgroundColor: colors.primarySoft, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }]}>
              <Image
                source={require('../assets/icon.png')}
                style={{ width: 44, height: 44, borderRadius: 10 }}
                resizeMode="contain"
              />
            </View>
            <View style={[styles.zeroBadge, { backgroundColor: colors.danger }]}>
              <Text style={styles.zeroBadgeText}>0</Text>
            </View>
          </View>
          <Text style={[styles.title, { color: colors.text }]}>{copy.title}</Text>
          <Text style={[styles.body, { color: colors.textSecondary }]}>
            {renewalDate ? copy.body(renewalDate) : copy.bodyNoDate}
          </Text>
          {!isPro && (
            <TouchableOpacity style={[styles.cta, { backgroundColor: colors.primary }]} onPress={onSeePlans} activeOpacity={0.86}>
              <Ionicons name="ribbon-outline" size={19} color={colors.onPrimary} />
              <Text style={[styles.ctaText, { color: colors.onPrimary }]}>{copy.cta}</Text>
            </TouchableOpacity>
          )}
          <Text style={[styles.topupsLabel, { color: colors.textMuted }]}>{copy.topupsLabel.toUpperCase()}</Text>
          <View style={styles.topupRow}>
            {TOPUPS.map((topup) => (
              <TouchableOpacity
                key={topup.id}
                style={[styles.topupChip, { borderColor: topup.best ? colors.primary : colors.border, backgroundColor: colors.surfaceMuted }]}
                onPress={() => onTopup(topup.id)}
                activeOpacity={0.85}
              >
                {topup.best && (
                  <View style={[styles.bestBadge, { backgroundColor: colors.primary }]}>
                    <Text style={[styles.bestBadgeText, { color: colors.onPrimary }]}>{copy.best}</Text>
                  </View>
                )}
                <Text style={[styles.topupAmount, { color: colors.primary }]}>+{topup.amount}</Text>
                <Text style={[styles.topupUnit, { color: colors.textSecondary }]}>{copy.credits}</Text>
              </TouchableOpacity>
            ))}
          </View>
          <TouchableOpacity onPress={onDismiss} style={styles.laterBtn}>
            <Text style={[styles.laterText, { color: colors.primary }]}>{copy.later}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  backdrop: { flex: 1, backgroundColor: 'rgba(10,17,11,0.45)', justifyContent: 'flex-end' },
  backdropTouchable: { flex: 1 },
  sheet: { borderTopLeftRadius: 26, borderTopRightRadius: 26, paddingHorizontal: 24, paddingTop: 10, paddingBottom: 34, alignItems: 'center' },
  handle: { width: 44, height: 5, borderRadius: 3, marginBottom: 18 },
  iconWrap: { marginBottom: 14 },
  iconCircle: { width: 76, height: 76, borderRadius: 38, alignItems: 'center', justifyContent: 'center' },
  zeroBadge: { position: 'absolute', top: -2, right: -4, width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },
  zeroBadgeText: { color: '#fff', fontSize: 13, fontWeight: '900' },
  title: { fontSize: 24, fontWeight: '900', textAlign: 'center', marginBottom: 8 },
  body: { fontSize: 15, lineHeight: 21, textAlign: 'center', marginBottom: 18, maxWidth: 320 },
  cta: { alignSelf: 'stretch', height: 56, borderRadius: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, marginBottom: 16 },
  ctaText: { fontSize: 17, fontWeight: '800' },
  topupsLabel: { fontSize: 11, fontWeight: '800', letterSpacing: 0.8, marginBottom: 10 },
  topupRow: { flexDirection: 'row', gap: 10, alignSelf: 'stretch', marginBottom: 14 },
  topupChip: { flex: 1, borderWidth: 1.5, borderRadius: 14, paddingVertical: 14, alignItems: 'center', overflow: 'hidden' },
  bestBadge: { position: 'absolute', top: 0, left: 0, right: 0, paddingVertical: 3, alignItems: 'center' },
  bestBadgeText: { fontSize: 9, fontWeight: '900', letterSpacing: 0.6 },
  topupAmount: { fontSize: 22, fontWeight: '900', marginTop: 6 },
  topupUnit: { fontSize: 12, fontWeight: '600' },
  laterBtn: { paddingVertical: 8 },
  laterText: { fontSize: 15, fontWeight: '800' },
});