{% extends 'base.html.twig' %}

{% block title %}Pedantix - Salle {{ room_code }}{% endblock %}

{% block stylesheets %}
<style>
    .article-content {
        background: rgba(255, 255, 255, 0.95);
        padding: 30px;
        border-radius: 15px;
        line-height: 1.8;
        font-size: 16px;
        text-align: justify;
        max-height: 600px;
        overflow-y: auto;
        border: 2px solid #e0e0e0;
    }

    .hidden-word {
        background: #d0d0d0;
        color: #d0d0d0;
        border-radius: 3px;
        padding: 1px 2px;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s ease;
    }

    .hidden-word:hover {
        background: #c0c0c0;
        transform: scale(1.05);
    }

    .hidden-word-with-proximity {
        /* Le fond grisé et la couleur du texte sont maintenant définis par le style inline depuis PHP */
        border-radius: 3px;
        padding: 1px 2px;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s ease;
    }

    .revealed-word {
        color: #333;
        background: transparent;
        border-radius: 3px;
        padding: 1px 2px;
        font-weight: 500;
        animation: revealWord 0.5s ease;
    }

    .revealed-word-victory {
        color: #333;
        background: transparent;
        font-weight: normal;
        /* Affichage normal après victoire - pas de surbrillance jaune */
    }

    @keyframes revealWord {
        from {
            background: #d0d0d0;
            color: #d0d0d0;
            transform: scale(1);
        }
        to {
            background: transparent;
            color: #333;
            transform: scale(1.05);
        }
    }

    .proximity-indicator {
        background: linear-gradient(45deg, #FF5722, #D32F2F);
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        display: inline-block;
        margin: 5px;
        font-weight: 500;
        box-shadow: 0 2px 10px rgba(255, 87, 34, 0.3);
        animation: fadeInScale 0.5s ease;
    }

    .proximity-hot { background: #d0d0d0 !important; color: #FFD700 !important; font-weight: bold !important; }
    .proximity-warm { background: #d0d0d0 !important; color: #FF8C00 !important; font-weight: bold !important; }
    .proximity-cold { background: #d0d0d0 !important; color: #696969 !important; }

    .confetti {
        position: fixed;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        background: #f0f;
        animation: confetti-fall linear infinite;
        z-index: 1000;
    }

    @keyframes confetti-fall {
        to {
            transform: translateX(-50%) translateY(100vh) rotate(720deg);
        }
    }

    .guess-history {
        max-height: 400px;
        overflow-y: auto;
        padding: 0;
    }

    .guess-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        margin-bottom: 8px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(102, 126, 234, 0.2);
        transition: all 0.3s ease;
    }

    .guess-item:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: translateX(5px);
        box-shadow: 0 3px 15px rgba(102, 126, 234, 0.3);
    }

    .guess-item.found {
        border-left: 4px solid #28a745;
        background: rgba(40, 167, 69, 0.1);
    }

    .guess-number {
        background: linear-gradient(45deg, #667eea, #764ba2);
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        margin-right: 12px;
        flex-shrink: 0;
        box-shadow: 0 2px 5px rgba(102, 126, 234, 0.3);
    }

    .guess-item.found .guess-number {
        background: linear-gradient(45deg, #28a745, #20c997);
    }

    .guess-word {
        font-weight: 500;
        color: #333;
        flex-grow: 1;
    }

    .guess-item.found .guess-word {
        color: #28a745;
        font-weight: 600;
    }

    .title-word {
        background: linear-gradient(45deg, #FFD700, #FFA500) !important;
        color: #333 !important;
        font-weight: bold !important;
        font-size: 1.1em !important;
        padding: 2px 4px !important;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
    }

    .word-length-hint {
        position: absolute;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: bold;
        pointer-events: none;
        z-index: 10000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .word-length-hint.show {
        opacity: 1;
        transform: translateY(0);
    }

    .word-length-hint::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
    }

    .collapse-toggle {
        cursor: pointer;
        user-select: none;
        transition: all 0.3s ease;
    }

    .collapse-toggle:hover {
        color: #667eea;
    }

    .collapse-toggle .fas {
        transition: transform 0.3s ease;
    }

    .collapse-toggle[aria-expanded="false"] .fas {
        transform: rotate(-90deg);
    }

    @media (max-width: 1200px) {
        .main-game-content {
            margin-left: 0;
        }
    }
</style>
{% endblock %}

{% block body %}
<div class="row">
    <!-- Zone de jeu principale -->
    <div class="col-lg-8">
        <div class="game-container p-4">
            <!-- En-tête de la salle -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 id="roomTitle">Chargement...</h2>
                    <p class="text-muted mb-0">Code de salle: <strong>{{ room_code }}</strong></p>
                </div>
                <button class="btn btn-outline-primary" onclick="copyRoomCode()">
                    <i class="fas fa-copy me-2"></i>Partager
                </button>
            </div>

            <!-- Statistiques du joueur -->
            <div class="row mb-4" id="playerStats" style="display: none;">
                <div class="col-md-3 col-6">
                    <div class="text-center p-3 bg-light rounded">
                        <h4 id="playerScore" class="text-primary mb-0">0</h4>
                        <small class="text-muted">Score</small>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="text-center p-3 bg-light rounded">
                        <h4 id="playerAttempts" class="text-info mb-0">0</h4>
                        <small class="text-muted">Tentatives</small>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="text-center p-3 bg-light rounded">
                        <h4 id="foundWordsCount" class="text-success mb-0">0</h4>
                        <small class="text-muted">Mots trouvés</small>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="text-center p-3 bg-light rounded">
                        <h4 id="playerName" class="text-warning mb-0">-</h4>
                        <small class="text-muted">Joueur</small>
                    </div>
                </div>
            </div>

            <!-- Formulaire de saisie -->
            <form id="guessForm" style="display: none;">
                <div class="input-group input-group-lg mb-4">
                    <input type="text" class="form-control word-input" id="wordGuess"
                           placeholder="Entrez votre mot..." autocomplete="off">
                    <button class="btn btn-primary" type="submit">
                        <i class="fas fa-search me-2"></i>Deviner
                    </button>
                </div>
            </form>

            <!-- Zone de connexion -->
            <div id="connectionForm">
                <div class="text-center mb-4">
                    <h4>Rejoindre la salle {{ room_code }}</h4>
                </div>
                <form id="joinRoomForm">
                    <div class="input-group input-group-lg mb-3">
                        <input type="text" class="form-control word-input" id="playerNameInput"
                               placeholder="Votre nom..." maxlength="20" required>
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-sign-in-alt me-2"></i>Rejoindre
                        </button>
                    </div>
                </form>
            </div>

            <!-- Messages de résultat -->
            <div id="resultMessage" class="mb-4"></div>

            <!-- Article Wikipedia avec mots grisés -->
            <div id="articleSection" style="display: none;">
                <!-- Progression du titre à deviner -->
                <div id="titleProgressSection" class="mb-4" style="display: none;">
                    <h5 class="text-center mb-3">
                        <i class="fas fa-bullseye text-warning me-2"></i>Mot/Titre à deviner :
                    </h5>
                    <div class="text-center p-3 bg-light rounded">
                        <h3 id="titleProgress" class="mb-0 text-primary font-monospace"></h3>
                        <small id="titleProgressInfo" class="text-muted"></small>
                    </div>
                </div>

                <h5 class="mb-3">Article Wikipedia :</h5>
                <div id="articleContent" class="article-content">
                    Chargement de l'article...
                </div>
            </div>
        </div>
    </div>

    <!-- Sidebar avec historique, classement et joueurs actifs -->
    <div class="col-lg-4">
        <!-- Historique des tentatives -->
        <div class="game-container p-4 mb-4" id="historyPanel" style="display: none;">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">
                    <i class="fas fa-history text-info me-2"></i>Historique
                    <span id="totalAttempts" class="badge bg-primary ms-2">0</span>
                </h5>
                <span class="collapse-toggle" data-bs-toggle="collapse" data-bs-target="#historyCollapse" aria-expanded="true">
                    <i class="fas fa-chevron-down"></i>
                </span>
            </div>
            <div class="collapse show" id="historyCollapse">
                <div id="guessHistory" class="guess-history">
                    <p class="text-muted text-center">Aucune tentative pour le moment</p>
                </div>
            </div>
        </div>

        <!-- Classement -->
        <div class="game-container p-4 mb-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">
                    <i class="fas fa-trophy text-warning me-2"></i>Classement
                </h5>
                <span class="collapse-toggle" data-bs-toggle="collapse" data-bs-target="#leaderboardCollapse" aria-expanded="true">
                    <i class="fas fa-chevron-down"></i>
                </span>
            </div>
            <div class="collapse show" id="leaderboardCollapse">
                <div id="leaderboard">
                    <p class="text-muted text-center">Chargement...</p>
                </div>
            </div>
        </div>

        <!-- Joueurs actifs -->
        <div class="game-container p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">
                    <i class="fas fa-users text-success me-2"></i>Joueurs actifs
                </h5>
                <span class="collapse-toggle" data-bs-toggle="collapse" data-bs-target="#playersCollapse" aria-expanded="true">
                    <i class="fas fa-chevron-down"></i>
                </span>
            </div>
            <div class="collapse show" id="playersCollapse">
                <div id="activePlayers">
                    <p class="text-muted text-center">Chargement...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de fin de jeu -->
<div class="modal fade" id="gameCompletedModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-trophy me-2"></i>Félicitations !
                </h5>
            </div>
            <div class="modal-body text-center">
                <h3>���� Vous avez trouvé le mot-titre ! 🎉</h3>
                <p class="lead">Score final: <span id="finalScore" class="fw-bold text-success"></span></p>
                <p>Tentatives: <span id="finalAttempts" class="fw-bold"></span></p>
                <div id="confettiContainer"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="location.reload()">
                    Rejouer
                </button>
                <button type="button" class="btn btn-secondary" onclick="location.href='/'">
                    Accueil
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
let gameSession = null;
let roomCode = '{{ room_code }}';
let guessHistory = [];
let uniqueWords = new Set();
let attemptCounter = 0;
let lastEventId = 0; // Pour suivre les événements temps réel
let gameEventsInterval = null; // Interval pour les événements

document.addEventListener('DOMContentLoaded', function() {
    // Vérifier si on a déjà une session stockée
    const storedSession = sessionStorage.getItem('gameSession');
    if (storedSession) {
        const sessionData = JSON.parse(storedSession);
        if (sessionData.roomCode === roomCode) {
            gameSession = sessionData;
            showGameInterface();
            loadGameData();
        }
    }

    // Gérer la connexion à la salle
    document.getElementById('joinRoomForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const playerName = document.getElementById('playerNameInput').value;
        await joinRoom(playerName);
    });

    // Gérer les devinettes
    document.getElementById('guessForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const guess = document.getElementById('wordGuess').value.trim().toLowerCase();
        if (guess) {
            // Vérifier si le mot a déjà été essayé
            if (uniqueWords.has(guess)) {
                showResult(`Le mot "${guess}" a déjà été essayé !`, 'warning');
                document.getElementById('wordGuess').value = '';
                return;
            }

            await submitGuess(guess);
            document.getElementById('wordGuess').value = '';
        }
    });

    // Actualiser le classement périodiquement
    setInterval(updateLeaderboard, 10000); // Toutes les 10 secondes

    // Actualiser l'article périodiquement pour voir les mots trouvés par d'autres joueurs
    setInterval(loadArticleContent, 5000); // Toutes les 5 secondes

    // Démarrer la surveillance des événements temps réel
    startGameEventsPolling();
});

// Fonction pour surveiller les événements de jeu en temps réel
function startGameEventsPolling() {
    if (gameEventsInterval) {
        clearInterval(gameEventsInterval);
    }

    gameEventsInterval = setInterval(async () => {
        if (gameSession) {
            await checkGameEvents();
        }
    }, 3000); // Vérifier toutes les 3 secondes
}

// Vérifier les nouveaux év��nements de jeu
async function checkGameEvents() {
    if (!gameSession) return;

    try {
        const response = await fetch(`/api/game-events/${roomCode}?session_id=${gameSession.sessionId}&last_event_id=${lastEventId}`);
        const data = await response.json();

        if (data.events && data.events.length > 0) {
            // Traiter chaque nouvel événement
            data.events.forEach(event => {
                handleGameEvent(event);
            });

            lastEventId = data.last_event_id;
        }

        // Vérifier l'état global du jeu
        if (data.game_status) {
            handleGameStatus(data.game_status);
        }
    } catch (error) {
        console.error('Erreur lors de la vérification des événements:', error);
    }
}

// Gérer un événement de jeu
function handleGameEvent(event) {
    switch (event.type) {
        case 'player_won':
            // Afficher une notification quand un autre joueur trouve le mot
            if (event.player_name !== gameSession.playerName) {
                showPlayerWonNotification(event);
            }
            break;
        case 'game_completed':
            // Le jeu est terminé globalement
            handleGameCompleted(event);
            break;
    }
}

// Afficher une notification quand un joueur trouve le mot
function showPlayerWonNotification(event) {
    const notification = document.createElement('div');
    notification.className = 'alert alert-success alert-dismissible fade show position-fixed';
    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    notification.innerHTML = `
        <strong><i class="fas fa-trophy text-warning me-2"></i>${event.message}</strong>
        <br><small>Score: ${event.score} - ${event.attempts} tentatives</small>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;

    document.body.appendChild(notification);

    // Animation d'entrée
    setTimeout(() => {
        notification.classList.add('show');
    }, 100);

    // Supprimer automatiquement après 5 secondes
    setTimeout(() => {
        notification.remove();
    }, 5000);

    // Mettre à jour le classement
    updateLeaderboard();
}

// Gérer l'état global du jeu
function handleGameStatus(gameStatus) {
    if (gameStatus.is_completed) {
        // Arrêter la surveillance des événements
        if (gameEventsInterval) {
            clearInterval(gameEventsInterval);
            gameEventsInterval = null;
        }

        // Afficher le modal de fin de partie globale pour tous les modes
        showGameGloballyCompletedModal(gameStatus);
    }
}

// Modal de fin de partie globale (tous les joueurs ont terminé)
function showGameGloballyCompletedModal(gameStatus) {
    // Créer le modal de fin de partie globale
    let modalContent = '';

    if (gameStatus.game_mode === 'cooperation') {
        // Mode coopération - message d'équipe
        modalContent = `
            <div class="modal-body text-center">
                <h3>🎉 L'équipe a trouvé le mot-titre ! 🎉</h3>
                ${gameStatus.team && gameStatus.team.length > 0 ? `
                    <div class="alert alert-success">
                        <h4><i class="fas fa-users text-success me-2"></i>Équipe gagnante :</h4>
                        ${gameStatus.team.map(player => `
                            <p class="mb-1">${player.player_name} - Score: ${player.score} (${player.attempts} tentatives)</p>
                        `).join('')}
                    </div>
                ` : ''}
                <p class="lead">Félicitations à toute l'équipe ! Que souhaitez-vous faire maintenant ?</p>
            </div>
        `;
    } else {
        // Mode compétition - message de gagnant
        modalContent = `
            <div class="modal-body text-center">
                <h3>🏁 Tous les joueurs ont trouvé le mot-titre ! 🏁</h3>
                ${gameStatus.winner ? `
                    <div class="alert alert-warning">
                        <h4><i class="fas fa-crown text-warning me-2"></i>Gagnant: ${gameStatus.winner.player_name}</h4>
                        <p>Score: ${gameStatus.winner.score} - ${gameStatus.winner.attempts} tentatives</p>
                    </div>
                ` : ''}
                <p class="lead">Que souhaitez-vous faire maintenant ?</p>
            </div>
        `;
    }

    const modalHTML = `
        <div class="modal fade" id="gameGloballyCompletedModal" tabindex="-1" data-bs-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header ${gameStatus.game_mode === 'cooperation' ? 'bg-success' : 'bg-primary'} text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-${gameStatus.game_mode === 'cooperation' ? 'hands-helping' : 'flag-checkered'} me-2"></i>Partie terminée !
                        </h5>
                    </div>
                    ${modalContent}
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-success btn-lg me-3" onclick="startNewGame()">
                            <i class="fas fa-play me-2"></i>Nouvelle partie
                        </button>
                        <button type="button" class="btn btn-secondary btn-lg" onclick="window.location.href='/'">
                            <i class="fas fa-home me-2"></i>Accueil
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;

    // Ajouter le modal au DOM s'il n'existe pas
    if (!document.getElementById('gameGloballyCompletedModal')) {
        document.body.insertAdjacentHTML('beforeend', modalHTML);
    }

    // Afficher le modal
    const modal = new bootstrap.Modal(document.getElementById('gameGloballyCompletedModal'));
    modal.show();
}

// Aller à la page de récapitulatif
function goToRecapPage() {
    // Au lieu d'aller aux stats, démarrer une nouvelle partie
    startNewGame();
}

// Démarrer une nouvelle partie
async function startNewGame() {
    try {
        if (!gameSession || !gameSession.sessionId) {
            // Pas de session, retourner à l'accueil
            window.location.href = '/';
            return;
        }

        // Désactiver temporairement le bouton pendant la création
        const button = event?.target;
        if (button) {
            button.disabled = true;
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Création en cours...';
        }

        // Appeler directement l'API pour créer une nouvelle partie avec un article aléatoire
        const response = await fetch('/api/new-game', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                current_room_code: roomCode,
                session_id: gameSession.sessionId
            })
        });

        const data = await response.json();

        if (data.success) {
            // Succès : recharger la page avec le nouvel article
            showResult(`Nouvelle partie créée ! Article: ${data.new_article_title}`, 'success');
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } else {
            // Erreur
            showResult(`Erreur : ${data.error}`, 'danger');
            if (button) {
                button.disabled = false;
                button.innerHTML = '<i class="fas fa-play me-2"></i>Nouvelle partie';
            }
        }
    } catch (error) {
        console.error('Erreur:', error);
        showResult('Erreur de connexion. Veuillez réessayer.', 'danger');
        if (button) {
            button.disabled = false;
            button.innerHTML = '<i class="fas fa-play me-2"></i>Nouvelle partie';
        }
    }
}

