// Données utilisateurs locales persistantes pour éviter les pannes d'API au chargement local
let currentUser = JSON.parse(localStorage.getItem('currentUser')) || {
    username: "Pronostiqueur Pro 2026",
    points: 320,
    predictionsCount: 3,
    successRate: 66
};

let currentMatch = null;
let currentCategoryFilter = 'all';

window.onload = function() {
    initDashboard();
};

function initDashboard() {
    // Affichage des informations de l'utilisateur connecté
    document.getElementById('userName').textContent = currentUser.username;
    document.getElementById('userPoints').textContent = `${currentUser.points} pts`;
    
    // Rendu initial des sections
    loadMatches();
    loadPlayers();
    loadLeaderboard();
    loadStats();
}

function showSection(sectionId) {
    document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
    document.querySelectorAll('.sidebar li').forEach(l => l.classList.remove('active'));
    
    document.getElementById(sectionId).classList.add('active');
    document.getElementById(`tab-${sectionId}`).classList.add('active');
}

// --- FILTRES ET ENREGISTREMENT DES MATCHES ---
function filterMatchesCategory(category) {
    currentCategoryFilter = category;
    document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
    
    if(category === 'all') document.getElementById('btn-all-matches').classList.add('active');
    if(category === 'Messieurs') document.getElementById('btn-mens-matches').classList.add('active');
    if(category === 'Dames') document.getElementById('btn-womens-matches').classList.add('active');
    
    loadMatches();
}

function loadMatches() {
    const container = document.getElementById('matchesList');
    if(!container) return;
    container.innerHTML = '';

    const filteredMatches = tournamentMatches.filter(match => {
        return currentCategoryFilter === 'all' || match.gender === currentCategoryFilter;
    });

    filteredMatches.forEach(match => {
        const p1 = playersData[match.player1];
        const p2 = playersData[match.player2];
        if(!p1 || !p2) return;

        const matchCard = document.createElement('div');
        matchCard.className = 'match-card';
        matchCard.onclick = () => openPredictionModal(match);

        const badgeColor = match.gender === 'Messieurs' ? '#e85d04' : '#0077b6';

        matchCard.innerHTML = `
            <div class="player-info">
                <img src="${p1.photo}" alt="${p1.name}" class="player-photo">
                <div class="player-details">
                    <h3>${p1.name}</h3>
                    <p>${p1.nationality} • ${p1.handedness}</p>
                    <p>Classement : #${p1.ranking}</p>
                </div>
            </div>
            <div class="vs" style="color: ${badgeColor}">VS</div>
            <div class="player-info" style="flex-direction: row-reverse; text-align: right;">
                <img src="${p2.photo}" alt="${p2.name}" class="player-photo">
                <div class="player-details">
                    <h3>${p2.name}</h3>
                    <p>${p2.nationality} • ${p2.handedness}</p>
                    <p>Classement : #${p2.ranking}</p>
                </div>
            </div>
            <div class="match-info">
                <span class="round" style="background: ${badgeColor}">${match.round}</span>
                <p class="date">${new Date(match.date).toLocaleDateString('fr-FR', {day: 'numeric', month: 'long'})}</p>
                <p style="font-size:0.8rem; color:#888;">${match.court}</p>
                ${match.status === 'completed' ? `<p class="score" style="font-weight:bold; color:#28a745; margin-top:5px;">${match.score}</p>` : '<p style="color:#e85d04; font-size:0.85rem; font-weight:600;">👉 Pronostiquer</p>'}
            </div>
        `;
        container.appendChild(matchCard);
    });
}

// --- MOTEUR DE RECHERCHE ET RENDU DES JOUEURS ---
function handlePlayerSearch() {
    loadPlayers();
}

