{# templates/analytics/_bloc_comparatif.html.twig
   ─────────────────────────────────────────────────────────────────────────────
   Bloc comparatif — Multi-Cartes uniquement.

   Paramètres attendus :
     statsParCarte  (array)  → [beneficiaire_id => { vues: int, clics: int }]
                                trié par vues décroissantes (depuis le repository)
     beneficiaires  (array)  → collection de Beneficiaire
   ─────────────────────────────────────────────────────────────────────────────
#}

{# ── Index des bénéficiaires par id pour lookup rapide ── #}
{% set benefIndex = {} %}
{% for b in beneficiaires %}
    {% set benefIndex = benefIndex | merge({ (b.id): b }) %}
{% endfor %}

{# ── Valeur max pour normaliser les barres ── #}
{% set maxVues = 1 %}
{% for id, stats in statsParCarte %}
    {% if stats.vues > maxVues %}
        {% set maxVues = stats.vues %}
    {% endif %}
{% endfor %}

{# ── Palette couleurs (même ordre que _bloc_parc) ── #}
{% set palette = ['#667eea', '#764ba2', '#22c55e', '#f59e0b', '#ef4444', '#06b6d4', '#8b5cf6', '#ec4899'] %}

<div class="analytics-bloc analytics-bloc--comparatif">

    <div class="analytics-bloc__header">
        <h2 class="analytics-bloc__titre">🏆 Comparatif performance</h2>
        <span class="analytics-bloc__periode">{{ jours }} derniers jours</span>
    </div>

    {% if statsParCarte is empty %}

        <p class="analytics-bloc__empty">Aucune donnée disponible pour comparer les cartes.</p>

    {% else %}

        {# ══════════════════════════════════════════════════════════════════
           TABLEAU COMPARATIF
           ══════════════════════════════════════════════════════════════════ #}
        <div class="analytics-comparatif__tableau-wrap">
            <table class="analytics-comparatif__tableau">
                <thead>
                    <tr>
                        <th class="analytics-comparatif__th--rang">#</th>
                        <th>Carte</th>
                        <th class="analytics-comparatif__th--chiffre">Vues</th>
                        <th class="analytics-comparatif__th--chiffre">Clics</th>
                        <th class="analytics-comparatif__th--chiffre">Engagement</th>
                        <th class="analytics-comparatif__th--barre">Performance</th>
                    </tr>
                </thead>
                <tbody>
                    {% set rang = 1 %}
                    {% for id, stats in statsParCarte %}
                        {% set benef = benefIndex[id] ?? null %}
                        {% set couleur = palette[(rang - 1) % palette | length] %}
                        {% set engagement = stats.vues > 0 ? ((stats.clics / stats.vues) * 100) | round(1) : 0 %}
                        {% set pctBarre = maxVues > 0 ? ((stats.vues / maxVues) * 100) | round(1) : 0 %}

                        <tr class="analytics-comparatif__ligne {{ rang == 1 ? 'analytics-comparatif__ligne--leader' : '' }}">

                            {# Rang #}
                            <td class="analytics-comparatif__rang">
                                {% if rang == 1 %}
                                    <span class="analytics-comparatif__medaille analytics-comparatif__medaille--or">🥇</span>
                                {% elseif rang == 2 %}
                                    <span class="analytics-comparatif__medaille analytics-comparatif__medaille--argent">🥈</span>
                                {% elseif rang == 3 %}
                                    <span class="analytics-comparatif__medaille analytics-comparatif__medaille--bronze">🥉</span>
                                {% else %}
                                    <span class="analytics-comparatif__medaille">{{ rang }}</span>
                                {% endif %}
                            </td>

                            {# Identité #}
                            <td class="analytics-comparatif__identite">
                                <span class="analytics-comparatif__pastille"
                                      style="background: {{ couleur }};"></span>
                                {% if benef %}
                                    <span class="analytics-comparatif__nom">{{ benef.fullName }}</span>
                                    {% if benef.entreprise %}
                                        <span class="analytics-comparatif__entreprise">{{ benef.entreprise }}</span>
                                    {% endif %}
                                {% else %}
                                    <span class="analytics-comparatif__nom">Carte #{{ id }}</span>
                                {% endif %}
                            </td>

                            {# Vues #}
                            <td class="analytics-comparatif__chiffre">
                                {{ stats.vues }}
                            </td>

                            {# Clics #}
                            <td class="analytics-comparatif__chiffre">
                                {{ stats.clics }}
                            </td>

                            {# Taux engagement #}
                            <td class="analytics-comparatif__chiffre">
                                {% if engagement > 0 %}
                                    <span style="color: {% if engagement >= 20 %}#22c55e{% elseif engagement >= 10 %}#f59e0b{% else %}#ef4444{% endif %};">
                                        {{ engagement }}%
                                    </span>
                                {% else %}
                                    <span style="color: #86868b;">—</span>
                                {% endif %}
                            </td>

                            {# Barre performance relative #}
                            <td class="analytics-comparatif__barre-cell">
                                <div class="analytics-comparatif__barre-wrap">
                                    <div class="analytics-comparatif__barre"
                                         style="width: {{ pctBarre }}%; background: {{ couleur }};">
                                    </div>
                                </div>
                                <span class="analytics-comparatif__barre-pct">{{ pctBarre }}%</span>
                            </td>

                        </tr>
                        {% set rang = rang + 1 %}
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# ══════════════════════════════════════════════════════════════════
           BAR CHART COMPARATIF — vues vs clics par carte
           ══════════════════════════════════════════════════════════════════ #}
        <div class="analytics-comparatif__chart">
            <canvas id="chartComparatif" height="200"></canvas>
        </div>

        <script>
        (function () {
            const statsParCarte  = {{ statsParCarte | json_encode | raw }};
            const beneficiaires  = {{ beneficiaires | map(b => {
                'id':  b.id,
                'nom': b.fullName
            }) | json_encode | raw }};

            // Tri par id correspondant à l'ordre statsParCarte (déjà trié par vues DESC)
            const ids    = Object.keys(statsParCarte);
            const labels = ids.map(id => {
                const b = beneficiaires.find(b => String(b.id) === String(id));
                return b ? b.nom : `Carte #${id}`;
            });
            const vues  = ids.map(id => statsParCarte[id].vues);
            const clics = ids.map(id => statsParCarte[id].clics);

            const palette = [
                '#667eea', '#764ba2', '#22c55e', '#f59e0b',
                '#ef4444', '#06b6d4', '#8b5cf6', '#ec4899'
            ];

            new Chart(document.getElementById('chartComparatif'), {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Vues',
                            data: vues,
                            backgroundColor: ids.map((_, i) => palette[i % palette.length] + '99'),
                            borderColor:     ids.map((_, i) => palette[i % palette.length]),
                            borderWidth: 1.5,
                            borderRadius: 6,
                        },
                        {
                            label: 'Clics',
                            data: clics,
                            backgroundColor: ids.map((_, i) => palette[i % palette.length] + '44'),
                            borderColor:     ids.map((_, i) => palette[i % palette.length]),
                            borderWidth: 1.5,
                            borderRadius: 6,
                            borderDash: [4, 2],
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { padding: 16, font: { size: 13 } }
                        },
                        tooltip: {
                            callbacks: {
                                label: (item) => {
                                    const unit = item.datasetIndex === 0 ? 'vue' : 'clic';
                                    return ` ${item.raw} ${unit}${item.raw > 1 ? 's' : ''}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: { grid: { display: false } },
                        y: {
                            beginAtZero: true,
                            ticks: { stepSize: 1 },
                            grid: { color: 'rgba(0,0,0,0.05)' }
                        }
                    }
                }
            });
        })();
        </script>

    {% endif %}

</div>