import React from 'react';
import { View, Text, Modal, TouchableOpacity, StyleSheet } from 'react-native';

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

/**
 * Modal shown when user has insufficient mana credits
 */
export function InsufficientCreditsModal({
  visible,
  requiredCredits,
  availableCredits,
  operation = 'this operation',
  onClose,
  onPurchase,
}: InsufficientCreditsModalProps) {
  const shortfall = requiredCredits - availableCredits;

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.overlay}>
        <View style={styles.modalContainer}>
          {/* Header */}
          <View style={styles.header}>
            <Text style={styles.icon}>⚡</Text>
            <Text style={styles.title}>Insufficient Mana</Text>
          </View>

          {/* Content */}
          <View style={styles.content}>
            <Text style={styles.message}>
              You don't have enough mana to {operation}.
            </Text>

            <View style={styles.creditsInfo}>
              <View style={styles.creditsRow}>
                <Text style={styles.label}>Required:</Text>
                <Text style={styles.value}>{requiredCredits} mana</Text>
              </View>
              <View style={styles.creditsRow}>
                <Text style={styles.label}>Available:</Text>
                <Text style={styles.value}>{availableCredits} mana</Text>
              </View>
              <View style={[styles.creditsRow, styles.shortfallRow]}>
                <Text style={styles.label}>Needed:</Text>
                <Text style={[styles.value, styles.shortfall]}>
                  {shortfall} mana
                </Text>
              </View>
            </View>
          </View>

          {/* Actions */}
          <View style={styles.actions}>
            {onPurchase && (
              <TouchableOpacity
                style={[styles.button, styles.primaryButton]}
                onPress={onPurchase}
              >
                <Text style={styles.primaryButtonText}>Get More Mana</Text>
              </TouchableOpacity>
            )}

            <TouchableOpacity
              style={[styles.button, styles.secondaryButton]}
              onPress={onClose}
            >
              <Text style={styles.secondaryButtonText}>Cancel</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  modalContainer: {
    backgroundColor: 'white',
    borderRadius: 16,
    width: '100%',
    maxWidth: 400,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 8,
    elevation: 5,
  },
  header: {
    alignItems: 'center',
    paddingTop: 24,
    paddingBottom: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  icon: {
    fontSize: 48,
    marginBottom: 8,
  },
  title: {
    fontSize: 22,
    fontWeight: '600',
    color: '#1a1a1a',
  },
  content: {
    padding: 24,
  },
  message: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 20,
    lineHeight: 24,
  },
  creditsInfo: {
    backgroundColor: '#f8f9fa',
    borderRadius: 12,
    padding: 16,
  },
  creditsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  shortfallRow: {
    marginBottom: 0,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
  label: {
    fontSize: 15,
    color: '#666',
    fontWeight: '500',
  },
  value: {
    fontSize: 15,
    color: '#1a1a1a',
    fontWeight: '600',
  },
  shortfall: {
    color: '#dc2626',
  },
  actions: {
    padding: 16,
    gap: 12,
  },
  button: {
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 12,
    alignItems: 'center',
  },
  primaryButton: {
    backgroundColor: '#3b82f6',
  },
  primaryButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  secondaryButton: {
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#d1d5db',
  },
  secondaryButtonText: {
    color: '#6b7280',
    fontSize: 16,
    fontWeight: '500',
  },
});