// Year-Month Picker - Hierarchical Selection
(function() {
    'use strict';
    
    let selectedYears = {};
    let isInitializing = true;
    
    const monthNames = [
        'January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December'
    ];
    
    // Initialize on document ready
    $(document).ready(function() {
        initializePicker();
    });
    
    function initializePicker() {
        const currentYear = new Date().getFullYear();
        const startYear = currentYear - 5;
        const endYear = currentYear; // Only show up to current year
        
        // Default to 2025 with all 12 months selected
        selectedYears = {
            2025: { selected: true, expanded: false, months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] }
        };
        
        renderYearMonthTree(startYear, endYear);
        setupEventListeners();
        
        isInitializing = false;
    }
    
    function renderYearMonthTree(startYear, endYear) {
        const container = $('#year-picker-content');
        container.empty();
        
        for (let year = endYear; year >= startYear; year--) {
            if (!selectedYears[year]) {
                selectedYears[year] = { selected: false, expanded: false, months: [] };
            }
            
            const yearData = selectedYears[year];
            const yearId = 'year-' + year;
            const monthsId = 'months-' + year;
            
            const yearHtml = `
                <div class="year-item" data-year="${year}">
                    <div class="year-row">
                        <span class="year-toggle ${yearData.expanded ? 'expanded' : ''}" data-year="${year}">▼</span>
                        <label class="year-label">
                            <input type="checkbox" class="year-checkbox" id="${yearId}" value="${year}" ${yearData.selected ? 'checked' : ''}>
                            <span class="year-text">${year}</span>
                        </label>
                    </div>
                    <div class="months-container ${yearData.expanded ? 'expanded' : ''}" id="${monthsId}">
                        ${renderMonthCheckboxes(year, yearData.months)}
                    </div>
                </div>
            `;
            
            container.append(yearHtml);
        }
    }
    
    function renderMonthCheckboxes(year, selectedMonths) {
        let html = '';
        monthNames.forEach(function(month, index) {
            const monthNum = index + 1;
            const monthId = 'month-' + year + '-' + monthNum;
            const isChecked = selectedMonths.includes(monthNum);
            
            html += `
                <div class="month-item">
                    <label class="month-label">
                        <input type="checkbox" class="month-checkbox" id="${monthId}" data-year="${year}" value="${monthNum}" ${isChecked ? 'checked' : ''}>
                        <span class="month-text">${month}</span>
                    </label>
                </div>
            `;
        });
        return html;
    }
    
    function setupEventListeners() {
        // Main picker toggle
        $('#year-month-toggle').on('click', function() {
            const content = $('#year-picker-content');
            const arrow = $(this).find('.picker-arrow');
            
            content.toggleClass('collapsed');
            arrow.toggleClass('collapsed');
        });
        
        // Year toggle (expand/collapse)
        $('#year-picker-content').on('click', '.year-toggle', function(e) {
            e.stopPropagation();
            const year = parseInt($(this).data('year'));
            toggleYearExpansion(year);
        });
        
        // Year checkbox
        $('#year-picker-content').on('change', '.year-checkbox', function() {
            const year = parseInt($(this).val());
            const isChecked = $(this).is(':checked');
            
            selectedYears[year].selected = isChecked;
            
            if (isChecked) {
                // Select all 12 months when year is checked
                selectedYears[year].months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
                $(this).closest('.year-item').find('.month-checkbox').prop('checked', true);
            } else {
                // Uncheck all months when year is unchecked
                selectedYears[year].months = [];
                $(this).closest('.year-item').find('.month-checkbox').prop('checked', false);
            }
            
            triggerSelectionChange();
        });
        
        // Month checkbox
        $('#year-picker-content').on('change', '.month-checkbox', function() {
            const year = parseInt($(this).data('year'));
            const month = parseInt($(this).val());
            
            if ($(this).is(':checked')) {
                // Add month if not already in array
                if (!selectedYears[year].months.includes(month)) {
                    selectedYears[year].months.push(month);
                    selectedYears[year].months.sort((a, b) => a - b);
                }
                
                // Mark year as selected (at least partially)
                if (!selectedYears[year].selected) {
                    selectedYears[year].selected = true;
                    $('#year-' + year).prop('checked', true);
                }
            } else {
                // Remove month
                selectedYears[year].months = selectedYears[year].months.filter(m => m !== month);
                
                // If no months left, uncheck year
                if (selectedYears[year].months.length === 0) {
                    selectedYears[year].selected = false;
                    $('#year-' + year).prop('checked', false);
                }
            }
            
            // Update year checkbox state (indeterminate if partially selected)
            updateYearCheckboxState(year);
            
            triggerSelectionChange();
        });
    }
    
    function updateYearCheckboxState(year) {
        const yearCheckbox = $('#year-' + year)[0];
        const monthCount = selectedYears[year].months.length;
        
        if (monthCount === 0) {
            yearCheckbox.checked = false;
            yearCheckbox.indeterminate = false;
        } else if (monthCount === 12) {
            yearCheckbox.checked = true;
            yearCheckbox.indeterminate = false;
        } else {
            yearCheckbox.checked = true;
            yearCheckbox.indeterminate = true;
        }
    }
    
    function toggleYearExpansion(year) {
        selectedYears[year].expanded = !selectedYears[year].expanded;
        
        const toggle = $('.year-toggle[data-year="' + year + '"]');
        const monthsContainer = $('#months-' + year);
        
        if (selectedYears[year].expanded) {
            toggle.addClass('expanded');
            monthsContainer.addClass('expanded');
        } else {
            toggle.removeClass('expanded');
            monthsContainer.removeClass('expanded');
        }
    }
    
    function triggerSelectionChange() {
        if (!isInitializing) {
            const selection = window.YearMonthPicker.getSelection();
            
            $(document).trigger('yearSelectionChanged', [selection]);
            
            if (window.LiturgieLoader && typeof window.LiturgieLoader.loadData === 'function') {
                window.LiturgieLoader.loadData();
            }
        }
    }
    
    // Public API
    window.YearMonthPicker = {
        getSelection: function() {
            const periods = [];
            
            Object.keys(selectedYears).forEach(function(year) {
                const yearNum = parseInt(year);
                if (selectedYears[year].selected && selectedYears[year].months.length > 0) {
                    // Only include if year is selected AND has specific months selected
                    selectedYears[year].months.forEach(function(month) {
                        periods.push({ year: yearNum, month: month });
                    });
                }
            });
            
            // Sort by year, then by month
            periods.sort((a, b) => {
                if (a.year !== b.year) return a.year - b.year;
                return a.month - b.month;
            });
            
            return {
                periods: periods,
                years: [...new Set(periods.map(p => p.year))],
                year: periods.length > 0 ? periods[0].year : new Date().getFullYear()
            };
        },
        
        getSelectedYear: function() {
            const selection = this.getSelection();
            return selection.year;
        },
        
        getSelectedYears: function() {
            const selection = this.getSelection();
            return selection.years;
        },
        
        setYear: function(year) {
            Object.keys(selectedYears).forEach(function(y) {
                selectedYears[y].selected = false;
                selectedYears[y].months = [];
            });
            
            if (!selectedYears[year]) {
                selectedYears[year] = { selected: true, expanded: false, months: [] };
            } else {
                selectedYears[year].selected = true;
            }
            
            renderYearMonthTree(new Date().getFullYear() - 5, new Date().getFullYear() + 5);
            triggerSelectionChange();
        }
    };
    
})();