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

   Paramètres attendus :
     heatmap (array) → [{'jour': int (1=Dimanche..7=Samedi MySQL), 'heure': int, 'count': int}]

   Note sur DAYOFWEEK() MySQL :
     1 = Dimanche, 2 = Lundi, ..., 7 = Samedi
     On remappe en affichage français : Lun → Dim
   ─────────────────────────────────────────────────────────────────────────────
#}

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

    <div class="analytics-bloc__header">
        <h2 class="analytics-bloc__titre">🕐 Meilleurs moments</h2>
        <span class="analytics-bloc__periode">{{ jours }} derniers jours</span>
    </div>

    {% if heatmap is empty %}
        <p class="analytics-bloc__empty">Pas encore assez de données sur la période.</p>
    {% else %}

        {# ── Meilleur jour et meilleure heure (résumé texte) ── #}
        {% set bestRow = heatmap | first %}

        {# Remapping DAYOFWEEK MySQL → label français #}
        {% set joursLabels = {
            1: 'Dimanche', 2: 'Lundi', 3: 'Mardi',
            4: 'Mercredi', 5: 'Jeudi', 6: 'Vendredi', 7: 'Samedi'
        } %}

        <div class="analytics-heatmap__resume">
            <div class="analytics-heatmap__best">
                <span class="analytics-heatmap__best-icone">📅</span>
                <div>
                    <span class="analytics-heatmap__best-label">Meilleur jour</span>
                    <span class="analytics-heatmap__best-valeur">
                        {{ joursLabels[bestRow.jour] ?? 'Inconnu' }}
                    </span>
                </div>
            </div>
            <div class="analytics-heatmap__best">
                <span class="analytics-heatmap__best-icone">⏰</span>
                <div>
                    <span class="analytics-heatmap__best-label">Meilleure heure</span>
                    <span class="analytics-heatmap__best-valeur">
                        {{ '%02d'|format(bestRow.heure) }}h – {{ '%02d'|format(bestRow.heure + 1) }}h
                    </span>
                </div>
            </div>
            <div class="analytics-heatmap__best">
                <span class="analytics-heatmap__best-icone">👁</span>
                <div>
                    <span class="analytics-heatmap__best-label">Pic de vues</span>
                    <span class="analytics-heatmap__best-valeur">
                        {{ bestRow.count }} vue{{ bestRow.count > 1 ? 's' : '' }}
                    </span>
                </div>
            </div>
        </div>

        {# ── Grille heatmap 7 jours × 24 heures ── #}
        <div class="analytics-heatmap__grille-wrap">
            <canvas id="chartHeatmap"></canvas>
        </div>

        <script>
        (function () {
            const raw = {{ heatmap | json_encode | raw }};

            // Remapping DAYOFWEEK MySQL (1=Dim) → index affichage (0=Lun..6=Dim)
            const joursAffichage = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];

            // Construire une matrice [jour][heure] = count
            // jour affiché : 0=Lundi...6=Dimanche
            // MySQL DAYOFWEEK : 2=Lundi...7=Samedi, 1=Dimanche
            const matrix = Array.from({ length: 7 }, () => Array(24).fill(0));

            raw.forEach(({ jour, heure, count }) => {
                // Conversion : MySQL 1=Dim → index 6, MySQL 2=Lun → index 0
                const idx = jour === 1 ? 6 : jour - 2;
                if (idx >= 0 && idx < 7 && heure >= 0 && heure < 24) {
                    matrix[idx][heure] = count;
                }
            });

            // Aplatir pour Chart.js — dataset de points {x, y, v}
            const points = [];
            matrix.forEach((heures, jourIdx) => {
                heures.forEach((count, heure) => {
                    points.push({ x: heure, y: jourIdx, v: count });
                });
            });

            // Valeur max pour normaliser les couleurs
            const maxVal = Math.max(...points.map(p => p.v), 1);

            new Chart(document.getElementById('chartHeatmap'), {
                type: 'bubble',
                data: {
                    datasets: [{
                        data: points.map(p => ({
                            x: p.x,
                            y: p.y,
                            r: p.v > 0 ? Math.max(3, Math.sqrt(p.v / maxVal) * 14) : 2,
                            v: p.v
                        })),
                        backgroundColor: points.map(p => {
                            if (p.v === 0) return 'rgba(102,126,234,0.05)';
                            const alpha = 0.15 + (p.v / maxVal) * 0.80;
                            return `rgba(102, 126, 234, ${alpha})`;
                        }),
                        borderColor: 'rgba(102,126,234,0.3)',
                        borderWidth: 1,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                title: (items) => {
                                    const { x, y } = items[0].raw;
                                    return `${joursAffichage[y]} ${String(x).padStart(2,'0')}h–${String(x+1).padStart(2,'0')}h`;
                                },
                                label: (item) => {
                                    const v = item.raw.v;
                                    return v > 0
                                        ? ` ${v} vue${v > 1 ? 's' : ''}`
                                        : ' Aucune vue';
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            min: 0,
                            max: 23,
                            ticks: {
                                stepSize: 3,
                                callback: (val) => `${String(val).padStart(2,'0')}h`
                            },
                            grid: { color: 'rgba(0,0,0,0.04)' },
                            title: { display: true, text: 'Heure de la journée' }
                        },
                        y: {
                            min: 0,
                            max: 6,
                            ticks: {
                                stepSize: 1,
                                callback: (val) => joursAffichage[val] ?? ''
                            },
                            grid: { color: 'rgba(0,0,0,0.04)' }
                        }
                    }
                }
            });
        })();
        </script>

    {% endif %}

</div>