async function joinRoom(playerName) {
    try {
        const response = await fetch('/join-room', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                room_code: roomCode,
                player_name: playerName
            })
        });

        const data = await response.json();
        if (data.success) {
            gameSession = {
                sessionId: data.session_id,
                roomCode: data.room.code,
                playerName: data.player.name
            };

            sessionStorage.setItem('gameSession', JSON.stringify(gameSession));

            // Afficher les données du jeu
            document.getElementById('roomTitle').textContent = data.room.title;
            updatePlayerStats(data.player);

            // Récupérer les tentatives existantes du joueur
            if (data.player.found_words && data.player.found_words.length > 0) {
                data.player.found_words.forEach(word => {
                    const normalizedWord = word.toLowerCase();
                    if (!uniqueWords.has(normalizedWord)) {
                        uniqueWords.add(normalizedWord);
                        attemptCounter++;
                        guessHistory.unshift({
                            number: attemptCounter,
                            word: word,
                            found: true,
                            proximity: null,
                            timestamp: 'Précédent'
                        });
                    }
                });
                updateGuessHistory();
            }

            showGameInterface();
            loadArticleContent();
            updateLeaderboard();
        } else {
            showResult(data.error, 'danger');
        }
    } catch (error) {
        showResult('Erreur de connexion', 'danger');
    }
}

