<script setup>
/**
 * SwipeableCard - Tarjeta con acciones al deslizar
 * Similar a la UX de apps nativas (Mail, WhatsApp)
 */
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
    leftAction: {
        type: Object,
        default: null,
        // { label: 'Eliminar', color: 'red', icon: 'trash' }
    },
    rightAction: {
        type: Object,
        default: null,
        // { label: 'Archivar', color: 'green', icon: 'archive' }
    },
    threshold: {
        type: Number,
        default: 80,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(['swipe-left', 'swipe-right']);

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

const handleTouchStart = (e) => {
    if (props.disabled) return;
    isDragging.value = true;
    startX.value = e.touches[0].clientX;
    currentX.value = translateX.value;
};

const handleTouchMove = (e) => {
    if (!isDragging.value || props.disabled) return;
    
    const diff = e.touches[0].clientX - startX.value;
    let newTranslate = currentX.value + diff;
    
    // Limitar el deslizamiento
    const maxSwipe = props.threshold * 1.5;
    
    if (!props.leftAction && newTranslate < 0) newTranslate = 0;
    if (!props.rightAction && newTranslate > 0) newTranslate = 0;
    
    newTranslate = Math.max(-maxSwipe, Math.min(maxSwipe, newTranslate));
    
    translateX.value = newTranslate;
};

const handleTouchEnd = () => {
    if (!isDragging.value || props.disabled) return;
    isDragging.value = false;
    
    if (Math.abs(translateX.value) >= props.threshold) {
        if (translateX.value < 0 && props.leftAction) {
            emit('swipe-left');
        } else if (translateX.value > 0 && props.rightAction) {
            emit('swipe-right');
        }
    }
    
    // Volver a posición original con animación
    translateX.value = 0;
};

const reset = () => {
    translateX.value = 0;
};

// Exponer método reset
defineExpose({ reset });

// Colores de fondo según acción
const getActionColor = (action) => {
    const colors = {
        red: 'bg-red-500',
        green: 'bg-green-500',
        blue: 'bg-blue-500',
        yellow: 'bg-yellow-500',
        indigo: 'bg-indigo-500',
        gray: 'bg-gray-500',
    };
    return colors[action?.color] || 'bg-gray-500';
};

// Iconos de acciones
const actionIcons = {
    trash: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>`,
    archive: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>`,
    check: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>`,
    edit: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>`,
    star: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>`,
};

const getActionIcon = (iconName) => actionIcons[iconName] || actionIcons.check;
</script>

<template>
    <div class="relative overflow-hidden rounded-lg">
        <!-- Fondo de acción izquierda (aparece al deslizar a la derecha) -->
        <div 
            v-if="rightAction"
            class="absolute inset-y-0 left-0 flex items-center justify-start pl-4 w-full"
            :class="getActionColor(rightAction)"
        >
            <div class="flex items-center gap-2 text-white">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" v-html="getActionIcon(rightAction.icon)" />
                <span class="font-medium">{{ rightAction.label }}</span>
            </div>
        </div>
        
        <!-- Fondo de acción derecha (aparece al deslizar a la izquierda) -->
        <div 
            v-if="leftAction"
            class="absolute inset-y-0 right-0 flex items-center justify-end pr-4 w-full"
            :class="getActionColor(leftAction)"
        >
            <div class="flex items-center gap-2 text-white">
                <span class="font-medium">{{ leftAction.label }}</span>
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" v-html="getActionIcon(leftAction.icon)" />
            </div>
        </div>
        
        <!-- Contenido de la tarjeta -->
        <div
            ref="cardRef"
            class="relative bg-white dark:bg-gray-800 touch-pan-y"
            :class="{ 'transition-transform duration-200 ease-out': !isDragging }"
            :style="{ transform: `translateX(${translateX}px)` }"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
        >
            <slot />
        </div>
    </div>
</template>
