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

   Paramètres attendus :
     pays  (array)  → [{'pays': 'FR', 'count': int}] — code ISO 2 lettres
     mode  (string) → 'liste' (Essentiel) | 'carte' (Premium+)
   ─────────────────────────────────────────────────────────────────────────────
#}

{# ── Table de drapeaux emoji (pas besoin de twig/string-extra) ── #}
{% set paysDrapeaux = {
    'FR': '🇫🇷', 'BE': '🇧🇪', 'CH': '🇨🇭', 'LU': '🇱🇺',
    'CA': '🇨🇦', 'MA': '🇲🇦', 'TN': '🇹🇳', 'DZ': '🇩🇿',
    'SN': '🇸🇳', 'CI': '🇨🇮', 'CM': '🇨🇲', 'DE': '🇩🇪',
    'ES': '🇪🇸', 'IT': '🇮🇹', 'GB': '🇬🇧', 'US': '🇺🇸',
    'PT': '🇵🇹', 'NL': '🇳🇱', 'RE': '🇷🇪', 'GP': '🇬🇵',
    'MQ': '🇲🇶', 'GF': '🇬🇫', 'NC': '🇳🇨', 'PF': '🇵🇫',
    'BR': '🇧🇷', 'MX': '🇲🇽', 'AR': '🇦🇷', 'CL': '🇨🇱',
    'JP': '🇯🇵', 'CN': '🇨🇳', 'IN': '🇮🇳', 'AU': '🇦🇺',
    'ZA': '🇿🇦', 'NG': '🇳🇬', 'KE': '🇰🇪', 'GH': '🇬🇭',
    'PL': '🇵🇱', 'RU': '🇷🇺', 'TR': '🇹🇷', 'SA': '🇸🇦',
    'AE': '🇦🇪', 'SG': '🇸🇬', 'HK': '🇭🇰', 'KR': '🇰🇷'
} %}
{% set totalPays = 0 %}
{% for row in pays %}
    {% set totalPays = totalPays + row.count %}
{% endfor %}

{# ── Noms complets des pays les plus courants ── #}
{% set paysNoms = {
    'FR': 'France',        'BE': 'Belgique',      'CH': 'Suisse',
    'LU': 'Luxembourg',    'CA': 'Canada',         'MA': 'Maroc',
    'TN': 'Tunisie',       'DZ': 'Algérie',        'SN': 'Sénégal',
    'CI': 'Côte d\'Ivoire','CM': 'Cameroun',       'DE': 'Allemagne',
    'ES': 'Espagne',       'IT': 'Italie',          'GB': 'Royaume-Uni',
    'US': 'États-Unis',    'PT': 'Portugal',        'NL': 'Pays-Bas',
    'RE': 'La Réunion',    'GP': 'Guadeloupe',      'MQ': 'Martinique',
    'GF': 'Guyane',        'NC': 'Nouvelle-Calédonie', 'PF': 'Polynésie française'
} %}

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

    <div class="analytics-bloc__header">
        <h2 class="analytics-bloc__titre">🌍 Pays d'origine</h2>
        <span class="analytics-bloc__periode">{{ jours }} derniers jours</span>
    </div>

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

        {# ══════════════════════════════════════════════════════════════════
           MODE LISTE — Essentiel
           Tableau simple : drapeau + nom + count, max 10 lignes
           ══════════════════════════════════════════════════════════════════ #}
        {% if mode == 'liste' %}

            <table class="analytics-pays__table">
                <thead>
                    <tr>
                        <th>Pays</th>
                        <th>Vues</th>
                        <th>%</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in pays | slice(0, 10) %}
                        {% set pct = totalPays > 0 ? ((row.count / totalPays) * 100) | round(1) : 0 %}
                        {% set nom = paysNoms[row.pays] ?? row.pays %}
                        <tr>
                            <td>
                                {# Emoji drapeau via les Regional Indicator Symbols Unicode #}
                                <span class="analytics-pays__drapeau">
                                    {{ paysDrapeaux[row.pays] ?? '🏳' }}
                                </span>
                                {{ nom }}
                            </td>
                            <td class="analytics-pays__count">{{ row.count }}</td>
                            <td class="analytics-pays__pct">{{ pct }}%</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>

            {% if pays | length > 10 %}
                <p class="analytics-pays__plus">
                    + {{ pays | length - 10 }} autre{{ pays | length - 10 > 1 ? 's' : '' }} pays
                </p>
            {% endif %}

        {# ══════════════════════════════════════════════════════════════════
           MODE CARTE MONDE — Premium, FDV, Multi
           Chart.js choropleth via chartjs-chart-geo
           ══════════════════════════════════════════════════════════════════ #}
        {% elseif mode == 'carte' %}

            {# Top 10 en liste au-dessus de la carte #}
            <div class="analytics-pays__top">
                {% for row in pays | slice(0, 5) %}
                    {% set pct = totalPays > 0 ? ((row.count / totalPays) * 100) | round(1) : 0 %}
                    {% set nom = paysNoms[row.pays] ?? row.pays %}
                    <div class="analytics-pays__top-item">
                        <span class="analytics-pays__top-rang">{{ loop.index }}</span>
                        <span class="analytics-pays__top-nom">{{ nom }}</span>
                        <span class="analytics-pays__top-count">{{ row.count }} vue{{ row.count > 1 ? 's' : '' }}</span>
                        <div class="analytics-pays__top-barre-wrap">
                            <div class="analytics-pays__top-barre"
                                 style="width: {{ pct }}%; background: #667eea;">
                            </div>
                        </div>
                    </div>
                {% endfor %}

                {% if pays | length > 5 %}
                    <p class="analytics-pays__plus">
                        + {{ pays | length - 5 }} autre{{ pays | length - 5 > 1 ? 's' : '' }} pays
                    </p>
                {% endif %}
            </div>

            {# Carte monde #}
            <div class="analytics-pays__carte">
                <canvas id="chartPays" height="200"></canvas>
            </div>

            {# Chart.js Geo — chargé uniquement si on est en mode carte #}
            <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-geo@4.3.0/build/index.umd.min.js"></script>
            <script>
            (function () {
                // Données pays depuis Symfony
                const paysData = {{ pays | json_encode | raw }};

                // Chargement de la topographie monde
                fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json')
                    .then(r => r.json())
                    .then(world => {
                        const countries = ChartGeo.topojson.feature(
                            world,
                            world.objects.countries
                        ).features;

                        // Mapping code ISO numérique → code ISO alpha-2
                        // (simplifié aux pays présents dans paysData)
                        const isoMap = {
                            '250': 'FR', '056': 'BE', '756': 'CH', '442': 'LU',
                            '124': 'CA', '504': 'MA', '788': 'TN', '012': 'DZ',
                            '686': 'SN', '384': 'CI', '120': 'CM', '276': 'DE',
                            '724': 'ES', '380': 'IT', '826': 'GB', '840': 'US',
                            '620': 'PT', '528': 'NL'
                        };

                        const countByCode = {};
                        paysData.forEach(p => { countByCode[p.pays] = p.count; });

                        const dataset = countries.map(feature => ({
                            feature,
                            value: countByCode[isoMap[String(feature.id).padStart(3, '0')]] ?? 0
                        }));

                        new Chart(document.getElementById('chartPays'), {
                            type: 'choropleth',
                            data: {
                                labels: countries.map(d => d.properties.name),
                                datasets: [{
                                    label: 'Vues',
                                    data: dataset,
                                    backgroundColor: (ctx) => {
                                        if (!ctx.raw) return 'rgba(102,126,234,0.05)';
                                        const max = Math.max(...paysData.map(p => p.count));
                                        const alpha = 0.1 + (ctx.raw.value / max) * 0.85;
                                        return `rgba(102, 126, 234, ${alpha})`;
                                    },
                                    borderColor: 'rgba(102,126,234,0.3)',
                                    borderWidth: 0.5,
                                }]
                            },
                            options: {
                                responsive: true,
                                plugins: {
                                    legend: { display: false },
                                    tooltip: {
                                        callbacks: {
                                            label: (item) => {
                                                const v = item.raw.value;
                                                return v > 0
                                                    ? ` ${v} vue${v > 1 ? 's' : ''}`
                                                    : ' Aucune vue';
                                            }
                                        }
                                    }
                                },
                                scales: {
                                    projection: { axis: 'x', projection: 'naturalEarth1' }
                                }
                            }
                        });
                    });
            })();
            </script>

        {% endif %}

    {% endif %}

</div>