{#
 # ============================================================================
 # MOLECULE: SIDEBAR USER CARD
 # ============================================================================
 #
 # Bloc unifié dans le footer de la sidebar : nom + abonnement, qui ouvre
 # un popover avec toutes les actions (paramètres, abonnement, switch
 # plateforme, support). Comportement identique en expanded et en collapsed
 # — le clic ouvre le même menu, seul le rendu du trigger change.
 #
 # Le design adopte le langage glassmorphism de la sidebar (translucide,
 # bordures ton-sur-ton, hover en gradient subtil).
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/logo/logo.html.twig
 # - assets/controllers/shared/popover_controller.js
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre        | Type    | Défaut   | Description                          |
 # |------------------|---------|----------|--------------------------------------|
 # | name             | string  | ''       | Nom complet de l'utilisateur         |
 # | initials         | string  | dérivé   | Initiales (collapsed)                |
 # | planLabel        | string  | ''       | Texte d'abonnement                   |
 # | planGradient     | string  | null     | CSS background du plan               |
 # | variant          | string  | 'bubul'  | 'bubul' ou 'sam' — pilote le thème   |
 # | menuItems        | array   | []       | Items du popover :                   |
 # |                  |         |          |   { label, href, icon, tint, badge } |
 #
 # ============================================================================
#}

{% set name = name ?? '' %}
{% set planLabel = planLabel ?? '' %}
{% set planGradient = planGradient ?? null %}
{% set variant = variant ?? 'bubul' %}
{% set menuItems = menuItems ?? [] %}

{% set initialsParts = name|trim|split(' ')|filter(p => p|length > 0) %}
{% set initials = initials ?? (
    initialsParts|length >= 2
        ? (initialsParts[0]|first ~ initialsParts[1]|first)|upper
        : (name|slice(0, 2))|upper
) %}

{% set collapsedTooltip = name ~ (planLabel ? ' · ' ~ planLabel : '') %}

{# Thématisation par contexte (Bubul / SAM) — base solide + accent thème au hover #}
{% if variant == 'sam' %}
    {% set triggerHoverBorder = 'hover:border-violet-300/50' %}
    {% set panelBorder = 'border border-violet-200/50' %}
{% else %}
    {% set triggerHoverBorder = 'hover:border-primary/30' %}
    {% set panelBorder = 'border border-primary/15' %}
{% endif %}

{% set hasBadge = false %}
{% for item in menuItems %}
    {% if item.badge|default(0) > 0 %}{% set hasBadge = true %}{% endif %}
{% endfor %}

<div data-controller="shared--popover" class="relative">

    {# ====================================================================
       TRIGGER EXPANDED — carte avec avatar initiales, ombre légère, hover net
       ==================================================================== #}
    <button type="button"
            data-action="click->shared--popover#toggle"
            class="group-data-[collapsed=true]/sidebar:hidden group/card
                   w-full flex items-center gap-2.5 cursor-pointer
                   rounded-xl bg-white/80 backdrop-blur-md
                   border border-gray-200/70 {{ triggerHoverBorder }}
                   shadow-[0_1px_2px_rgba(15,23,42,0.04),0_1px_3px_rgba(15,23,42,0.06)]
                   hover:shadow-[0_2px_4px_rgba(15,23,42,0.06),0_4px_12px_rgba(15,23,42,0.08)]
                   hover:bg-white
                   px-2.5 py-2 text-left
                   transition-all duration-200 ease-out">

        {# Pastille avatar initiales (mêmes initiales et même gradient qu'en collapsed) #}
        <span class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center
                     text-white text-[11px] font-bold tracking-wide
                     ring-1 ring-white shadow-sm"
              style="{{ planGradient ?: 'background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%)' }}">
            {{ initials }}
        </span>

        <div class="min-w-0 flex-1">
            <p class="text-[13px] font-semibold text-gray-900 truncate leading-tight">{{ name }}</p>
            <div class="flex items-center gap-1.5 mt-0.5">
                <span class="w-1.5 h-1.5 rounded-full flex-shrink-0"
                      style="{{ planGradient ?: 'background: #9ca3af' }}"></span>
                <p class="text-[11px] font-medium text-gray-500 truncate leading-tight">{{ planLabel }}</p>
            </div>
        </div>

        {# Bouton dots dans une cible circulaire — ressemble vraiment à un bouton #}
        <span class="relative shrink-0 w-7 h-7 rounded-md flex items-center justify-center
                     text-gray-400 group-hover/card:text-gray-600 group-hover/card:bg-gray-100/70
                     transition-colors duration-150">
            {% include '_atoms/icon/icon.html.twig' with { name: 'dots-vertical', size: 'sm', color: 'current' } only %}
            {% if hasBadge %}
                <span class="absolute top-0.5 right-0.5 w-2 h-2 bg-warning rounded-full ring-2 ring-white"></span>
            {% endif %}
        </span>
    </button>

    {# ====================================================================
       TRIGGER COLLAPSED — pastille initiales (gardée colorée, c'est le
       seul accent visible quand la sidebar est repliée)
       ==================================================================== #}
    <button type="button"
            data-action="click->shared--popover#toggle"
            data-tooltip="{{ collapsedTooltip }}"
            class="hidden group-data-[collapsed=true]/sidebar:flex relative w-9 h-9 mx-auto rounded-full cursor-pointer
                   items-center justify-center text-white text-[11px] font-bold tracking-wide
                   ring-1 ring-white shadow-sm
                   hover:scale-105 hover:shadow-md active:scale-95 transition-all duration-200"
            style="{{ planGradient ?: 'background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%)' }}">
        {{ initials }}
        {% if hasBadge %}
            <span class="absolute top-0 right-0 w-2.5 h-2.5 bg-warning rounded-full ring-2 ring-white"></span>
        {% endif %}
    </button>

    {# ====================================================================
       PANEL — menu déroulant, contenu identique en expanded et collapsed
       Position : au-dessus de la carte (expanded) / à droite (collapsed)
       ==================================================================== #}
    <div data-shared--popover-target="panel"
         hidden
         class="absolute z-50 bg-white/95 backdrop-blur-xl rounded-xl shadow-xl p-1.5
                {{ panelBorder }}
                bottom-full left-0 right-0 mb-2
                group-data-[collapsed=true]/sidebar:bottom-0
                group-data-[collapsed=true]/sidebar:left-full
                group-data-[collapsed=true]/sidebar:right-auto
                group-data-[collapsed=true]/sidebar:mb-0
                group-data-[collapsed=true]/sidebar:ml-3
                group-data-[collapsed=true]/sidebar:w-56">

        {# Entête du menu en collapsed : on rappelle nom + plan #}
        <div class="hidden group-data-[collapsed=true]/sidebar:block px-3 py-2 border-b border-gray-100 mb-1">
            <p class="text-sm font-bold text-gray-900 truncate">{{ name }}</p>
            <div class="flex items-center gap-1.5 mt-0.5">
                <span class="w-2 h-2 rounded-full flex-shrink-0"
                      style="{{ planGradient ?: 'background: #9ca3af' }}"></span>
                <p class="text-xs font-medium text-gray-500 truncate">{{ planLabel }}</p>
            </div>
        </div>

        {% for item in menuItems %}
            {% set itemTint = item.tint|default('default') %}
            {% if itemTint == 'cohorts' %}
                {% set hoverClass = 'hover:bg-cohorts/8 hover:text-cohorts-dark' %}
                {% set iconColor = 'cohorts' %}
            {% elseif itemTint == 'primary' %}
                {% set hoverClass = 'hover:bg-primary/8 hover:text-primary-dark' %}
                {% set iconColor = 'primary' %}
            {% else %}
                {% set hoverClass = 'hover:bg-gray-50 hover:text-gray-900' %}
                {% set iconColor = 'gray' %}
            {% endif %}

            <a href="{{ item.href }}"
               class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] font-medium text-gray-700 {{ hoverClass }} transition-colors duration-150">
                {% if item.icon is defined and item.icon %}
                    <span class="shrink-0 w-4 h-4 flex items-center justify-center">
                        {% include '_atoms/icon/icon.html.twig' with { name: item.icon, size: 'xs', color: iconColor } only %}
                    </span>
                {% elseif item.logo is defined and item.logo %}
                    <span class="shrink-0 w-4 h-4 flex items-center justify-center">
                        {% include '_atoms/logo/logo.html.twig' with { variant: item.logo, size: 'xs', tint: item.logoTint|default(null) } only %}
                    </span>
                {% endif %}
                <span class="flex-1 truncate">{{ item.label }}</span>
                {% if item.badge|default(0) > 0 %}
                    <span class="shrink-0 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1
                                 rounded-full bg-warning text-white text-[10px] font-bold">
                        {{ item.badge }}
                    </span>
                {% endif %}
            </a>
        {% endfor %}

    </div>
</div>