document.addEventListener("DOMContentLoaded", () => {
    const categoriesDiv = document.getElementById("categories");
    const channelList = document.getElementById("channel-list");
    const player = document.getElementById("player");

    // Загрузка каналов
    fetch("api.php")
        .then(response => response.json())
        .then(channels => {
            const categories = {};
            channels.forEach(channel => {
                if (!categories[channel.category]) {
                    categories[channel.category] = [];
                }
                categories[channel.category].push(channel);
            });

            // Отображение категорий
            Object.keys(categories).forEach(category => {
                const button = document.createElement("button");
                button.textContent = category;
                button.onclick = () => loadChannels(categories[category]);
                categoriesDiv.appendChild(button);
            });
        });

    // Загрузка каналов в список
    function loadChannels(channels) {
        channelList.innerHTML = "";
        channels.forEach(channel => {
            const li = document.createElement("li");
            li.textContent = channel.name;
            li.onclick = () => playChannel(channel.url);
            channelList.appendChild(li);
        });
    }

    // Воспроизведение канала
    function playChannel(url) {
        player.src = url;
        player.play();
    }
});