{#
 # FRAGMENT PROMPTLY — Modals partagées entre index et mes-prompts
 # Variables attendues : categories, aiModels
 # NE doit PAS étendre base.html.twig
 #}

{# ================================================================
   MODAL DÉTAIL
   ================================================================ #}
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
     data-promptly--library-target="detailModal"
     data-action="click->promptly--library#closeDetail"
     style="display: none;">
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 w-full max-w-lg flex flex-col max-h-[88vh] overflow-hidden"
         data-action="click->promptly--library#stopPropagation">

        <div class="flex items-start justify-between px-6 pt-5 pb-4 border-b border-gray-50 flex-shrink-0">
            <div class="flex-1 min-w-0">
                <div class="flex gap-1.5 flex-wrap mb-2" data-promptly--library-target="detailTags"></div>
                <h2 class="text-lg font-bold text-black font-secondary leading-snug tracking-tight"
                    data-promptly--library-target="detailTitle"></h2>
                <div class="flex items-center gap-2 mt-2 flex-wrap text-xs text-gray-400">
                    <div class="flex items-center gap-1.5">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold text-white flex-shrink-0 ring-2 ring-white"
                             data-promptly--library-target="detailAuthorAvatar"></div>
                        <span data-promptly--library-target="detailAuthorName"></span>
                    </div>
                    <span class="text-gray-200">·</span>
                    <span data-promptly--library-target="detailDate"></span>
                    <span class="text-gray-200">·</span>
                    <button type="button"
                            class="promptly-detail-fav flex items-center gap-1 text-xs bg-transparent border-none p-0 cursor-pointer text-gray-300 hover:text-amber-500 transition-colors duration-150"
                            data-action="click->promptly--library#toggleFavoriteFromDetail">
                        <span data-promptly--library-target="detailStar">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'xs', color: 'current' } only %}
                        </span>
                        <span data-promptly--library-target="detailFavoritesCount" class="tabular-nums text-gray-400"></span>
                    </button>
                </div>
            </div>
            {% include '_atoms/close-button/close-button.html.twig' with {
                class: 'ml-3',
                attr: { 'data-action': 'click->promptly--library#closeDetail' }
            } only %}
        </div>

        <div class="px-6 py-4 flex-shrink-0 border-b border-gray-50"
             data-promptly--library-target="detailVariablesSection"
             style="display: none;">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-3">Variables</p>
            <div class="flex flex-wrap gap-2" data-promptly--library-target="detailVariablesInputs"></div>
        </div>

        <div class="px-6 py-4 flex-1 overflow-y-auto min-h-0">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-3">Prompt</p>
            <pre class="text-[12px] font-mono text-gray-600 bg-gray-50 rounded-xl p-4 whitespace-pre-wrap leading-relaxed border border-gray-100 overflow-y-auto"
                 data-promptly--library-target="detailBody"
                 style="word-break: break-word;"></pre>
        </div>

        <div class="px-6 py-4 border-t border-gray-50 flex flex-col gap-2 flex-shrink-0">
            {% if can_access_tool('serenia') %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Lancer sur Serenia', variant: 'primary', size: 'md', icon: 'send',
                    width: 'full',
                    attr: { 'data-action': 'click->promptly--library#launchOnSerenia' }
                } only %}
            {% endif %}
            <div class="flex gap-2 flex-wrap">
                <span data-promptly--library-target="detailCopyBtn">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Copier', variant: 'outline', size: 'md', icon: 'copy',
                        attr: { 'data-action': 'click->promptly--library#copyFromDetail' }
                    } only %}
                </span>
                <span class="detail-not-owner-btn">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Modifier', variant: 'soft-warning', size: 'md', icon: 'edit',
                        attr: { 'data-action': 'click->promptly--library#forkPrompt' }
                    } only %}
                </span>
                <span class="detail-owner-btn" style="display: none;">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Modifier', variant: 'soft-warning', size: 'md', icon: 'edit',
                        attr: { 'data-action': 'click->promptly--library#editFromDetail' }
                    } only %}
                </span>
                <span class="detail-owner-btn ml-auto" style="display: none;">
                    {% include '_atoms/button/button.html.twig' with {
                        variant: 'soft-error', size: 'md', icon: 'trash', iconOnly: true,
                        attr: { 'data-action': 'click->promptly--library#deleteFromDetail' }
                    } only %}
                </span>
            </div>
        </div>
    </div>
