main.js

// Classe pour gérer le widget de classement des firsts
class FirstsLeaderboard {
    constructor() {
        this.data = new Map(); // Stockage des données des utilisateurs
        this.displayNames = new Map(); // Stockage des noms d'affichage originaux
        this.timestamps = new Map(); // Stockage des timestamps du dernier first
        this.leaderboardElement = null;
        this.maxEntries = Number.MAX_SAFE_INTEGER; // Afficher tous les membres sans limite
        
        // Initialiser le widget avec retry
        this.initWithRetry();
    }
    
    // Initialiser avec plusieurs tentatives si les éléments ne sont pas prêts
    initWithRetry(attempts = 0) {
        const maxAttempts = 10;
        
        this.leaderboardElement = document.getElementById('leaderboard');
        
        if (!this.leaderboardElement && attempts < maxAttempts) {
            setTimeout(() => this.initWithRetry(attempts + 1), 100);
            return;
        }
        
        if (!this.leaderboardElement) {
            this.createFallbackElements();
        }
        
        this.init();
    }
    
    // Créer des éléments de secours si ils n'existent pas
    createFallbackElements() {
        if (!this.leaderboardElement) {
            this.leaderboardElement = document.createElement('div');
            this.leaderboardElement.id = 'leaderboard';
            this.leaderboardElement.className = 'leaderboard';
            document.body.appendChild(this.leaderboardElement);
        }
    }
    
    init() {
        // Charger les données depuis le serveur (fichier JSON)
        this.loadDataFromServer();
        
        // Démarrer l'écoute du serveur local pour les commandes
        this.startServerListener();
        
        // Écouter les événements Streamlabs (si applicable)
        this.setupStreamlabsEvents();
        
        // Afficher le classement initial
        this.updateDisplay();
        
        // Sauvegarder automatiquement toutes les 30 secondes
        setInterval(() => this.saveData(), 30000);
        
        // Mécanisme de sécurité : synchronisation avec le JSON toutes les 15 secondes
        setInterval(() => this.syncWithServerData(), 15000);
        console.log('[Info] Mécanisme de synchronisation automatique activé (15s)');
    }
    
    // Charger les données depuis le serveur (fichier JSON)
    async loadDataFromServer() {
        try {
            const response = await fetch('/get-leaderboard-data');
            if (response.ok) {
                const jsonData = await response.json();
                if (jsonData.leaderboard && Array.isArray(jsonData.leaderboard)) {
                    // Charger les données depuis le JSON
                    this.data.clear();
                    this.displayNames.clear();
                    this.timestamps.clear();
                    
                    jsonData.leaderboard.forEach(entry => {
                        const usernameKey = entry.username.toLowerCase();
                        this.data.set(usernameKey, entry.firsts);
                        this.displayNames.set(usernameKey, entry.username);
                        this.timestamps.set(usernameKey, entry.lastFirstTimestamp || new Date().toISOString());
                    });
                    
                    console.log(`[Info] Données chargées depuis le serveur: ${this.data.size} utilisateurs`);
                    this.updateDisplay();
                    return;
                }
            }
        } catch (error) {
            console.log('[Info] Impossible de charger les données depuis le serveur, utilisation des données locales');
        }
        
        // Fallback: charger les données sauvegardées localement
        this.loadData();
    }
    