async function submitGuess(guess) {
    if (!gameSession) return;

    try {
        const response = await fetch('/api/guess', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                session_id: gameSession.sessionId,
                guess: guess
            })
        });

        const data = await response.json();
        if (data.success) {
            const result = data.result;
            const normalizedGuess = guess.toLowerCase();

            if (result.duplicate) {
                showResult(`Le mot "${result.word}" a déjà été essayé !`, 'warning');
                return;
            }

            if (!uniqueWords.has(normalizedGuess)) {
                uniqueWords.add(normalizedGuess);
                attemptCounter++;

                guessHistory.unshift({
                    number: attemptCounter,
                    word: result.word,
                    found: result.found,
                    proximity: result.proximity,
                    timestamp: new Date().toLocaleTimeString()
                });

                // Stocker les proximités localement pour éviter qu'elles disparaissent
                if (!result.found && result.proximity > 0) {
                    storeProximityLocally(result.word, result.proximity);
                }

                if (result.found) {
                    if (result.gameCompleted) {
                        // Victoire personnelle ! - Juste afficher le message et les confettis
                        showResult(`🎉 VICTOIRE ! Vous avez trouvé "${result.word}" !`, 'success');
                        revealAllWords();
                        showConfetti();

                        // Déclencher immédiatement la vérification des événements pour notifier les autres
                        setTimeout(() => checkGameEvents(), 500);
                    } else {
                        showResult(`✅ "${result.word}" trouvé dans l'article !`, 'success');
                        loadArticleContent();
                    }
                } else {
                    loadArticleContent();
                }

                updatePlayerStats(data.player);
                updateGuessHistory();
                updateLeaderboard();
            }
        } else {
            if (data.error && data.error.includes('déjà')) {
                showResult(`Le mot "${guess}" a déjà été essayé !`, 'warning');
            } else {
                showResult(data.error || 'Erreur lors de la soumission', 'danger');
            }
        }
    } catch (error) {
        console.error('Erreur réseau:', error);
        showResult('Erreur de connexion. Veuillez réessayer.', 'danger');
    }
}

