// Script para manejar servicios grupales - Multiidioma
(function() {
    'use strict';
    
    // Traducciones
    const translations = {
        es: {
            groupPattern: /\(grupal\)/i,
            select: 'Seleccionar',
            selected: 'Seleccionado'
        },
        en: {
            groupPattern: /\(group\)/i,
            select: 'Select',
            selected: 'Selected'
        },
        pt: {
            groupPattern: /\(grupo\)/i,
            select: 'Selecionar',
            selected: 'Selecionado'
        }
    };
    
    let isGroupService = false;
    let selectedPriceIndex = null;
    let currentLang = 'es'; // idioma por defecto
    
    // Detectar idioma automáticamente
    function detectLanguage() {
        // 1. Intentar desde el html lang
        const htmlLang = document.documentElement.lang;
        if (htmlLang) {
            const lang = htmlLang.split('-')[0].toLowerCase();
            if (translations[lang]) return lang;
        }
        
        // 2. Intentar desde navigator
        const browserLang = navigator.language.split('-')[0].toLowerCase();
        if (translations[browserLang]) return browserLang;
        
        // 3. Por defecto español
        return 'es';
    }
    
    // Función para inicializar el comportamiento grupal
    function initGroupServiceBehavior() {
        // Detectar idioma
        currentLang = detectLanguage();
        
        // Esperar a que Alpine esté listo
        setTimeout(() => {
            const title = document.querySelector('.step-title')?.textContent || '';
            const trans = translations[currentLang];
            isGroupService = trans.groupPattern.test(title);
            
            if (isGroupService) {
                transformToGroupService();
            }
        }, 1);
    }
    
    // Transformar los selectores de cantidad en botones de selección de grupo
    function transformToGroupService() {
        const priceInputs = document.querySelectorAll('[data-price-id]');
        const trans = translations[currentLang];
        
        priceInputs.forEach((input, index) => {
            const quantitySelector = input.closest('.quantity-selector');
            if (!quantitySelector) return;
            
            // Ocultar el selector de cantidad original
            quantitySelector.style.display = 'none';
            
            // Crear el botón de selección de grupo
            const groupButton = document.createElement('button');
            groupButton.type = 'button';
            groupButton.className = 'group-selector-btn';
            groupButton.setAttribute('data-price-index', index);
            groupButton.innerHTML = `
                <span class="group-btn-text">${trans.select}</span>
            `;
            
            // Insertar el botón después del selector de cantidad
            quantitySelector.parentNode.insertBefore(groupButton, quantitySelector.nextSibling);
            
            // Agregar evento click
            groupButton.addEventListener('click', function(e) {
                e.preventDefault();
                selectGroupPrice(index);
            });
        });
        
        // Agregar estilos
        addGroupStyles();
    }
    
    // Función para seleccionar un precio de grupo
    function selectGroupPrice(priceIndex) {
        const priceInputs = document.querySelectorAll('[data-price-id]');
        const groupButtons = document.querySelectorAll('.group-selector-btn');
        const trans = translations[currentLang];
        
        // Si ya está seleccionado, deseleccionar
        if (selectedPriceIndex === priceIndex) {
            selectedPriceIndex = null;
            priceInputs[priceIndex].value = 0;
            groupButtons[priceIndex].classList.remove('selected');
            groupButtons[priceIndex].querySelector('.group-btn-text').textContent = trans.select;
        } else {
            // Resetear todos los inputs y botones
            priceInputs.forEach((input, idx) => {
                input.value = 0;
                groupButtons[idx].classList.remove('selected');
                groupButtons[idx].querySelector('.group-btn-text').textContent = trans.select;
            });
            
            // Seleccionar el nuevo
            selectedPriceIndex = priceIndex;
            priceInputs[priceIndex].value = 1;
            groupButtons[priceIndex].classList.add('selected');
            groupButtons[priceIndex].querySelector('.group-btn-text').textContent = trans.selected;
        }
        
        // Disparar evento de cambio para que Alpine detecte el cambio
        priceInputs[priceIndex].dispatchEvent(new Event('input', { bubbles: true }));
    }
    
    // Agregar estilos CSS
    function addGroupStyles() {
        if (document.getElementById('group-service-styles')) return;
        
        const style = document.createElement('style');
        style.id = 'group-service-styles';
        style.textContent = `
            .group-selector-btn {
                width: 41%;
                padding: 6px 7px;
                background-color: var(--color-brand);
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
                margin-top: 8px;
            }
            
            .group-selector-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            }
            
            .group-selector-btn:active {
                transform: translateY(0);
            }
            
            .group-selector-btn.selected {
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
            }
            
            .group-selector-btn.selected:hover {
                box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
            }
            
            .group-btn-icon {
                font-size: 18px;
                line-height: 1;
            }
            
            .group-btn-text {
                line-height: 1;
            }
            
            /* Responsive para mobile */
            @media (max-width: 768px) {
                .group-selector-btn {
                    padding: 7px 16px;
                    font-size: 15px;
                }
                
                .group-btn-icon {
                    font-size: 20px;
                }
            }
        `;
        
        document.head.appendChild(style);
    }
    
    // Inicializar cuando el DOM esté listo
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initGroupServiceBehavior);
    } else {
        initGroupServiceBehavior();
    }
    
    // También observar cambios en el DOM por si Alpine recarga contenido
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                const hasQuantitySelectors = Array.from(mutation.addedNodes).some(node => {
                    return node.nodeType === 1 && (
                        node.querySelector?.('[data-price-id]') || 
                        node.matches?.('[data-price-id]')
                    );
                });
                
                if (hasQuantitySelectors && isGroupService) {
                    setTimeout(transformToGroupService, 100);
                }
            }
        });
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
    
})();