    // Mécanisme de synchronisation de sécurité avec le serveur
    async syncWithServerData() {
        try {
            const response = await fetch('/get-leaderboard-data');
            if (response.ok) {
                const jsonData = await response.json();
                if (jsonData.leaderboard && Array.isArray(jsonData.leaderboard)) {
                    
                    // Vérifier si les données ont changé
                    let hasChanges = false;
                    const serverData = new Map();
                    const serverDisplayNames = new Map();
                    const serverTimestamps = new Map();
                    
                    // Construire les données du serveur
                    jsonData.leaderboard.forEach(entry => {
                        const usernameKey = entry.username.toLowerCase();
                        serverData.set(usernameKey, entry.firsts);
                        serverDisplayNames.set(usernameKey, entry.username);
                        serverTimestamps.set(usernameKey, entry.lastFirstTimestamp || new Date().toISOString());
                    });
                    
                    // Comparer le nombre d'utilisateurs
                    if (serverData.size !== this.data.size) {
                        hasChanges = true;
                        console.log(`[Sync] Nombre d'utilisateurs différent: serveur=${serverData.size}, local=${this.data.size}`);
                    }
                    
                    // Comparer chaque utilisateur
                    for (const [username, serverCount] of serverData.entries()) {
                        const localCount = this.data.get(username) || 0;
                        if (localCount !== serverCount) {
                            hasChanges = true;
                            console.log(`[Sync] Différence pour ${username}: serveur=${serverCount}, local=${localCount}`);
                        }
                    }
                    
                    // Vérifier les utilisateurs qui existent localement mais pas sur le serveur
                    for (const [username] of this.data.entries()) {
                        if (!serverData.has(username)) {
                            hasChanges = true;
                            console.log(`[Sync] Utilisateur ${username} existe localement mais pas sur le serveur`);
                        }
                    }
                    
                    // Si des changements sont détectés, synchroniser
                    if (hasChanges) {
                        console.log('[Sync] Désynchronisation détectée, mise à jour des données locales...');
                        
                        // Sauvegarder les anciens rangs pour détecter les changements
                        const oldRanks = new Map();
                        for (const [username] of this.data.entries()) {
                            oldRanks.set(username, this.getUserRank(username));
                        }
                        
                        // Mettre à jour les données locales
                        this.data.clear();
                        this.displayNames.clear();
                        this.timestamps.clear();
                        
                        serverData.forEach((count, username) => {
                            this.data.set(username, count);
                        });
                        serverDisplayNames.forEach((displayName, username) => {
                            this.displayNames.set(username, displayName);
                        });
                        serverTimestamps.forEach((timestamp, username) => {
                            this.timestamps.set(username, timestamp);
                        });
                        
                        // Mettre à jour l'affichage
                        this.updateDisplay();
                        
                        // Détecter et animer les changements de rang
                        for (const [username] of this.data.entries()) {
                            const oldRank = oldRanks.get(username) || Infinity;
                            const newRank = this.getUserRank(username);
                            const displayName = this.displayNames.get(username) || username;
                            
                            if (oldRank !== Infinity && newRank !== oldRank) {
                                if (newRank < oldRank) {
                                    // Monte dans le classement
                                    setTimeout(() => this.animateRankUp(displayName), 100);
                                } else if (newRank > oldRank) {
                                    // Descend dans le classement
                                    setTimeout(() => this.animateRankDown(displayName), 100);
                                }
                            }
                        }
                        
                        // Sauvegarder localement
                        this.saveData();
                        
                        console.log('[Sync] Synchronisation terminée');
                    }
                }
            }
        } catch (error) {
            // Erreur silencieuse pour éviter de spammer la console
            // console.log('[Sync] Erreur lors de la synchronisation:', error.message);
        }
    }
    
    // Écouter les commandes du serveur local
    startServerListener() {
        // Connexion Server-Sent Events pour recevoir les commandes du serveur
        if (typeof EventSource !== 'undefined') {
            const eventSource = new EventSource('/events');
            
            eventSource.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    if (data.action === 'add_first') {
                        this.addFirst(data.username);
                        console.log(`[Info] Commande reçue du serveur: +1 first pour ${data.username}`);
                    }
                } catch (error) {
                    console.error('Erreur lors du traitement de la commande:', error);
                }
            };
            
            eventSource.onerror = (error) => {
                console.log('[Info] Connexion au serveur perdue, tentative de reconnexion...');
            };
            