async function loadArticleContent() {
    if (!gameSession) {
        console.log('Pas de session de jeu - impossible de charger l\'article');
        return;
    }

    console.log('Chargement de l\'article pour la session:', gameSession.sessionId);

    try {
        // Préparer les données de proximité des dernières tentatives
        const proximityData = guessHistory
            .filter(guess => !guess.found && guess.proximity > 0)
            .slice(0, 10) // Augmenter de 5 à 10 pour garder plus d'historique
            .map(guess => ({
                word: guess.word,
                proximity: guess.proximity
            }));

        // Ajouter aussi les mots avec proximité stockés localement
        const storedProximities = JSON.parse(localStorage.getItem(`proximities_${roomCode}`) || '[]');
        storedProximities.forEach(stored => {
            // Éviter les doublons
            if (!proximityData.find(p => p.word === stored.word)) {
                proximityData.push(stored);
            }
        });

        console.log('Données de proximité:', proximityData);

        const params = new URLSearchParams({
            session_id: gameSession.sessionId,
            proximity_data: JSON.stringify(proximityData)
        });

        console.log('URL appelée:', `/api/article-content/${roomCode}?${params}`);

        const response = await fetch(`/api/article-content/${roomCode}?${params}`);
        console.log('Réponse reçue:', response.status, response.statusText);

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();
        console.log('Données reçues:', data);

        if (data.content) {
            document.getElementById('articleContent').innerHTML = data.content;

            // Mettre à jour la progression du titre si disponible
            if (data.title_progress) {
                updateTitleProgress(data.title_progress);
            }

            // Ajouter les event listeners pour les mots cachés après mise à jour du contenu
            addHiddenWordClickListeners();

            console.log('Article mis à jour avec succès');
        } else {
            console.error('Pas de contenu dans la réponse:', data);
            document.getElementById('articleContent').innerHTML = '<p class="text-danger">Erreur: Aucun contenu reçu</p>';
        }

        if (data.error) {
            console.error('Erreur du serveur:', data.error);
            document.getElementById('articleContent').innerHTML = `<p class="text-danger">Erreur: ${data.error}</p>`;
        }
    } catch (error) {
        console.error('Erreur lors du chargement de l\'article:', error);
        document.getElementById('articleContent').innerHTML = `<p class="text-danger">Erreur de connexion: ${error.message}</p>`;
    }
}

