<script setup>
/**
 * MobileDrawer - Panel lateral deslizable para móviles
 * Con gestos de swipe para cerrar
 */
import { ref, watch, onMounted, onUnmounted } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    position: {
        type: String,
        default: 'left', // left, right
    },
    width: {
        type: String,
        default: '80%', // Porcentaje o valor fijo
    },
    maxWidth: {
        type: String,
        default: '320px',
    },
    overlay: {
        type: Boolean,
        default: true,
    },
    closeOnOverlay: {
        type: Boolean,
        default: true,
    },
});

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

const drawerRef = ref(null);
const translateX = ref(0);
const isDragging = ref(false);
const startX = ref(0);

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

// Touch handlers para swipe-to-close
const handleTouchStart = (e) => {
    isDragging.value = true;
    startX.value = e.touches[0].clientX;
};

const handleTouchMove = (e) => {
    if (!isDragging.value) return;
    
    const diff = e.touches[0].clientX - startX.value;
    
    if (props.position === 'left') {
        // Solo permitir deslizar hacia la izquierda
        translateX.value = Math.min(0, diff);
    } else {
        // Solo permitir deslizar hacia la derecha
        translateX.value = Math.max(0, diff);
    }
};

const handleTouchEnd = () => {
    if (!isDragging.value) return;
    isDragging.value = false;
    
    const threshold = 100;
    
    if (props.position === 'left' && translateX.value < -threshold) {
        close();
    } else if (props.position === 'right' && translateX.value > threshold) {
        close();
    }
    
    translateX.value = 0;
};

// Prevenir scroll del body cuando está abierto
watch(() => props.modelValue, (isOpen) => {
    if (isOpen) {
        document.body.style.overflow = 'hidden';
    } else {
        document.body.style.overflow = '';
    }
});

// Cerrar con tecla Escape
const handleKeydown = (e) => {
    if (e.key === 'Escape' && props.modelValue) {
        close();
    }
};

onMounted(() => {
    document.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
    document.removeEventListener('keydown', handleKeydown);
    document.body.style.overflow = '';
});
</script>

<template>
    <Teleport to="body">
        <!-- Overlay -->
        <Transition
            enter-active-class="transition-opacity duration-300"
            enter-from-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="transition-opacity duration-300"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <div 
                v-if="modelValue && overlay"
                class="fixed inset-0 bg-black/50 z-40"
                @click="closeOnOverlay && close()"
            />
        </Transition>
        
        <!-- Drawer -->
        <Transition
            :enter-active-class="`transition-transform duration-300 ease-out`"
            :enter-from-class="position === 'left' ? '-translate-x-full' : 'translate-x-full'"
            enter-to-class="translate-x-0"
            :leave-active-class="`transition-transform duration-300 ease-in`"
            leave-from-class="translate-x-0"
            :leave-to-class="position === 'left' ? '-translate-x-full' : 'translate-x-full'"
        >
            <div
                v-if="modelValue"
                ref="drawerRef"
                class="fixed top-0 bottom-0 bg-white dark:bg-gray-900 shadow-xl z-50 overflow-y-auto overscroll-contain safe-area-top safe-area-bottom"
                :class="[
                    position === 'left' ? 'left-0' : 'right-0',
                ]"
                :style="{ 
                    width: width, 
                    maxWidth: maxWidth,
                    transform: `translateX(${translateX}px)`,
                    transition: isDragging ? 'none' : undefined,
                }"
                @touchstart="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
            >
                <!-- Handle indicator para cerrar -->
                <div 
                    class="absolute top-1/2 -translate-y-1/2 w-1 h-16 bg-gray-300 dark:bg-gray-600 rounded-full"
                    :class="position === 'left' ? 'right-2' : 'left-2'"
                />
                
                <!-- Contenido -->
                <slot />
            </div>
        </Transition>
    </Teleport>
</template>
