managarten/memoro/apps/mobile/components/molecules/InsufficientCreditsModal.tsx

import React from 'react';
import { View } from 'react-native';
import { router } from 'expo-router';
import { useTheme } from '~/features/theme/ThemeProvider';
import Text from '~/components/atoms/Text';
import Button from '~/components/atoms/Button';
import BaseModal from '~/components/atoms/BaseModal';
import ManaIcon from '~/features/subscription/ManaIcon';
import { useTranslation } from 'react-i18next';

interface InsufficientCreditsModalProps {
  isVisible: boolean;
  onClose: () => void;
  requiredCredits?: number;
  availableCredits?: number;
  operation?: string;
}

/**
 * Modal that is displayed when a user doesn't have enough mana/credits for an operation.
 * Shows the current credit status and provides a button to navigate to the subscription page.
 */
const InsufficientCreditsModal: React.FC<InsufficientCreditsModalProps> = ({
  isVisible,
  onClose,
  requiredCredits,
  availableCredits,
  operation,
}) => {
  const { isDark } = useTheme();
  const { t } = useTranslation();

  const handleBuyCredits = () => {
    onClose();
    router.push('/(protected)/subscription');
  };

  const renderFooter = () => (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Button
        title={t('common.cancel', 'Abbrechen')}
        onPress={onClose}
        variant='secondary'
        style={{ flex: 1, marginRight: 8 }}
      />
      <Button
        title={t('subscription.buy_credits', 'Mana kaufen')}
        onPress={handleBuyCredits}
        variant='primary'
        iconName='card-outline'
        style={{ flex: 1 }}
      />
    </View>
  );

  return (
    <BaseModal
      isVisible={isVisible}
      onClose={onClose}
      title={t('credits.insufficient_title', 'Nicht genügend Mana')}
      animationType='fade'
      closeOnOverlayPress={true}
      footerContent={renderFooter()}
    >
      <View style={{ alignItems: 'center', paddingVertical: 16 }}>
        {/* Mana Icon */}
        <View style={{ marginBottom: 16 }}>
          <ManaIcon size={64} />
        </View>
        
        {/* Main message */}
        <Text 
          style={{ 
            textAlign: 'center', 
            fontSize: 16, 
            marginBottom: 12,
            color: isDark ? '#FFFFFF' : '#000000'
          }}
        >
          {requiredCredits && availableCredits !== undefined ? 
            t('credits.insufficient_detailed', {
              required: requiredCredits,
              available: availableCredits,
              defaultValue: `Du benötigst ${requiredCredits} Mana, hast aber nur ${availableCredits} verfügbar.`
            }) : 
            t('credits.insufficient_message', 'Du hast nicht genügend Mana für diese Operation.')
          }
        </Text>
        
        {/* Secondary message */}
        <Text 
          style={{ 
            textAlign: 'center', 
            fontSize: 14, 
            opacity: 0.7,
            color: isDark ? '#FFFFFF' : '#000000'
          }}
        >
          {t('credits.insufficient_subtitle', 'Lade dein Konto auf, um fortzufahren.')}
        </Text>
        
        {/* Information about local storage */}
        <View 
          style={{ 
            backgroundColor: isDark ? 'rgba(76, 175, 80, 0.1)' : 'rgba(76, 175, 80, 0.1)',
            borderRadius: 8,
            padding: 12,
            marginTop: 16,
            borderWidth: 1,
            borderColor: isDark ? 'rgba(76, 175, 80, 0.3)' : 'rgba(76, 175, 80, 0.3)'
          }}
        >
          <Text 
            style={{ 
              textAlign: 'center', 
              fontSize: 13, 
              lineHeight: 18,
              color: isDark ? '#FFFFFF' : '#000000'
            }}
          >
            💾 {t('credits.memo_saved_locally', 'Dein Memo wurde trotzdem auf dem Gerät gespeichert und kann über das Audio-Archiv hochgeladen werden, sobald wieder Mana verfügbar ist.')}
          </Text>
        </View>
      </View>
    </BaseModal>
  );
};

export default InsufficientCreditsModal;