function addHiddenWordClickListeners() {
    // Ajouter des event listeners pour tous les mots cachés
    const hiddenWords = document.querySelectorAll('.hidden-word, .hidden-word-with-proximity');

    hiddenWords.forEach(wordElement => {
        wordElement.addEventListener('click', function(e) {
            showWordLengthHint(e, this);
        });
    });
}

function showWordLengthHint(event, wordElement) {
    // Récupérer le mot original depuis l'attribut data-word
    const originalWord = wordElement.getAttribute('data-word');
    if (!originalWord) return;

    // Calculer le nombre de caractères du mot original
    const wordLength = originalWord.length;

    // Créer l'élément tooltip
    const hint = document.createElement('div');
    hint.className = 'word-length-hint';
    hint.textContent = `${wordLength} caractères`;

    // Positionner le tooltip près du clic
    const rect = wordElement.getBoundingClientRect();
    hint.style.left = event.clientX + 'px';
    hint.style.top = (rect.top - 50) + 'px';

    // Ajouter au DOM
    document.body.appendChild(hint);

    // Afficher avec animation
    setTimeout(() => {
        hint.classList.add('show');
    }, 10);

    // Supprimer après 2 secondes avec animation de sortie
    setTimeout(() => {
        hint.classList.remove('show');
        setTimeout(() => {
            if (hint.parentNode) {
                hint.parentNode.removeChild(hint);
            }
        }, 300);
    }, 2000);
}