            this.eventSource = eventSource;
        }
        
        // Méthode alternative: polling
        this.startPolling();
        
        console.log('[Info] Système d\'écoute des commandes activé');
        console.log('[Info] Utilisez firstsLeaderboard.addFirst("username") pour ajouter un first');
    }
    
    // Polling alternatif pour vérifier les nouvelles commandes
    startPolling() {
        setInterval(async () => {
            try {
                const response = await fetch('/get-pending-commands');
                if (response.ok) {
                    const commands = await response.json();
                    commands.forEach(cmd => {
                        if (cmd.action === 'add_first') {
                            this.addFirst(cmd.username);
                        }
                    });
                }
            } catch (error) {
                // Connexion serveur pas disponible, c'est normal
            }
        }, 5000); // Changé de 2000 à 5000 (5 secondes)
    }
    
    // Configuration des événements Streamlabs (pour les récompenses Twitch)
    setupStreamlabsEvents() {
        // Écouter les événements de récompenses Twitch si disponibles
        if (window.addEventListener) {
            window.addEventListener('onEventReceived', (obj) => {
                this.handleStreamlabsEvent(obj.detail);
            });
        }
    }
    
    // Gérer les événements Streamlabs (récompenses Twitch)
    handleStreamlabsEvent(event) {
        // Vérifier si c'est un événement de récompense de chaîne
        if (event.listener === 'channel-points') {
            this.handleChannelPointsReward(event.data);
        }
        // Pour d'autres types d'événements de récompense
        else if (event.listener === 'reward-redeemed') {
            this.handleRewardRedeemed(event.data);
        }
    }
    
    // Gérer les récompenses de points de chaîne
    handleChannelPointsReward(data) {
        // Vérifier si c'est la récompense "first" (vous devrez adapter le nom exact)
        const rewardName = data.reward?.title?.toLowerCase() || '';
        const username = data.user_name || data.user?.login;
        
        if (rewardName.includes('first') && username) {
            this.addFirst(username);
        }
    }
    
    // Gérer les récompenses échangées
    handleRewardRedeemed(data) {
        const rewardName = data.reward_name?.toLowerCase() || '';
        const username = data.user_name || data.username;
        
        if (rewardName.includes('first') && username) {
            this.addFirst(username);
        }
    }
    
    // Ajouter un first à un utilisateur
    addFirst(username) {
        if (!username) return;
        
        // Nettoyer le nom d'utilisateur mais garder la casse originale
        const originalUsername = username.trim();
        const usernameKey = originalUsername.toLowerCase(); // Clé pour stockage
        
        // Obtenir l'ancien rang avant l'ajout
        const oldRank = this.getUserRank(usernameKey);
        
        const currentCount = this.data.get(usernameKey) || 0;
        
        // Stocker avec la clé en minuscules mais garder le nom original
        this.data.set(usernameKey, currentCount + 1);
        
        // Sauvegarder le nom d'affichage original
        if (!this.displayNames) {
            this.displayNames = new Map();
        }
        this.displayNames.set(usernameKey, originalUsername);
        
        // Mettre à jour le timestamp du dernier first
        if (!this.timestamps) {
            this.timestamps = new Map();
        }
        this.timestamps.set(usernameKey, new Date().toISOString());
        
        console.log(`First ajouté pour ${originalUsername}. Total: ${currentCount + 1}`);
        
        // Mettre à jour l'affichage
        this.updateDisplay();
        
        // Obtenir le nouveau rang après l'ajout
        const newRank = this.getUserRank(usernameKey);
        
        // Animer selon le changement de rang
        if (oldRank > newRank && newRank <= this.maxEntries) {
            // Monte dans le classement
            this.animateRankUp(originalUsername);
        } else if (oldRank === newRank && oldRank !== Infinity) {
            // First sans changement de rang
            this.animateSameRank(originalUsername);
        }
        
        // Sauvegarder les données
        this.saveData();
    }
    
    // Obtenir le rang d'un utilisateur
    getUserRank(usernameKey) {
        const sortedData = this.getSortedData();
        const userIndex = sortedData.findIndex(([user]) => user === usernameKey);
        return userIndex === -1 ? Infinity : userIndex + 1;
    }
    
    // Obtenir les données triées avec gestion des égalités par timestamp
    getSortedData() {
        return Array.from(this.data.entries())
            .sort((a, b) => {
                const [usernameA, countsA] = a;
                const [usernameB, countsB] = b;
                
                // Tri principal par nombre de firsts (décroissant)
                if (countsB !== countsA) {
                    return countsB - countsA;
                }
                
                // En cas d'égalité, tri par timestamp (plus récent en premier)
                const timestampA = this.timestamps.get(usernameA) || "1970-01-01T00:00:00.000Z";
                const timestampB = this.timestamps.get(usernameB) || "1970-01-01T00:00:00.000Z";
                
                return new Date(timestampB) - new Date(timestampA);
            });
    }
    
    // Animation quand un utilisateur monte dans le classement
    animateRankUp(displayName) {
        setTimeout(() => {
            const entries = document.querySelectorAll('.leaderboard-entry');
            entries.forEach(entry => {
                const usernameElement = entry.querySelector('.username');
                const arrow = entry.querySelector('.rank-up-arrow');
                
                if (usernameElement && usernameElement.textContent === displayName) {
                    // Animation de course automobile - glissement vers le haut
                    entry.classList.add('racing-up');
                    
                    // Animation de la flèche verte - reste 15 minutes
                    if (arrow) {
                        arrow.style.opacity = '1';
                        arrow.style.transform = 'translateX(0)';
                        arrow.style.transition = 'all 0.5s ease';
                        arrow.style.color = '#22c55e';
                        arrow.innerHTML = '↗';
                        
                        // Animation de glissement de la flèche
                        setTimeout(() => {
                            arrow.style.transform = 'translateX(10px)';
                        }, 100);
                        
                        // Faire disparaître la flèche après 15 minutes (900000ms)
                        setTimeout(() => {
                            arrow.style.opacity = '0';
                            arrow.style.transform = 'translateX(0)';
                        }, 900000);
                    }
                    
                    // L'animation racing-up se termine après 1.2s mais l'effet persiste
                    // La bordure verte et l'effet restent via une classe persistante
                    setTimeout(() => {
                        entry.classList.remove('racing-up');
                        entry.classList.add('rank-up-persistent');
                    }, 1200);
                    
                    // Retirer la classe persistante après 15 minutes
                    setTimeout(() => {
                        entry.classList.remove('rank-up-persistent');
                    }, 900000);
                }
            });
        }, 100);
        
        console.log(`[Succès] ${displayName} monte dans le classement !`);
    }

    // Animation quand un utilisateur descend dans le classement
    animateRankDown(displayName) {
        setTimeout(() => {
            const entries = document.querySelectorAll('.leaderboard-entry');
            entries.forEach(entry => {
                const usernameElement = entry.querySelector('.username');
                const arrow = entry.querySelector('.rank-down-arrow');
                
                if (usernameElement && usernameElement.textContent === displayName) {
                    // Animation de course automobile - glissement vers le bas
                    entry.classList.add('racing-down');
                    
                    // Animation de la flèche rouge - reste 15 minutes
                    if (arrow) {
                        arrow.style.opacity = '1';
                        arrow.style.transform = 'translateX(0)';
                        arrow.style.transition = 'all 0.5s ease';
                        arrow.style.color = '#ef4444';
                        arrow.innerHTML = '↘';
                        
                        // Animation de glissement de la flèche
                        setTimeout(() => {
                            arrow.style.transform = 'translateX(10px)';
                        }, 100);
                        
                        // Faire disparaître la flèche après 15 minutes (900000ms)
                        setTimeout(() => {
                            arrow.style.opacity = '0';
                            arrow.style.transform = 'translateX(0)';
                        }, 900000);
                    }
                    
                    // L'animation racing-down se termine après 1s mais l'effet persiste
                    setTimeout(() => {
                        entry.classList.remove('racing-down');
                        entry.classList.add('rank-down-persistent');
                    }, 1000);
                    
                    // Retirer la classe persistante après 15 minutes
                    setTimeout(() => {
                        entry.classList.remove('rank-down-persistent');
                    }, 900000);
                }
            });
        }, 100);
        
        console.log(`[Info] ${displayName} descend dans le classement`);
    }

    // Animation quand un utilisateur prend un first sans changer de rang
    animateSameRank(displayName) {
        setTimeout(() => {
            const entries = document.querySelectorAll('.leaderboard-entry');
            entries.forEach(entry => {
                const usernameElement = entry.querySelector('.username');
                
                if (usernameElement && usernameElement.textContent === displayName) {
                    // Animation de la bordure et du background verts sans flèche
                    entry.classList.add('same-rank-highlight');
                    
                    // Retirer l'effet après 15 minutes
                    setTimeout(() => {
                        entry.classList.remove('same-rank-highlight');
                    }, 900000);
                }
            });
        }, 100);
        
        console.log(`[Info] ${displayName} a pris un first (rang inchangé)`);
    }

    // Importer un classement complet
    importLeaderboard(leaderboardData) {
        try {
            this.data.clear();
            
            // Format attendu : [['username', count], ['username2', count2], ...]
            // ou [{username: 'user', count: 5}, {username: 'user2', count: 3}, ...]
            if (Array.isArray(leaderboardData)) {
                leaderboardData.forEach(entry => {
                    let username, count;
                    
                    if (Array.isArray(entry)) {
                        [username, count] = entry;
                    } else if (typeof entry === 'object') {
                        username = entry.username || entry.user || entry.name;
                        count = entry.count || entry.firsts || entry.score || 0;
                    }
                    
                    if (username && count > 0) {
                        this.data.set(username.trim().toLowerCase(), count);
                    }
                });
                
                this.updateDisplay();
                this.saveData();
                console.log(`Classement importé avec ${this.data.size} utilisateurs`);
                return true;
            }
        } catch (error) {
            console.error('Erreur lors de l\'importation:', error);
            return false;
        }
        return false;
    }
    
    // Mettre à jour l'affichage du classement
    updateDisplay() {
        if (!this.leaderboardElement) {
            return;
        }
        
        // Utiliser la nouvelle logique de tri avec gestion des égalités
        const sortedData = this.getSortedData()
            .slice(0, this.maxEntries);
        
        if (sortedData.length === 0) {
            this.showEmptyMessage();
            return;
        }
        
        // Mise à jour fluide : réutiliser les éléments existants
        this.updateDisplayFluid(sortedData);
    }
    
    // Mise à jour fluide du classement
    updateDisplayFluid(sortedData) {
        const existingEntries = Array.from(this.leaderboardElement.children);
        const entriesToKeep = [];
        const entriesToRemove = [];
        
        // Identifier les entrées existantes à réutiliser
        existingEntries.forEach(entry => {
            if (entry.classList.contains('empty-message')) {
                entriesToRemove.push(entry);
                return;
            }
            
            const username = entry.dataset.username;
            const foundData = sortedData.find(([user]) => user === username);
            
            if (foundData) {
                entriesToKeep.push({ element: entry, data: foundData });
            } else {
                entriesToRemove.push(entry);
            }
        });
        
        // Supprimer les entrées obsolètes avec animation
        entriesToRemove.forEach(entry => {
            entry.style.transition = 'all 0.3s ease-out';
            entry.style.opacity = '0';
            entry.style.transform = 'translateX(-20px)';
            setTimeout(() => {
                if (entry.parentNode) {
                    entry.parentNode.removeChild(entry);
                }
            }, 300);
        });
        
        // Mettre à jour ou créer les entrées
        sortedData.forEach((entryData, index) => {
            const [username, count] = entryData;
            const rank = index + 1;
            
            // Chercher si l'entrée existe déjà
            const existingEntry = entriesToKeep.find(item => item.data[0] === username);
            
            if (existingEntry) {
                // Mettre à jour l'entrée existante
                this.updateExistingEntry(existingEntry.element, rank, username, count, index);
            } else {
                // Créer une nouvelle entrée
                const newEntry = this.createLeaderboardEntry(rank, username, count, true);
                this.insertEntryAtPosition(newEntry, index);
            }
        });
    }
    
    // Mettre à jour une entrée existante
    updateExistingEntry(element, rank, username, count, targetIndex) {
        const currentIndex = Array.from(this.leaderboardElement.children).indexOf(element);
        
        // Mettre à jour le contenu
        const rankElement = element.querySelector('.rank');
        const countElement = element.querySelector('.first-count');
        const arrowElement = element.querySelector('.rank-up-arrow');
        
        // Vérifier si le rang a changé
        const oldRank = parseInt(rankElement.textContent);
        const hasRankChanged = oldRank !== rank;
        
        // Mettre à jour le rang
        rankElement.textContent = rank;
        rankElement.className = 'rank';
        if (rank === 1) rankElement.classList.add('gold');
        else if (rank === 2) rankElement.classList.add('silver');
        else if (rank === 3) rankElement.classList.add('bronze');
        
        // Mettre à jour le compte
        countElement.textContent = count;
        
        // Animation de montée si le rang s'améliore
        if (hasRankChanged && oldRank > rank) {
            element.classList.add('racing-up');
            arrowElement.style.opacity = '1';
            arrowElement.style.transform = 'translateY(-3px)';
            arrowElement.style.color = '#22c55e';
            arrowElement.innerHTML = '↗';
            
            setTimeout(() => {
                element.classList.remove('racing-up');
                element.classList.add('rank-up-persistent');
                // Garder la flèche visible pendant 5 minutes
            }, 1200);
            
            // Retirer l'effet persistant ET la flèche après 5 minutes
            setTimeout(() => {
                element.classList.remove('rank-up-persistent');
                arrowElement.style.opacity = '0';
                arrowElement.style.transform = 'translateY(0)';
            }, 300000);
        }
        // Animation de descente si le rang empire
        else if (hasRankChanged && oldRank < rank) {
            const downArrowElement = element.querySelector('.rank-down-arrow');
            element.classList.add('racing-down');
            
            if (downArrowElement) {
                downArrowElement.style.opacity = '1';
                downArrowElement.style.transform = 'translateY(3px)';
                downArrowElement.style.color = '#ef4444';
                downArrowElement.innerHTML = '↘';
            }
            
            setTimeout(() => {
                element.classList.remove('racing-down');
                element.classList.add('rank-down-persistent');
                // Garder la flèche visible pendant 5 minutes
            }, 1000);
            
            // Retirer l'effet persistant ET la flèche après 5 minutes
            setTimeout(() => {
                element.classList.remove('rank-down-persistent');
                if (downArrowElement) {
                    downArrowElement.style.opacity = '0';
                    downArrowElement.style.transform = 'translateY(0)';
                }
            }, 300000);
        }
        
        // Déplacer l'élément à la bonne position si nécessaire
        if (currentIndex !== targetIndex) {
            this.moveEntryToPosition(element, targetIndex);
        }
    }
    
    // Insérer une nouvelle entrée à la position donnée
    insertEntryAtPosition(entry, index) {
        const children = Array.from(this.leaderboardElement.children);
        
        if (index >= children.length) {
            this.leaderboardElement.appendChild(entry);
        } else {
            this.leaderboardElement.insertBefore(entry, children[index]);
        }
        
        // Animation d'apparition
        entry.style.opacity = '0';
        entry.style.transform = 'translateY(20px)';
        entry.style.transition = 'all 0.4s ease-out';
        
        setTimeout(() => {
            entry.style.opacity = '1';
            entry.style.transform = 'translateY(0)';
        }, 50);
    }
    
    // Déplacer une entrée à la position donnée
    moveEntryToPosition(element, targetIndex) {
        const children = Array.from(this.leaderboardElement.children);
        
        if (targetIndex >= children.length) {
            this.leaderboardElement.appendChild(element);
        } else if (children[targetIndex] !== element) {
            this.leaderboardElement.insertBefore(element, children[targetIndex]);
        }
        
        // Animation de déplacement style course automobile
        element.style.transition = 'all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)';
        element.style.transform = 'translateX(8px) scale(1.01)';
        element.style.boxShadow = '0 4px 15px rgba(255, 255, 255, 0.1)';
        
        setTimeout(() => {
            element.style.transform = 'translateX(0) scale(1)';
            element.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2)';
        }, 200);
    }
    
    // Créer une entrée du classement
    createLeaderboardEntry(rank, usernameKey, count, isNew = false) {
        const entry = document.createElement('div');
        entry.className = isNew ? 'leaderboard-entry racing-new' : 'leaderboard-entry';
        entry.dataset.username = usernameKey; // Pour identifier l'entrée
        
        // Obtenir le nom d'affichage ou utiliser la clé si pas disponible
        const displayName = (this.displayNames && this.displayNames.get(usernameKey)) || usernameKey;
        
        // Déterminer la classe CSS pour le rang
        let rankClass = '';
        if (rank === 1) rankClass = 'gold';
        else if (rank === 2) rankClass = 'silver';
        else if (rank === 3) rankClass = 'bronze';
        
        entry.innerHTML = `
            <div class="rank ${rankClass}">${rank}</div>
            <div class="user-info">
                <span class="username">${this.escapeHtml(displayName)}</span>
                <span class="rank-up-arrow" style="opacity: 0; margin-left: 10px; color: #22c55e; font-weight: bold;">↗</span>
                <span class="rank-down-arrow" style="opacity: 0; margin-left: 10px; color: #ef4444; font-weight: bold;">↘</span>
                <span class="first-count">${count}</span>
            </div>
        `;
        
        // Retirer la classe 'racing-new' après l'animation
        if (isNew) {
            setTimeout(() => {
                entry.classList.remove('racing-new');
            }, 1500);
        }
        
        return entry;
    }
    
    // Afficher un message quand le classement est vide
    showEmptyMessage() {
        this.leaderboardElement.innerHTML = `
            <div class="empty-message">
                En attente des premiers "firsts"...<br>
                Soyez le premier à arriver sur le stream !
            </div>
        `;
    }
    
    // Sauvegarder les données dans le localStorage
    saveData() {
        try {
            const dataArray = Array.from(this.data.entries());
            const displayNamesArray = this.displayNames ? Array.from(this.displayNames.entries()) : [];
            const timestampsArray = this.timestamps ? Array.from(this.timestamps.entries()) : [];
            
            localStorage.setItem('firsts_leaderboard_data', JSON.stringify(dataArray));
            localStorage.setItem('firsts_leaderboard_names', JSON.stringify(displayNamesArray));
            localStorage.setItem('firsts_leaderboard_timestamps', JSON.stringify(timestampsArray));
            console.log('Données sauvegardées');
        } catch (error) {
            console.error('Erreur lors de la sauvegarde:', error);
        }
    }
    
    // Charger les données depuis le localStorage
    loadData() {
        try {
            const savedData = localStorage.getItem('firsts_leaderboard_data');
            const savedNames = localStorage.getItem('firsts_leaderboard_names');
            const savedTimestamps = localStorage.getItem('firsts_leaderboard_timestamps');
            
            if (savedData) {
                const dataArray = JSON.parse(savedData);
                this.data = new Map(dataArray);
                console.log('Données chargées:', this.data.size, 'utilisateurs');
            }
            
            if (savedNames) {
                const namesArray = JSON.parse(savedNames);
                this.displayNames = new Map(namesArray);
                console.log('Noms d\'affichage chargés:', this.displayNames.size, 'utilisateurs');
            } else {
                this.displayNames = new Map();
            }
            
            if (savedTimestamps) {
                const timestampsArray = JSON.parse(savedTimestamps);
                this.timestamps = new Map(timestampsArray);
                console.log('Timestamps chargés:', this.timestamps.size, 'utilisateurs');
            } else {
                this.timestamps = new Map();
            }
        } catch (error) {
            console.error('Erreur lors du chargement:', error);
            this.data = new Map();
            this.displayNames = new Map();
            this.timestamps = new Map();
        }
    }
    
    // Réinitialiser le classement
    resetLeaderboard() {
        this.data.clear();
        this.displayNames.clear();
        this.timestamps.clear();
        this.updateDisplay();
        this.saveData();
        console.log('Classement réinitialisé');
    }
    
    // Supprimer un utilisateur du classement
    removeUser(username) {
        if (this.data.has(username)) {
            this.data.delete(username);
            this.updateDisplay();
            this.saveData();
            console.log(`Utilisateur ${username} supprimé du classement`);
        }
    }
    
    // Modifier le nombre de firsts d'un utilisateur
    setUserCount(username, count) {
        if (count > 0) {
            this.data.set(username, count);
        } else {
            this.data.delete(username);
        }
        this.updateDisplay();
        this.saveData();
    }
    
    // Échapper le HTML pour éviter les injections
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    // Obtenir les statistiques
    getStats() {
        return {
            totalUsers: this.data.size,
            totalFirsts: Array.from(this.data.values()).reduce((sum, count) => sum + count, 0),
            topUser: this.data.size > 0 ? Array.from(this.data.entries()).sort((a, b) => b[1] - a[1])[0] : null
        };
    }
    
    // Fonction de diagnostic pour vérifier l'état de synchronisation
    async checkSyncStatus() {
        try {
            const response = await fetch('/get-leaderboard-data');
            if (response.ok) {
                const jsonData = await response.json();
                if (jsonData.leaderboard && Array.isArray(jsonData.leaderboard)) {
                    console.log('=== DIAGNOSTIC DE SYNCHRONISATION ===');
                    console.log(`Données locales: ${this.data.size} utilisateurs`);
                    console.log(`Données serveur: ${jsonData.leaderboard.length} utilisateurs`);
                    
                    // Comparer chaque utilisateur
                    const differences = [];
                    jsonData.leaderboard.forEach(entry => {
                        const usernameKey = entry.username.toLowerCase();
                        const localCount = this.data.get(usernameKey) || 0;
                        if (localCount !== entry.firsts) {
                            differences.push({
                                user: entry.username,
                                server: entry.firsts,
                                local: localCount
                            });
                        }
                    });
                    
                    if (differences.length > 0) {
                        console.log('DIFFÉRENCES DÉTECTÉES:');
                        differences.forEach(diff => {
                            console.log(`- ${diff.user}: serveur=${diff.server}, local=${diff.local}`);
                        });
                    } else {
                        console.log('✅ Données synchronisées');
                    }
                    console.log('=====================================');
                    
                    return {
                        synchronized: differences.length === 0,
                        differences: differences,
                        localUsers: this.data.size,
                        serverUsers: jsonData.leaderboard.length
                    };
                }
            }
        } catch (error) {
            console.error('Erreur lors du diagnostic:', error);
            return { error: error.message };
        }
    }
    
    // Forcer une synchronisation manuelle
    async forcSync() {
        console.log('[Info] Synchronisation forcée...');
        await this.syncWithServerData();
        console.log('[Info] Synchronisation forcée terminée');
    }
}

