// SLIDESHOW CAROUSEL CARDS
//==========================================

// Função global para os cartões de flip
window.flipCardData = function () {
    return {
        isActive: false,
        touchStartX: 0,
        touchStartY: 0,
        handleTouchEnd(event) {
            const touchEndX = event.changedTouches[0].clientX;
            const touchEndY = event.changedTouches[0].clientY;

            const deltaX = Math.abs(touchEndX - this.touchStartX);
            const deltaY = Math.abs(touchEndY - this.touchStartY);

            const threshold = 10; // px

            if (deltaX < threshold && deltaY < threshold) {
                // É um tap
                this.isActive = !this.isActive;
                event.preventDefault(); // Previne que o carousel interprete como swipe
            }
        }
    };
}

// Função de Inicialização do Carousel (já implementada)
window.initializeCarouselById = function (id, openModalCallback = null) {
    const carouselElement = document.getElementById(id);
    if (!carouselElement) {
        console.error(`Elemento com ID '${id}' não foi encontrado.`);
        return;
    }

    // Se o callback não for passado, tente usar window.openModal
    if (!openModalCallback && window.openModal) {
        openModalCallback = window.openModal;
    }

    window.initializeCarousel(carouselElement, openModalCallback);
}

window.initializeCarousel = function (carouselElement, openModalCallback = null) {
    console.log("Inicializando carousel...");
    console.log("carouselElement:", carouselElement);
    console.log("openModalCallback:", openModalCallback);

    if (!carouselElement) {
        console.error("carouselElement não foi encontrado.");
        return;
    }

    let currentIndex = 0; // Índice do slide atual
    let slideWidth = getSlideWidth(); // Largura inicial do slide
    const slides = carouselElement.querySelector('.slides'); // Container dos slides
    const slideItems = carouselElement.querySelectorAll('.slide-flip'); // Cada slide individual
    const totalSlides = slideItems.length; // Número total de slides
    let startX = 0, endX = 0; // Variáveis para o swipe

    // Função para obter a largura do slide
    function getSlideWidth() {
        return window.innerWidth <= 768
            ? parseInt(carouselElement.getAttribute('data-slide-widths-mobile')) // Mobile
            : parseInt(carouselElement.getAttribute('data-slide-width')); // Desktop
    }

    // Largura do viewport do carrossel
    function getViewportWidth() {
        return carouselElement.getBoundingClientRect().width;
    }

    // Calcula o último índice permitido para evitar espaço vazio à direita
    function getMaxIndex() {
        const viewport = getViewportWidth();
        const visible = Math.max(1, Math.floor(viewport / slideWidth));
        return Math.max(0, totalSlides - visible);
    }

    // Atualiza a largura dos slides quando o tamanho da janela muda
    function updateSlideWidths() {
        slideWidth = getSlideWidth(); // Recalcula a largura
        slideItems.forEach(slide => slide.style.width = `${slideWidth}px`);
        // Garante que o índice atual não ultrapassa o máximo permitido
        currentIndex = Math.min(currentIndex, getMaxIndex());
        moveSlideCarousel(currentIndex); // Atualiza a posição do carrossel
    }

    // Função que move o carrossel
    function moveSlideCarousel(newIndex) {
        const maxIndex = getMaxIndex();
        currentIndex = Math.max(0, Math.min(newIndex, maxIndex));
        slides.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
        updateCarouselButtons();
    }

    // Função que atualiza a opacidade dos botões "prev" e "next"
    function updateCarouselButtons() {
        const prevButton = carouselElement.querySelector('.prev');
        const nextButton = carouselElement.querySelector('.next');
        if (prevButton && nextButton) {
            const maxIndex = getMaxIndex();
            prevButton.classList.toggle('opacity-50', currentIndex === 0);
            nextButton.classList.toggle('opacity-50', currentIndex === maxIndex);
        }
    }

    // Referências aos botões de navegação
    const nextButton = carouselElement.querySelector('.next');
    const prevButton = carouselElement.querySelector('.prev');

    if (!nextButton || !prevButton) {
        console.error("Botões de navegação não encontrados no carouselElement.");
        return;
    }

    // Adiciona eventos de clique para os botões de navegação
    nextButton.addEventListener('click', () => moveSlideCarousel(currentIndex + 1));
    prevButton.addEventListener('click', () => moveSlideCarousel(currentIndex - 1));

    // Recalcula em resize
    window.addEventListener('resize', updateSlideWidths);

    // Inicializa larguras na criação
    updateSlideWidths();

    // Eventos para o swipe (toque) nos slides
    slides.addEventListener('touchstart', (e) => {
        const touch = e.touches[0];
        startX = touch.clientX;
    });

    slides.addEventListener('touchmove', (e) => {
        endX = e.touches[0].clientX;
    });

    slides.addEventListener('touchend', (e) => {
        const swipeDistance = endX - startX;
        const swipeThreshold = 50;
        console.log('Swipe distance:', swipeDistance);

        // Verifica se o evento já foi prevenido por um cartão de flip
        if (e.defaultPrevented) {
            // O evento foi prevenido, não faça nada
            return;
        }

        if (swipeDistance > swipeThreshold) moveSlideCarousel(currentIndex - 1);
        else if (swipeDistance < -swipeThreshold) moveSlideCarousel(currentIndex + 1);
        startX = 0;
        endX = 0;
    });

    // Adiciona evento de clique a cada slide para abrir a modal
    slideItems.forEach((slide, index) => {
        slide.style.width = `${slideWidth}px`;
        if (openModalCallback) {
            slide.addEventListener('click', () => openModalCallback(index, slideItems));
        }
    });

    // Atualiza a largura dos slides quando a janela é redimensionada
    window.addEventListener('resize', updateSlideWidths);

    // Define a largura inicial dos slides
    updateSlideWidths();
}


