{% extends 'gestion/_base.html.twig' %}
{% set active = 'stats' %}

{% macro duree(s) %}
    {%- set s = s|round -%}
    {%- if s < 1 -%}0 s
    {%- elseif s < 60 -%}{{ s }} s
    {%- elseif s < 3600 -%}{{ s // 60 }} min {{ '%02d'|format(s % 60) }} s
    {%- else -%}{{ s // 3600 }} h {{ '%02d'|format((s % 3600) // 60) }} min
    {%- endif -%}
{% endmacro %}
{% import _self as fmt %}

{% block title %}Statistiques{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Pilotage</span>
            <h1 class="adm-page-title">Statistiques</h1>
            <p class="adm-page-sub">Audience sans cookie (hash quotidien salé) — {{ excludedHits }} hit(s) de bots exclus sur la période.</p>
        </div>
        <div class="adm-page-head-actions">
            {% for p in periodes %}
                <a class="adm-btn adm-btn--sm {{ p == periode ? '' : 'adm-btn--ghost' }}" href="{{ path('gestion_stats', {periode: p}) }}">{{ p }} jours</a>
            {% endfor %}
            <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ path('gestion_stats_rapports') }}">Rapports</a>
        </div>
    </div>

    <div class="adm-grid adm-grid--kpi">
        <div class="adm-kpi"><div class="adm-kpi-label">Visiteurs uniques</div><div class="adm-kpi-value">{{ summary.visitors }}</div></div>
        <div class="adm-kpi"><div class="adm-kpi-label">Pages vues</div><div class="adm-kpi-value">{{ summary.pageviews }}</div></div>
        <div class="adm-kpi"><div class="adm-kpi-label">Ajouts panier</div><div class="adm-kpi-value">{{ summary.addToCarts }}</div></div>
        <div class="adm-kpi"><div class="adm-kpi-label">Commandes</div><div class="adm-kpi-value">{{ summary.orders }}</div></div>
        <div class="adm-kpi"><div class="adm-kpi-label">Vues de robots</div><div class="adm-kpi-value" title="Beacons rejetés sur la période : User-Agent de robot connu ou cadence anormale. Les robots sans JavaScript n'atteignent jamais la mesure et ne sont pas comptés ici.">{{ excludedHits }}</div></div>
        <div class="adm-kpi"><div class="adm-kpi-label">Chiffre d'affaires</div><div class="adm-kpi-value">{{ summary.revenue|number_format(0, ',', ' ') }} €</div></div>
        <div class="adm-kpi"><div class="adm-kpi-label">Conversion</div><div class="adm-kpi-value">{{ summary.conversion }} %</div></div>
        <div class="adm-kpi"><div class="adm-kpi-label">Comptes créés</div><div class="adm-kpi-value">{{ summary.accounts }} <span style="font-size:0.55em;color:var(--v2-ink-soft);">/ {{ summary.totalAccounts }} au total</span></div></div>
    </div>

    <div class="adm-card" style="margin-top:16px;">
        <h2 class="adm-card-title">Visiteurs &amp; ventes par jour</h2>
        <div style="height:280px;"><canvas id="stats-chart"></canvas></div>
    </div>

    <div class="adm-grid adm-grid--2" style="margin-top:16px;">
        <div class="adm-card">
            <h2 class="adm-card-title">Top pages</h2>
            {% if topPages is empty %}
                <div class="adm-empty"><p>Pas encore de données — le beacon collecte depuis la mise en ligne.</p></div>
            {% else %}
                <div class="adm-table-wrap"><table class="adm-table adm-table--auto">
                    <thead><tr><th>Page</th><th>Vues</th><th>Visiteurs</th></tr></thead>
                    <tbody>
                        {% for page in topPages %}
                            <tr><td class="adm-mono" style="font-size:0.78rem;">{{ page.path }}</td><td class="is-num">{{ page.vues }}</td><td class="is-num">{{ page.visiteurs }}</td></tr>
                        {% endfor %}
                    </tbody>
                </table></div>
            {% endif %}
        </div>

        <div class="adm-card">
            <h2 class="adm-card-title">Top produits — vues → panier → achat</h2>
            {% if topProducts is empty %}
                <div class="adm-empty"><p>Aucune vue produit sur la période.</p></div>
            {% else %}
                <div class="adm-table-wrap"><table class="adm-table adm-table--auto">
                    <thead><tr><th>Produit</th><th>Vues</th><th>Paniers</th><th>Achats</th></tr></thead>
                    <tbody>
                        {% for produit in topProducts %}
                            <tr>
                                <td><strong>{{ produit.libelle }}</strong></td>
                                <td class="is-num">{{ produit.vues }}</td>
                                <td class="is-num">{{ produit.paniers }}</td>
                                <td class="is-num">{{ produit.achats }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table></div>
            {% endif %}
        </div>

        <div class="adm-card">
            <h2 class="adm-card-title">Top catégories</h2>
            {% if topCategories is empty %}
                <div class="adm-empty"><p>Aucune donnée catégorie.</p></div>
            {% else %}
                <div class="adm-table-wrap"><table class="adm-table adm-table--auto">
                    <thead><tr><th>Catégorie</th><th>Vues</th></tr></thead>
                    <tbody>
                        {% for cat in topCategories %}
                            <tr><td>{{ cat.categorie|replace({'_': ' '})|capitalize }}</td><td class="is-num">{{ cat.vues }}</td></tr>
                        {% endfor %}
                    </tbody>
                </table></div>
            {% endif %}
        </div>

        <div class="adm-card">
            <h2 class="adm-card-title">Appareils &amp; référents</h2>
            {% set totalDevices = devices|reduce((a, b) => a + b, 0) %}
            {% if totalDevices > 0 %}
                {% set dlabels = {'desktop': 'Ordinateur', 'mobile': 'Mobile', 'tablet': 'Tablette'} %}
                {% for device, nb in devices %}
                    <div class="adm-statbar">
                        <span style="font-size:0.84rem;">{{ dlabels[device]|default(device|capitalize) }}</span>
                        <div class="adm-gauge-bar"><div class="adm-gauge-fill" style="width:{{ (nb / totalDevices * 100)|round }}%;"></div></div>
                        <span class="adm-gauge-txt">{{ nb }}</span>
                    </div>
                {% endfor %}
            {% else %}
                <p class="adm-field-help" style="margin-top:0;">Aucune visite mesurée sur la période.</p>
            {% endif %}

            <h3 style="font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--v2-ink-soft);margin:18px 0 8px;">Sites référents</h3>
            {% if referrers is empty %}
                <p class="adm-field-help" style="margin-top:0;">Aucun référent externe (accès directs).</p>
            {% else %}
                {% for ref in referrers %}
                    <div style="display:flex;justify-content:space-between;font-size:0.82rem;border-bottom:1px solid var(--v2-steel-200);padding:5px 0;">
                        <span class="adm-mono">{{ ref.referrer_host }}</span>
                        <span>{{ ref.visiteurs }}</span>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>

    <div class="adm-grid adm-grid--2" style="margin-top:16px;">
        <div class="adm-card">
            <h2 class="adm-card-title">Pays des visiteurs</h2>
            {% if topCountries is not empty %}
                <div class="adm-table-wrap"><table class="adm-table adm-table--auto">
                    <thead><tr><th>Pays</th><th>Visiteurs</th><th>Vues</th></tr></thead>
                    <tbody>
                        {% for c in topCountries %}
                            <tr{% if loop.index > 5 %} hidden data-pays-extra{% endif %}>
                                <td>{{ c.pays }}{% if c.code and c.pays != c.code %} <span class="adm-mono" style="opacity:.5;font-size:.8em;">{{ c.code }}</span>{% endif %}</td>
                                <td class="is-num">{{ c.visiteurs }}</td>
                                <td class="is-num">{{ c.vues }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table></div>
                {% if topCountries|length > 5 %}
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-more="[data-pays-extra]" data-label="Voir plus ({{ topCountries|length - 5 }})" aria-expanded="false" style="margin-top:10px;">Voir plus ({{ topCountries|length - 5 }})</button>
                {% endif %}
            {% elseif not geoReady %}
                <div class="adm-empty"><p>Base pays absente du serveur (<code class="adm-mono">data/geoip/dbip-country-lite.mmdb</code>).</p></div>
            {% else %}
                <div class="adm-empty"><p>Aucune visite géolocalisée sur la période.</p></div>
            {% endif %}
            <p class="adm-field-help" style="margin-top:10px;">Pays déduit de l'adresse IP à la connexion (base DB-IP figée) puis oubliée — l'IP n'est pas conservée. Vrais visiteurs uniquement.</p>
        </div>

        <div class="adm-card">
            <h2 class="adm-card-title">Temps passé sur une page</h2>
            {% if engagement.samples > 0 %}
                <div class="adm-kpi-value" style="font-size:2rem;">{{ fmt.duree(engagement.avgSeconds) }}</div>
                <p class="adm-field-help" style="margin-top:6px;">Moyenne sur {{ engagement.samples }} page(s) consultée(s).{% if engagement.noData > 0 %} {{ engagement.noData }} sans mesure exploitable (départ immédiat ou onglet resté en arrière-plan).{% endif %}</p>
                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-more="#eng-detail" data-label="Voir plus" aria-expanded="false" style="margin-top:10px;">Voir plus</button>
                <div id="eng-detail" hidden style="margin-top:12px;display:flex;gap:28px;">
                    <div><div style="font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--v2-ink-soft);">Minimum</div><div style="font-size:1.2rem;">{{ fmt.duree(engagement.minSeconds) }}</div></div>
                    <div><div style="font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--v2-ink-soft);">Maximum</div><div style="font-size:1.2rem;">{{ fmt.duree(engagement.maxSeconds) }}</div></div>
                </div>
            {% else %}
                <div class="adm-empty"><p>Pas encore de temps de lecture mesuré sur la période.</p></div>
            {% endif %}
            <p class="adm-field-help" style="margin-top:10px;">Temps réel passé sur la page : le minuteur ne tourne que si l'onglet est au premier plan, et se met en pause après 15 s sans activité (souris, défilement, clavier). Vrais visiteurs, robots exclus.</p>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script src="{{ asset('vendor/chartjs/chart.umd.js') }}"></script>
<script>
(function () {
    'use strict';
    var series = {{ series|json_encode|raw }};
    var ctx = document.getElementById('stats-chart');
    new Chart(ctx, {
        data: {
            labels: series.map(function (d) { return d.day.slice(8, 10) + '/' + d.day.slice(5, 7); }),
            datasets: [
                {
                    type: 'bar',
                    label: 'Visiteurs',
                    data: series.map(function (d) { return d.visitors; }),
                    backgroundColor: 'rgba(45, 148, 70, 0.55)',
                    borderRadius: 3,
                    yAxisID: 'y'
                },
                {
                    type: 'line',
                    label: 'Commandes',
                    data: series.map(function (d) { return d.orders; }),
                    borderColor: '#D9622B',
                    backgroundColor: '#D9622B',
                    tension: 0.3,
                    pointRadius: 2,
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: { legend: { labels: { boxWidth: 12, font: { size: 11 } } } },
            scales: {
                y: { beginAtZero: true, ticks: { precision: 0 } },
                y1: { beginAtZero: true, position: 'right', grid: { drawOnChartArea: false }, ticks: { precision: 0 } }
            }
        }
    });
})();
</script>
<script>
(function () {
    'use strict';
    // « Voir plus / Voir moins » basique : bascule l'attribut hidden des
    // éléments visés par le sélecteur data-more.
    document.querySelectorAll('[data-more]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var open = btn.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll(btn.getAttribute('data-more')).forEach(function (el) {
                el.hidden = open;
            });
            btn.setAttribute('aria-expanded', open ? 'false' : 'true');
            btn.textContent = open ? (btn.getAttribute('data-label') || 'Voir plus') : 'Voir moins';
        });
    });
})();
</script>
{% endblock %}