{#
 # ============================================================================
 # MOLECULE: BADGE GROUP CARD
 # ============================================================================
 # Une seule carte pour une série de niveaux (outil ou achievement).
 # La bulle montre la progression vers le prochain niveau.
 # Les dots indiquent les niveaux débloqués.
 #
 # PARAMETRES
 # | levels        | array  | requis   | [{name, description, unlocked, earned_at, progress, target, tokens}] |
 # | hexColorInner | string | #0C81E4  | Couleur principale (hex)    |
 # | hexColorOuter | string | #EFF6FF  | Couleur fond clair (hex)    |
 # | class         | string | ''       | Classes additionnelles      |
 # ============================================================================
 #}

{% set levels        = levels        ?? [] %}
{% set hexColorInner = hexColorInner ?? '#0C81E4' %}
{% set hexColorOuter = hexColorOuter ?? '#EFF6FF' %}
{% set class         = class         ?? '' %}

{# Détermine le niveau affiché et les compteurs #}
{% set currentLevel     = null %}
{% set maxUnlockedLevel = null %}
{% set unlockedCount    = 0 %}

{% for lvl in levels %}
    {% if lvl.unlocked %}
        {% set maxUnlockedLevel = lvl %}
        {% set unlockedCount = unlockedCount + 1 %}
    {% elseif currentLevel is null %}
        {% set currentLevel = lvl %}
    {% endif %}
{% endfor %}

{% set allUnlocked  = currentLevel is null %}
{% set displayLevel = currentLevel ?? maxUnlockedLevel %}
{% set totalLevels  = levels|length %}

{# Progression bulle #}
{% if allUnlocked %}
    {% set bProg   = 1 %}
    {% set bTarget = 1 %}
{% elseif displayLevel %}
    {% set bProg   = displayLevel.progress ?? 0 %}
    {% set bTarget = displayLevel.target is not null and displayLevel.target > 0 ? displayLevel.target : 1 %}
{% else %}
    {% set bProg = 0 %}
    {% set bTarget = 1 %}
{% endif %}

{# ── Calcul tokens non réclamés ── #}
{% set unclaimedTokens = 0 %}
{% set unclaimedSlugs  = [] %}
{% for lvl in levels %}
    {% if lvl.unlocked and lvl.tokensClaimed is defined and not lvl.tokensClaimed %}
        {% set unclaimedTokens = unclaimedTokens + (lvl.tokens ?? 0) %}
        {% set unclaimedSlugs  = unclaimedSlugs|merge([lvl.slug]) %}
    {% endif %}
{% endfor %}
{% set currentLevelTokens = displayLevel.tokens ?? 0 %}

<div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-2 sm:p-5 text-center relative overflow-hidden
            transition-transform duration-300 {{ allUnlocked ? 'hover:-translate-y-1' : '' }} {{ class }}
            flex flex-col items-center">

    {# Bandeau tokens — tokens réclamables ou tokens du niveau en cours #}
    {% if unclaimedTokens > 0 or (not allUnlocked and currentLevelTokens > 0) %}
        <div class="absolute top-0 inset-x-0 text-[9px] sm:text-[10px] font-bold py-1 sm:py-1.5 text-center tracking-wide z-10"
             style="background: {{ hexColorOuter }}; color: {{ hexColorInner }};">
            {% if unclaimedTokens > 0 %}
                +{{ unclaimedTokens }} tokens à récupérer
            {% else %}
                +{{ currentLevelTokens }} tokens
            {% endif %}
        </div>
    {% endif %}

    {# Halo fond (débloqué complet) #}
    {% if allUnlocked %}
        <div class="absolute -top-8 -right-8 w-24 h-24 rounded-full pointer-events-none opacity-[0.07] blur-2xl"
             style="background: {{ hexColorInner }};"></div>
    {% endif %}


    {# Bulle liquide animée #}
    {% set hasBanner = unclaimedTokens > 0 or (not allUnlocked and currentLevelTokens > 0) %}
    <div class="badge-bubble mx-auto mb-2 sm:mb-4 {{ hasBanner ? 'mt-7 sm:mt-8' : 'mt-3 sm:mt-4' }}"
         style="--bubble-glow: {{ hexColorInner }}2e;"
         data-controller="badge--bubble"
         data-badge--bubble-level-value="0"
         data-badge--bubble-progress-value="{{ bProg }}"
         data-badge--bubble-target-value="{{ bTarget }}"
         data-badge--bubble-color-value="{{ hexColorInner }}"
         data-badge--bubble-color-bg-value="{{ hexColorOuter }}">
        <div class="badge-bubble__base"></div>
        <div class="badge-bubble__liquid">
            <svg class="badge-bubble__wave badge-bubble__wave--back" style="height:9px" viewBox="0 0 200 26" preserveAspectRatio="none">
                <path d="M0,13 C12.5,3 37.5,3 50,13 C62.5,23 87.5,23 100,13 C112.5,3 137.5,3 150,13 C162.5,23 187.5,23 200,13 L200,26 L0,26 Z"/>
            </svg>
            <svg class="badge-bubble__wave badge-bubble__wave--front" style="height:7px" viewBox="0 0 200 20" preserveAspectRatio="none">
                <path d="M0,10 C12.5,2 37.5,2 50,10 C62.5,18 87.5,18 100,10 C112.5,2 137.5,2 150,10 C162.5,18 187.5,18 200,10 L200,20 L0,20 Z"/>
            </svg>
        </div>
        <div class="badge-bubble__air"></div>
        <div class="badge-bubble__gloss"></div>
        <div class="badge-bubble__center">
            {% if allUnlocked %}
                <span style="font-size:clamp(18px,4vw,28px); color:white; font-weight:900; line-height:1;">✓</span>
            {% else %}
                <div class="badge-bubble__pct" style="font-size:clamp(13px,3.5vw,18px)" data-badge--bubble-target="pct">0%</div>
            {% endif %}
        </div>
    </div>

    {# Nom et description du niveau courant #}
    {% if displayLevel %}
        <p class="text-[11px] sm:text-[14px] font-bold leading-tight mb-0.5 sm:mb-1 line-clamp-1 {{ allUnlocked ? 'text-gray-900' : 'text-gray-600' }}">
            {{ displayLevel.name|split(' — ')|first }}
        </p>
        <p class="text-[9px] sm:text-[11px] text-gray-400 leading-snug mb-1.5 sm:mb-3 line-clamp-2 px-0.5"
           style="min-height: 2.75em;">
            {{ displayLevel.description }}
        </p>
    {% endif %}

    {# Dots de progression — un point par niveau #}
    {% if totalLevels > 1 %}
        <div class="flex items-center justify-center gap-1 sm:gap-1.5 mb-2 sm:mb-3">
            {% for lvl in levels %}
                <div class="rounded-full transition-all duration-300 {% if lvl.unlocked %}w-2 h-2 sm:w-2.5 sm:h-2.5{% else %}w-1.5 h-1.5 sm:w-2 sm:h-2{% endif %}"
                     style="background: {{ lvl.unlocked ? hexColorInner : '#E5E7EB' }};"></div>
            {% endfor %}
        </div>
    {% endif %}

    {# Barre de progression ou date de déblocage #}
    {% if allUnlocked and maxUnlockedLevel.earned_at is defined and maxUnlockedLevel.earned_at %}
        <p class="text-[10px] sm:text-[11px] font-semibold" style="color: {{ hexColorInner }};">
            {{ maxUnlockedLevel.earned_at|format_date('medium', locale='fr') }}
        </p>
    {% elseif displayLevel and displayLevel.progress is not null and displayLevel.target is not null and not allUnlocked %}
        <div class="w-full h-1 sm:h-1.5 rounded-full overflow-hidden mb-1" style="background: rgba(0,0,0,0.06);">
            <div class="h-full rounded-full transition-all duration-700"
                 style="width: {{ bTarget > 0 ? (bProg / bTarget * 100)|round : 0 }}%; background: {{ hexColorInner }};"></div>
        </div>
        <p class="text-[10px] sm:text-[11px] font-semibold text-gray-400">{{ bProg }}/{{ bTarget }}</p>
    {% elseif maxUnlockedLevel is null %}
        <p class="text-[10px] sm:text-[11px] text-gray-300">Verrouillé</p>
    {% endif %}


    {# Bouton Collecter — tokens non encore réclamés #}
    {% set unclaimedTokens = 0 %}
    {% set unclaimedSlugs = [] %}
    {% for lvl in levels %}
        {% if lvl.unlocked and lvl.tokensClaimed is defined and not lvl.tokensClaimed %}
            {% set unclaimedTokens = unclaimedTokens + (lvl.tokens ?? 0) %}
            {% set unclaimedSlugs = unclaimedSlugs|merge([lvl.slug]) %}
        {% endif %}
    {% endfor %}
    {% if unclaimedTokens > 0 %}
        <div class="w-full mt-2 sm:mt-3">
            {% include '_atoms/button/button.html.twig' with {
                label:   'Récupérer',
                variant: 'custom-soft',
                size:    'sm',
                width:   'full',
                radius:  'xl',
                attr: {
                    'style':                         'background: ' ~ hexColorOuter ~ '; color: ' ~ hexColorInner ~ ';',
                    'data-controller':               'badge--claim',
                    'data-badge--claim-slugs-value': unclaimedSlugs|json_encode,
                    'data-badge--claim-target':      'btn',
                    'data-action':                   'click->badge--claim#claim'
                }
            } only %}
        </div>
    {% endif %}

</div>