function getProximityText(proximity) {
    if (proximity >= 900) return `🔥 TRÈS CHAUD ! (${proximity}/1000)`;
    if (proximity >= 700) return `🌡️ Chaud ! (${proximity}/1000)`;
    if (proximity >= 500) return `🌤️ Tiède (${proximity}/1000)`;
    if (proximity >= 300) return `❄️ Froid (${proximity}/1000)`;
    return `🧊 Très froid (${proximity}/1000)`;
}

function getProximityClass(proximity) {
    if (proximity >= 700) return 'proximity-high';
    if (proximity >= 400) return 'proximity-medium';
    return 'proximity-low';
}

function revealAllWords() {
    // R��véler tous les mots de l'article
    document.querySelectorAll('.hidden-word').forEach(word => {
        word.classList.remove('hidden-word');
        word.classList.add('title-word'); // Style spécial pour la victoire
    });
}

function showConfetti() {
    const container = document.getElementById('confettiContainer') || document.body;

    // Créer des confettis
    for (let i = 0; i < 50; i++) {
        setTimeout(() => {
            const confetti = document.createElement('div');
            confetti.className = 'confetti';
            confetti.style.left = Math.random() * 100 + '%';
            confetti.style.background = `hsl(${Math.random() * 360}, 70%, 60%)`;
            confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';
            confetti.style.animationDelay = Math.random() * 2 + 's';

            container.appendChild(confetti);

            setTimeout(() => confetti.remove(), 5000);
        }, i * 100);
    }
}

