{# templates/analytics/_bloc_clics.html.twig
   ─────────────────────────────────────────────────────────────────────────────
   Bloc clics — Premium, Force de Vente, Multi uniquement.

   Paramètres attendus :
     clics (array) → [{'action': string, 'count': int}]
                     Actions possibles : telephone, email, linkedin, facebook,
                     instagram, tiktok, youtube, site_web, adresse,
                     whatsapp, actu, recommandation
   ─────────────────────────────────────────────────────────────────────────────
#}

{# ── Calcul du total ── #}
{% set totalClics = 0 %}
{% for row in clics %}
    {% set totalClics = totalClics + row.count %}
{% endfor %}

{# ── Config par action ── #}
{% set clicConfig = {
    'telephone':      { 'label': 'Téléphone',    'icone': '📞', 'couleur': '#22c55e' },
    'email':          { 'label': 'Email',         'icone': '✉️',  'couleur': '#667eea' },
    'linkedin':       { 'label': 'LinkedIn',      'icone': '💼', 'couleur': '#0077b5' },
    'facebook':       { 'label': 'Facebook',      'icone': '📘', 'couleur': '#1877f2' },
    'instagram':      { 'label': 'Instagram',     'icone': '📸', 'couleur': '#e1306c' },
    'tiktok':         { 'label': 'TikTok',        'icone': '🎵', 'couleur': '#010101' },
    'youtube':        { 'label': 'YouTube',       'icone': '▶️',  'couleur': '#ff0000' },
    'site_web':       { 'label': 'Site web',      'icone': '🌐', 'couleur': '#764ba2' },
    'adresse':        { 'label': 'Adresse / GPS', 'icone': '📍', 'couleur': '#f59e0b' },
    'whatsapp':       { 'label': 'WhatsApp',      'icone': '💬', 'couleur': '#25d366' },
    'actu':           { 'label': 'Mon Actu',      'icone': '📰', 'couleur': '#06b6d4' },
    'recommandation': { 'label': 'Recommandation','icone': '🤝', 'couleur': '#8b5cf6' }
} %}

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

    <div class="analytics-bloc__header">
        <h2 class="analytics-bloc__titre">👆 Détail des clics</h2>
        <span class="analytics-bloc__periode">{{ jours }} derniers jours</span>
    </div>

    {% if clics is empty %}
        <p class="analytics-bloc__empty">Aucun clic enregistré sur la période.</p>
    {% else %}

        {# ── Total clics ── #}
        <div class="analytics-clics__total">
            <span class="analytics-clics__total-chiffre">{{ totalClics }}</span>
            <span class="analytics-clics__total-label">clic{{ totalClics > 1 ? 's' : '' }} au total</span>
        </div>

        {# ── Liste des actions ── #}
        <div class="analytics-clics__liste">
            {% for row in clics %}
                {% set config = clicConfig[row.action] ?? { 'label': row.action, 'icone': '•', 'couleur': '#86868b' } %}
                {% set pct = totalClics > 0 ? ((row.count / totalClics) * 100) | round(1) : 0 %}

                <div class="analytics-clics__item">

                    <div class="analytics-clics__identity">
                        <span class="analytics-clics__icone"
                              style="background-color: {{ config.couleur }}1a; color: {{ config.couleur }};">
                            {{ config.icone }}
                        </span>
                        <span class="analytics-clics__label">{{ config.label }}</span>
                    </div>

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

                    <div class="analytics-clics__chiffres">
                        <span class="analytics-clics__count">{{ row.count }}</span>
                        <span class="analytics-clics__pct">{{ pct }}%</span>
                    </div>

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

        {# ── Bar chart horizontal Chart.js ── #}
        <div class="analytics-clics__chart">
            <canvas id="chartClics" height="180"></canvas>
        </div>

        <script>
        (function () {
            const clicConfig = {
                'telephone':      { label: 'Téléphone',     couleur: '#22c55e' },
                'email':          { label: 'Email',          couleur: '#667eea' },
                'linkedin':       { label: 'LinkedIn',       couleur: '#0077b5' },
                'facebook':       { label: 'Facebook',       couleur: '#1877f2' },
                'instagram':      { label: 'Instagram',      couleur: '#e1306c' },
                'tiktok':         { label: 'TikTok',         couleur: '#010101' },
                'youtube':        { label: 'YouTube',        couleur: '#ff0000' },
                'site_web':       { label: 'Site web',       couleur: '#764ba2' },
                'adresse':        { label: 'Adresse / GPS',  couleur: '#f59e0b' },
                'whatsapp':       { label: 'WhatsApp',       couleur: '#25d366' },
                'actu':           { label: 'Mon Actu',       couleur: '#06b6d4' },
                'recommandation': { label: 'Recommandation', couleur: '#8b5cf6' },
            };

            const raw    = {{ clics | json_encode | raw }};
            const labels = raw.map(r => clicConfig[r.action]?.label ?? r.action);
            const data   = raw.map(r => r.count);
            const colors = raw.map(r => clicConfig[r.action]?.couleur ?? '#86868b');

            new Chart(document.getElementById('chartClics'), {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Clics',
                        data: data,
                        backgroundColor: colors.map(c => c + '99'),
                        borderColor: colors,
                        borderWidth: 1.5,
                        borderRadius: 6,
                    }]
                },
                options: {
                    indexAxis: 'y',   // barres horizontales
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: (item) => ` ${item.raw} clic${item.raw > 1 ? 's' : ''}`
                            }
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            ticks: { stepSize: 1 },
                            grid: { color: 'rgba(0,0,0,0.05)' }
                        },
                        y: {
                            grid: { display: false }
                        }
                    }
                }
            });
        })();
        </script>

    {% endif %}

</div>