window.initializeModal = function(modalId) {
    const modalElement = document.getElementById(modalId);
    if (!modalElement) {
        console.error(`Elemento com ID '${modalId}' não foi encontrado.`);
        return;
    }

    const modalImage = modalElement.querySelector('#modalImage'); // Imagem no modal
    const modalPrev = modalElement.querySelector('#modalPrev'); // Botão prev no modal
    const modalNext = modalElement.querySelector('#modalNext'); // Botão next no modal
    const thumbnailsContainer = modalElement.querySelector('#thumbnails'); // Container de thumbnails
    let modalIndex = 0; // Índice da imagem atual no modal
    let slideItems = []; // Referência aos slides do carrossel ou galeria

    // Abre o modal fullscreen com a imagem correspondente ao índice
    function openModal(index, items) {
        modalIndex = index;
        slideItems = items;
        updateModalImage();
        updateModalButtons();
        createThumbnails();
        modalElement.classList.remove('hidden'); // Mostra o modal
        document.body.classList.add('overflow-hidden'); // Desativa o scroll da página
    }

    // Fecha o modal
    modalElement.querySelector('#closeFullscreenModal').addEventListener('click', () => {
        modalElement.classList.add('hidden');
        document.body.classList.remove('overflow-hidden'); // Restaura o scroll da página
    });

    // Atualiza a imagem no modal
    function updateModalImage() {
        const currentSlide = slideItems[modalIndex].querySelector('img');
        modalImage.src = currentSlide.src;
        modalImage.alt = currentSlide.alt;
    }

    // Atualiza os botões "prev" e "next"
    function updateModalButtons() {
        modalPrev.classList.toggle('opacity-50', modalIndex === 0);
        modalNext.classList.toggle('opacity-50', modalIndex === slideItems.length - 1);
    }

    // Cria thumbnails e adiciona eventos de navegação
    function createThumbnails() {
        thumbnailsContainer.innerHTML = ''; // Limpa thumbnails anteriores
        slideItems.forEach((slide, index) => {
            const imgSrc = slide.querySelector('img').src;
            const thumbnail = document.createElement('img');
            thumbnail.src = imgSrc;
            thumbnail.classList.add('w-16', 'h-16', 'object-cover', 'cursor-pointer', 'border-2', 'border-transparent', 'rounded');
            thumbnail.addEventListener('click', () => {
                modalIndex = index;
                updateModalImage();
                updateModalButtons();
                updateThumbnails();
            });
            thumbnailsContainer.appendChild(thumbnail);
        });
        updateThumbnails();
    }

    // Atualiza a borda dos thumbnails
    function updateThumbnails() {
        const thumbnails = thumbnailsContainer.querySelectorAll('img');
        thumbnails.forEach((thumbnail, index) => {
            thumbnail.classList.remove('border-white');
            if (index === modalIndex) thumbnail.classList.add('border-white');
        });
    }

    // Adiciona eventos de navegação (prev/next)
    modalNext.addEventListener('click', () => {
        if (modalIndex < slideItems.length - 1) {
            modalIndex++;
            updateModalImage();
            updateModalButtons();
            updateThumbnails();
        }
    });

    modalPrev.addEventListener('click', () => {
        if (modalIndex > 0) {
            modalIndex--;
            updateModalImage();
            updateModalButtons();
            updateThumbnails();
        }
    });

    // Expor a função openModal globalmente
    window.openModal = openModal;
}

//==========================================
// END SLIDESHOW CAROUSEL


// AGENTS SLIDESHOW
//==========================================

