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

   Paramètres attendus :
     totalVues  (int)    → nombre total de vues sur la période
     mode       (string) → 'compteur' (Essentiel) | 'graphe' (Premium+)
     vuesParJour (array) → [{'date': 'YYYY-MM-DD', 'count': int}] — Premium+ uniquement
   ─────────────────────────────────────────────────────────────────────────────
#}

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

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

    {# ── Compteur principal ── #}
    <div class="analytics-vues__compteur">
        <span class="analytics-vues__chiffre">{{ totalVues }}</span>
        <span class="analytics-vues__label">vues</span>
    </div>

    {# ── Graphe Chart.js — Premium, FDV, Multi uniquement ── #}
    {% if mode == 'graphe' and vuesParJour is defined and vuesParJour is not empty %}

        <div class="analytics-vues__graphe">
            <canvas id="chartVues" height="120"></canvas>
        </div>

        <script>
        (function () {
            const labels = {{ vuesParJour | map(v => v.date) | json_encode | raw }};
            const data   = {{ vuesParJour | map(v => v.count) | json_encode | raw }};

            new Chart(document.getElementById('chartVues'), {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Vues',
                        data: data,
                        borderColor: '#667eea',
                        backgroundColor: 'rgba(102, 126, 234, 0.08)',
                        borderWidth: 2,
                        pointRadius: 3,
                        pointBackgroundColor: '#667eea',
                        tension: 0.4,
                        fill: true,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                title: (items) => {
                                    // Formate la date en français : "15 mars 2026"
                                    const d = new Date(items[0].label);
                                    return d.toLocaleDateString('fr-FR', {
                                        day: 'numeric', month: 'long', year: 'numeric'
                                    });
                                },
                                label: (item) => ` ${item.raw} vue${item.raw > 1 ? 's' : ''}`
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: {
                                maxTicksLimit: 7,
                                callback: function(val, index) {
                                    // Affiche uniquement jour/mois sur l'axe X
                                    const d = new Date(this.getLabelForValue(val));
                                    return d.toLocaleDateString('fr-FR', {
                                        day: 'numeric', month: 'short'
                                    });
                                }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            ticks: { stepSize: 1 },
                            grid: { color: 'rgba(0,0,0,0.05)' }
                        }
                    }
                }
            });
        })();
        </script>

    {% elseif mode == 'graphe' and (vuesParJour is not defined or vuesParJour is empty) %}

        <p class="analytics-vues__empty">
            Pas encore assez de données pour afficher le graphe.
        </p>

    {% endif %}

</div>