{#
 # ============================================================================
 # MOLECULE: DAILY REWARD CARD
 # ============================================================================
 #
 # Chip gamifié "Récompense du jour".
 # État claimable : bouton CTA bleu Bubul + grande icône cadeau + texte gamifié.
 # État countdown  : chip léger bleu avec timer dégressif.
 #
 # PARAMÈTRES
 # | Paramètre     | Type              | Description                         |
 # |---------------|-------------------|-------------------------------------|
 # | canClaim      | bool              | True si non réclamé aujourd'hui     |
 # | nextClaimAt   | DateTimeImmutable | Minuit UTC (affichage countdown)    |
 # | claimUrl      | string            | Route app_daily_reward_claim        |
 # ============================================================================
 #}

{% set canClaim    = canClaim ?? false %}
{% set nextClaimAt = nextClaimAt ?? null %}
{% set claimUrl    = claimUrl ?? '' %}

<div data-controller="badge--daily-reward"
     data-badge--daily-reward-claim-url-value="{{ claimUrl }}"
     data-badge--daily-reward-can-claim-value="{{ canClaim ? 'true' : 'false' }}"
     data-badge--daily-reward-next-claim-at-value="{{ nextClaimAt ? nextClaimAt|date('c') : '' }}">

    {# inline-flex sur le wrapper pour que le point colle au coin du bouton #}
    <div class="relative inline-flex">

        {# ── État : claimable ─────────────────────────────────────────── #}
        <div data-badge--daily-reward-target="claimState"
             class="{{ canClaim ? '' : 'hidden' }}">
            <button class="flex items-center gap-2 sm:gap-3 rounded-full px-3 py-2 sm:px-5 sm:py-2.5 font-semibold text-white cursor-pointer
                           transition-all duration-150 hover:-translate-y-px active:scale-[0.97]"
                    style="background: #0C81E4;
                           box-shadow: 0 4px 14px rgba(12,129,228,0.4);"
                    data-action="click->badge--daily-reward#claim"
                    data-badge--daily-reward-target="claimBtn">
                {% include '_atoms/icon/icon.html.twig' with { name: 'gift', size: 'sm', color: 'current' } only %}
                <span class="flex flex-col items-start leading-none">
                    <span class="text-[9px] font-medium" style="color: rgba(255,255,255,0.75);">+500 tokens</span>
                    <span class="text-xs sm:text-sm">Récupérer ma récompense</span>
                </span>
            </button>
        </div>

        {# ── État : countdown ─────────────────────────────────────────── #}
        <div data-badge--daily-reward-target="countdownState"
             class="{{ canClaim ? 'hidden' : '' }}">
            <div class="flex items-center gap-2 rounded-full px-3 py-2 sm:px-5 sm:py-2.5 text-white font-semibold"
                 style="background: #0C81E4;
                        box-shadow: 0 4px 14px rgba(12,129,228,0.4);">
                <div style="color: rgba(255,255,255,0.8);">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'calendar', size: 'sm', color: 'current' } only %}
                </div>
                <div class="flex flex-col leading-none">
                    <span class="text-[9px] font-medium" style="color: rgba(255,255,255,0.7);">Prochain bonus</span>
                    <p class="text-xs sm:text-sm font-bold tabular-nums"
                       data-badge--daily-reward-target="countdown">--:--:--</p>
                </div>
            </div>
        </div>

    </div>

</div>