window.sliderFunctions = {
    currentIndex: null,
    touchStartX: 0,
    touchEndX: 0,

    setCurrentIndex: function(index) {
        this.currentIndex = index;
    },

    handleGesture: function() {
        const threshold = 50;
        if (this.touchEndX < this.touchStartX - threshold) {
            document.getElementById('nextSlide').click();
        } else if (this.touchEndX > this.touchStartX + threshold) {
            document.getElementById('prevSlide').click();
        }
    },

    initializeSlider: function() {
        const slides = document.querySelectorAll('.slide');
        const slider = document.getElementById('slider');
        const prevButton = document.getElementById('prevSlide');
        const nextButton = document.getElementById('nextSlide');

        if (slides.length === 0) {
            requestAnimationFrame(this.initializeSlider.bind(this));
            return;
        }

        this.currentIndex = Math.floor(Math.random() * slides.length);

        const clearClasses = () => {
            slides.forEach(slide => {
                slide.classList.remove(
                    'center-slide', 'left-slide', 'right-slide',
                    'far-left-slide', 'far-right-slide', 'hidden-slide', 'h-80'
                );
            });
        };

        const updateSlides = () => {
            clearClasses();

            const numSlides = slides.length;

            // Garantir que currentIndex está dentro dos limites
            if (this.currentIndex >= numSlides) {
                this.currentIndex = 0;
            } else if (this.currentIndex < 0) {
                this.currentIndex = numSlides - 1;
            }

            // Ocultar botões de navegação se houver apenas um slide
            if (numSlides === 1) {
                prevButton.style.display = 'none';
                nextButton.style.display = 'none';

                // Centralizar o único slide
                slides[0].classList.add('center-slide');
            } else {
                // Mostrar botões de navegação
                prevButton.style.display = 'flex';
                nextButton.style.display = 'flex';

                if (numSlides === 2) {
                    // Dois slides: centralizar um e mostrar o outro à direita
                    slides[this.currentIndex].classList.add('center-slide');
                    slides[(this.currentIndex + 1) % numSlides].classList.add('right-slide');
                } else if (numSlides === 3) {
                    // Três slides: centralizar um, um à esquerda e um à direita
                    slides[this.currentIndex].classList.add('center-slide');
                    slides[(this.currentIndex + 1) % numSlides].classList.add('right-slide');
                    slides[(this.currentIndex - 1 + numSlides) % numSlides].classList.add('left-slide');
                } else {
                    // Quatro ou mais slides: lógica padrão
                    slides.forEach((slide, index) => {
                        const relativeIndex = (index - this.currentIndex + numSlides) % numSlides;
                        if (relativeIndex === 0) {
                            slide.classList.add('center-slide');
                        } else if (relativeIndex === 1) {
                            slide.classList.add('right-slide');
                        } else if (relativeIndex === 2) {
                            slide.classList.add('far-right-slide');
                        } else if (relativeIndex === numSlides - 1) {
                            slide.classList.add('left-slide');
                        } else if (relativeIndex === numSlides - 2) {
                            slide.classList.add('far-left-slide');
                        } else {
                            slide.classList.add('hidden-slide');
                        }
                    });
                }
            }
        };

        // Remover event listeners existentes para evitar múltiplas vinculações
        prevButton.replaceWith(prevButton.cloneNode(true));
        nextButton.replaceWith(nextButton.cloneNode(true));

        // Reatribuir os botões após clonagem
        const newPrevButton = document.getElementById('prevSlide');
        const newNextButton = document.getElementById('nextSlide');

        // slider.addEventListener('touchstart', (e) => {
        //     this.touchStartX = e.changedTouches[0].screenX;
        // });
        //
        // slider.addEventListener('touchmove', (e) => {
        //     this.touchEndX = e.changedTouches[0].screenX;
        // });
        //
        // slider.addEventListener('touchend', () => {
        //     this.handleGesture();
        // });

        slider.addEventListener('touchstart', (e) => {
            if (e.target.closest('.slide__btn')) return; // Ignore touch events on the button
            this.touchStartX = e.changedTouches[0].screenX;
        });

        slider.addEventListener('touchmove', (e) => {
            if (e.target.closest('.slide__btn')) return;
            this.touchEndX = e.changedTouches[0].screenX;
        });

        slider.addEventListener('touchend', (e) => {
            if (e.target.closest('.slide__btn')) return;
            this.handleGesture();
        });


        newNextButton.addEventListener('click', () => {
            this.currentIndex = (this.currentIndex + 1) % slides.length;
            updateSlides();
        });

        newPrevButton.addEventListener('click', () => {
            this.currentIndex = (this.currentIndex - 1 + slides.length) % slides.length;
            updateSlides();
        });

        updateSlides();
    },

    getSearchInputValue: function() {
        return document.getElementById("agentSearchInput").value;
    }
};


//==========================================
// END AGENTS SLIDESHOW