{#
 # ORGANISM: CONVERSATION-SIDEBAR
 # Paramètres : sessions (array), currentSessionUuid (string|null), tokenStats (array)
 #}
<aside
    {# `md:relative` ET NON `relative` — correctif d'un défaut ANTÉRIEUR au partage.
       En dessous de `md`, le panneau est un tiroir : chat_controller#toggleSidebar lui
       ajoute `fixed inset-y-0 left-0 z-50` pour le sortir du flux. Sauf que `relative` et
       `fixed` sont deux utilitaires du MÊME groupe (position) et que Tailwind émet
       `.relative` APRÈS `.fixed` : à égalité de spécificité, c'est `relative` qui gagnait.
       Le `fixed` posé par le JS était donc inerte, le tiroir restait DANS LE FLUX avec son
       `shrink-0`, et ses 220 px se prenaient sur la conversation. Mesuré : à 320 px de
       viewport, la colonne de conversation tombait à 24 px ; et quand la place manquait,
       le `overflow-hidden` de `.serenia` rognait la droite du tiroir lui-même — d'où les
       compteurs « tok. » / « kWh » coupés en pied de panneau.
       Restreindre la règle à `md:` rend `fixed` effectif là où il sert (le tiroir recouvre,
       la conversation garde toute sa largeur) et laisse le panneau normalement dans le flux
       à partir de 768 px, où il n'est plus un tiroir. #}
    {# `bg-white md:bg-cohorts/[0.02]` — corollaire direct du `md:relative` ci-dessus.
       Le fond n'a jamais été qu'une teinte à 2 % d'opacité : tant que le panneau restait
       dans le flux, il se détachait sur le blanc de la page et paraissait opaque. Devenu
       un vrai recouvrement, il laissait la conversation transparaître au travers. Sous
       `md`, où il recouvre, il lui faut donc un fond plein ; à partir de `md`, où il
       reprend sa place dans le flux, la teinte d'origine revient. #}
    class="serenia-sidebar hidden md:flex flex-col w-[220px] shrink-0 bg-white md:bg-cohorts/[0.02] border-r border-cohorts/[0.08] md:relative"
    data-controller="seren-ia--sidebar"
    data-seren-ia--sidebar-session-base-url-value="{{ path('app_seren_ia_session', {uuid: '__UUID__'}) }}"
    data-seren-ia--sidebar-delete-base-url-value="{{ path('app_seren_ia_session_delete', {uuid: '__UUID__'}) }}"
    data-seren-ia--sidebar-index-url-value="{{ path('app_seren_ia') }}"
    data-seren-ia--sidebar-new-chat-url-value="{{ path('app_seren_ia_new') }}"
    data-seren-ia--sidebar-search-url-value="{{ path('app_seren_ia_sessions_search') }}"
    {# Source de la liste NORMALE, telle qu'elle est aussi posée sur la turbo-frame plus
       bas. Le contrôleur en dérive les deux URL de la bascule « partagées » — il ne la
       relit SURTOUT PAS sur la frame : Turbo Drive met la page en cache au moment où on
       la quitte, donc avec le DOM VIVANT. Revenir en arrière sur une page quittée en mode
       partagées restaurerait une frame dont la src porte déjà `?shared=1`, et un
       contrôleur qui la prendrait pour référence n'aurait plus aucune URL de retour :
       sortir du mode deviendrait impossible pour cette page. #}
    data-seren-ia--sidebar-sessions-list-url-value="{{ path('app_seren_ia_sessions_list') }}{{ currentSessionUuid ? '?current=' ~ currentSessionUuid : '' }}"
    data-seren-ia--sidebar-rename-base-url-value="{{ path('app_seren_ia_session_rename', {uuid: '__UUID__'}) }}"
>
    {# Header : logo + nom #}
    <div class="flex items-center gap-2.5 px-3.5 py-3.5 border-b border-cohorts/[0.08] shrink-0">
        <div class="w-8 h-8 rounded-xl bg-cohorts/[0.10] flex items-center justify-center shrink-0">
            {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-serenia', size: 'lg', color: 'cohorts' } only %}
        </div>
        <span class="text-xl font-black text-cohorts-dark font-secondary tracking-tight leading-none">Serenia</span>
        {# Taille `sm` : l'en-tête est serré (logo de 32px), mais la zone
           cliquable reste à 40px grâce au pseudo-élément de l'atome. #}
        {% include '_atoms/close-button/close-button.html.twig' with {
            size: 'sm',
            class: 'md:hidden ml-auto',
            ariaLabel: 'Fermer le panneau des conversations',
            attr: { 'data-action': 'click->seren-ia--chat#toggleSidebar' }
        } only %}
    </div>

    {# Actions principales #}
    <div class="px-2 pt-2.5 pb-1.5 flex flex-col gap-0.5 shrink-0">
        <button
            type="button"
            class="flex items-center gap-2 w-full px-2.5 py-2 rounded-lg text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark transition-all duration-medium cursor-pointer"
            data-action="click->seren-ia--sidebar#newSession"
            data-tour-step="serenia-nouvelle-discussion"
        >
            {% include '_atoms/icon/icon.html.twig' with { name: 'plus', size: 'xs', color: 'current' } only %}
            <span class="text-[12px] font-medium">Nouvelle conversation</span>
        </button>

        <button
            type="button"
            class="flex items-center gap-2 w-full px-2.5 py-2 rounded-lg text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark transition-all duration-medium cursor-pointer"
            data-action="click->seren-ia--sidebar#openSearchModal"
            data-tour-step="serenia-recherche"
        >
            {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'xs', color: 'current' } only %}
            <span class="text-[12px] font-medium">Rechercher dans les chats</span>
        </button>

        {# Troisième entrée d'action, pair des deux précédentes : bascule la liste en mode
           « discussions partagées ». La liste basculée est REDEMANDÉE AU SERVEUR
           (?shared=1 sur la frame) et couvre TOUTES les discussions partagées — un filtre
           purement visuel sur ce qui est déjà affiché masquerait les partages de plus de
           30 jours, pourtant toujours actifs.

           L'état actif est porté par `aria-pressed`, pas par une classe ajoutée en JS :
           l'attribut est l'information exacte pour un bouton à deux états (les lecteurs
           d'écran l'annoncent), et les variantes `aria-pressed:` de Tailwind rendent le
           style visible sans qu'aucune classe n'ait à exister uniquement dans une chaîne
           JavaScript — que le compilateur Tailwind ne verrait pas. #}
        <button
            type="button"
            class="flex items-center gap-2 w-full px-2.5 py-2 rounded-lg text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark
                   aria-pressed:bg-cohorts/[0.10] aria-pressed:text-cohorts-dark aria-pressed:font-semibold
                   transition-all duration-medium cursor-pointer"
            data-action="click->seren-ia--sidebar#toggleSharedSessions"
            data-seren-ia--sidebar-target="sharedToggle"
            data-tour-step="serenia-partage"
            aria-pressed="false"
            {# LIBELLÉS COURTS, ET C'EST LE CORRECTIF — pas une coquetterie de rédaction.
               Cette infobulle est l'attribut `title` natif : aucun élément du DOM ne la
               rend, elle est entièrement dessinée et positionnée par le navigateur, au
               pointeur, puis RECADRÉE DE FORCE dans la fenêtre. Sur une fenêtre étroite
               (~360 px), la phrase précédente — « N'afficher que les discussions
               partagées », ~250 px de large — ne tenait pas à droite du pointeur : Chrome
               la décalait très à gauche, si loin du bouton qu'elle semblait flotter au
               milieu de l'écran, par-dessus la conversation. Ni CSS ni JS ne peuvent
               repositionner une infobulle native ; la seule prise est sa LONGUEUR.
               Le bouton affiche déjà « Discussions partagées » juste à côté : l'infobulle
               répétait ce libellé et n'apportait que l'action. On ne garde que l'action,
               et elle tient désormais à côté du pointeur. #}
            title="Partagées uniquement"
            data-title-inactive="Partagées uniquement"
            data-title-active="Toutes les discussions"
        >
            {% include '_atoms/icon/icon.html.twig' with { name: 'share', size: 'xs', color: 'current' } only %}
            <span class="text-[12px] font-medium">Discussions partagées</span>
        </button>
    </div>

    {# Séparateur #}
    <div class="mx-2 mb-1 border-t border-cohorts/[0.08]"></div>

    {# Liste des sessions via Turbo Frame #}
    <div class="flex-1 overflow-y-auto px-1.5 py-1 scrollbar-none">
        <turbo-frame
            id="serenia-sessions-list"
            src="{{ path('app_seren_ia_sessions_list') }}{{ currentSessionUuid ? '?current=' ~ currentSessionUuid : '' }}"
            loading="eager"
        >
            {% include 'seren_ia/_sessions-list.html.twig' with { sessions: sessions, currentSessionUuid: currentSessionUuid ?? null } only %}
        </turbo-frame>
    </div>

    {# Footer: stats tokens & énergie #}
    {% if tokenStats is defined %}
        {% set energyParts = tokenStats.energyConsumptionWh|format_energy_parts %}
        <div class="flex flex-col gap-1 px-2.5 py-2.5 border-t border-cohorts/[0.08] shrink-0"
             data-tour-step="serenia-tokens">
            <div class="serenia-stat-item flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-cohorts/[0.07]">
                {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'xs', color: 'cohorts' } only %}
                <span class="text-[11px] font-semibold text-cohorts-dark tabular-nums flex-1" data-seren-ia--chat-target="tokensDisplay">
                    {{ tokenStats.remaining|format_tokens_full }}
                </span>
                <span class="text-[10px] text-cohorts/50">tok.</span>
            </div>
            <div class="serenia-stat-item flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-warning/5">
                {% include '_atoms/icon/icon.html.twig' with { name: 'bolt', size: 'xs', color: 'warning' } only %}
                <span class="text-[11px] font-semibold text-warning tabular-nums flex-1" data-seren-ia--chat-target="energyDisplay">
                    {{ energyParts.value }}
                </span>
                <span class="text-[10px] text-warning/50">{{ energyParts.unit }}</span>
            </div>
        </div>
    {% endif %}

    {# =====================================================================
       MODALE DE RECHERCHE
       ===================================================================== #}
    <div
        class="hidden fixed inset-0 z-[60] items-center justify-center px-4"
        data-seren-ia--sidebar-target="searchModal"
        data-action="keydown.esc@window->seren-ia--sidebar#closeSearchModal"
    >
        {# Backdrop #}
        <div
            class="absolute inset-0 bg-black/30 backdrop-blur-[2px]"
            data-action="click->seren-ia--sidebar#closeSearchModal"
        ></div>

        {# Panneau #}
        <div class="serenia-modal-panel relative z-10 w-full max-w-xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col"
             style="max-height: min(70vh, 560px);">

            {# Barre de recherche redesignée #}
            <div class="flex items-center gap-3 px-5 py-4 shrink-0">
                {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'sm', color: 'gray-300' } only %}
                <input
                    type="text"
                    class="flex-1 text-sm text-gray-800 placeholder:text-gray-400 bg-transparent font-primary border border-gray-200 rounded-2xl px-3.5 py-2 outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all duration-medium"
                    placeholder="Rechercher des conversations..."
                    data-seren-ia--sidebar-target="modalSearchInput"
                    data-action="input->seren-ia--sidebar#filterModalSessions"
                />
                {% include '_atoms/close-button/close-button.html.twig' with {
                    size: 'sm',
                    ariaLabel: 'Fermer la recherche',
                    attr: { 'data-action': 'click->seren-ia--sidebar#closeSearchModal' }
                } only %}
            </div>

            {# Séparateur #}
            <div class="border-t border-gray-100 shrink-0 mx-4"></div>

            {# Zone de résultats défilable #}
            <div class="overflow-y-auto flex-1 scrollbar-none py-2">

                {# --- Groupes (état initial, query vide) --- #}
                <div data-seren-ia--sidebar-target="modalGroups">
                    {% if sessions|length > 0 %}
                        {% set today = 'now'|date('Y-m-d') %}
                        {% set yesterday = '-1 day'|date('Y-m-d') %}
                        {% set groups = {
                            'Épinglées':   sessions|filter(s => s.isPinned),
                            "Aujourd'hui": sessions|filter(s => not s.isPinned and s.updatedAt|date('Y-m-d') == today),
                            'Hier':        sessions|filter(s => not s.isPinned and s.updatedAt|date('Y-m-d') == yesterday),
                            'Plus ancien': sessions|filter(s => not s.isPinned and s.updatedAt|date('Y-m-d') < yesterday)
                        } %}
                        {% for groupLabel, groupSessions in groups %}
                            {% if groupSessions|length > 0 %}
                                <div class="px-5 pt-3 pb-1">
                                    <p class="text-[10px] font-bold uppercase tracking-[0.1em] text-cohorts/60 mb-2">{{ groupLabel }}</p>
                                    {% for session in groupSessions %}
                                        {% set sessionTitle = session.title ?? 'Nouvelle conversation' %}
                                        <button
                                            class="flex items-center gap-3 w-full px-1 py-2.5 rounded-xl text-left hover:bg-cohorts/[0.08] hover:text-cohorts-dark transition-all duration-medium"
                                            data-uuid="{{ session.uuid }}"
                                            data-action="click->seren-ia--sidebar#loadSessionFromModal"
                                        >
                                            {% include '_atoms/icon/icon.html.twig' with { name: 'message', size: 'sm', color: 'cohorts', class: 'opacity-40' } only %}
                                            <span class="text-[13.5px] text-gray-700 truncate leading-snug">{{ sessionTitle }}</span>
                                        </button>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        <p class="text-center text-sm text-gray-400 py-10">Aucune conversation</p>
                    {% endif %}
                </div>

                {# --- Skeleton (affiché pendant la recherche) --- #}
                <div data-seren-ia--sidebar-target="searchSkeleton" class="hidden px-5 pt-3">
                    <div class="h-2.5 w-20 bg-gray-100 rounded-full animate-pulse mb-3"></div>
                    <div class="flex items-center gap-3 py-2.5">
                        <div class="w-4 h-4 rounded-full bg-gray-100 animate-pulse shrink-0"></div>
                        <div class="h-3 bg-gray-100 rounded-full animate-pulse w-3/4"></div>
                    </div>
                    <div class="flex items-center gap-3 py-2.5">
                        <div class="w-4 h-4 rounded-full bg-gray-100 animate-pulse shrink-0"></div>
                        <div class="h-3 bg-gray-100 rounded-full animate-pulse w-1/2"></div>
                    </div>
                    <div class="flex items-center gap-3 py-2.5">
                        <div class="w-4 h-4 rounded-full bg-gray-100 animate-pulse shrink-0"></div>
                        <div class="h-3 bg-gray-100 rounded-full animate-pulse w-4/5"></div>
                    </div>
                    <div class="flex items-center gap-3 py-2.5">
                        <div class="w-4 h-4 rounded-full bg-gray-100 animate-pulse shrink-0"></div>
                        <div class="h-3 bg-gray-100 rounded-full animate-pulse w-2/3"></div>
                    </div>
                    <div class="flex items-center gap-3 py-2.5">
                        <div class="w-4 h-4 rounded-full bg-gray-100 animate-pulse shrink-0"></div>
                        <div class="h-3 bg-gray-100 rounded-full animate-pulse w-3/5"></div>
                    </div>
                </div>

                {# --- Résultats API (injectés par JS) --- #}
                <div data-seren-ia--sidebar-target="searchResults" class="hidden"></div>
            </div>

            {# Template cloné par JS pour chaque résultat — icône injectée directement en JS #}
            <template data-seren-ia--sidebar-target="sessionItemTemplate">
                <button
                    class="flex items-center gap-3 w-full px-6 py-2.5 rounded-xl text-left hover:bg-cohorts/[0.08] hover:text-cohorts-dark transition-all duration-medium"
                    data-action="click->seren-ia--sidebar#loadSessionFromModal"
                >
                    {% include '_atoms/icon/icon.html.twig' with { name: 'message', size: 'sm', color: 'cohorts', class: 'opacity-40' } only %}
                    <span class="text-[13.5px] text-gray-700 truncate leading-snug"></span>
                </button>
            </template>
        </div>
    </div>

    {# =====================================================================
       MENU CONTEXTUEL FLOTTANT (hors du container scrollable pour éviter le clipping)
       ===================================================================== #}
    {# Panel positionné hors du scroll container par JS (évite le clipping) #}
    <div class="hidden absolute z-50"
         data-seren-ia--sidebar-target="sessionMenu">
        {% include '_molecules/action-menu/action-menu.html.twig' with {
            items: [
                {label: 'Partager', icon: 'share', attr: {'data-action': 'click->seren-ia--sidebar#openShareModal'}},
                {label: 'Renommer', icon: 'edit', attr: {'data-action': 'click->seren-ia--sidebar#openRenameModal'}}
            ],
            dangerItems: [
                {label: 'Supprimer', icon: 'trash', attr: {'data-action': 'click->seren-ia--sidebar#deleteSession'}}
            ],
            accentHex: tool_color_details['serenia'].primary,
            class: '!w-40'
        } only %}
    </div>

    {# =====================================================================
       MODALE DE RENOMMAGE
       ===================================================================== #}
    {% set srColor = tool_color_details['serenia'] %}
    {% embed '_organisms/rename-modal/rename-modal.html.twig' with {
        title:        'Renommer la conversation',
        subtitle:     'Donnez un nom plus parlant à cette conversation.',
        placeholder:  'Nom de la conversation...',
        confirmLabel: 'Enregistrer',
        color:        srColor,
        modalAttr:    {'data-seren-ia--sidebar-target': 'renameModal'},
        inputAttr:    {
            'data-seren-ia--sidebar-target': 'renameInput',
            'data-action': 'keydown.enter->seren-ia--sidebar#confirmRename keydown.esc->seren-ia--sidebar#cancelRename'
        },
        cancelAttr:   {'data-action': 'click->seren-ia--sidebar#cancelRename'},
        confirmAttr:  {'data-action': 'click->seren-ia--sidebar#confirmRename'}
    } only %}{% endembed %}

    {# =====================================================================
       MODALE DE CONFIRMATION SUPPRESSION
       ===================================================================== #}
    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        title:       'Supprimer la conversation ?',
        modalAttr:   {'data-seren-ia--sidebar-target': 'deleteConfirmModal', 'data-action': 'keydown.esc@window->seren-ia--sidebar#cancelDeleteSession'},
        cancelAttr:  {'data-action': 'click->seren-ia--sidebar#cancelDeleteSession'},
        confirmAttr: {'data-action': 'click->seren-ia--sidebar#confirmDeleteSession'}
    } only %}
        {% block description %}
            <p class="text-sm text-gray-400">Cette action est irréversible.</p>
        {% endblock %}
    {% endembed %}
</aside>