@props(['events'])

@php
    use Illuminate\Support\Facades\Route;

    $activeSlug = 'todos'; // Por defecto, 'todos' está activo

    // Verificar si la ruta actual es 'highlights'
    if (Route::is('highlights')) {
        // Obtener el slug de la ruta actual
        $activeSlug = Route::current()->parameter('slug');
    }
@endphp
<div class="tabs-wrapper relative">
    <!-- Controles de navegación -->
    <button id="prevTab"
        class="tab-control left-0 absolute top-1/2 transform -translate-y-1/2 bg-white/80 rounded-full p-1 shadow-md z-10 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="text-primary-600">
            <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
    </button>

    <div id="tabContainer" class="flex mt-4 relative overflow-hidden" style="-webkit-overflow-scrolling: touch;">

        <div id="tabsSlider" class="flex transition-transform duration-300 ease-out w-full ">
            <a href="/"
                class="tab-link flex-shrink-0 px-3 py-2 mx-2 {{ $activeSlug === 'todos' ? 'border-b-2 border-primary-200' : '' }}"
                data-tab="todos">
                Todos
            </a>
            @php
                $currentPath = request()->path();
                $segments = explode('/', $currentPath);
                $slug = end($segments);
                $ubicacion = empty($slug) ? env('APP_PAIS') : $slug;
            @endphp
            {{-- @dd($ubicacion) --}}
            @foreach ($events['categories'] as $festividad)
                <a href="{{ route('highlights', ['slug' => $festividad['slug'], 'ubicaciones' => $ubicacion]) }}"
                    class="tab-link flex-shrink-0 px-3 py-2 mr-2 {{ $activeSlug === $festividad['slug'] ? 'border-b-2 border-primary-200' : '' }}"
                    data-tab="{{ $festividad['slug'] }}">
                    {{ $festividad['name'] }}
                </a>
            @endforeach
        </div>
    </div>

    <button id="nextTab"
        class="tab-control right-0 absolute top-1/2 transform -translate-y-1/2 bg-white/80 rounded-full p-1 shadow-md z-10 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="text-primary-600">
            <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
    </button>
</div>