// Fonctions utilitaires globales pour le contrôle externe
let leaderboard;

// Fonction d'initialisation robuste
function initializeWidget() {
    try {
        console.log('Tentative d\'initialisation...');
        leaderboard = new FirstsLeaderboard();
        
        // Exposer les fonctions pour le contrôle externe
        window.firstsLeaderboard = {
            // Gestion des firsts
            addFirst: (username) => leaderboard.addFirst(username),
            addMultiple: (username, count) => leaderboard.addMultipleFirsts(username, count),
            
            // Gestion du classement
            reset: () => leaderboard.resetLeaderboard(),
            import: (data) => leaderboard.importLeaderboard(data),
            export: () => leaderboard.getData(),
            
            // Gestion des utilisateurs
            removeUser: (username) => leaderboard.removeUser(username),
            setUserCount: (username, count) => leaderboard.setUserCount(username, count),
            getUser: (username) => leaderboard.data.get(username.trim().toLowerCase()) || 0,
            
            // Statistiques et données
            getStats: () => leaderboard.getStats(),
            getData: () => Array.from(leaderboard.data.entries()),
            getTop: (n = 10) => Array.from(leaderboard.data.entries()).sort((a, b) => b[1] - a[1]).slice(0, n),
            
            // Fonctions de synchronisation et diagnostic
            checkSync: () => leaderboard.checkSyncStatus(),
            forceSync: () => leaderboard.forcSync(),
            
            // Debug et utilitaires
            debug: () => leaderboard.debugLog('Test manuel depuis la console'),
            forceUpdate: () => leaderboard.updateDisplay(),
            
            // Utilitaires
            help: () => {
                console.log(`
[Info] Widget Firsts Leaderboard - Commandes disponibles:

[Info] GESTION DES FIRSTS:
- addFirst('username')                    : Ajouter 1 first
- addMultiple('username', count)          : Ajouter plusieurs firsts
- getUser('username')                     : Obtenir le nombre de firsts d'un user

[Info] GESTION DES UTILISATEURS:
- removeUser('username')                  : Supprimer un utilisateur
- setUserCount('username', count)         : Définir le nombre exact de firsts

[Info] GESTION DU CLASSEMENT:
- reset()                                 : Réinitialiser tout le classement
- import(data)                           : Importer un classement complet
- export()                               : Exporter toutes les données

[Info] STATISTIQUES:
- getStats()                             : Statistiques globales
- getData()                              : Toutes les données
- getTop(n)                              : Top N utilisateurs

[Info] SYNCHRONISATION:
- checkSync()                            : Vérifier l'état de synchronisation
- forceSync()                            : Forcer une synchronisation manuelle

[Info] DEBUG:
- debug()                                : Test de debug
- forceUpdate()                          : Forcer la mise à jour de l'affichage

[Info] EXEMPLES D'USAGE:
- firstsLeaderboard.addFirst('username')
- firstsLeaderboard.addMultiple('username', 5)
- firstsLeaderboard.import([['user1', 10], ['user2', 5]])
- firstsLeaderboard.setUserCount('username', 15)
- firstsLeaderboard.checkSync()          : Vérifier la sync
- firstsLeaderboard.forceSync()          : Forcer la sync
                `);
            }
        };
        
        console.log('Widget initialisé avec succès !');
        console.log('Tapez firstsLeaderboard.help() pour voir toutes les commandes disponibles.');
        
        return true;
    } catch (error) {
        console.error('Erreur lors de l\'initialisation:', error);
        return false;
    }
}

