document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="global-period"]');
    const selectMobile = document.getElementById('global-period-select');
    const hiddenInput = document.getElementById('global-period-hidden');
    
    function getCurrentPeriod() {
        const checkedRadio = document.querySelector('input[name="global-period"]:checked');
        return checkedRadio ? checkedRadio.value : '1h';
    }
    
    function setPeriod(value) {
        const targetRadio = document.querySelector(`input[name="global-period"][value="${value}"]`);
        if (targetRadio) {
            targetRadio.checked = true;
            targetRadio.dispatchEvent(new Event('change', { bubbles: true }));
        }
        
        if (selectMobile) {
            selectMobile.value = value;
        }
        
        if (hiddenInput) {
            hiddenInput.value = value;
        }
    }
    
    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            const value = this.value;
            if (selectMobile) selectMobile.value = value;
            if (hiddenInput) hiddenInput.value = value;
            
            if (typeof updateAllCharts === 'function') {
                updateAllCharts(value);
            } else {
                document.dispatchEvent(new CustomEvent('globalPeriodChange', { 
                    detail: { period: value } 
                }));
            }
        });
    });
    
    if (selectMobile) {
        selectMobile.addEventListener('change', function() {
            const value = this.value;
            setPeriod(value);
            
            if (typeof updateAllCharts === 'function') {
                updateAllCharts(value);
            } else {
                document.dispatchEvent(new CustomEvent('globalPeriodChange', { 
                    detail: { period: value } 
                }));
            }
        });
    }
    
    const initialValue = getCurrentPeriod();
    if (selectMobile) selectMobile.value = initialValue;
    if (hiddenInput) hiddenInput.value = initialValue;
    
    console.log('Global Period Selector initialized');
});