<script setup>
import { watch } from 'vue';
import Icon from './Icon.vue';

/**
 * Reusable Modal component.
 * 
 * Provides a dialog/modal overlay with customizable content.
 * Supports different sizes and handles escape key to close.
 * 
 * @example
 * <AppModal v-model="showModal" title="Confirm Action">
 *   <p>Are you sure?</p>
 *   <template #footer>
 *     <AppButton @click="confirm">Yes</AppButton>
 *   </template>
 * </AppModal>
 */

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '',
    },
    size: {
        type: String,
        default: 'md',
        validator: (value) => ['sm', 'md', 'lg', 'xl', 'full'].includes(value),
    },
    closable: {
        type: Boolean,
        default: true,
    },
    closeOnEscape: {
        type: Boolean,
        default: true,
    },
    closeOnOverlay: {
        type: Boolean,
        default: true,
    },
});

const emit = defineEmits(['update:modelValue', 'close']);

const sizeClasses = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-lg',
    xl: 'max-w-xl',
    full: 'max-w-4xl',
};

const close = () => {
    if (props.closable) {
        emit('update:modelValue', false);
        emit('close');
    }
};

const handleOverlayClick = () => {
    if (props.closeOnOverlay) {
        close();
    }
};

const handleKeydown = (event) => {
    if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
        close();
    }
};

watch(() => props.modelValue, (isOpen) => {
    if (isOpen) {
        document.addEventListener('keydown', handleKeydown);
        document.body.style.overflow = 'hidden';
    } else {
        document.removeEventListener('keydown', handleKeydown);
        document.body.style.overflow = '';
    }
}, { immediate: true });
</script>

<template>
    <Teleport to="body">
        <Transition
            enter-active-class="transition ease-out duration-200"
            enter-from-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="transition ease-in duration-150"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <div
                v-if="modelValue"
                class="fixed inset-0 z-50 overflow-y-auto"
                aria-labelledby="modal-title"
                role="dialog"
                aria-modal="true"
            >
                <!-- Overlay -->
                <div
                    class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
                    @click="handleOverlayClick"
                />

                <!-- Modal container -->
                <div class="flex min-h-full items-center justify-center p-4">
                    <Transition
                        enter-active-class="transition ease-out duration-200"
                        enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                        enter-to-class="opacity-100 translate-y-0 sm:scale-100"
                        leave-active-class="transition ease-in duration-150"
                        leave-from-class="opacity-100 translate-y-0 sm:scale-100"
                        leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    >
                        <div
                            v-if="modelValue"
                            :class="[
                                'relative w-full transform overflow-hidden rounded-lg bg-white shadow-xl transition-all',
                                sizeClasses[size]
                            ]"
                        >
                            <!-- Header -->
                            <div
                                v-if="title || closable || $slots.header"
                                class="flex items-center justify-between border-b border-gray-200 px-6 py-4"
                            >
                                <slot name="header">
                                    <h3
                                        v-if="title"
                                        id="modal-title"
                                        class="text-lg font-semibold text-gray-900"
                                    >
                                        {{ title }}
                                    </h3>
                                </slot>
                                <button
                                    v-if="closable"
                                    type="button"
                                    class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
                                    @click="close"
                                >
                                    <span class="sr-only">Cerrar</span>
                                    <Icon name="x" class="h-5 w-5" />
                                </button>
                            </div>

                            <!-- Body -->
                            <div class="px-6 py-4">
                                <slot />
                            </div>

                            <!-- Footer -->
                            <div
                                v-if="$slots.footer"
                                class="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-50 px-6 py-4"
                            >
                                <slot name="footer" />
                            </div>
                        </div>
                    </Transition>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>