async function updateLeaderboard() {
    try {
        const response = await fetch(`/api/leaderboard/${roomCode}`);
        const data = await response.json();

        displayLeaderboard(data.leaderboard);
        displayActivePlayers(data.active_players);
    } catch (error) {
        console.error('Erreur lors du chargement du classement:', error);
    }
}

function showGameInterface() {
    document.getElementById('connectionForm').style.display = 'none';
    document.getElementById('playerStats').style.display = 'flex';
    document.getElementById('guessForm').style.display = 'block';
    document.getElementById('articleSection').style.display = 'block';
    document.getElementById('historyPanel').style.display = 'block';
}

function updatePlayerStats(player) {
    document.getElementById('playerScore').textContent = player.score;
    document.getElementById('playerAttempts').textContent = player.attempts;
    document.getElementById('foundWordsCount').textContent = player.found_words.length;
    document.getElementById('playerName').textContent = gameSession.playerName;
    document.getElementById('totalAttempts').textContent = attemptCounter;
}

function updateGuessHistory() {
    const container = document.getElementById('guessHistory');

    if (guessHistory.length === 0) {
        container.innerHTML = '<p class="text-muted text-center">Aucune tentative pour le moment</p>';
        return;
    }

    container.innerHTML = guessHistory.slice(0, 20).map(guess => {
        let itemClass = 'guess-item';

        if (guess.found) {
            itemClass += ' found';
        }

        return `
            <div class="${itemClass}">
                <div class="guess-number">${guess.number}</div>
                <div class="guess-word">${guess.word}</div>
                ${guess.found ? '<i class="fas fa-check text-success"></i>' : ''}
            </div>
        `;
    }).join('');
}

function displayLeaderboard(leaderboard) {
    const container = document.getElementById('leaderboard');
    if (leaderboard.length === 0) {
        container.innerHTML = '<p class="text-muted text-center">Aucun joueur n\'a encore terminé</p>';
        return;
    }
    container.innerHTML = leaderboard.map((player, index) => `<div class="leaderboard-item p-3"><div class="d-flex justify-content-between align-items-center"><div><span class="fw-bold">${index + 1}. ${player.player_name}</span><br><small class="text-muted">${player.attempts} tentatives</small></div><div class="text-end"><span class="fw-bold text-primary">${player.score}</span></div></div></div>`).join('');
}