</div>

{# ================================================================
   MODAL CRÉER / ÉDITER
   ================================================================ #}
<div class="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50 backdrop-blur-sm"
     data-promptly--library-target="modal"
     data-action="click->promptly--library#closeModal"
     style="display: none;">
    <div class="bg-white rounded-t-3xl sm:rounded-2xl shadow-xl border border-gray-100 w-full sm:max-w-lg flex flex-col max-h-[92vh] sm:max-h-[85vh]"
         data-action="click->promptly--library#stopPropagation">

        <div class="flex justify-center pt-3 pb-1 sm:hidden flex-shrink-0">
            <div class="w-10 h-1 bg-gray-200 rounded-full"></div>
        </div>

        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-50 flex-shrink-0">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-xl flex items-center justify-center bg-primary/8 border border-primary/10">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'magic-stick', size: 'sm', color: 'primary' } only %}
                </div>
                <h2 class="text-base font-bold text-black font-secondary tracking-tight"
                    data-promptly--library-target="modalTitle">Nouveau prompt</h2>
            </div>
            {% include '_atoms/close-button/close-button.html.twig' with {
                attr: { 'data-action': 'click->promptly--library#closeModal' }
            } only %}
        </div>

        <div class="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">

            {# Titre #}
            <div class="flex flex-col gap-1.5" data-controller="textarea">
                <div class="flex items-center justify-between">
                    {% include '_atoms/form/label.html.twig' with { text: 'Titre', required: true, size: 'sm' } only %}
                    <p class="text-xs text-gray-400 shrink-0" data-textarea-target="count">
                        <span data-textarea-target="current">0</span>/100
                    </p>
                </div>
                <input type="text"
                       placeholder="Ex: Rédiger un email de relance professionnel"
                       class="h-10 px-3.5 text-sm bg-gray-50 border border-gray-100 rounded-xl
                              focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                              placeholder:text-gray-300 transition-all"
                       data-promptly--library-target="inputTitle"
                       data-textarea-target="input"
                       data-action="input->textarea#updateCount"
                       maxlength="100">
            </div>

            {# Description #}
            <div class="flex flex-col gap-1.5">
                {% include '_atoms/form/label.html.twig' with { text: 'Description', required: true, size: 'sm' } only %}
                <textarea placeholder="Décris à quoi sert ce prompt en quelques mots (min. 20 car.)"
                          class="p-3.5 text-sm bg-gray-50 border border-gray-100 rounded-xl resize-none
                                 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                                 placeholder:text-gray-300 transition-all min-h-[72px]"
                          data-promptly--library-target="inputDescription"
                          maxlength="500"></textarea>
            </div>

            {# Prompt #}
            <div class="flex flex-col gap-1.5">
                <div class="flex items-center justify-between">
                    {% include '_atoms/form/label.html.twig' with { text: 'Prompt', required: true, size: 'sm' } only %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: "Améliorer avec l'IA",
                        variant: 'ghost',
                        icon: 'magic-stick',
                        size: 'sm',
                        radius: 'lg',
                        mobileIconOnly: true,
                        mobileBreakpoint: 'lg',
                        class: 'aspect-square lg:aspect-auto',
                        attr: {
                            'data-action': 'click->promptly--library#improveWithAI',
                            'data-promptly--library-target': 'improveBtn',
                            'data-tooltip': "Améliorer avec l'IA",
                            'aria-label': "Améliorer avec l'IA"
                        }
                    } only %}
                </div>
                <textarea placeholder="Tu es un expert en… Rédige un/une…"
                          class="p-3.5 text-sm font-mono bg-gray-50 border border-gray-100 rounded-xl resize-none
                                 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                                 placeholder:text-gray-300 transition-all min-h-[140px]"
                          data-promptly--library-target="inputBody"
                          data-action="input->promptly--library#onBodyInput"
                          maxlength="5000"></textarea>
                <div class="flex flex-wrap gap-1.5" data-promptly--library-target="detectedVars"></div>
            </div>

            {# Catégorie + IA — sur une ligne #}
            <div class="grid grid-cols-2 gap-3">
                <div class="flex flex-col gap-1.5">
                    {% include '_atoms/form/label.html.twig' with { text: 'Catégorie', size: 'sm' } only %}
                    <select class="h-10 px-3 text-sm bg-gray-50 border border-gray-100 rounded-xl
                                   focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                                   text-gray-700 transition-all"
                            data-promptly--library-target="inputCategory">
                        <option value="">— Aucune —</option>
                        {% for category in categories %}
                            <option value="{{ category.slug }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    {% include '_atoms/form/label.html.twig' with { text: 'IA utilisée', size: 'sm' } only %}
                    <select class="h-10 px-3 text-sm bg-gray-50 border border-gray-100 rounded-xl
                                   focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                                   text-gray-700 transition-all"
                            data-promptly--library-target="inputAiModel">
                        <option value="">— Toutes —</option>
                        {% for slug, label in aiModels %}
                            <option value="{{ slug }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            {# Tags #}
            <div class="flex flex-col gap-1.5">
                {% include '_atoms/form/label.html.twig' with {
                    text: 'Tags', size: 'sm',
                    hint: 'Séparés par virgule (max 5)'
                } only %}
                <input type="text"
                       placeholder="rédaction, email, professionnel"
                       class="h-10 px-3.5 text-sm bg-gray-50 border border-gray-100 rounded-xl
                              focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                              placeholder:text-gray-300 transition-all"
                       data-promptly--library-target="inputTags">
            </div>

            {# Visibilité + Brouillon #}
            <div class="flex flex-col gap-1.5">
                {% include '_atoms/form/label.html.twig' with { text: 'Visibilité', size: 'sm' } only %}
                <div class="grid grid-cols-2 gap-2">
                    <label class="flex items-center gap-3 p-3 bg-gray-50 border-2 border-transparent rounded-xl cursor-pointer
                                  transition-all duration-150 has-[:checked]:border-success has-[:checked]:bg-success/5">
                        <input type="radio" name="promptly-visibility" value="public" class="sr-only"
                               data-promptly--library-target="inputVisibility">
                        <span class="text-gray-300 flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'earth', size: 'md', color: 'current' } only %}
                        </span>
                        <div>
                            <span class="block text-sm font-bold text-gray-800 leading-tight">Public</span>
                            <span class="block text-xs text-gray-400 mt-0.5">Visible par tous</span>
                        </div>
                    </label>

                    <label class="flex items-center gap-3 p-3 bg-gray-50 border-2 border-transparent rounded-xl cursor-pointer
                                  transition-all duration-150 has-[:checked]:border-primary has-[:checked]:bg-primary/5">
                        <input type="radio" name="promptly-visibility" value="private" class="sr-only" checked
                               data-promptly--library-target="inputVisibility">
                        <span class="text-gray-300 flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'md', color: 'current' } only %}
                        </span>
                        <div>
                            <span class="block text-sm font-bold text-gray-800 leading-tight">Privé</span>
                            <span class="block text-xs text-gray-400 mt-0.5">Vous seul</span>
                        </div>
                    </label>
                </div>

                {# Brouillon #}
                <label class="flex items-center gap-2.5 mt-1 cursor-pointer select-none">
                    <input type="checkbox"
                           class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary/20 transition-all"
                           data-promptly--library-target="inputDraft">
                    <span class="text-sm text-gray-600">Enregistrer comme brouillon</span>
                    <span class="text-xs text-gray-400">(non visible dans la bibliothèque)</span>
                </label>
            </div>
        </div>

        <div class="flex items-center gap-3 px-6 py-4 border-t border-gray-50 flex-shrink-0">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Annuler', variant: 'ghost', size: 'md', type: 'button',
                attr: { 'data-action': 'click->promptly--library#closeModal' }
            } only %}
            <div class="flex-1">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Enregistrer', variant: 'primary', size: 'md', icon: 'check',
                    width: 'full', type: 'button',
                    attr: { 'data-action': 'click->promptly--library#savePrompt' }
                } only %}
            </div>
        </div>
    </div>
</div>

{# ================================================================
   MODAL COPIE INTERACTIVE (typewriter + variables)
   ================================================================ #}
<div class="fixed inset-0 z-[60] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/60 backdrop-blur-sm"
     data-promptly--library-target="copyModal"
     data-action="click->promptly--library#closeCopyModal"
     style="display: none;">
    <div class="bg-white rounded-t-3xl sm:rounded-2xl shadow-2xl border border-gray-100 w-full sm:max-w-xl flex flex-col max-h-[90vh] sm:max-h-[80vh]"
         data-action="click->promptly--library#stopPropagation">

        <div class="flex justify-center pt-3 pb-1 sm:hidden flex-shrink-0">
            <div class="w-10 h-1 bg-gray-200 rounded-full"></div>
        </div>

        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-50 flex-shrink-0">
            <div class="flex items-center gap-3 min-w-0">
                <div class="w-8 h-8 rounded-xl bg-primary/10 border border-primary/15 flex items-center justify-center shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'copy', size: 'sm', color: 'primary' } only %}
                </div>
                <div class="min-w-0">
                    <p class="text-sm font-bold text-gray-900 font-secondary leading-tight">Personnaliser et copier</p>
                    <p class="text-xs text-gray-400 truncate max-w-[220px]"
                       data-promptly--library-target="copyModalTitle"></p>
                </div>
            </div>
            {% include '_atoms/close-button/close-button.html.twig' with {
                class: 'ml-3',
                attr: { 'data-action': 'click->promptly--library#closeCopyModal' }
            } only %}
        </div>

        <div class="flex-1 overflow-y-auto px-5 py-4 min-h-0">
            <div class="font-mono text-[12.5px] text-gray-700 leading-[1.85] whitespace-pre-wrap
                         bg-gray-50 rounded-xl border border-gray-100 p-4 min-h-[180px]"
                 data-promptly--library-target="copyModalBody"></div>
        </div>

        <div class="px-6 pt-2 pb-1 flex-shrink-0"
             data-promptly--library-target="copyModalHint"
             style="display: none;">
            <p class="text-[11px] font-semibold text-primary flex items-center gap-1.5">
                <span class="text-base leading-none">↵</span>
                <span>Appuyez sur Entrée pour continuer</span>
            </p>
        </div>

        <div class="flex items-center gap-3 px-6 py-4 border-t border-gray-50 flex-shrink-0">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Fermer', variant: 'ghost', size: 'md', type: 'button',
                attr: { 'data-action': 'click->promptly--library#closeCopyModal' }
            } only %}
            <div class="flex-1">
                <button type="button" disabled
                        class="w-full h-10 flex items-center justify-center gap-2 rounded-xl text-sm font-semibold
                               bg-gray-100 text-gray-400 cursor-not-allowed transition-all duration-300"
                        data-promptly--library-target="copyModalBtn"
                        data-action="click->promptly--library#copyFinal">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'copy', size: 'sm', color: 'current' } only %}
                    Copier le prompt
                </button>
            </div>
        </div>
    </div>
</div>

{# ================================================================
   MODAL SUPPRESSION
   ================================================================ #}
{% embed '_organisms/delete-modal/delete-modal.html.twig' with {
    title:       'Supprimer ce prompt ?',
    modalAttr:   {'data-promptly--library-target': 'deleteModal', 'data-action': 'keydown.esc@window->promptly--library#closeDeleteModal'},
    cancelAttr:  {'data-action': 'click->promptly--library#closeDeleteModal'},
    confirmAttr: {'data-action': 'click->promptly--library#confirmDelete'}
} only %}
    {% block description %}
        <p class="text-sm text-gray-400">Cette action est irréversible.</p>
    {% endblock %}
{% endembed %}