/**
 * Builds the server/CDN selector submenu panel for the settings menu.
 * @param {string[]} streamServers - Regular CDN server URLs
 * @param {string[]} fallbackServers - Fallback server URLs
 * @param {number} selectedIndex - Index in the combined server list
 * @param {function} onSelect - Callback receiving the combined index
 */
export function buildServerMenu(streamServers, fallbackServers, selectedIndex, onSelect) {
    const panel = document.createElement('div');
    panel.className = 'hstream-player__menu-panel';
    panel.setAttribute('data-panel', 'server');

    const backBtn = document.createElement('button');
    backBtn.className = 'hstream-player__menu-back';
    backBtn.type = 'button';
    backBtn.innerHTML = '<i class="fa-solid fa-chevron-left"></i> Server';
    backBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        const menuContainer = panel.closest('.hstream-player__menu-container');
        if (menuContainer) {
            menuContainer.querySelectorAll('.hstream-player__menu-panel').forEach(p => p.classList.remove('hstream-player__menu-panel--active'));
            const mainPanel = menuContainer.querySelector('[data-panel="main"]');
            if (mainPanel) mainPanel.classList.add('hstream-player__menu-panel--active');
        }
    });
    panel.appendChild(backBtn);

    const addServerItems = (servers, labelPrefix, startIndex) => {
        for (let i = 0; i < servers.length; i++) {
            const index = startIndex + i;
            const item = document.createElement('button');
            item.className = 'hstream-player__menu-item';
            item.type = 'button';
            item.setAttribute('role', 'menuitemradio');

            if (index === selectedIndex) {
                item.classList.add('hstream-player__menu-item--checked');
                item.setAttribute('aria-checked', 'true');
            } else {
                item.setAttribute('aria-checked', 'false');
            }

            const num = i + 1;
            item.innerHTML = `<span>${labelPrefix} ${num} <span class="hstream-player__menu-value"><span class="hstream-player__menu-badge">${labelPrefix}${num}</span></span></span><span class="hstream-player__menu-item-radio"></span>`;

            item.addEventListener('click', (e) => {
                e.stopPropagation();
                onSelect(index);
            });
            panel.appendChild(item);
        }
    };

    const divider = document.createElement('div');
    divider.className = 'hstream-player__menu-divider';
    panel.appendChild(divider);

    addServerItems(streamServers, 'Server', 0);

    if (fallbackServers && fallbackServers.length > 0) {
        const fbDivider = document.createElement('div');
        fbDivider.className = 'hstream-player__menu-divider';
        panel.appendChild(fbDivider);

        addServerItems(fallbackServers, 'Fallback', streamServers.length);
    }

    return panel;
}