function loadPlayers() {
    const container = document.getElementById('playersGrid');
    if(!container) return;
    container.innerHTML = '';

    const searchQuery = document.getElementById('playerSearch').value.toLowerCase();
    const genderFilter = document.getElementById('genderFilter').value;

    Object.keys(playersData).forEach(key => {
        const player = playersData[key];
        
        // Validation des filtres de recherche croisés
        const matchesSearch = player.name.toLowerCase().includes(searchQuery) || player.nationality.toLowerCase().includes(searchQuery);
        const matchesGender = genderFilter === 'all' || player.gender === genderFilter;

        if (matchesSearch && matchesGender) {
            const card = document.createElement('div');
            card.className = 'player-card';

            const strengthsHtml = player.strengths.map(s => `<span class="tag strength">${s}</span>`).join('');
            const weaknessesHtml = player.weaknesses.map(w => `<span class="tag weakness">${w}</span>`).join('');
            const genderBadgeColor = player.gender === 'Messieurs' ? '#e85d04' : '#0077b6';

            card.innerHTML = `
                <div class="player-header" style="background: linear-gradient(135deg, ${genderBadgeColor}, #faedcd)">
                    <span style="position:absolute; top:10px; right:10px; background:rgba(255,255,255,0.2); padding: 2px 8px; border-radius:10px; color:white; font-size:0.75rem; font-weight:bold;">${player.gender}</span>
                    <img src="${player.photo}" alt="${player.name}">
                    <h3>${player.name}</h3>
                    <p>#${player.ranking} Mondial • ${player.points} pts</p>
                </div>
                <div class="player-body">
                    <div class="stat-row"><span>🎂 Âge (en 2026)</span><strong>${player.age} ans</strong></div>
                    <div class="stat-row"><span>📏 Taille</span><strong>${player.height}</strong></div>
                    <div class="stat-row"><span>🌍 Nationalité</span><strong>${player.nationality}</strong></div>
                    <div class="stat-row"><span>🤝 Latéralité</span><strong>${player.handedness}</strong></div>
                    <div class="stat-row"><span>📊 Efficacité Terre Battue</span><strong style="color:#e85d04">${(player.surfaceStats.clay.winRate * 100).toFixed(0)}%</strong></div>
                    <div class="strengths"><h4>💪 Points forts</h4>${strengthsHtml}</div>
                    <div class="weaknesses" style="margin-top:10px;"><h4>⚠️ Points faibles</h4>${weaknessesHtml}</div>
                </div>
            `;
            container.appendChild(card);
        }
    });
}

