document.addEventListener('DOMContentLoaded', () => {
    const nowPlayingElement = document.getElementById('lastfm-contents');
    const lastfmArtElement = document.getElementById('lastfm-artbox');

    function fetchNowPlaying() {
        fetch('https://quinten0508.com/api/nowplaying')
            .then(response => response.json())
            .then(data => {
                if (data.recenttracks.track && data.recenttracks.track.length > 0) {
                    const tracks = data.recenttracks.track;
                    const nowPlaying = tracks[0];
                    const lastPlayedSong = tracks[1];
                    const lastlastPlayedSong = tracks[2];
    
                    if (nowPlaying['@attr'] && nowPlaying['@attr'].nowplaying) {
                        const nowPlayingHtml = `
                        <strong>Now Playing:</strong><br>
                        <span id="lastfm-artist">1. ${nowPlaying.artist['#text']}</span> - ${nowPlaying.name}<br>
                        <div id="lastfm-lastplayedsong">
                            <span id="lastfm-artist">2. ${lastPlayedSong.artist['#text']}</span> - ${lastPlayedSong.name}
                        </div>
                        <div id="lastfm-lastlastplayedsong">
                            <span id="lastfm-artist">3. ${lastlastPlayedSong.artist['#text']}</span> - ${lastlastPlayedSong.name}
                        </div>
                        `;
                        nowPlayingElement.innerHTML = nowPlayingHtml;
                        const albumArt = nowPlaying.image.find(img => img.size === 'large')['#text'];
                        lastfmArtElement.innerHTML = `<img src="${albumArt}" id="lastfm-art">`;
                    } else {
                        const lastPlayed = tracks[0];
                        const lastPlayedTime = new Date(lastPlayed.date.uts * 1000);
                        const currentTime = new Date();
                        const timeDiff = Math.floor((currentTime - lastPlayedTime) / 1000);
                        const timeSince = formatTimeSince(timeDiff);
    
                        const lastPlayedHtml = `
                            <strong>Last Played:</strong> <br>
                            <span id="lastfm-artist">${lastPlayed.artist['#text']}</span> - ${lastPlayed.name} <br>
                            <span id="lastfm-timesinceplay">${timeSince} ago</span>
                        `;
                        nowPlayingElement.innerHTML = lastPlayedHtml;
                        const albumArt = lastPlayed.image.find(img => img.size === 'large')['#text'];
                        lastfmArtElement.innerHTML = `<img src="${albumArt}" id="lastfm-art"> `;
                    }
                } else {
                    nowPlayingElement.innerHTML = `<strong>Now Playing:</strong> <br> Nothing`;
                    lastfmArtElement.innerHTML = '<div id="lastfm-art"></div>';
                }
            })
            .catch(error => {
                nowPlayingElement.textContent = 'Error fetching last.fm status.';
                lastfmArtElement.innerHTML = '<div id="lastfm-art"></div>';
                console.error('Error fetching now playing status:', error);
            });
    }
    
    

    function formatTimeSince(seconds) {
        const intervals = [
            { label: 'year', seconds: 31536000 },
            { label: 'month', seconds: 2592000 },
            { label: 'day', seconds: 86400 },
            { label: 'hour', seconds: 3600 },
            { label: 'minute', seconds: 60 },
            { label: 'second', seconds: 1 }
        ];

        for (const interval of intervals) {
            const count = Math.floor(seconds / interval.seconds);
            if (count > 0) {
                return `${count} ${interval.label}${count !== 1 ? 's' : ''}`;
            }
        }
        return 'just now';
    }

    fetchNowPlaying();

    setInterval(fetchNowPlaying, 10000);
});