<script setup>
/**
 * PullToRefresh - Componente pull-to-refresh para móviles
 * UX nativa similar a apps iOS/Android
 */
import { ref, computed } from 'vue';

const props = defineProps({
    loading: {
        type: Boolean,
        default: false,
    },
    threshold: {
        type: Number,
        default: 80,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(['refresh']);

const pullDistance = ref(0);
const isPulling = ref(false);
const startY = ref(0);

const pullProgress = computed(() => {
    return Math.min(pullDistance.value / props.threshold, 1);
});

const shouldTrigger = computed(() => {
    return pullDistance.value >= props.threshold;
});

const handleTouchStart = (e) => {
    if (props.disabled || props.loading) return;
    
    // Solo activar si estamos en la parte superior
    const scrollTop = e.currentTarget.scrollTop || window.scrollY;
    if (scrollTop > 0) return;
    
    isPulling.value = true;
    startY.value = e.touches[0].clientY;
};

const handleTouchMove = (e) => {
    if (!isPulling.value || props.disabled || props.loading) return;
    
    const scrollTop = e.currentTarget.scrollTop || window.scrollY;
    if (scrollTop > 0) {
        pullDistance.value = 0;
        return;
    }
    
    const currentY = e.touches[0].clientY;
    const diff = currentY - startY.value;
    
    if (diff > 0) {
        // Resistencia elástica
        pullDistance.value = Math.pow(diff, 0.8);
        
        // Prevenir scroll del body
        if (pullDistance.value > 10) {
            e.preventDefault();
        }
    }
};

const handleTouchEnd = () => {
    if (!isPulling.value || props.disabled || props.loading) return;
    
    isPulling.value = false;
    
    if (shouldTrigger.value) {
        emit('refresh');
    }
    
    pullDistance.value = 0;
};
</script>

<template>
    <div 
        class="relative min-h-full"
        @touchstart.passive="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend.passive="handleTouchEnd"
    >
        <!-- Indicador de pull -->
        <div 
            class="absolute left-0 right-0 flex items-center justify-center overflow-hidden pointer-events-none z-10"
            :class="{ 'transition-all duration-300 ease-out': !isPulling }"
            :style="{ 
                height: `${Math.max(pullDistance, loading ? threshold : 0)}px`,
                top: 0,
            }"
        >
            <div 
                class="flex items-center justify-center w-10 h-10 rounded-full bg-white dark:bg-gray-800 shadow-lg"
                :class="{ 'animate-spin': loading }"
            >
                <!-- Icono de refresh -->
                <svg 
                    v-if="!loading"
                    class="w-5 h-5 text-indigo-600 dark:text-indigo-400 transition-transform duration-200"
                    :style="{ 
                        transform: `rotate(${pullProgress * 180}deg)`,
                        opacity: pullProgress,
                    }"
                    fill="none" 
                    stroke="currentColor" 
                    viewBox="0 0 24 24"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                
                <!-- Spinner de carga -->
                <svg 
                    v-else
                    class="w-5 h-5 text-indigo-600 dark:text-indigo-400"
                    fill="none" 
                    viewBox="0 0 24 24"
                >
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
                </svg>
            </div>
        </div>
        
        <!-- Contenido -->
        <div 
            class="relative"
            :class="{ 'transition-transform duration-300 ease-out': !isPulling }"
            :style="{ 
                transform: `translateY(${pullDistance}px)`,
            }"
        >
            <slot />
        </div>
    </div>
</template>
