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

{% block title %}Profil de {{ joueur.prenom }} {{ joueur.nom }} - Arras 6{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* CSS pour centrer le texte dans les camemberts */
        .chart-container {
            position: relative;
            width: 120px; 
            height: 120px;
            margin: 0 auto; 
        }
        .chart-center-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -45%);
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
            color: #212529;
            pointer-events: none;
        }
        .chart-label {
            margin-top: 15px;
            font-weight: 700;
            color: #6c757d;
            font-size: 0.85rem;
            text-transform: uppercase;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container py-4">
    
    {# --- BOUTON RETOUR --- #}
    <div class="mb-4">
        <a href="{{ path('app_equipe') }}" class="btn btn-outline-arras border-0 shadow-sm bg-white">
            <i class="fas fa-arrow-left me-2"></i> Retour à l'équipe
        </a>
    </div>

    {# --- BANNIÈRE DU PROFIL --- #}
    <div class="card card-premium border-0 mb-5 overflow-hidden">
        <div class="bca-bg-dark py-5 text-center position-relative">
            
            {# 📸 AFFICHAGE DE LA PHOTO (Même logique que sur la page équipe) #}
            {% if joueur.photo %}
                <img src="{{ asset('img/joueurs/' ~ joueur.photo) }}" 
                     class="rounded-circle shadow mb-3 border border-4 border-white bg-white" 
                     style="width: 130px; height: 130px; object-fit: cover;" 
                     alt="{{ joueur.prenom }}">
            {% else %}
                <i class="fas fa-user-circle shadow mb-3 rounded-circle bg-white" style="font-size: 130px; color: #0dcaf0; padding: 4px; border: 4px solid #fff;"></i>
            {% endif %}
            
            <h1 class="fw-bold text-white mb-0 display-5">{{ joueur.prenom }} {{ joueur.nom|upper }}</h1>
            
            <div class="d-flex justify-content-center gap-3 mt-4">
                <span class="badge bg-light text-dark px-3 py-2 rounded-pill shadow-sm fs-6">S: {{ joueur.classementSimple|default('NC') }}</span>
                <span class="badge bg-light text-dark px-3 py-2 rounded-pill shadow-sm fs-6">D: {{ joueur.classementDouble|default('NC') }}</span>
                <span class="badge bg-light text-dark px-3 py-2 rounded-pill shadow-sm fs-6">M: {{ joueur.classementMixte|default('NC') }}</span>
            </div>
        </div>
    </div>

    <div class="row g-4">
        {# --- COLONNE GAUCHE : STATS GLOBALES --- #}
        <div class="col-lg-4">
            <div class="card card-premium mb-4 h-100 border-top border-4 border-info">
                <div class="card-body p-4 p-md-5">
                    <h5 class="fw-bold mb-4 text-arras border-bottom pb-3">⚡ Statistiques globales</h5>
                    
                    <div class="mb-4 d-flex justify-content-between align-items-center bg-light p-3 rounded-3 border">
                        <span class="text-muted fw-bold text-uppercase small">Total matchs</span>
                        <span class="fw-bold fs-4 text-dark">{{ stats.total }}</span>
                    </div>
                    
                    <div class="mb-3 d-flex justify-content-between align-items-center px-2">
                        <span class="fw-semibold"><i class="fas fa-check-circle text-success me-2 fs-5"></i>Victoires</span>
                        <span class="text-success fw-bold fs-5">{{ stats.victoires }}</span>
                    </div>
                    
                    <div class="mb-5 d-flex justify-content-between align-items-center px-2">
                        <span class="fw-semibold"><i class="fas fa-times-circle text-danger me-2 fs-5"></i>Défaites</span>
                        <span class="text-danger fw-bold fs-5">{{ stats.defaites }}</span>
                    </div>

                    {% set ratioGlobal = stats.total > 0 ? (stats.victoires / stats.total * 100)|round : 0 %}
                    <div class="pt-4 border-top">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="fw-bold text-muted small text-uppercase">Taux de victoire</span>
                            <span class="fw-bold text-arras fs-5">{{ ratioGlobal }}%</span>
                        </div>
                        <div class="progress rounded-pill border" style="height: 12px; background-color: #f8f9fa;">
                            <div class="progress-bar {{ ratioGlobal >= 50 ? 'bg-success' : (ratioGlobal == 0 ? 'bg-secondary' : 'bg-warning') }}" role="progressbar" style="width: {{ ratioGlobal }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# --- COLONNE DROITE : GRAPHIQUES ET TABLEAU --- #}
        <div class="col-lg-8">
            
            {# Bloc Graphiques #}
            <div class="card card-premium mb-4">
                <div class="card-body p-4 p-md-5">
                    <h5 class="fw-bold mb-4 text-arras border-bottom pb-3">📊 Performance par format</h5>
                    
                    <div class="row text-center justify-content-evenly pt-3">
                        
                        {# --- Graphique SIMPLE --- #}
                        <div class="col-md-4 mb-4 mb-md-0">
                            {% set totalS = stats.simple.total %}
                            {% set victoiresS = stats.simple.v %}
                            {% set defaitesS = totalS - victoiresS %}
                            {% set pctS = totalS > 0 ? (victoiresS / totalS * 100)|round : 0 %}
                            
                            <div class="chart-container">
                                <canvas id="chartSimple"></canvas>
                                <div class="chart-center-text">
                                    <div class="text-dark">{{ pctS }}%</div>
                                </div>
                            </div>
                            <p class="chart-label">Simple<br><span class="text-success">{{ victoiresS }}V</span> / <span class="text-danger">{{ defaitesS }}D</span></p>
                        </div>

                        {# --- Graphique DOUBLE --- #}
                        <div class="col-md-4 mb-4 mb-md-0">
                            {% set totalD = stats.double.total %}
                            {% set victoiresD = stats.double.v %}
                            {% set defaitesD = totalD - victoiresD %}
                            {% set pctD = totalD > 0 ? (victoiresD / totalD * 100)|round : 0 %}

                            <div class="chart-container">
                                <canvas id="chartDouble"></canvas>
                                <div class="chart-center-text">
                                    <div class="text-dark">{{ pctD }}%</div>
                                </div>
                            </div>
                            <p class="chart-label">Double<br><span class="text-success">{{ victoiresD }}V</span> / <span class="text-danger">{{ defaitesD }}D</span></p>
                        </div>

                        {# --- Graphique MIXTE --- #}
                        <div class="col-md-4">
                            {% set totalM = stats.mixte.total %}
                            {% set victoiresM = stats.mixte.v %}
                            {% set defaitesM = totalM - victoiresM %}
                            {% set pctM = totalM > 0 ? (victoiresM / totalM * 100)|round : 0 %}

                            <div class="chart-container">
                                <canvas id="chartMixte"></canvas>
                                <div class="chart-center-text">
                                    <div class="text-dark">{{ pctM }}%</div>
                                </div>
                            </div>
                            <p class="chart-label">Mixte<br><span class="text-success">{{ victoiresM }}V</span> / <span class="text-danger">{{ defaitesM }}D</span></p>
                        </div>
                    </div>
                </div>
            </div>

            {# Tableau Historique #}
            <div class="card card-premium overflow-hidden">
                <div class="card-body p-0">
                    <div class="p-4 p-md-5 border-bottom">
                        <h5 class="fw-bold mb-0 text-arras">🗓️ Derniers matchs ({{ stats.total }})</h5>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0 border-0">
                            <thead class="table-light small text-muted text-uppercase" style="font-size: 0.8rem;">
                                <tr>
                                    <th class="ps-4 border-0 py-3">Date</th>
                                    <th class="border-0 py-3">Format</th>
                                    <th class="border-0 py-3">Adversaire</th>
                                    <th class="border-0 py-3 text-center">Score</th>
                                    <th class="border-0 py-3 text-center pe-4">Résultat</th>
                                </tr>
                            </thead>
                            <tbody>
                                {# On affiche les 10 derniers matchs #}
                                {% for match in matchs|reverse|slice(0, 10) %}
                                    <tr onclick="window.location.href='{{ path('app_rencontre_show', {'id': match.rencontre.id}) }}#match-{{ match.id }}'" style="cursor: pointer;" title="Voir les détails de la rencontre">
                                        <td class="ps-4 text-muted fw-bold">
                                            {{ match.rencontre and match.rencontre.dateRencontre ? match.rencontre.dateRencontre|date('d/m') : '-' }}
                                        </td>
                                        <td>
                                            {% if match.typeMatch|lower == 'simple' %}<i class="fas fa-user text-muted me-1"></i>
                                            {% elseif match.typeMatch|lower == 'double' %}<i class="fas fa-user-friends text-muted me-1"></i>
                                            {% else %}<i class="fas fa-venus-mars text-muted me-1"></i>{% endif %}
                                            <span class="small fw-bold text-dark">{{ match.typeMatch|capitalize }}</span>
                                        </td>
                                        <td>
                                            <div class="fw-bold text-arras">{{ match.nomAdversaire }}</div>
                                            <div class="small text-muted">{{ match.opponentTeam }}</div>
                                        </td>
                                        <td class="text-center fw-bold font-monospace" style="letter-spacing: 1px;">{{ match.score|replace({' ': '  '}) }}</td>
                                        <td class="text-center pe-4">
                                            {% if match.resultat|lower == 'victoire' %}
                                                <span class="badge bg-success rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 25px; height: 25px;">V</span>
                                            {% else %}
                                                <span class="badge bg-danger rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 25px; height: 25px;">D</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="5" class="text-center p-5 text-muted">
                                            <i class="fas fa-ghost fs-3 mb-3"></i><br>
                                            Aucun match enregistré.
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Ajout de Chart.js et configuration #}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Configuration commune pour les anneaux
    const commonOptions = {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '75%', 
        plugins: {
            legend: { display: false }, 
            tooltip: {
                backgroundColor: 'rgba(38, 54, 93, 0.9)',
                padding: 12,
                titleFont: { size: 14, family: "'Montserrat', sans-serif" },
                bodyFont: { size: 14, family: "'Montserrat', sans-serif" },
                callbacks: {
                    label: function(context) {
                        let label = context.label || '';
                        let value = context.parsed;
                        let total = context.dataset.data.reduce((a, b) => a + b, 0);
                        let percentage = total > 0 ? Math.round((value / total) * 100) : 0;
                        return ' ' + label + ' : ' + value + ' match' + (value > 1 ? 's' : '') + ' (' + percentage + '%)';
                    }
                }
            }
        }
    };

    // Fonction pour créer un graphique
    function createDoughnutChart(id, victoires, defaites) {
        const ctx = document.getElementById(id).getContext('2d');
        
        // Si pas de matchs, on affiche un cercle gris
        let dataValues = [victoires, defaites];
        let bgColors = ['#198754', '#dc3545']; // Vert Succès, Rouge Danger
        let borderColors = ['#ffffff', '#ffffff'];

        if (victoires + defaites === 0) {
            dataValues = [1]; 
            bgColors = ['#f8f9fa']; // Gris très clair
            borderColors = ['#e9ecef'];
        }

        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Victoires', 'Défaites'],
                datasets: [{
                    data: dataValues,
                    backgroundColor: bgColors,
                    borderColor: borderColors,
                    borderWidth: 3,
                    hoverOffset: 5
                }]
            },
            options: commonOptions
        });
    }

    createDoughnutChart('chartSimple', {{ stats.simple.v|default(0) }}, {{ (stats.simple.total - stats.simple.v)|default(0) }});
    createDoughnutChart('chartDouble', {{ stats.double.v|default(0) }}, {{ (stats.double.total - stats.double.v)|default(0) }});
    createDoughnutChart('chartMixte', {{ stats.mixte.v|default(0) }}, {{ (stats.mixte.total - stats.mixte.v)|default(0) }});
</script>
{% endblock %}