import React from 'react';
import { 
  View, 
  Text, 
  Modal, 
  StyleSheet, 
  TouchableOpacity,
  ViewStyle,
  TextStyle,
  Dimensions
} from 'react-native';
import { GameButton } from './GameHeader';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

interface GameModalProps {
  visible: boolean;
  onClose?: () => void;
  title?: string;
  children: React.ReactNode;
  animationType?: 'slide' | 'fade' | 'none';
  transparent?: boolean;
  closable?: boolean;
  overlayStyle?: ViewStyle;
  contentStyle?: ViewStyle;
  titleStyle?: TextStyle;
}

/**
 * Modal component for game dialogs, menus, and overlays
 */
export const GameModal: React.FC<GameModalProps> = ({
  visible,
  onClose,
  title,
  children,
  animationType = 'fade',
  transparent = true,
  closable = true,
  overlayStyle,
  contentStyle,
  titleStyle
}) => {
  return (
    <Modal
      visible={visible}
      animationType={animationType}
      transparent={transparent}
      onRequestClose={closable ? onClose : undefined}
    >
      <TouchableOpacity 
        style={[styles.overlay, overlayStyle]}
        activeOpacity={1}
        onPress={closable ? onClose : undefined}
      >
        <TouchableOpacity 
          style={[styles.content, contentStyle]}
          activeOpacity={1}
          onPress={() => {}} // Prevent closing when tapping content
        >
          {title && (
            <View style={styles.header}>
              <Text style={[styles.title, titleStyle]}>{title}</Text>
              {closable && onClose && (
                <TouchableOpacity 
                  style={styles.closeButton}
                  onPress={onClose}
                >
                  <Text style={styles.closeText}>✕</Text>
                </TouchableOpacity>
              )}
            </View>
          )}
          
          <View style={styles.body}>
            {children}
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
};

interface ConfirmDialogProps {
  visible: boolean;
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm: () => void;
  onCancel: () => void;
  dangerous?: boolean;
}

/**
 * Pre-built confirmation dialog
 */
export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  visible,
  title,
  message,
  confirmText = 'אישור',
  cancelText = 'ביטול',
  onConfirm,
  onCancel,
  dangerous = false
}) => {
  return (
    <GameModal
      visible={visible}
      onClose={onCancel}
      title={title}
      contentStyle={styles.dialogContent}
    >
      <Text style={styles.message}>{message}</Text>
      
      <View style={styles.buttonContainer}>
        <GameButton
          title={cancelText}
          onPress={onCancel}
          variant="secondary"
          style={styles.dialogButton}
        />
        <GameButton
          title={confirmText}
          onPress={onConfirm}
          variant={dangerous ? "danger" : "primary"}
          style={styles.dialogButton}
        />
      </View>
    </GameModal>
  );
};

interface GameMenuProps {
  visible: boolean;
  onClose: () => void;
  onResume?: () => void;
  onRestart?: () => void;
  onQuit?: () => void;
  onSettings?: () => void;
  showResume?: boolean;
  showRestart?: boolean;
  showQuit?: boolean;
  showSettings?: boolean;
}

/**
 * Pre-built game pause menu
 */
export const GameMenu: React.FC<GameMenuProps> = ({
  visible,
  onClose,
  onResume,
  onRestart,
  onQuit,
  onSettings,
  showResume = true,
  showRestart = true,
  showQuit = true,
  showSettings = true
}) => {
  return (
    <GameModal
      visible={visible}
      onClose={onClose}
      title="תפריט משחק"
      contentStyle={styles.menuContent}
    >
      <View style={styles.menuButtons}>
        {showResume && onResume && (
          <GameButton
            title="המשך"
            onPress={onResume}
            variant="primary"
            size="large"
            style={styles.menuButton}
          />
        )}
        
        {showRestart && onRestart && (
          <GameButton
            title="התחלה מחדש"
            onPress={onRestart}
            variant="secondary"
            size="large"
            style={styles.menuButton}
          />
        )}
        
        {showSettings && onSettings && (
          <GameButton
            title="הגדרות"
            onPress={onSettings}
            variant="secondary"
            size="large"
            style={styles.menuButton}
          />
        )}
        
        {showQuit && onQuit && (
          <GameButton
            title="יציאה"
            onPress={onQuit}
            variant="danger"
            size="large"
            style={styles.menuButton}
          />
        )}
      </View>
    </GameModal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    backgroundColor: 'white',
    borderRadius: 12,
    width: Math.min(screenWidth * 0.9, 400),
    maxHeight: screenHeight * 0.8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
  closeButton: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: '#F0F0F0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  closeText: {
    fontSize: 16,
    color: '#666',
    fontWeight: 'bold',
  },
  body: {
    padding: 20,
  },
  
  // Dialog specific styles
  dialogContent: {
    width: Math.min(screenWidth * 0.85, 350),
  },
  message: {
    fontSize: 16,
    color: '#666',
    lineHeight: 24,
    marginBottom: 24,
    textAlign: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  dialogButton: {
    flex: 1,
    marginHorizontal: 8,
  },
  
  // Menu specific styles
  menuContent: {
    width: Math.min(screenWidth * 0.8, 320),
  },
  menuButtons: {
    gap: 16,
  },
  menuButton: {
    width: '100%',
  },
});