{# templates/analytics/_layout.html.twig
   ─────────────────────────────────────────────────────────────────────────────
   Squelette partagé par tous les dashboards analytics NUM-ECARD.
   Étend le layout compte existant.
   Chaque template de niveau remplit le bloc {% block analytics_content %}.

   TIMEZONE :
     Le JS détecte automatiquement le fuseau horaire du navigateur (IANA)
     et l'ajoute en paramètre ?tz= dans l'URL sans rechargement de page.
     Le Controller PHP le lit, persiste sur Beneficiaire, et l'utilise
     pour tous les calculs de dates dans le repository.
   ─────────────────────────────────────────────────────────────────────────────
#}

{% extends 'account/base_account.html.twig' %}

{% block page_title %}Analytics — {{ beneficiaire.fullName }}{% endblock %}

{# ─── CSS spécifique analytics ──────────────────────────────────────────────── #}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/analytics.css') }}">
{% endblock %}

{# ─── Contenu principal ─────────────────────────────────────────────────────── #}
{% block content %}

    {# ══════════════════════════════════════════════════════════════════════════
       HEADER DU DASHBOARD
       ══════════════════════════════════════════════════════════════════════════ #}
    <div class="analytics-header">

        <div class="analytics-header__identity">
            <h1 class="analytics-header__name">
                {{ beneficiaire.fullName }}
            </h1>
            {% if beneficiaire.entreprise %}
                <p class="analytics-header__entreprise">
                    {{ beneficiaire.entreprise }}
                </p>
            {% endif %}

            {# Badge pack actuel #}
            <span class="badge badge--{{ packType }}">
                {% if packType == 'essentiel' %}    ✦ Essentiel
                {% elseif packType == 'premium' %}   ★ Premium
                {% elseif packType == 'forcevente' %}⚡ Force de Vente
                {% else %}                           ◈ Multi-Cartes
                {% endif %}
            </span>

            {# Indicateur timezone — affiché discrètement pour le support #}
            {% if timezone is defined and timezone %}
                <span class="analytics-header__timezone" title="Fuseau horaire détecté">
                    🕐 {{ timezone }}
                </span>
            {% endif %}
        </div>

        {# ── Sélecteur de période ─────────────────────────────────────────── #}
        <div class="analytics-header__periode">
            <span class="periode-label">Période :</span>
            <div class="periode-buttons">
                {% for p in [7, 30, 90] %}
                    <a href="{{ path(app.request.attributes.get('_route'),
                               app.request.attributes.get('_route_params')
                               | merge({'periode': p, 'tz': timezone ?? 'Europe/Paris'}) ) }}"
                       class="periode-btn {{ jours == p ? 'periode-btn--active' : '' }}">
                        {{ p }}j
                    </a>
                {% endfor %}
            </div>
        </div>

    </div>

    {# ══════════════════════════════════════════════════════════════════════════
       CONTENU ANALYTICS — rempli par chaque template de niveau
       ══════════════════════════════════════════════════════════════════════════ #}
    <div class="analytics-grid">
        {% block analytics_content %}{% endblock %}
    </div>

    {# ══════════════════════════════════════════════════════════════════════════
       FOOTER RGPD OBLIGATOIRE (document Philippe — section 4.4)
       ══════════════════════════════════════════════════════════════════════════ #}
    <p class="analytics-rgpd-footer">
        Cette carte collecte des statistiques de consultation anonymisées (pays, appareil, clics).
        Aucune donnée personnelle identifiante n'est collectée. Données supprimées après 90 jours.
        Conformément au RGPD — SANAGENCY,
        <a href="mailto:contact@sanagency.fr">contact@sanagency.fr</a>
    </p>

{% endblock %}

{# ─── JavaScript — Chart.js + détection timezone ───────────────────────────── #}
{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="{{ asset('js/analytics.js') }}"></script>

    <script>
    /**
     * Détection automatique du fuseau horaire du navigateur.
     *
     * Fonctionnement :
     *   1. On lit le timezone IANA du navigateur via l'API Intl (ex: "America/Martinique")
     *   2. Si l'URL ne contient pas encore ?tz=, on l'ajoute silencieusement
     *      (history.replaceState — PAS de rechargement de page)
     *   3. Au prochain clic sur un bouton de période, le ?tz= sera inclus
     *      automatiquement dans l'URL car les liens du sélecteur le propagent.
     *   4. Le Controller PHP lit ?tz=, le persiste sur le Beneficiaire en base,
     *      et l'utilise pour tous les calculs de dates du dashboard.
     *
     * Résultat : un client à la Martinique, Los Angeles ou Tokyo voit
     * ses stats calculées sur SES journées locales, pas sur l'heure du serveur.
     */
    (function () {
        try {
            // Récupère le timezone IANA du navigateur : "Europe/Paris", "America/Martinique", etc.
            var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;

            if (!tz) return; // navigateur trop ancien — on laisse le fallback PHP

            var url = new URL(window.location.href);

            // Ajouter ?tz= seulement s'il n'est pas déjà présent dans l'URL
            if (!url.searchParams.has('tz')) {
                url.searchParams.set('tz', tz);

                // Mettre à jour l'URL dans la barre du navigateur SANS recharger la page
                window.history.replaceState({}, '', url.toString());
            }
        } catch (e) {
            // Silencieux — le Controller PHP utilise le fallback Europe/Paris
        }
    })();
    </script>
{% endblock %}