<!DOCTYPE html>
<html lang="en" data-theme="dim">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Last.fm Track List</title>
    <link href="style/style.css" rel="stylesheet"> <!-- Link to external CSS --> <!-- DaisyUI -->
</head>
<script src="quote.js"></script>
<!-- experimental -->

<body class="bg-base-200 font-sans">

    <!-- Header -->
    <div class="text-center py-8 font-sans">
        <h1 class="text-3xl text-primary font-bold">Suii-fy</h1>
        <p id="qoute" class="font-sans text-md text-primary">"Without music, life would be a mistake. - Friedrich
            Nietzsche"</p>
        <p>A Simple Project To Scrap Data From <a href="https://last.fm" class="hover:underline">Last.fm</a></p>
    </div>

    <!-- Main Content -->
    <div id="track-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4 py-6">
        <!-- Tracks will be dynamically loaded here -->
    </div>

    <script>
        // Static Last.fm username
        const username = "suigma";  // Replace with the desired static user
        const url = `https://www.last.fm/user/${username}`;

        // Proxy server URL
        const proxyUrl = 'http://localhost:4000/proxy?url=' + encodeURIComponent(url);

        // Fetch tracks when the page loads
        document.addEventListener('DOMContentLoaded', function () {
            fetchTracks();
        });

        async function fetchTracks() {
            try {
                // Fetch the HTML content through the proxy server
                const response = await fetch(proxyUrl);
                const html = await response.text();
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');

                // Select track and artist elements
                const tracks = Array.from(doc.querySelectorAll('.chartlist-name a'));
                const artists = Array.from(doc.querySelectorAll('.chartlist-artist a'));
                const coverArts = Array.from(doc.querySelectorAll('.chartlist-image img'));
                const nowScrobbling = Array.from(doc.querySelectorAll('.chartlist-now-scrobbling'));

                if (tracks.length > 0 && artists.length > 0) {
                    const trackContainer = document.getElementById('track-container');
                    trackContainer.innerHTML = ''; // Clear previous content

                    // Loop through the tracks and artists
                    tracks.forEach((track, index) => {
                        const trackName = track.textContent.trim();
                        const artistName = artists[index].textContent.trim();
                        const coverArt = coverArts[index]?.src || '';
                        const isCurrentlyPlaying = nowScrobbling[index] ? true : false;

                        const currentlyPlayingLabel = isCurrentlyPlaying
                            ? `<center><span class="badge badge-success mt-2">Currently Playing</span></center>`
                            : '';

                        const trackDiv = document.createElement('div');
                        trackDiv.classList.add('card', 'shadow-md', 'bg-base-100', 'flex', 'items-center', 'space-x-4', 'p-4', 'rounded-lg', 'transition-transform', 'hover:scale-105');
                        trackDiv.innerHTML = `
                            <!-- Album Art (on the left) -->
                            <img src="${coverArt}" alt="Cover Art" class="track-cover h-8 w-8 rounded-full">
                            <!-- Track Info (on the right) -->
                            <div class="flex flex-col space-y-2 text-center">
                                <h2 class="text-md font-semibold text-secondary pb-0">${trackName}</h2>
                                <p class="text-sm text-base-content">${artistName}</p>
                                ${currentlyPlayingLabel}
                            </div>
                        `;
                        trackContainer.appendChild(trackDiv);
                    });
                } else {
                    console.error("No tracks found or the page structure has changed.");
                }
            } catch (error) {
                console.error("Error fetching the Last.fm user page:", error);
            }
        }
    </script>
    <footer class="w-full bg-base-200 text-center p-4">Follow gweh,<a href="https://instagram.com/suiigma"
            class="hover:underline hover:text-secondary">Instagram</a>, <a href=""
            class="hover:underline hover:text-secondary">Facebook</a>, <a href=""
            class="hover:underline hover:text-secondary">Github</a></footer>
</body>

</html>