{% extends 'base.html.twig' %}

{% block title %}Mes Badges — Bubul{% endblock %}

{% block body %}
{# @tailwind-safelist (classes dynamiques variant)
   bg-primary/10 bg-success/10 bg-warning/10 bg-error/10 bg-cohorts/10
   bg-primary bg-success bg-warning bg-error bg-cohorts
   text-primary text-success text-warning text-error text-cohorts #}
<div class="max-w-[1300px] mx-auto" data-testid="badges-page">
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-10">

        {% include '_molecules/settings-nav/settings-nav.html.twig' with { user: app.user, activePage: 'badges' } only %}

        <div class="flex-1 min-w-0">

            {# ── Header mobile (sm:hidden) — 2 lignes pour éviter le chevauchement ── #}
            <div class="sm:hidden mb-5">
                <div class="flex items-center gap-2.5 mb-2.5">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'crown', size: 'lg', color: 'primary' } only %}
                    <h1 class="text-xl font-bold text-gray-900">Badges</h1>
                </div>
                {% include '_molecules/daily-reward-card/daily-reward-card.html.twig' with {
                    canClaim:    dailyStatus.canClaim,
                    nextClaimAt: dailyStatus.nextClaimAt,
                    claimUrl:    dailyClaimUrl
                } only %}
            </div>

            {# ── Header desktop (hidden sm:flex) ── #}
            <div class="hidden sm:flex sm:items-start sm:justify-between gap-4 mb-8">
                {% include '_molecules/page-header/page-header.html.twig' with {
                    title: 'Badges',
                    subtitle: 'Débloquez des badges à chaque étape de votre progression',
                    icon: 'crown',
                    variant: 'default',
                    class: 'pt-0 mb-0'
                } only %}
                <div class="shrink-0 mt-1">
                    {% include '_molecules/daily-reward-card/daily-reward-card.html.twig' with {
                        canClaim:    dailyStatus.canClaim,
                        nextClaimAt: dailyStatus.nextClaimAt,
                        claimUrl:    dailyClaimUrl
                    } only %}
                </div>
            </div>

            {# ================================================================
               SECTION 1 : Un séparateur par outil
               ================================================================ #}
            {% for toolData in toolBadgeData %}
                {% set toolColor = toolData.tool.colorPrimary   ?? '#0C81E4' %}
                {% set toolBg    = toolData.tool.colorBackground ?? '#EFF6FF' %}
                {% set toolIcon  = toolData.tool.getSidebarIcon() %}
                {% set toolUnlocked = 0 %}
                {% set toolTotal = toolData.levels|length %}
                {% for ld in toolData.levels %}{% if ld.unlocked %}{% set toolUnlocked = toolUnlocked + 1 %}{% endif %}{% endfor %}
                {% for group in toolData.achievementData %}
                    {% set toolTotal = toolTotal + group.levels|length %}
                    {% for ld in group.levels %}{% if ld.unlocked %}{% set toolUnlocked = toolUnlocked + 1 %}{% endif %}{% endfor %}
                {% endfor %}

                <div class="mb-5 sm:mb-10">
                    <div class="flex items-center gap-2.5 sm:gap-4 mb-3 sm:mb-5">
                        <div class="w-11 h-11 sm:w-14 sm:h-14 rounded-xl shrink-0 flex items-center justify-center"
                             style="background: {{ toolBg }}; color: {{ toolColor }};">
                            {% include '_atoms/icon/icon.html.twig' with { name: toolIcon, size: 'xl', color: 'current' } only %}
                        </div>
                        <div class="min-w-0">
                            <h2 class="font-secondary text-base sm:text-2xl font-bold text-gray-900 tracking-tight leading-tight">
                                <em style="color:{{ toolColor }}; font-style:italic;">{{ toolData.tool.name }}</em>
                            </h2>
                            <p class="text-[10px] sm:text-xs text-gray-400 mt-0.5">{{ toolUnlocked }}/{{ toolTotal }} niveaux débloqués</p>
                        </div>
                        <div class="flex-1 h-px bg-gradient-to-r from-gray-200/80 to-transparent ml-1 sm:ml-2"></div>
                    </div>

                    <div class="grid grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4">
                        {% include '_molecules/badge-group-card/badge-group-card.html.twig' with {
                            levels:        toolData.levels,
                            hexColorInner: toolColor,
                            hexColorOuter: toolBg,
                        } only %}
                        {% for typeData in toolData.achievementData %}
                            {% include '_molecules/badge-group-card/badge-group-card.html.twig' with {
                                levels:        typeData.levels,
                                hexColorInner: toolColor,
                                hexColorOuter: toolBg,
                            } only %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}

            {# ================================================================
               SECTION 2 : Badges spéciaux
               ================================================================ #}
            {%- set specialUnlocked = 0 %}
            {%- set specialTotal = 0 %}
            {%- for group in specialData %}
                {%- set specialTotal = specialTotal + group.levels|length %}
                {%- for lvl in group.levels %}{% if lvl.unlocked %}{% set specialUnlocked = specialUnlocked + 1 %}{% endif %}{%- endfor %}
            {%- endfor %}
            {%- for b in streakData %}{% if b.unlocked %}{% set specialUnlocked = specialUnlocked + 1 %}{% endif %}{%- endfor %}
            {%- set specialTotal = specialTotal + streakData|length %}

            <div class="flex items-center gap-2.5 sm:gap-4 mt-4 sm:mt-10 mb-4 sm:mb-7">
                <div class="w-8 h-8 sm:w-11 sm:h-11 rounded-lg sm:rounded-xl shrink-0 flex items-center justify-center"
                     style="background: rgba(245,158,11,0.10); color: #F59E0B;">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'star', size: 'sm', color: 'current' } only %}
                </div>
                <div class="min-w-0">
                    <h2 class="font-secondary text-base sm:text-2xl font-bold text-gray-900 tracking-tight leading-tight">
                        Badges <em style="color:#F59E0B; font-style:italic;">spéciaux</em>
                    </h2>
                    <p class="text-[10px] sm:text-xs text-gray-400 mt-0.5">{{ specialUnlocked }}/{{ specialTotal }} débloqués</p>
                </div>
                <div class="flex-1 h-px bg-gradient-to-r from-gray-200/80 to-transparent ml-1 sm:ml-2"></div>
            </div>

            <div class="grid grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 mb-8">
                {% for group in specialData %}
                    {% include '_molecules/badge-group-card/badge-group-card.html.twig' with {
                        levels:        group.levels,
                        hexColorInner: '#F59E0B',
                        hexColorOuter: '#FFF7ED',
                    } only %}
                {% endfor %}
                {% if streakData %}
                    {% include '_molecules/badge-group-card/badge-group-card.html.twig' with {
                        levels:        streakData,
                        hexColorInner: '#F59E0B',
                        hexColorOuter: '#FFF7ED',
                    } only %}
                {% endif %}
            </div>

        </div>
    </div>
</div>
{% endblock %}