import React from 'react';
import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { BlurView } from 'expo-blur';
import Animated, { FadeIn, FadeInDown, FadeOut, FadeOutDown } from 'react-native-reanimated';
import { Colors, Radius, Spacing, Typography } from '@/constants/theme';
import { Button } from './button';

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

export function ActionModal({
    visible,
    title,
    message,
    confirmText = 'Confirmar',
    cancelText = 'Cancelar',
    onConfirm,
    onCancel,
    isDestructive = false,
}: ActionModalProps) {
    if (!visible) return null;

    return (
        <Modal visible={visible} transparent animationType="none" onRequestClose={onCancel}>
            <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)} style={styles.overlay}>
                <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onCancel} />

                <Animated.View entering={FadeInDown.duration(300).springify()} exiting={FadeOutDown.duration(200)} style={styles.modalContainer}>
                    <BlurView intensity={80} tint="dark" style={styles.blurView}>
                        <View style={styles.content}>
                            <Text style={styles.title}>{title}</Text>
                            <Text style={styles.message}>{message}</Text>

                            <View style={styles.actions}>
                                <Button
                                    label={cancelText}
                                    variant="ghost"
                                    onPress={onCancel}
                                    style={styles.actionButton}
                                />
                                <Button
                                    label={confirmText}
                                    variant={isDestructive ? 'danger' : 'primary'}
                                    onPress={onConfirm}
                                    style={styles.actionButton}
                                />
                            </View>
                        </View>
                    </BlurView>
                </Animated.View>
            </Animated.View>
        </Modal>
    );
}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
    },
    backdrop: {
        ...StyleSheet.absoluteFill,
    },
    modalContainer: {
        padding: Spacing.md,
        paddingBottom: Spacing.xxl,
    },
    blurView: {
        borderRadius: Radius.lg,
        overflow: 'hidden',
        borderWidth: 1,
        borderColor: 'rgba(255, 255, 255, 0.08)',
    },
    content: {
        padding: Spacing.xl,
        gap: Spacing.md,
        backgroundColor: 'rgba(22, 27, 34, 0.6)',
    },
    title: {
        ...Typography.h2,
        color: Colors.textPrimary,
        textAlign: 'center',
    },
    message: {
        ...Typography.body,
        color: Colors.textSecondary,
        textAlign: 'center',
        lineHeight: 22,
    },
    actions: {
        flexDirection: 'row',
        gap: Spacing.sm,
        marginTop: Spacing.md,
    },
    actionButton: {
        flex: 1,
    },
});