document.addEventListener('DOMContentLoaded', () => {
    const apiKey = 'APIKEY CHANGE ME'; //these are free, why would you...
    const username = 'Quinten0508';

    const nowPlayingElement = document.getElementById('lastfm-contents');
    const lastfmArtElement = document.getElementById('lastfm-artbox');
    const topTrackElement = document.getElementById('lastfm-toptrack');

    function fetchNowPlaying() {
        fetch(`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${apiKey}&format=json`)
            .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) { //absolute clusterfuck incoming SORRY - rewrite and send this mess to the css file instead!
                        nowPlayingElement.innerHTML = `<strong>Now Playing:</strong> <br> <span id=lastfm-artist>1. ${nowPlaying.artist['#text']}</span> - ${nowPlaying.name} <div id=lastfm-lastplayedsong>2. ${lastPlayedSong.artist['#text']}</span> - ${lastPlayedSong.name} </div><div id=lastfm-lastplayedsong>3. ${lastlastPlayedSong.artist['#text']}</span> - ${lastlastPlayedSong.name}</div>`;
                        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);

                        nowPlayingElement.innerHTML = `<strong>Last Played:</strong> <br> <span id=lastfm-artist>${lastPlayed.artist['#text']}</span> - ${lastPlayed.name} <br> <span id="lastfm-timesinceplay">${timeSince} ago</span>`;
                        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);
});

/*

    // fetchTopTrack();
    function fetchTopTrack() {
        fetch(`https://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=${username}&api_key=${apiKey}&format=json&period=1month&limit=1`)
            .then(response => response.json())
            .then(data => {
                if (data.toptracks.track && data.toptracks.track.length > 0) {
                    const topTrack = data.toptracks.track[0];
                    const topTrackName = topTrack.name;
                    const topTrackArtist = topTrack.artist.name;
                    const topTrackPlayCount = topTrack.playcount;
                    topTrackElement.innerHTML = `<strong>Top Track This Month:</strong> <br> ${topTrackArtist} - ${topTrackName} <br> Play Count: ${topTrackPlayCount}`;
                    nowPlayingElement.innerHTML(topTrackElement);
                } else {
                    console.error('No top track found.');
                }
            })
            .catch(error => {
                console.error('Error fetching top track:', error);
            });
    }

    */