document.addEventListener('DOMContentLoaded', function() {
    // Default streamers
    const defaultStreamers = ['shroud', 'pokimane', 'xqc', 'ninja'];
    
    // Initialize with default values
    document.getElementById('streamers-input').value = defaultStreamers.join(',');
    loadStreams(defaultStreamers, 4);
    
    // Update streams when button is clicked
    document.getElementById('update-btn').addEventListener('click', function() {
        const streamersInput = document.getElementById('streamers-input').value;
        const layoutValue = document.getElementById('layout-select').value;
        
        const streamers = streamersInput.split(',').map(s => s.trim()).filter(s => s.length > 0);
        const layout = parseInt(layoutValue);
        
        if (streamers.length > 0) {
            loadStreams(streamers, layout);
        } else {
            alert('Please enter at least one streamer');
        }
    });
});

function loadStreams(streamers, layout) {
    const container = document.getElementById('stream-container');
    
    // Clear existing streams
    container.innerHTML = '';
    
    // Apply layout class
    container.className = 'grid gap-4 layout-' + layout;
    
    // Create new stream iframes
    streamers.forEach(streamer => {
        const streamDiv = document.createElement('div');
        streamDiv.className = 'stream-wrapper';
        
        const iframe = document.createElement('iframe');
        iframe.className = 'stream-iframe';
        iframe.src = `https://player.twitch.tv/?channel=${streamer}&parent=${window.location.hostname}&autoplay=true`;
        iframe.allowFullscreen = true;
        
        const streamerName = document.createElement('div');
        streamerName.className = 'text-center mt-2 text-sm text-gray-400';
        streamerName.textContent = streamer;
        
        streamDiv.appendChild(iframe);
        streamDiv.appendChild(streamerName);
        container.appendChild(streamDiv);
    });
}