// --- MODAL & ANALYSE TACTIQUE DYNAMIQUE ---
function openPredictionModal(match) {
    if (match.status === 'completed') return;
    currentMatch = match;

    const p1 = playersData[match.player1];
    const p2 = playersData[match.player2];
    
    const modal = document.getElementById('predictionModal');
    const details = document.getElementById('matchDetails');
    
    details.innerHTML = `
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; text-align: center;">
            <div>
                <img src="${p1.photo}" style="width: 80px; height: 80px; border-radius: 50%; border: 3px solid #e85d04;">
                <h3>${p1.name}</h3>
                <p style="color:#666; font-size:0.9rem;">#${p1.ranking} Mondial</p>
            </div>
            <div>
                <img src="${p2.photo}" style="width: 80px; height: 80px; border-radius: 50%; border: 3px solid #e85d04;">
                <h3>${p2.name}</h3>
                <p style="color:#666; font-size:0.9rem;">#${p2.ranking} Mondial</p>
            </div>
        </div>
        <p style="text-align: center; font-weight: 600; color: #e85d04;">${match.round} — ${match.court}</p>
    `;

    // Calcul des probabilités de réussite via l'algorithme croisé
    const probs = calculateWinProbability(match.player1, match.player2);
    document.getElementById('prob1').style.width = `${probs.player1}%`;
    document.getElementById('prob2').style.width = `${probs.player2}%`;
    document.getElementById('probText1').textContent = `${probs.player1}%`;
    document.getElementById('probText2').textContent = `${probs.player2}%`;

    document.getElementById('predictBtn1').textContent = `Miser sur ${p1.name}`;
    document.getElementById('predictBtn2').textContent = `Miser sur ${p2.name}`;

    // Calcul dynamique des forces/défauts en face à face
    const analysis = getMatchupAnalysis(match.player1, match.player2);
    const analysisDiv = document.getElementById('matchupAnalysis');
    
    analysisDiv.innerHTML = `
        <h3 style="margin-bottom:10px; font-size:1.1rem; border-bottom:1px solid #ddd; padding-bottom:5px;">🔬 Analyse tactique personnalisée</h3>
        <div class="analysis-grid" style="display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem;">
            <div class="advantage">
                <h4 style="color:#28a745;">👍 Avantages de ${p1.name}</h4>
                <ul style="padding-left:15px; font-size:0.85rem; margin-top:5px;">
                    ${analysis.player1Advantages.map(a => `<li style="margin-bottom:4px;">${a}</li>`).join('')}
                </ul>
                <h4 style="color:#dc3545; margin-top:10px;">👎 Faiblesses exploitables</h4>
                <ul style="padding-left:15px; font-size:0.85rem; margin-top:5px; color:#555;">
                    ${analysis.player1Disadvantages.map(d => `<li style="margin-bottom:4px;">${d}</li>`).join('')}
                </ul>
            </div>
            <div class="advantage">
                <h4 style="color:#28a745;">👍 Avantages de ${p2.name}</h4>
                <ul style="padding-left:15px; font-size:0.85rem; margin-top:5px;">
                    ${analysis.player2Advantages.map(a => `<li style="margin-bottom:4px;">${a}</li>`).join('')}
                </ul>
                <h4 style="color:#dc3545; margin-top:10px;">👎 Faiblesses exploitables</h4>
                <ul style="padding-left:15px; font-size:0.85rem; margin-top:5px; color:#555;">
                    ${analysis.player2Disadvantages.map(d => `<li style="margin-bottom:4px;">${d}</li>`).join('')}
                </ul>
            </div>
        </div>
    `;

    modal.style.display = 'block';
}

function closePredictionModal() {
    document.getElementById('predictionModal').style.display = 'none';
    currentMatch = null;
}

function makePrediction(playerNum) {
    if (!currentMatch) return;
    const selectedPlayer = playerNum === 1 ? playersData[currentMatch.player1] : playersData[currentMatch.player2];
    
    currentUser.points += 10; // Gain de participation standard
    currentUser.predictionsCount += 1;
    
    localStorage.setItem('currentUser', JSON.stringify(currentUser));
    initDashboard();
    
    alert(`🎯 Pronostic enregistré avec succès pour ${selectedPlayer.name} ! +10 points ajoutés.`);
    closePredictionModal();
}

// --- CLASSEMENT ET STATISTIQUES ---
function loadLeaderboard() {
    const tbody = document.getElementById('leaderboardBody');
    if(!tbody) return;
    tbody.innerHTML = `
        <tr style="font-weight:bold; background:#faf3e0;">
            <td>🥇 1</td><td>${currentUser.username} (Vous)</td><td>${currentUser.points}</td><td>${Math.round(currentUser.predictionsCount * (currentUser.successRate/100))}</td>
        </tr>
        <tr><td>🥈 2</td><td>BabolatFan_26</td><td>290</td><td>5</td></tr>
        <tr><td>🥉 3</td><td>ClayCourtKing</td><td>240</td><td>4</td></tr>
    `;
}

function loadStats() {
    document.getElementById('totalPredictions').textContent = currentUser.predictionsCount;
    document.getElementById('successRate').textContent = `${currentUser.successRate}%`;
    document.getElementById('bestStreak').textContent = "3";
}

function logout() {
    localStorage.clear();
    alert("Session clôturée.");
    location.reload();
}

// Fermeture du modal au clic à l'extérieur
window.onclick = function(event) {
    const modal = document.getElementById('predictionModal');
    if (event.target === modal) closePredictionModal();
};