(function() {
    'use strict';
    
    const dropdownConfigs = [
        { fieldName: 'location_characteristics', label: 'Location Characteristics' },
        { fieldName: 'property_features', label: 'Property Features' },
        { fieldName: 'outdoor_features', label: 'Outdoor Features' },
        { fieldName: 'interior_features', label: 'Interior Features' },
        { fieldName: 'community_amenities', label: 'Community Amenities' },
        { fieldName: 'smart_home_features', label: 'Smart Home Features' },
{ fieldName: 'exterior_features', label: 'Exterior Features' },
{ fieldName: 'heating_cooling', label: 'Heating & Cooling' },
{ fieldName: 'estate_community_amenities', label: 'Estate / Community Amenities'},
{ fieldName: 'services_utilities', label: 'Services & Utilities'}

    ];

    function createCustomDropdown(fieldName, label) {
        const container = document.querySelector('[name="' + fieldName + '[]"]')?.closest('.jet-form-builder-row');
        if (!container) {
            console.log('Container not found for:', fieldName);
            return;
        }

        const checkboxGroup = container.querySelector('.jet-form-builder__fields-group');
        if (!checkboxGroup) {
            console.log('Checkbox group not found for:', fieldName);
            return;
        }

        const checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
        if (checkboxes.length === 0) {
            console.log('No checkboxes found for:', fieldName);
            return;
        }

        // Hide original checkbox group
        checkboxGroup.style.display = 'none';

        // Create wrapper
        const wrapper = document.createElement('div');
        wrapper.className = 'custom-dropdown-wrapper';
        wrapper.setAttribute('data-field', fieldName);

        // Create trigger button
        const trigger = document.createElement('button');
        trigger.type = 'button';
        trigger.className = 'custom-dropdown-trigger';
        trigger.innerHTML = '<span class="trigger-label">Select ' + label + '</span><span class="trigger-arrow">▼</span><span class="selection-count" style="display: none;">0</span>';

        // Create tags container
        const tagsContainer = document.createElement('div');
        tagsContainer.className = 'custom-dropdown-tags';
        tagsContainer.innerHTML = '<span class="tags-placeholder">No selections</span>';

        // Create dropdown panel
        const panel = document.createElement('div');
        panel.className = 'custom-dropdown-panel';

        // Search input
        const searchWrapper = document.createElement('div');
        searchWrapper.className = 'custom-dropdown-search-wrapper';
        const searchInput = document.createElement('input');
        searchInput.type = 'text';
        searchInput.className = 'custom-dropdown-search';
        searchInput.placeholder = 'Search options...';
        searchWrapper.appendChild(searchInput);

        // Action buttons
        const actionsDiv = document.createElement('div');
        actionsDiv.className = 'custom-dropdown-actions';
        const selectAllBtn = document.createElement('button');
        selectAllBtn.type = 'button';
        selectAllBtn.className = 'btn-select-all';
        selectAllBtn.textContent = 'Select All';
        const clearAllBtn = document.createElement('button');
        clearAllBtn.type = 'button';
        clearAllBtn.className = 'btn-clear-all';
        clearAllBtn.textContent = 'Clear All';
        actionsDiv.appendChild(selectAllBtn);
        actionsDiv.appendChild(clearAllBtn);

        // Checkbox grid
        const grid = document.createElement('div');
        grid.className = 'custom-dropdown-grid';

        // Create custom checkboxes
        checkboxes.forEach(function(originalCheckbox, index) {
            const labelText = originalCheckbox.nextElementSibling?.textContent || 
                              originalCheckbox.parentElement?.textContent?.trim() || 
                              originalCheckbox.value;

            const item = document.createElement('div');
            item.className = 'custom-checkbox-item';
            item.setAttribute('data-label', labelText.toLowerCase());
            item.setAttribute('data-index', index);
            item.setAttribute('tabindex', '0');
            item.setAttribute('role', 'option');
            item.setAttribute('aria-selected', originalCheckbox.checked ? 'true' : 'false');

            const checkbox = document.createElement('span');
            checkbox.className = 'custom-checkbox' + (originalCheckbox.checked ? ' checked' : '');

            const labelSpan = document.createElement('span');
            labelSpan.className = 'custom-checkbox-label';
            labelSpan.textContent = labelText;

            // Add tooltip for long labels
            if (labelText.length > 25) {
                item.setAttribute('data-tooltip', labelText);
                item.classList.add('has-tooltip');
            }

            item.appendChild(checkbox);
            item.appendChild(labelSpan);
            grid.appendChild(item);

            if (originalCheckbox.checked) {
                item.classList.add('selected');
            }

            // Click handler
            item.addEventListener('mousedown', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                const isChecked = !originalCheckbox.checked;
                originalCheckbox.checked = isChecked;
                checkbox.classList.toggle('checked', isChecked);
                item.classList.toggle('selected', isChecked);
                item.setAttribute('aria-selected', isChecked ? 'true' : 'false');
                
                originalCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
                updateSelectionCount();
                updateTags();
            });

            // Keyboard handler for individual items
            item.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    item.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
                }
            });
        });

        // No results message
        const noResults = document.createElement('div');
        noResults.className = 'custom-dropdown-no-results';
        noResults.textContent = 'No matching options';
        noResults.style.display = 'none';
        grid.appendChild(noResults);

        // Done button
        const doneWrapper = document.createElement('div');
        doneWrapper.className = 'custom-dropdown-done-wrapper';
        const doneBtn = document.createElement('button');
        doneBtn.type = 'button';
        doneBtn.className = 'btn-done';
        doneBtn.innerHTML = '✓ Done';
        doneWrapper.appendChild(doneBtn);

        // Assemble panel
        panel.appendChild(searchWrapper);
        panel.appendChild(actionsDiv);
        panel.appendChild(grid);
        panel.appendChild(doneWrapper);

        // Assemble wrapper
        wrapper.appendChild(trigger);
        wrapper.appendChild(tagsContainer);
        wrapper.appendChild(panel);

        // Insert after checkbox group
        checkboxGroup.parentNode.insertBefore(wrapper, checkboxGroup.nextSibling);

        // Update selection count
        function updateSelectionCount() {
            const count = Array.from(checkboxes).filter(cb => cb.checked).length;
            const countSpan = trigger.querySelector('.selection-count');
            if (count > 0) {
                countSpan.textContent = count;
                countSpan.style.display = 'inline-flex';
            } else {
                countSpan.style.display = 'none';
            }
        }

        // Update tags display
        function updateTags() {
            const selectedItems = [];
            checkboxes.forEach(function(cb) {
                if (cb.checked) {
                    const labelText = cb.nextElementSibling?.textContent || 
                                      cb.parentElement?.textContent?.trim() || 
                                      cb.value;
                    selectedItems.push({ checkbox: cb, label: labelText });
                }
            });

            tagsContainer.innerHTML = '';
            
            if (selectedItems.length === 0) {
                tagsContainer.innerHTML = '<span class="tags-placeholder">No selections</span>';
            } else {
                selectedItems.forEach(function(item) {
                    const tag = document.createElement('span');
                    tag.className = 'selection-tag';
                    tag.innerHTML = '<span class="tag-text">' + item.label + '</span><span class="tag-remove">×</span>';
                    
                    tag.querySelector('.tag-remove').addEventListener('mousedown', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        item.checkbox.checked = false;
                        item.checkbox.dispatchEvent(new Event('change', { bubbles: true }));
                        
                        // Update the visual checkbox in the dropdown
                        const items = grid.querySelectorAll('.custom-checkbox-item');
                        items.forEach(function(gridItem, index) {
                            if (checkboxes[index] === item.checkbox) {
                                gridItem.classList.remove('selected');
                                gridItem.querySelector('.custom-checkbox').classList.remove('checked');
                                gridItem.setAttribute('aria-selected', 'false');
                            }
                        });
                        
                        updateSelectionCount();
                        updateTags();
                    });
                    
                    tagsContainer.appendChild(tag);
                });
            }
        }

        // Toggle dropdown
        trigger.addEventListener('mousedown', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const isOpen = panel.classList.contains('open');
            
            // Close all other dropdowns
            document.querySelectorAll('.custom-dropdown-panel.open').forEach(function(p) {
                p.classList.remove('open');
                p.previousElementSibling?.previousElementSibling?.classList.remove('open');
            });

            if (!isOpen) {
                panel.classList.add('open');
                trigger.classList.add('open');
                searchInput.focus();
                currentFocusIndex = -1;
            }
        });

        // Done button handler
        doneBtn.addEventListener('mousedown', function(e) {
            e.preventDefault();
            e.stopPropagation();
            panel.classList.remove('open');
            trigger.classList.remove('open');
        });

        // Search functionality
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const items = grid.querySelectorAll('.custom-checkbox-item');
            let visibleCount = 0;

            items.forEach(function(item) {
                const label = item.getAttribute('data-label');
                if (label && label.includes(searchTerm)) {
                    item.style.display = '';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });

            noResults.style.display = visibleCount === 0 ? 'block' : 'none';
        });

        // Select All handler
        selectAllBtn.addEventListener('mousedown', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const items = grid.querySelectorAll('.custom-checkbox-item');
            items.forEach(function(item, index) {
                if (item.style.display !== 'none') {
                    checkboxes[index].checked = true;
                    item.classList.add('selected');
                    item.querySelector('.custom-checkbox').classList.add('checked');
                    item.setAttribute('aria-selected', 'true');
                }
            });
            
            checkboxes[0]?.dispatchEvent(new Event('change', { bubbles: true }));
            updateSelectionCount();
            updateTags();
        });

        // Clear All handler
        clearAllBtn.addEventListener('mousedown', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const items = grid.querySelectorAll('.custom-checkbox-item');
            items.forEach(function(item, index) {
                if (item.style.display !== 'none') {
                    checkboxes[index].checked = false;
                    item.classList.remove('selected');
                    item.querySelector('.custom-checkbox').classList.remove('checked');
                    item.setAttribute('aria-selected', 'false');
                }
            });
            
            checkboxes[0]?.dispatchEvent(new Event('change', { bubbles: true }));
            updateSelectionCount();
            updateTags();
        });

        // Keyboard navigation
        let currentFocusIndex = -1;
        
        function getVisibleItems() {
            return Array.from(grid.querySelectorAll('.custom-checkbox-item')).filter(item => item.style.display !== 'none');
        }

        function setFocusedItem(index) {
            const visibleItems = getVisibleItems();
            
            // Remove focus from all items
            visibleItems.forEach(item => item.classList.remove('keyboard-focused'));
            
            if (index >= 0 && index < visibleItems.length) {
                currentFocusIndex = index;
                visibleItems[index].classList.add('keyboard-focused');
                visibleItems[index].scrollIntoView({ block: 'nearest' });
            }
        }

        panel.addEventListener('keydown', function(e) {
            const visibleItems = getVisibleItems();
            
            switch (e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    if (currentFocusIndex < visibleItems.length - 1) {
                        setFocusedItem(currentFocusIndex + 1);
                    } else {
                        setFocusedItem(0);
                    }
                    break;
                    
                case 'ArrowUp':
                    e.preventDefault();
                    if (currentFocusIndex > 0) {
                        setFocusedItem(currentFocusIndex - 1);
                    } else {
                        setFocusedItem(visibleItems.length - 1);
                    }
                    break;
                    
                case 'Enter':
                case ' ':
                    if (currentFocusIndex >= 0 && document.activeElement !== searchInput) {
                        e.preventDefault();
                        visibleItems[currentFocusIndex]?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
                    }
                    break;
                    
                case 'Escape':
                    e.preventDefault();
                    panel.classList.remove('open');
                    trigger.classList.remove('open');
                    trigger.focus();
                    break;
            }
        });

        // Initialize
        updateSelectionCount();
        updateTags();
    }

    // Close dropdowns when clicking outside
    document.addEventListener('mousedown', function(e) {
        if (!e.target.closest('.custom-dropdown-wrapper')) {
            document.querySelectorAll('.custom-dropdown-panel.open').forEach(function(panel) {
                panel.classList.remove('open');
                panel.previousElementSibling?.previousElementSibling?.classList.remove('open');
            });
        }
    });

    // Initialize all dropdowns
    function initDropdowns() {
        dropdownConfigs.forEach(function(config) {
            createCustomDropdown(config.fieldName, config.label);
        });
    }

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