document.addEventListener('DOMContentLoaded', function() {
    const audio = document.getElementById('spinitronAudioPlayer');
    const playButton = document.getElementById('spinitronPlayButton');
    let updateInterval;
    let statusInterval;
    let currentSpinId = null;
    let currentEndTime = null;
    
    // Update metadata from the API
    function updateMetadata() {
        try {
            const response = await fetch(spinitronConfig.endpoint);
            const data = await response.json();
            
            if (data.status === 'ok') {
                // Update song metadata links
                const songTitle = document.getElementById('spinitronSongTitle');
                songTitle.textContent = data.spin_data.song || '-';
                songTitle.href = `https://spinitron.com/WVAU/spin/${data.spin_data.id}`;
                
                const artistLink = document.getElementById('spinitronArtist');
                artistLink.textContent = data.spin_data.artist || '-';
                artistLink.href = `https://spinitron.com/WVAU/artist/${encodeURIComponent(data.spin_data.artist)}`;
                
                const releaseLink = document.getElementById('spinitronRelease');
                releaseLink.textContent = data.spin_data.release || '-';
                releaseLink.href = `https://spinitron.com/WVAU/release/${encodeURIComponent(data.spin_data.release)}`;
                
                // Update show metadata links
                const showTitle = document.getElementById('spinitronShowTitle');
                showTitle.textContent = data.playlist_data.title || '-';
                showTitle.href = `https://spinitron.com/WVAU/playlist/${data.playlist_data.id}`;
                
                const episodeLink = document.getElementById('spinitronEpisode');
                episodeLink.textContent = data.playlist_data.episode_name || '-';
                episodeLink.href = `https://spinitron.com/WVAU/playlist/${data.playlist_data.id}`;
            }
        } catch (error) {
            console.error('Error fetching metadata:', error);
        }
    }
    
    // Update the "NOW PLAYING" / "LAST PLAYED" status labels
    function updateStatusLabels() {
        if (!currentEndTime) return;
        
        const now = Date.now();
        const endTime = currentEndTime.getTime();
        const secondsSinceEnd = (now - endTime) / 1000;
        const labels = document.querySelectorAll('.spinitron-now-playing');
        
        labels.forEach(label => {
            if (secondsSinceEnd > 60) {
                label.textContent = 'LAST PLAYED (?)';
                label.style.color = '#ff4444';
            } else if (secondsSinceEnd > 30) {
                label.textContent = 'LAST PLAYED';
                label.style.color = '#ffa500';
            } else {
                label.textContent = 'NOW PLAYING';
                label.style.color = '#888';
            }
        });
    }
    
    // Toggle audio playback
    function togglePlayback() {
        if (audio.paused) {
            audio.play().catch(error => console.error('Audio playback failed:', error));
            playButton.innerHTML = '<span>⏸</span> <span class="play-text">Pause</span>';
            updateMetadata();
            updateInterval = setInterval(updateMetadata, spinitronConfig.cacheDuration);
        } else {
            audio.pause();
            playButton.innerHTML = '<span>▶</span> <span class="play-text">Play</span>';
            clearInterval(updateInterval);
        }
    }
    
    // Initial metadata check
    updateMetadata();
    
    // Event listeners
    playButton.addEventListener('click', togglePlayback);
    
    // Handle audio ending
    audio.addEventListener('ended', () => {
        playButton.innerHTML = '<span>▶</span> <span class="play-text">Play</span>';
        clearInterval(updateInterval);
    });
    
    // Auto-update metadata when tab becomes visible
    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            updateMetadata();
            updateStatusLabels();
        }
    });
});




// Recently Played Marquee Updates
async function updateRecentlyPlayed() {
    try {
        const response = await fetch(spinitronConfig.endpoint);
        const data = await response.json();
        
        if (data.status === 'ok' && data.spin_data) {
            const spin = data.spin_data;
            const playlist = data.playlist_data;
            const template = document.getElementById('recent-spin-template').innerHTML;
            const container = document.getElementById('recent-spin-container');
            
            const recentSpinHtml = template
            .replace(/{time}/g, new Date(spin.start).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).toLowerCase())
            .replace(/{song}/g, spin.song || 'Unknown Song')
            .replace(/{artist}/g, spin.artist || 'Unknown Artist')
            .replace(/{release}/g, spin.release || 'Unknown Release')
            .replace(/{spin_id}/g, spin.id)
            .replace(/{artist_id}/g, encodeURIComponent(spin.artist))
            .replace(/{release_id}/g, encodeURIComponent(spin.release));
            
            container.innerHTML = recentSpinHtml;
        }
    } catch (error) {
        console.error('Error updating recently played:', error);
    }
}

// Start updating the recently played marquee
if (document.getElementById('spin-recent')) {
    updateRecentlyPlayed(); // Initial update
    setInterval(updateRecentlyPlayed, spinitronConfig.cacheDuration); // Periodic updates
}

// Pause on hover
const ticker = document.getElementById('ticker');
if (ticker) {
    ticker.addEventListener('mouseenter', () => {
        ticker.style.animationPlayState = 'paused';
    });
    ticker.addEventListener('mouseleave', () => {
        ticker.style.animationPlayState = 'running';
    });
}