{# templates/analytics/_bloc_appareils.html.twig
   ─────────────────────────────────────────────────────────────────────────────
   Bloc appareils — affiché sur tous les niveaux.

   Paramètres attendus :
     appareils (array) → [{'device': 'mobile'|'desktop'|'tablette', 'count': int}]
   ─────────────────────────────────────────────────────────────────────────────
#}

{# ── Calcul du total pour les pourcentages ── #}
{% set totalAppareils = 0 %}
{% for row in appareils %}
    {% set totalAppareils = totalAppareils + row.count %}
{% endfor %}

{# ── Config par type d'appareil ── #}
{% set appareilConfig = {
    'mobile':   { 'label': 'Mobile',   'icone': '📱', 'couleur': '#667eea' },
    'desktop':  { 'label': 'Desktop',  'icone': '🖥',  'couleur': '#764ba2' },
    'tablette': { 'label': 'Tablette', 'icone': '📟', 'couleur': '#22c55e' }
} %}

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

    <div class="analytics-bloc__header">
        <h2 class="analytics-bloc__titre">📱 Appareils</h2>
        <span class="analytics-bloc__periode">{{ jours }} derniers jours</span>
    </div>

    {% if appareils is empty %}
        <p class="analytics-bloc__empty">Aucune donnée sur la période.</p>
    {% else %}

        {# ── Barres horizontales ── #}
        <div class="analytics-appareils__liste">
            {% for row in appareils %}
                {% set config = appareilConfig[row.device] ?? { 'label': row.device, 'icone': '💻', 'couleur': '#86868b' } %}
                {% set pct = totalAppareils > 0 ? ((row.count / totalAppareils) * 100) | round(1) : 0 %}

                <div class="analytics-appareils__item">

                    <div class="analytics-appareils__identity">
                        <span class="analytics-appareils__icone">{{ config.icone }}</span>
                        <span class="analytics-appareils__label">{{ config.label }}</span>
                    </div>

                    <div class="analytics-appareils__barre-wrap">
                        <div class="analytics-appareils__barre"
                             style="width: {{ pct }}%; background-color: {{ config.couleur }};">
                        </div>
                    </div>

                    <div class="analytics-appareils__chiffres">
                        <span class="analytics-appareils__count">{{ row.count }}</span>
                        <span class="analytics-appareils__pct">{{ pct }}%</span>
                    </div>

                </div>
            {% endfor %}
        </div>

        {# ── Résumé visuel — donut Chart.js ── #}
        <div class="analytics-appareils__donut">
            <canvas id="chartAppareils" height="160"></canvas>
        </div>

        <script>
        (function () {
            const labels = {{ appareils | map(a => appareilConfig[a.device] is defined
                ? appareilConfig[a.device].label
                : a.device) | json_encode | raw }};
            const data   = {{ appareils | map(a => a.count) | json_encode | raw }};
            const colors = {{ appareils | map(a => appareilConfig[a.device] is defined
                ? appareilConfig[a.device].couleur
                : '#86868b') | json_encode | raw }};

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

    {% endif %}

</div>