// Initialiser le widget avec plusieurs stratégies
if (document.readyState === 'loading') {
    // Si le document est encore en cours de chargement
    document.addEventListener('DOMContentLoaded', initializeWidget);
} else {
    // Si le document est déjà chargé
    initializeWidget();
}

// Fallback pour Streamlabs - réessayer après un délai
setTimeout(() => {
    if (!window.firstsLeaderboard) {
        console.log('Tentative de fallback...');
        initializeWidget();
    }
}, 1000);

// Autre fallback
window.addEventListener('load', () => {
    if (!window.firstsLeaderboard) {
        console.log('Tentative de fallback après window.load...');
        initializeWidget();
    }
});

// Gérer les erreurs globales
window.addEventListener('error', (event) => {
    console.error('Erreur dans le widget:', event.error);
});

// Message d'aide initial
console.log(`
Widget Firsts Leaderboard - EN COURS DE CHARGEMENT

Si le widget ne fonctionne pas dans Streamlabs:
1. Vérifiez que tous les fichiers sont dans le même dossier
2. Ouvrez la console (F12) pour voir les messages
3. Tapez firstsLeaderboard.help() pour tester les commandes

Commandes de test rapide:
- firstsLeaderboard.addFirst('TestUser')     - Ajouter 1 first
- firstsLeaderboard.forceUpdate()            - Forcer la mise à jour
`);