{# templates/analytics/_bloc_duree.html.twig
   ─────────────────────────────────────────────────────────────────────────────
   Bloc durée — Premium, Force de Vente, Multi uniquement.

   Paramètres attendus :
     dureeAvg (float) → durée moyenne de consultation en secondes (arrondie à 10s)
                        0.0 si aucune donnée disponible
   ─────────────────────────────────────────────────────────────────────────────
#}

{# ── Conversion secondes → minutes + secondes pour l'affichage ── #}
{% set minutes = (dureeAvg / 60) | round(0, 'floor') %}
{% set secondes = (dureeAvg % 60) | round(0) %}

{# ── Évaluation qualitative de la durée ── #}
{% if dureeAvg == 0 %}
    {% set evaluation = { 'label': 'Pas de données', 'icone': '—',  'couleur': '#86868b', 'note': '' } %}
{% elseif dureeAvg < 10 %}
    {% set evaluation = { 'label': 'Très courte',    'icone': '⚡', 'couleur': '#ef4444', 'note': 'La carte est consultée très brièvement. Vérifiez l\'accroche visuelle.' } %}
{% elseif dureeAvg < 30 %}
    {% set evaluation = { 'label': 'Courte',         'icone': '📉', 'couleur': '#f59e0b', 'note': 'Consultation rapide. Le contenu capte l\'attention mais peut être enrichi.' } %}
{% elseif dureeAvg < 60 %}
    {% set evaluation = { 'label': 'Correcte',       'icone': '✅', 'couleur': '#22c55e', 'note': 'Bonne durée de consultation. Le contenu engage correctement.' } %}
{% elseif dureeAvg < 120 %}
    {% set evaluation = { 'label': 'Bonne',          'icone': '⭐', 'couleur': '#667eea', 'note': 'Très bonne durée. Les visiteurs explorent votre carte en détail.' } %}
{% else %}
    {% set evaluation = { 'label': 'Excellente',     'icone': '🏆', 'couleur': '#764ba2', 'note': 'Durée exceptionnelle. Votre carte génère un fort engagement.' } %}
{% endif %}

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

    <div class="analytics-bloc__header">
        <h2 class="analytics-bloc__titre">⏱ Durée de consultation</h2>
        <span class="analytics-bloc__periode">{{ jours }} derniers jours</span>
    </div>

    {% if dureeAvg == 0 %}

        <p class="analytics-bloc__empty">
            Pas encore de données de durée sur la période.<br>
            <small>La durée est enregistrée automatiquement par le tracker de la carte.</small>
        </p>

    {% else %}

        {# ── Chiffre principal ── #}
        <div class="analytics-duree__principal">

            <div class="analytics-duree__chiffre-wrap">
                {% if minutes > 0 %}
                    <span class="analytics-duree__chiffre">{{ minutes }}<span class="analytics-duree__unite">min</span></span>
                    <span class="analytics-duree__chiffre">{{ '%02d'|format(secondes) }}<span class="analytics-duree__unite">sec</span></span>
                {% else %}
                    <span class="analytics-duree__chiffre">{{ secondes | round }}<span class="analytics-duree__unite">sec</span></span>
                {% endif %}
                <span class="analytics-duree__label">en moyenne</span>
            </div>

            {# Badge évaluation #}
            <div class="analytics-duree__evaluation"
                 style="color: {{ evaluation.couleur }}; border-color: {{ evaluation.couleur }}1a; background: {{ evaluation.couleur }}0d;">
                <span class="analytics-duree__eval-icone">{{ evaluation.icone }}</span>
                <span class="analytics-duree__eval-label">{{ evaluation.label }}</span>
            </div>

        </div>

        {# ── Note conseil ── #}
        {% if evaluation.note %}
            <p class="analytics-duree__note">
                💡 {{ evaluation.note }}
            </p>
        {% endif %}

        {# ── Jauge visuelle ── #}
        <div class="analytics-duree__jauge-wrap">
            <div class="analytics-duree__jauge-labels">
                <span>0s</span>
                <span>30s</span>
                <span>1min</span>
                <span>2min+</span>
            </div>
            <div class="analytics-duree__jauge-barre-fond">
                {# Plafond visuel à 120 secondes — clamp entre 0 et 100 #}
                {% set pctRaw = (dureeAvg / 120 * 100) | round(1) %}
                {% set pctJauge = pctRaw > 100 ? 100 : (pctRaw < 0 ? 0 : pctRaw) %}
                <div class="analytics-duree__jauge-barre"
                     style="width: {{ pctJauge }}%; background: linear-gradient(90deg, #667eea, {{ evaluation.couleur }});">
                    <span class="analytics-duree__jauge-marker"></span>
                </div>
            </div>
            {# Repères sur la jauge #}
            <div class="analytics-duree__jauge-reperes">
                <div class="analytics-duree__jauge-repere" style="left: 0%"></div>
                <div class="analytics-duree__jauge-repere" style="left: 25%"></div>
                <div class="analytics-duree__jauge-repere" style="left: 50%"></div>
                <div class="analytics-duree__jauge-repere" style="left: 100%"></div>
            </div>
        </div>

        {# ── Note RGPD ── #}
        <p class="analytics-duree__rgpd">
            <small>⚠️ Durée arrondie à 10 secondes — conformité RGPD (article 5.1.c).</small>
        </p>

    {% endif %}

</div>