/**
 * Havenlytics Frontend JavaScript - Refactored for Templates
 * 
 * @package     Havenlytics
 * @version     2.2.0
 */

(function($) {
    'use strict';

    class HavenlyticsFrontend {
        constructor() {
            this.init();
        }
        
        init() {
            this.initializeComponents();
            this.bindEvents();
        }
        
        initializeComponents() {
            this.initViewToggle();
            this.initFilterToggles();
            this.initRangeSliders();
            this.initMobileMenu();
            this.initSearchTabs();
            this.initFavoriteButtons();
            this.initCheckboxes();
            this.initMultiSelectDropdowns();
            this.initPropertyGalleryCarousels();
        }
        
        bindEvents() {
            this.bindGlobalEvents();
        }
        
        // ======================
        // VIEW TOGGLE FUNCTIONALITY
        // ======================
        initViewToggle() {
            const viewButtons = document.querySelectorAll('.hvnly-property-view-btn');
            const propertyGrid = document.querySelector('.hvnly-property-grid-view');

            if (!viewButtons.length || !propertyGrid) return;

            this.setView = (viewType) => {
                const propertyGrid = document.querySelector('.hvnly-property-grid-view');
                const mapPlaceholder = document.getElementById('hvnly-map-placeholder');

                if (!propertyGrid) return;

                // Reset classes
                propertyGrid.classList.remove('hvnly-grid-view', 'grid-view', 'hvnly-list-view', 'list-view', 'map-view');

                if (viewType === 'grid') {
                    propertyGrid.classList.add('hvnly-grid-view', 'grid-view');
                    propertyGrid.style.display = 'grid';
                    propertyGrid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(350px, 1fr))';
                    propertyGrid.style.gap = '20px';
                    
                    // Hide map placeholder
                    if (mapPlaceholder) {
                        mapPlaceholder.style.display = 'none';
                    }
                } else if (viewType === 'list') {
                    propertyGrid.classList.add('hvnly-list-view', 'list-view');
                    propertyGrid.style.display = 'flex';
                    propertyGrid.style.flexDirection = 'column';
                    propertyGrid.style.gap = '20px';
                    
                    // Hide map placeholder
                    if (mapPlaceholder) {
                        mapPlaceholder.style.display = 'none';
                    }
                } else if (viewType === 'map') {
                    propertyGrid.classList.add('map-view');
                    propertyGrid.style.display = 'none';
                    
                    // Show map placeholder and load map
                    if (mapPlaceholder) {
                        mapPlaceholder.style.display = 'block';
                        this.triggerMapLoad();
                    }
                }
            };

            const activeButton = document.querySelector('.hvnly-property-view-btn.active');
            if (activeButton) {
                this.setView(activeButton.getAttribute('data-view'));
            }

            viewButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const viewType = button.getAttribute('data-view');

                    viewButtons.forEach(btn => btn.classList.remove('active'));
                    button.classList.add('active');

                    this.setView(viewType);
                });
            });
        }

        /**
         * Load map view - delegates to map JS handler
         */
        loadMapView() {
            const mapPlaceholder = document.getElementById('hvnly-map-placeholder');
            if (!mapPlaceholder) return;
            
            mapPlaceholder.style.display = 'block';
            this.triggerMapLoad();
        }

        triggerMapLoad() {
            const mapInstance = window.HavenlyticsPropertyMap || window.HvnlyPropertyMap;
            
            if (mapInstance && typeof mapInstance.loadPropertyMap === 'function') {
                setTimeout(() => {
                    mapInstance.loadPropertyMap();
                }, 100);
            }
        }
        
        // ======================
        // FILTER TOGGLES
        // ======================
        initFilterToggles() {
            const self = this;
            
            $(document).on('click', '.hvnly-property-filter-group-header', function() {
                const $header = $(this);
                const $group = $header.closest('.hvnly-property-filter-group');
                const $content = $header.next('.hvnly-property-filter-group-content');
                
                if ($content.length) {
                    const isCollapsed = $group.hasClass('collapsed');
                    
                    if (isCollapsed) {
                        $group.removeClass('collapsed');
                        $content.slideDown(300);
                        $header.find('.hvnly-property-filter-group-toggle i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
                    } else {
                        $group.addClass('collapsed');
                        $content.slideUp(300);
                        $header.find('.hvnly-property-filter-group-toggle i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
                    }
                }
            });
            
            this.initializeFilterGroups();
        }

        initializeFilterGroups() {
            $('.hvnly-property-filter-group').each(function() {
                const $group = $(this);
                const $content = $group.find('.hvnly-property-filter-group-content');
                const $header = $group.find('.hvnly-property-filter-group-header');
                
                $group.addClass('collapsed');
                $content.hide();
                $header.find('.hvnly-property-filter-group-toggle i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
            });
        }
      
        // ======================
        // RANGE SLIDERS
        // ======================
        initRangeSliders() {
            const rangeSliders = document.querySelectorAll('.hvnly-property-range');
            const progress = document.getElementById('hvnly-price-progress');
            
            const updateProgress = () => {
                if (!progress) return;
                
                const minInput = document.querySelector('.hvnly-property-range[data-filter="min_price"]');
                const maxInput = document.querySelector('.hvnly-property-range[data-filter="max_price"]');
                
                if (minInput && maxInput) {
                    const minVal = parseInt(minInput.value);
                    const maxVal = parseInt(maxInput.value);
                    const maxRange = parseInt(maxInput.max);
                    
                    const left = (minVal / maxRange) * 100;
                    const right = 100 - (maxVal / maxRange) * 100;
                    
                    progress.style.left = left + '%';
                    progress.style.right = right + '%';
                }
            };
            
            rangeSliders.forEach(slider => {
                const values = slider.closest('.hvnly-property-range-slider').querySelector('.hvnly-property-range-values');
                
                slider.addEventListener('input', () => {
                    const minInput = document.querySelector('.hvnly-property-range[data-filter="min_price"]');
                    const maxInput = document.querySelector('.hvnly-property-range[data-filter="max_price"]');
                    
                    if (slider.getAttribute('data-filter') === 'min_price' && minInput && maxInput) {
                        const minVal = parseInt(minInput.value);
                        const maxVal = parseInt(maxInput.value);
                        if (minVal > maxVal) {
                            minInput.value = maxVal;
                        }
                    }
                    
                    if (slider.getAttribute('data-filter') === 'max_price' && minInput && maxInput) {
                        const minVal = parseInt(minInput.value);
                        const maxVal = parseInt(maxInput.value);
                        if (maxVal < minVal) {
                            maxInput.value = minVal;
                        }
                    }
                    
                    if (values) {
                        const minValue = values.querySelector('span:first-child');
                        const maxValue = values.querySelector('span:last-child');
                        
                        if (slider.getAttribute('data-filter') === 'min_price' && minValue) {
                            minValue.textContent = this.formatPrice(slider.value);
                        } else {
                            if (maxValue) maxValue.textContent = this.formatPrice(slider.value);
                        }
                    }
                    
                    updateProgress();
                });
            });
            
            updateProgress();
        }

        formatPrice(price) {
            const numericPrice = parseInt(price);
            return '$' + numericPrice.toLocaleString();
        }

        // ======================
        // MOBILE MENU
        // ======================
        initMobileMenu() {
            const mobileMenuToggle = document.querySelector('.hvnly-mobile-menu-toggle');
            const mobileMenu = document.querySelector('.hvnly-mobile-menu');
            
            if (mobileMenuToggle && mobileMenu) {
                mobileMenuToggle.addEventListener('click', () => {
                    mobileMenu.classList.toggle('active');
                    mobileMenuToggle.classList.toggle('active');
                });
            }
        }

        // ======================
        // SEARCH TABS
        // ======================
        initSearchTabs() {
            const searchTabs = document.querySelectorAll('.hvnly-search-tab');

            searchTabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const value = tab.getAttribute('data-value');

                    searchTabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');

                    const propertyTypeInput = document.getElementById('property_type');
                    if (propertyTypeInput) {
                        propertyTypeInput.value = value;
                    }
                });
            });
        }

        // ======================
        // FAVORITE BUTTONS
        // ======================
        initFavoriteButtons() {
            this.setupFavoriteButtonListeners();
            
            $(document).on('hvnly-properties-updated', () => {
                this.setupFavoriteButtonListeners();
            });
        }

        setupFavoriteButtonListeners() {
            const favoriteButtons = document.querySelectorAll('.hvnly-property--grid-list--favorite, .hvnly-property--grid-list--action-btn:first-child');
            
            favoriteButtons.forEach(button => {
                button.replaceWith(button.cloneNode(true));
            });

            const newFavoriteButtons = document.querySelectorAll('.hvnly-property--grid-list--favorite, .hvnly-property--grid-list--action-btn:first-child');
            
            newFavoriteButtons.forEach(button => {
                button.addEventListener('click', (e) => {
                    e.preventDefault();
                    const icon = button.querySelector('i');
                    const propertyId = button.getAttribute('data-property-id');
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        icon.style.color = 'var(--hvnlytics-alert)';
                        this.addToFavorites(propertyId);
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        icon.style.color = '';
                        this.removeFromFavorites(propertyId);
                    }
                });
            });
        }

        addToFavorites(propertyId) {
            // console.log('Adding property to favorites:', propertyId);
        }

        removeFromFavorites(propertyId) {
            // console.log('Removing property from favorites:', propertyId);
        }

        // ======================
        // CHECKBOXES
        // ======================
        initCheckboxes() {
            // Initialize states
            this._initCheckboxStates();
            
            // Remove ALL click handlers first
            $(document).off('click', '.hvnly-property-checkbox-label');
            $(document).off('click', '.hvnly-property-filter-checkbox');
            
            // Use event delegation with proper handling
            $(document).on('click', '.hvnly-property-checkbox-label', function(e) {
                const $label = $(this);
                const $input = $label.find('input[type="checkbox"]');
                
                if ($input.length) {
                    // Check if we clicked on the input itself
                    if (e.target === $input[0]) {
                        // Browser handles it, just update UI
                        const $checkbox = $input.closest('.hvnly-property-filter-checkbox');
                        setTimeout(() => {
                            $checkbox.toggleClass('checked', $input.is(':checked'));
                        }, 0);
                        return true;
                    }
                    
                    // Otherwise, toggle manually
                    e.preventDefault();
                    const newState = !$input.is(':checked');
                    $input.prop('checked', newState);
                    $input.closest('.hvnly-property-filter-checkbox').toggleClass('checked', newState);
                    $input.trigger('change');
                    return false;
                }
            });
            
            // Update after AJAX
            $(document).on('hvnly-properties-updated', () => {
                this._initCheckboxStates();
            });
        }

        _initCheckboxStates() {
            $('.hvnly-property-filter-checkbox').each(function() {
                const $checkbox = $(this);
                const $input = $checkbox.find('input[type="checkbox"]');
                $checkbox.toggleClass('checked', $input.is(':checked'));
            });
        }
        
        // ======================
        // MULTI-SELECT DROPDOWNS
        // ======================
        initMultiSelectDropdowns() {
            const multiSelectInputs = document.querySelectorAll('.hvnly-property-form-input-multiselect');
            
            multiSelectInputs.forEach(input => {
                this.updateSelectedItemsDisplay(input);
                
                input.addEventListener('focus', () => {
                    const dropdown = this.getDropdownForInput(input);
                    if (dropdown) {
                        dropdown.style.display = 'block';
                    }
                });

                input.addEventListener('input', () => {
                    const value = input.value.toLowerCase();
                    const dropdown = this.getDropdownForInput(input);
                    if (dropdown) {
                        const items = dropdown.querySelectorAll('li');
                        items.forEach(item => {
                            const text = item.textContent.toLowerCase();
                            if (text.includes(value)) {
                                item.style.display = 'block';
                            } else {
                                item.style.display = 'none';
                            }
                        });
                    }
                });
                
                const dropdown = this.getDropdownForInput(input);
                if (dropdown) {
                    const checkboxes = dropdown.querySelectorAll('input[type="checkbox"]');
                    checkboxes.forEach(checkbox => {
                        checkbox.addEventListener('change', () => {
                            this.updateSelectedItemsDisplay(input);
                        });
                    });
                }
            });

            const closeButtons = document.querySelectorAll('.hvnly-property-dropdown-tags-close');
            closeButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const dropdown = button.previousElementSibling;
                    if (dropdown && dropdown.classList.contains('.hvnly-property-taxonomyDropdown-items')) {
                        dropdown.style.display = 'none';
                    }
                });
            });

            const resetButtons = document.querySelectorAll('.hvnly-property-dropdown-reset');
            resetButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const dropdown = button.closest('.hvnly-property-taxonomyDropdown-items');
                    if (dropdown) {
                        const checkboxes = dropdown.querySelectorAll('input[type="checkbox"]');
                        checkboxes.forEach(checkbox => {
                            checkbox.checked = false;
                        });
                        const input = this.getInputForDropdown(dropdown);
                        if (input) {
                            this.updateSelectedItemsDisplay(input);
                        }
                    }
                });
            });
            
            document.addEventListener('click', (e) => {
                if (!e.target.closest('.hvnly-property-tax-multichebox')) {
                    document.querySelectorAll('.hvnly-property-taxonomyDropdown-items').forEach(dropdown => {
                        dropdown.style.display = 'none';
                    });
                }
            });
        }

        getDropdownForInput(input) {
            const container = input.closest('.hvnly-property-tax-multichebox');
            if (container) {
                return container.querySelector('.hvnly-property-taxonomyDropdown-items');
            }
            return null;
        }

        getInputForDropdown(dropdown) {
            const container = dropdown.closest('.hvnly-property-tax-multichebox');
            if (container) {
                return container.querySelector('.hvnly-property-form-input-multiselect');
            }
            return null;
        }

        updateSelectedItemsDisplay(input) {
            const container = input.closest('.hvnly-property-tax-multichebox');
            if (!container) return;
            
            const selectedContainer = container.querySelector('.hvnly-property-selected-items-container-tags');
            const dropdown = container.querySelector('.hvnly-property-taxonomyDropdown-items');
            
            if (!selectedContainer || !dropdown) return;
            
            const checkboxes = dropdown.querySelectorAll('input[type="checkbox"]:checked');
            const selectedItems = [];
            
            checkboxes.forEach(checkbox => {
                const label = checkbox.closest('label');
                const labelText = label.querySelector('.hvnly-property-checkbox-mlt-label').textContent;
                selectedItems.push({
                    text: labelText,
                    value: checkbox.value
                });
            });
            
            selectedContainer.innerHTML = '';
            selectedItems.forEach(item => {
                const itemElement = document.createElement('div');
                itemElement.className = 'hvnly-property-selected-single-item';
                itemElement.innerHTML = `
                    ${item.text}
                    <span class="hvnly-property-selected-single-item-remove" data-value="${item.value}">×</span>
                `;
                selectedContainer.appendChild(itemElement);
            });
            
            const self = this;
            selectedContainer.querySelectorAll('.hvnly-property-selected-single-item-remove').forEach(removeBtn => {
                removeBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const value = this.getAttribute('data-value');
                    const checkbox = dropdown.querySelector(`input[type="checkbox"][value="${value}"]`);
                    if (checkbox) {
                        checkbox.checked = false;
                        checkbox.dispatchEvent(new Event('change', { bubbles: true }));
                        self.updateSelectedItemsDisplay(input);
                    }
                });
            });
        }

        // ======================
        // PROPERTY GALLERY CAROUSELS WITH BLUR REMOVAL
        // ======================
        initPropertyGalleryCarousels() {
            const carousels = document.querySelectorAll('.hvnly-property-carousel-gallery');
            
            carousels.forEach((carousel, index) => {
                if (carousel.hasAttribute('data-initialized')) {
                    return;
                }
                
                const track = carousel.querySelector('.hvnly-property-carousel-track');
                const slides = carousel.querySelectorAll('.hvnly-property-carousel-slide');
                const prevBtn = carousel.querySelector('.hvnly-property-carousel-prev-btn');
                const nextBtn = carousel.querySelector('.hvnly-property-carousel-next-btn');
                const indicators = carousel.querySelectorAll('.hvnly-property-carousel-indicator');

                if (!track) {
                    return;
                }

                let currentIndex = 0;
                const totalSlides = slides.length;
                const isSingleSlide = totalSlides <= 1;
                
                carousel.setAttribute('data-initialized', 'true');

                const loadImagesAndRemoveBlur = () => {
                    const imagePromises = [];
                    
                    slides.forEach((slide, slideIndex) => {
                        const bgImage = slide.style.backgroundImage;
                        if (bgImage && bgImage !== 'none') {
                            const imageUrl = bgImage.slice(5, -2);
                            
                            const promise = new Promise((resolve) => {
                                const img = new Image();
                                img.onload = () => {
                                    setTimeout(() => {
                                        slide.classList.add('hvnly-image-loaded');
                                    }, 100 + (slideIndex * 50));
                                    resolve();
                                };
                                img.onerror = () => {
                                    setTimeout(() => {
                                        slide.classList.add('hvnly-image-loaded');
                                    }, 100 + (slideIndex * 50));
                                    resolve();
                                };
                                img.src = imageUrl;
                            });
                            
                            imagePromises.push(promise);
                        } else {
                            slide.classList.add('hvnly-image-loaded');
                        }
                    });
                    
                    return Promise.all(imagePromises);
                };

                loadImagesAndRemoveBlur();

                if (!isSingleSlide) {
                    const randomInterval = Math.floor(Math.random() * 5000) + 3000;

                    const updateCarousel = () => {
                        track.style.transform = `translateX(-${currentIndex * 100}%)`;
                        
                        indicators.forEach((indicator, idx) => {
                            if (idx === currentIndex) {
                                indicator.classList.add('hvnly-property-carousel-active');
                            } else {
                                indicator.classList.remove('hvnly-property-carousel-active');
                            }
                        });
                    };

                    const nextSlide = () => {
                        currentIndex = (currentIndex + 1) % totalSlides;
                        updateCarousel();
                    };

                    const prevSlide = () => {
                        currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                        updateCarousel();
                    };

                    const randomSlide = () => {
                        let randomIndex;
                        do {
                            randomIndex = Math.floor(Math.random() * totalSlides);
                        } while (randomIndex === currentIndex && totalSlides > 1);
                        
                        currentIndex = randomIndex;
                        updateCarousel();
                    };

                    updateCarousel();

                    if (nextBtn) {
                        nextBtn.addEventListener('click', (e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            nextSlide();
                        });
                    }

                    if (prevBtn) {
                        prevBtn.addEventListener('click', (e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            prevSlide();
                        });
                    }

                    indicators.forEach((indicator, idx) => {
                        indicator.addEventListener('click', (e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            currentIndex = idx;
                            updateCarousel();
                        });
                    });

                    let startX = 0;
                    let currentX = 0;
                    let isDragging = false;

                    const handleTouchStart = (e) => {
                        startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
                        isDragging = true;
                        track.style.transition = 'none';
                    };

                    const handleTouchMove = (e) => {
                        if (!isDragging) return;
                        
                        currentX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
                        const diff = startX - currentX;
                        
                        track.style.transform = `translateX(calc(-${currentIndex * 100}% - ${diff}px))`;
                    };

                    const handleTouchEnd = (e) => {
                        if (!isDragging) return;
                        
                        const endX = e.type === 'touchend' ? e.changedTouches[0].clientX : e.clientX;
                        const diff = startX - endX;
                        const swipeThreshold = 50;
                        
                        track.style.transition = 'transform 0.3s ease';
                        
                        if (Math.abs(diff) > swipeThreshold) {
                            if (diff > 0) {
                                nextSlide();
                            } else {
                                prevSlide();
                            }
                        } else {
                            updateCarousel();
                        }
                        
                        isDragging = false;
                    };

                    carousel.addEventListener('mousedown', handleTouchStart);
                    document.addEventListener('mousemove', handleTouchMove);
                    document.addEventListener('mouseup', handleTouchEnd);

                    carousel.addEventListener('touchstart', handleTouchStart, { passive: true });
                    document.addEventListener('touchmove', handleTouchMove, { passive: true });
                    document.addEventListener('touchend', handleTouchEnd);

                    let autoplayInterval = setInterval(() => {
                        randomSlide();
                    }, randomInterval);

                    carousel.addEventListener('mouseenter', () => {
                        clearInterval(autoplayInterval);
                    });

                    carousel.addEventListener('mouseleave', () => {
                        autoplayInterval = setInterval(() => {
                            randomSlide();
                        }, randomInterval);
                    });
                }
            });
        }

        bindGlobalEvents() {
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    this.closeAllModals();
                    this.closeAllDropdowns();
                }
            });
            
            document.addEventListener('click', (e) => {
                if (!e.target.closest('.hvnly-property-tax-multichebox')) {
                    this.closeAllDropdowns();
                }
                
                if (!e.target.closest('.hvnly-modal')) {
                    this.closeAllModals();
                }
            });
        }

        closeAllModals() {
            const modals = document.querySelectorAll('.hvnly-modal');
            modals.forEach(modal => {
                modal.style.display = 'none';
            });
        }

        closeAllDropdowns() {
            const dropdowns = document.querySelectorAll('.hvnly-property-taxonomyDropdown-items');
            dropdowns.forEach(dropdown => {
                dropdown.style.display = 'none';
            });
        }
    }

    $(document).ready(function() {
        window.havenlyticsFrontend = new HavenlyticsFrontend();
    });

    const initHavenlyticsFilterToggle = function() {
        const filterToggle = document.getElementById('hvnly-property-filter-toggle');
        const additionalFilters = document.getElementById('hvnly-property-additional-filters');
        
        if (filterToggle && additionalFilters) {
            filterToggle.addEventListener('click', function() {
                const isActive = additionalFilters.classList.contains('active');
                
                if (isActive) {
                    additionalFilters.classList.remove('active');
                    filterToggle.classList.remove('active');
                } else {
                    additionalFilters.classList.add('active');
                    filterToggle.classList.add('active');
                }
            });
        }
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initHavenlyticsFilterToggle);
    } else {
        initHavenlyticsFilterToggle();
    }

})(jQuery);