function displayActivePlayers(players) {
    const container = document.getElementById('activePlayers');
    if (players.length === 0) {
        container.innerHTML = '<p class="text-muted text-center">Aucun joueur actif</p>';
        return;
    }
    container.innerHTML = players.map(player => `<div class="d-flex justify-content-between align-items-center p-2 mb-2 bg-light rounded"><div><span class="fw-bold">${player.player_name}</span><br><small class="text-muted">${player.found_words_count} mots</small></div><span class="badge bg-primary">${player.score}</span></div>`).join('');
}

function showResult(message, type) {
    const container = document.getElementById('resultMessage');
    container.innerHTML = `<div class="alert alert-${type} alert-dismissible fade show">${message}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>`;
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) {
            const bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }
    }, 5000);
}

function showGameCompletedModal(player) {
    document.getElementById('finalScore').textContent = player.score;
    document.getElementById('finalAttempts').textContent = player.attempts;
    const modal = new bootstrap.Modal(document.getElementById('gameCompletedModal'));
    modal.show();
}

function copyRoomCode() {
    navigator.clipboard.writeText(roomCode).then(() => {
        showResult('Code de salle copié !', 'success');
    }).catch(() => {
        const textArea = document.createElement('textarea');
        textArea.value = roomCode;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        showResult('Code de salle copié !', 'success');
    });
}

// Fonction pour mettre à jour l'affichage de la progression du titre
function updateTitleProgress(titleProgress) {
    if (!titleProgress) return;

    const progressSection = document.getElementById('titleProgressSection');
    const progressDisplay = document.getElementById('titleProgress');
    const progressInfo = document.getElementById('titleProgressInfo');

    if (progressSection && progressDisplay && progressInfo) {
        // Afficher la section de progression du titre
        progressSection.style.display = 'block';

        // Mettre à jour l'affichage du titre avec les mots trouvés/manquants
        progressDisplay.textContent = titleProgress.display_title;

        // Mettre à jour les informations de progression
        progressInfo.textContent = `${titleProgress.found_words}/${titleProgress.total_words} mots trouvés (${titleProgress.progress_percentage}%)`;

        // Ajouter une animation si le titre est complet
        if (titleProgress.is_complete) {
            progressDisplay.style.color = '#28a745';
            progressDisplay.style.fontWeight = 'bold';
            progressDisplay.style.textShadow = '0 0 10px rgba(40, 167, 69, 0.5)';
        }
    }
}

async function loadGameData() {
    await loadArticleContent();
    await updateLeaderboard();
}

// Fonction pour stocker les proximités localement (fonction manquante)
function storeProximityLocally(word, proximity) {
    try {
        const key = `proximities_${roomCode}`;
        let storedProximities = JSON.parse(localStorage.getItem(key) || '[]');

        // Éviter les doublons et limiter à 20 mots maximum
        storedProximities = storedProximities.filter(p => p.word !== word);
        storedProximities.push({
            word: word,
            proximity: proximity,
            timestamp: Date.now()
        });

        // Garder seulement les 20 plus récents
        storedProximities = storedProximities
            .sort((a, b) => b.timestamp - a.timestamp)
            .slice(0, 20);

        localStorage.setItem(key, JSON.stringify(storedProximities));
    } catch (error) {
        console.warn('Erreur lors du stockage de la proximité:', error);
    }
}

// Fonction pour nettoyer les proximités anciennes
function cleanOldProximities() {
    try {
        const key = `proximities_${roomCode}`;
        let storedProximities = JSON.parse(localStorage.getItem(key) || '[]');
        const oneHourAgo = Date.now() - (60 * 60 * 1000);

        // Supprimer les proximités de plus d'une heure
        storedProximities = storedProximities.filter(p => p.timestamp > oneHourAgo);
        localStorage.setItem(key, JSON.stringify(storedProximities));
    } catch (error) {
        console.warn('Erreur lors du nettoyage des proximités:', error);
    }
}
</script>
{% endblock %}