async function getStreamersStatus() {
    const data = await fetch('/api/status');
    const streamers = await data.json();
    const onlineStreamers = streamers.filter(streamer => streamer.status === 'live');
    const offlineStreamers = streamers.filter(streamer => streamer.status === 'offline');
    return { onlineStreamers, offlineStreamers };
}

async function displayStreamers() {
    const { onlineStreamers: onlineStreamers, offlineStreamers: offlineStreamers } = await getStreamersStatus();

    // Trier les streamers par nom
    onlineStreamers.sort((a, b) => a.name.localeCompare(b.name));
    offlineStreamers.sort((a, b) => a.name.localeCompare(b.name));

    // Mettre à jour le nombre de streamers en ligne et hors ligne
    document.getElementById('onlineCount').textContent = onlineStreamers.length;
    document.getElementById('offlineCount').textContent = offlineStreamers.length;

    const onlineContainer = document.getElementById('onlineStreamers');
    const offlineContainer = document.getElementById('offlineStreamers');

    // Réinitialiser les conteneurs
    onlineContainer.innerHTML = '';
    offlineContainer.innerHTML = '';

    if (onlineStreamers.length > 0) {
        // Supprimer le texte de chargement
        const loaderText = document.getElementById('loadertext');
        if (loaderText) {
            loaderText.style.display = 'none';
        }
    } else {
        // Ajouter le texte de chargement si aucun streamer en ligne
        const loaderText = document.getElementById('loadertext');
        if (loaderText) {
            loaderText.textContent = "Il n'y a aucun streamer en ligne actuellement";
            loaderText.style.display = 'block';
        }
    }

    onlineStreamers.forEach(data => {
        const profileLink = `https://twitch.tv/${data.name}`;

        const image = document.createElement('img');
        image.src = data.profilePicture;
        image.alt = data.name;
        image.className = 'streamer-image';

        const liveIndicator = document.createElement('div');
        liveIndicator.className = 'live-indicator';
        liveIndicator.style.display = 'block';

        const name = document.createElement('div');
        name.className = 'streamer-name';
        name.textContent = data.name;

        const link = document.createElement('a');
        link.href = profileLink;
        link.target = '_blank';
        link.appendChild(image);
        link.appendChild(liveIndicator);

        const infoDiv = document.createElement('div');
        infoDiv.className = 'streamer-info';
        infoDiv.appendChild(link);
        infoDiv.appendChild(name);

        onlineContainer.appendChild(infoDiv);
    });

    // Réinitialiser et remplir le conteneur des streamers hors ligne
    if (offlineStreamers.length === 0) {
        // Ajouter le texte de chargement si aucun streamer hors ligne
        const loaderText = document.getElementById('loadertext');
        if (loaderText) {
            loaderText.textContent = "Il n'y a aucun streamer hors ligne actuellement";
            loaderText.style.display = 'block';
        }
    } else {
        // Supprimer le texte de chargement
        const loaderText = document.getElementById('loadertext');
        if (loaderText) {
            loaderText.style.display = 'none';
        }
    }

    offlineStreamers.forEach(data => {
        const profileLink = `https://twitch.tv/${data.name}`;

        const image = document.createElement('img');
        image.src = data.profilePicture;
        image.alt = data.name;
        image.className = 'streamer-image';
        image.classList.toggle('offline', data.streamType !== 'live');

        const liveIndicator = document.createElement('div');
        liveIndicator.className = 'live-indicator';
        liveIndicator.style.display = 'none';

        const name = document.createElement('div');
        name.className = 'streamer-name';
        name.textContent = data.name;

        const link = document.createElement('a');
        link.href = profileLink;
        link.target = '_blank';
        link.appendChild(image);
        link.appendChild(liveIndicator);

        const infoDiv = document.createElement('div');
        infoDiv.className = 'streamer-info';
        infoDiv.appendChild(link);
        infoDiv.appendChild(name);

        offlineContainer.appendChild(infoDiv);
    });

    if (onlineStreamers.length > 0) {
        // Supprimer le texte "aucun streamer en ligne" et le texte de chargement
        const loaderText = document.getElementById('onlineLoaderText');
        if (loaderText) {
            loaderText.style.display = 'none';
        }
    } else {
        // Ajouter le texte "aucun streamer en ligne"
        const loaderText = document.getElementById('onlineLoaderText');
        if (loaderText) {
            loaderText.textContent = "Il n'y a aucun streamer en ligne actuellement";
            loaderText.style.display = 'block'; // Assurez-vous que le texte est visible
        }
    }

}

displayStreamers();

setInterval(displayStreamers, 60000);