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 { Feather } from '@expo/vector-icons';
import { Colors, Radius, Spacing, Typography } from '@/constants/theme';

export interface MenuOption {
    label: string;
    icon?: keyof typeof Feather.glyphMap;
    destructive?: boolean;
    onPress: () => void;
}

interface OptionsModalProps {
    visible: boolean;
    title?: string;
    options: MenuOption[];
    onClose: () => void;
}

export function OptionsModal({ visible, title, options, onClose }: OptionsModalProps) {
    if (!visible) return null;

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

                <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}>
                            {title && <Text style={styles.title}>{title}</Text>}

                            <View style={styles.optionsList}>
                                {options.map((option, index) => (
                                    <TouchableOpacity
                                        key={index}
                                        style={[styles.optionButton, index < options.length - 1 && styles.optionBorder]}
                                        onPress={() => {
                                            onClose();
                                            setTimeout(option.onPress, 50);
                                        }}
                                    >
                                        {option.icon && (
                                            <Feather
                                                name={option.icon}
                                                size={20}
                                                color={option.destructive ? Colors.negative : Colors.textPrimary}
                                                style={styles.optionIcon}
                                            />
                                        )}
                                        <Text style={[styles.optionText, option.destructive && styles.optionTextDestructive]}>
                                            {option.label}
                                        </Text>
                                    </TouchableOpacity>
                                ))}
                            </View>

                            <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
                                <Text style={styles.cancelText}>Cancelar</Text>
                            </TouchableOpacity>
                        </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.md,
        gap: Spacing.md,
        backgroundColor: 'rgba(22, 27, 34, 0.6)',
    },
    title: {
        ...Typography.body,
        color: Colors.textSecondary,
        textAlign: 'center',
        marginBottom: Spacing.xs,
    },
    optionsList: {
        backgroundColor: 'rgba(255,255,255,0.05)',
        borderRadius: Radius.md,
        overflow: 'hidden',
    },
    optionButton: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: Spacing.md,
        backgroundColor: 'transparent',
    },
    optionBorder: {
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(255,255,255,0.05)',
    },
    optionIcon: {
        marginRight: Spacing.sm,
    },
    optionText: {
        ...Typography.bodyLarge,
        color: Colors.textPrimary,
    },
    optionTextDestructive: {
        color: Colors.negative,
    },
    cancelButton: {
        padding: Spacing.md,
        backgroundColor: 'rgba(255,255,255,0.1)',
        borderRadius: Radius.md,
        alignItems: 'center',
    },
    cancelText: {
        ...Typography.bodyLarge,
        color: Colors.textPrimary,
        fontFamily: 'DMSans_600SemiBold',
    },
});