{# templates/analytics/_bloc_parc.html.twig
   ─────────────────────────────────────────────────────────────────────────────
   Bloc parc — Multi-Cartes uniquement.

   Paramètres attendus :
     commande   (CommandeMulti) → la commande parente du parc
     totalParc  (array)         → { vues: int, clics: int }
   ─────────────────────────────────────────────────────────────────────────────
#}

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

    <div class="analytics-bloc__header">
        <h2 class="analytics-bloc__titre">◈ Vue consolidée du parc</h2>
        <span class="analytics-bloc__periode">{{ jours }} derniers jours</span>
    </div>

    {# ── Infos commande ── #}
    <div class="analytics-parc__commande">
        <span class="analytics-parc__ref">Réf. {{ commande.reference }}</span>
        <span class="analytics-parc__pack">{{ commande.packLabel }}</span>
        <span class="analytics-parc__nb">
            {{ commande.beneficiaires | length }} carte{{ commande.beneficiaires | length > 1 ? 's' : '' }}
        </span>
    </div>

    {# ── KPIs globaux du parc ── #}
    <div class="analytics-parc__kpis">

        <div class="analytics-parc__kpi">
            <span class="analytics-parc__kpi-icone">👁</span>
            <span class="analytics-parc__kpi-chiffre">{{ totalParc.vues }}</span>
            <span class="analytics-parc__kpi-label">
                Vue{{ totalParc.vues > 1 ? 's' : '' }} totales
            </span>
        </div>

        <div class="analytics-parc__kpi">
            <span class="analytics-parc__kpi-icone">👆</span>
            <span class="analytics-parc__kpi-chiffre">{{ totalParc.clics }}</span>
            <span class="analytics-parc__kpi-label">
                Clic{{ totalParc.clics > 1 ? 's' : '' }} totaux
            </span>
        </div>

        <div class="analytics-parc__kpi">
            <span class="analytics-parc__kpi-icone">📊</span>
            <span class="analytics-parc__kpi-chiffre">
                {% if totalParc.vues > 0 %}
                    {{ ((totalParc.clics / totalParc.vues) * 100) | round(1) }}%
                {% else %}
                    —
                {% endif %}
            </span>
            <span class="analytics-parc__kpi-label">Taux d'engagement</span>
        </div>

        <div class="analytics-parc__kpi">
            <span class="analytics-parc__kpi-icone">📈</span>
            <span class="analytics-parc__kpi-chiffre">
                {% if commande.beneficiaires | length > 0 %}
                    {{ (totalParc.vues / commande.beneficiaires | length) | round(1) }}
                {% else %}
                    —
                {% endif %}
            </span>
            <span class="analytics-parc__kpi-label">Vues / carte</span>
        </div>

    </div>

    {# ── Graphe donut — répartition des vues par carte ── #}
    {% if totalParc.vues > 0 %}

        <div class="analytics-parc__donut">
            <canvas id="chartParc" height="200"></canvas>
        </div>

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

            // Palette de couleurs pour chaque carte
            const palette = [
                '#667eea', '#764ba2', '#22c55e', '#f59e0b',
                '#ef4444', '#06b6d4', '#8b5cf6', '#ec4899'
            ];

            const labels = beneficiaires.map(b => b.nom);
            const data   = beneficiaires.map(b => statsParCarte[b.id]?.vues ?? 0);
            const colors = beneficiaires.map((_, i) => palette[i % palette.length]);

            new Chart(document.getElementById('chartParc'), {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        borderColor: '#ffffff',
                        borderWidth: 2,
                    }]
                },
                options: {
                    responsive: true,
                    cutout: '60%',
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { padding: 16, font: { size: 13 } }
                        },
                        tooltip: {
                            callbacks: {
                                label: (item) => {
                                    const total = {{ totalParc.vues }};
                                    const pct   = ((item.raw / total) * 100).toFixed(1);
                                    return ` ${item.raw} vue${item.raw > 1 ? 's' : ''} (${pct}%)`;
                                }
                            }
                        }
                    }
                }
            });
        })();
        </script>

    {% else %}

        <p class="analytics-bloc__empty">
            Aucune vue enregistrée sur le parc pour cette période.
        </p>

    {% endif %}

</div>