/**
 * Release Hub Frontend JavaScript
 */
(function() {
    'use strict';

    // Initialize immediately if DOM ready, otherwise wait
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    function init() {
        initTabs();
        // Only initialize toggle if not already done by frontend-changelog.js
        if (!window.chaChangelogInitialized) {
            window.chaChangelogInitialized = true;
            initToggleButtons();
        }
    }

    /**
     * Initialize tab switching
     */
    function initTabs() {
        const hubs = document.querySelectorAll('.cha-release-hub');

        hubs.forEach(hub => {
            const tabs = hub.querySelectorAll('.cha-hub-tab');
            const panels = hub.querySelectorAll('.cha-hub-panel');

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

                    // Update tabs
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');

                    // Update panels
                    panels.forEach(p => {
                        if (p.getAttribute('data-panel') === targetId) {
                            p.classList.add('active');
                        } else {
                            p.classList.remove('active');
                        }
                    });

                    // Update URL hash without scrolling
                    history.replaceState(null, null, '#' + targetId);
                });
            });

            // Check URL hash and activate corresponding tab on load
            const hash = window.location.hash.substring(1); // Remove #
            if (hash) {
                const targetTab = hub.querySelector(`[data-tab="${hash}"]`);
                if (targetTab) {
                    targetTab.click();
                }
            }
        });
    }

    /**
     * Initialize toggle buttons for change items using event delegation
     */
    function initToggleButtons() {
        // Use capture phase to ensure we get the event first
        document.addEventListener('click', function(e) {
            const button = e.target.closest('.cha-change-toggle');
            if (!button) return;

            e.preventDefault();
            e.stopPropagation();

            const section = button.closest('.cha-change-section');
            if (!section) return;

            const items = section.querySelector('.cha-change-items');
            if (!items) return;

            const isExpanded = button.getAttribute('aria-expanded') === 'true';

            button.setAttribute('aria-expanded', !isExpanded);
            
            if (isExpanded) {
                items.setAttribute('hidden', '');
            } else {
                items.removeAttribute('hidden');
            }
        }, true); // Use capture phase
    }

})();