<script>
    document.addEventListener("DOMContentLoaded", () => {
        const container = document.getElementById("tabContainer");
        const slider = document.getElementById("tabsSlider");
        const prevBtn = document.getElementById("prevTab");
        const nextBtn = document.getElementById("nextTab");
        const tabs = document.querySelectorAll(".tab-link");

        let currentIndex = 0;
        let startX = 0;
        let isDragging = false;
        let transitionInProgress = false;
        let startTranslate = 0;
        let containerWidth = container.offsetWidth;
        let tabCount = tabs.length;
        let visibleTabs = 0;
        let sliderWidth = 0;

        // Inicializar el estado activo
        tabs[0].classList.add("active");

        // Función para actualizar dimensiones responsivas
        function updateDimensions() {
            containerWidth = container.offsetWidth;
            sliderWidth = slider.scrollWidth;

            // Calcular cuántos tabs son visibles en el viewport actual
            let totalWidth = 0;
            let visibleTabCount = 0;

            for (let i = 0; i < tabs.length; i++) {
                totalWidth += tabs[i].offsetWidth + parseInt(getComputedStyle(tabs[i]).marginRight);
                visibleTabCount++;

                if (totalWidth > containerWidth) {
                    visibleTabCount--;
                    break;
                }
            }

            visibleTabs = Math.max(1, visibleTabCount);

            // Actualizar visibilidad de los botones
            updateNavButtons();
        }

        // Función para actualizar la visibilidad de los botones de navegación
        function updateNavButtons() {
            const maxIndex = Math.max(0, tabCount - visibleTabs);

            // Ocultar el botón "anterior" si estamos al inicio
            if (currentIndex <= 0) {
                prevBtn.classList.add("opacity-0", "pointer-events-none");
            } else {
                prevBtn.classList.remove("opacity-0", "pointer-events-none");
            }

            // Ocultar el botón "siguiente" si estamos al final
            if (currentIndex >= maxIndex || sliderWidth <= containerWidth) {
                nextBtn.classList.add("opacity-0", "pointer-events-none");
            } else {
                nextBtn.classList.remove("opacity-0", "pointer-events-none");
            }
        }

        // Función para activar un tab específico
        function activateTab(tab) {
            tabs.forEach(t => t.classList.remove("active"));
            tab.classList.add("active");
        }

        // Función para desplazarse a un tab específico
        function goToTab(index) {
            if (transitionInProgress) return;

            // Ajuste: Calcular el índice máximo correctamente
            const maxIndex = tabCount - 1;
            currentIndex = Math.max(0, Math.min(index, maxIndex));

            // Calcular la posición de desplazamiento
            let offsetX = 0;

            // Corregido: Calcular el offset hasta el tab actual
            for (let i = 0; i < currentIndex; i++) {
                offsetX += tabs[i].offsetWidth + parseInt(getComputedStyle(tabs[i]).marginRight);
            }

            // Corregido: Asegurar que el último tab sea completamente visible
            if (currentIndex >= tabCount - visibleTabs) {
                offsetX = sliderWidth - containerWidth;
            }

            // Corregido: Asegurar que no sobrepase el límite
            offsetX = Math.max(0, Math.min(offsetX, sliderWidth - containerWidth));

            // Aplicar transformación con animación
            transitionInProgress = true;
            slider.style.transition = "transform 300ms ease-out";
            slider.style.transform = `translateX(-${offsetX}px)`;

            // Actualizar botones de navegación
            updateNavButtons();

            // Restablecer el flag después de la transición
            setTimeout(() => {
                transitionInProgress = false;
            }, 300);
        }

        // Inicializar y actualizar en respuesta a cambios de tamaño
        updateDimensions();
        window.addEventListener("resize", () => {
            updateDimensions();
            // Corregido: Mantener visible el tab activo después del redimensionamiento
            const activeTab = document.querySelector(".tab-link.active");
            const activeIndex = Array.from(tabs).indexOf(activeTab);
            if (activeIndex >= 0) {
                goToTab(activeIndex);
            } else {
                goToTab(currentIndex);
            }
        });

        // Navegación con botones
        prevBtn.addEventListener("click", () => {
            goToTab(currentIndex - 1);
        });

        nextBtn.addEventListener("click", () => {
            // Corregido: Asegurar que el botón siguiente avance siempre al menos un tab
            goToTab(currentIndex + 1);
        });

        // Corregido: Añadir evento especial para navegar al último tab
        function goToLastTab() {
            goToTab(tabCount - 1);
        }

        // Eventos táctiles para dispositivos móviles
        function handleTouchStart(e) {
            if (sliderWidth <= containerWidth) return; // No hacer nada si todo es visible
            startX = e.touches[0].clientX;
            isDragging = true;
            startTranslate = getCurrentTranslate();

            // Quitar transición durante el arrastre
            slider.style.transition = "none";
        }

        function handleTouchMove(e) {
            if (!isDragging) return;

            const currentX = e.touches[0].clientX;
            const diff = currentX - startX;
            const newTranslate = startTranslate - diff;

            // Limitar el arrastre para evitar desplazamientos excesivos
            const maxTranslate = sliderWidth - containerWidth;

            if (newTranslate < -20) {
                // Resistencia al principio
                slider.style.transform = `translateX(${-newTranslate * 0.2}px)`;
            } else if (newTranslate > maxTranslate + 20) {
                // Resistencia al final
                slider.style.transform = `translateX(-${maxTranslate + (newTranslate - maxTranslate) * 0.2}px)`;
            } else {
                slider.style.transform = `translateX(-${newTranslate}px)`;
            }
        }

        function handleTouchEnd(e) {
            if (!isDragging) return;
            isDragging = false;

            // Restaurar transición
            slider.style.transition = "transform 300ms ease-out";

            const currentX = e.changedTouches[0].clientX;
            const diff = currentX - startX;
            const threshold = containerWidth * 0.1; // 10% del ancho como umbral

            // Determinar el índice del tab más cercano a la posición actual
            const currentTranslate = getCurrentTranslate();
            let targetIndex = currentIndex;

            if (Math.abs(diff) > threshold) {
                if (diff > 0) {
                    // Deslizó hacia la derecha, ir al tab anterior
                    targetIndex = currentIndex - 1;
                } else {
                    // Deslizó hacia la izquierda, ir al tab siguiente
                    targetIndex = currentIndex + 1;
                }
            }

            // Corregido: Comprobar si estamos cerca del final para mostrar el último tab
            const isNearEnd = currentTranslate > sliderWidth - containerWidth - 50;
            if (isNearEnd && diff < 0) {
                goToLastTab();
            } else {
                goToTab(targetIndex);
            }
        }

        // Función auxiliar para obtener la transformación actual
        function getCurrentTranslate() {
            const transform = window.getComputedStyle(slider).getPropertyValue("transform");
            const matrix = new DOMMatrixReadOnly(transform);
            return -matrix.m41; // El valor negativo de la transformación X
        }

        // Agregar eventos táctiles
        slider.addEventListener("touchstart", handleTouchStart, {
            passive: true
        });
        slider.addEventListener("touchmove", handleTouchMove, {
            passive: true
        });
        slider.addEventListener("touchend", handleTouchEnd);

        // Manejar clics en los tabs
        tabs.forEach((tab, index) => {
            tab.addEventListener("click", (e) => {
                // Si es un enlace interno, prevenir comportamiento predeterminado
                if (tab.getAttribute("href").startsWith("#")) {
                    e.preventDefault();
                }

                activateTab(tab);

                // Corregido: Asegurar que el tab seleccionado sea visible
                goToTab(index);
            });
        });

        // Inicializar con todos los tabs visibles si es posible
        if (sliderWidth <= containerWidth) {
            slider.style.transform = "translateX(0)";
        }
    });
</script>



<style>
    .tabs-wrapper {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    #tabContainer {
        width: 100%;
    }

    .tab-link {
        position: relative;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 9999px;
        background-color: #f3f4f6;
        color: #6b7280;
        white-space: nowrap;
    }

    .tab-link.active {
        background-color: #7e22ce !important;
        color: white !important;
        font-weight: 500 !important;
    }

    .active-border {
        position: absolute;
        bottom: -4px;
        /* Ajusta según sea necesario */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: #bb86fc;
        /* Color primary-200 */
        transition: width 0.3s ease;
    }

    .active-border.active {
        width: 100%;
        /* El borde se expande cuando el tab está activo */
    }

    .tab-control {
        width: 32px;
        height: 32px;
        transition: opacity 0.3s ease;
        opacity: 0.8;
    }

    .tab-control:hover {
        opacity: 1;
    }

    @media (max-width: 640px) {
        .tab-control {
            width: 28px;
            height: 28px;
        }

        .tab-link {
            font-size: 0.9rem;
            padding: 0.25rem 0.75rem;
        }
    }
</style>