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

{% set category   = prompt.categoryData %}
{% set cardColor  = category ? category.colorHex : '#6366F1' %}
{% set cardIcon   = category ? category.icon : 'magic-stick' %}
{% set authorFN   = prompt.author.firstName ?? '' %}
{% set authorLN   = prompt.author.lastName  ?? '' %}
{% set authorName = (authorFN ~ ' ' ~ authorLN)|trim %}
{% set fieldNames = prompt.fieldNames %}
{% set fieldCount = fieldNames|length %}

{% block title %}{{ prompt.title }} — Promptly{% endblock %}

{% block body %}

{% set ptColor = tool_color_details['promptly'] %}

{% if from == 'mes-prompts' %}
    {% set backHref  = folderParam ? path('app_promptly_my_prompts', { folder: folderParam }) : path('app_promptly_my_prompts') %}
    {% set backLabel = 'Mes prompts' %}
{% else %}
    {% set backHref  = path('app_promptly') %}
    {% set backLabel = 'Bibliothèque' %}
{% endif %}

<div data-controller="promptly--detail"
     data-promptly--detail-prompt-id-value="{{ prompt.id }}"
     data-promptly--detail-body-value="{{ prompt.body|e('html_attr') }}"
     data-promptly--detail-use-url-value="{{ path('app_promptly_use', { id: prompt.id }) }}"
     data-promptly--detail-favorite-url-value="{{ path('app_promptly_favorite', { id: prompt.id }) }}"
     data-promptly--detail-serenia-url-value="{{ path('app_seren_ia') }}"
     data-promptly--detail-favorited-value="{{ favorited ? 'true' : 'false' }}"
     data-promptly--detail-is-owner-value="{{ isOwner ? 'true' : 'false' }}"
     data-promptly--detail-field-count-value="{{ fieldCount }}"
     data-promptly--detail-color-value="{{ cardColor }}">

<div class="max-w-4xl mx-auto pb-28">

    {# ── Hero ── #}
    <div class="flex items-start justify-between gap-4 mb-8">

        <div class="flex items-start gap-5 min-w-0">

            <div class="shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center shadow-sm"
                 style="background: {{ cardColor }}18;">
                <span class="inline-flex items-center justify-center" style="color: {{ cardColor }};">
                    {% include '_atoms/icon/icon.html.twig' with { name: cardIcon, size: 'xl', color: 'current' } only %}
                </span>
            </div>

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

            <h1 class="text-[2rem] font-bold text-gray-900 font-secondary tracking-tight leading-tight">
                {{ prompt.title }}
            </h1>

            {% if prompt.description %}
                <p class="text-gray-400 mt-1.5 text-[15px] max-w-2xl leading-relaxed">{{ prompt.description }}</p>
            {% endif %}

            {# Méta #}
            <div class="flex items-center gap-3 mt-3 flex-nowrap overflow-x-auto scrollbar-none">

                {% if prompt.author.isAdmin() %}
                    <span class="inline-flex items-center gap-1.5 text-[13px] font-semibold text-gray-600 shrink-0 whitespace-nowrap">
                        {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'fluid', class: 'w-4 h-4' } only %}
                        Bubul
                    </span>
                {% else %}
                    <span class="text-[13px] text-gray-400 shrink-0 whitespace-nowrap">par <span class="font-semibold text-gray-600">{{ authorName }}</span></span>
                {% endif %}

                <span class="w-px h-3.5 bg-gray-200 shrink-0"></span>

                {% if prompt.isDraft %}
                    <span class="inline-flex items-center shrink-0 whitespace-nowrap px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 text-[12px] font-semibold">Brouillon</span>
                {% elseif prompt.visibility == 'public' %}
                    <span class="inline-flex items-center shrink-0 whitespace-nowrap px-2.5 py-1 rounded-full bg-primary/8 text-primary border border-primary/20 text-[12px] font-semibold">Public</span>
                {% else %}
                    <span class="inline-flex items-center gap-1.5 shrink-0 whitespace-nowrap px-2.5 py-1 rounded-full bg-gray-100 text-gray-500 border border-gray-200 text-[12px] font-semibold">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'xs', color: 'current' } only %}
                        Privé
                    </span>
                {% endif %}

                {% if prompt.aiModelLabel %}
                    <span class="w-px h-3.5 bg-gray-200 shrink-0"></span>
                    <span class="text-[13px] text-gray-400 shrink-0 whitespace-nowrap">{{ prompt.aiModelLabel }}</span>
                {% endif %}

                <span class="w-px h-3.5 bg-gray-200 shrink-0"></span>

                {% if category %}
                    <span class="inline-flex items-center gap-1.5 text-[12px] font-medium px-2.5 py-1 rounded-full shrink-0 whitespace-nowrap"
                          style="background: {{ cardColor }}15; color: {{ cardColor }};">
                        <span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: {{ cardColor }};"></span>
                        {{ category.name }}
                    </span>
                    <span class="w-px h-3.5 bg-gray-200 shrink-0"></span>
                {% endif %}

                <span class="inline-flex items-center gap-1.5 text-[13px] text-gray-400 shrink-0 whitespace-nowrap">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'chart', size: 'xs', color: 'current' } only %}
                    {{ prompt.usesCount }}
                </span>

                <span class="inline-flex items-center gap-1.5 text-[13px] text-gray-400 shrink-0 whitespace-nowrap">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'xs', color: 'current' } only %}
                    {{ favoriteCounts[prompt.id] ?? 0 }}
                </span>

            </div>
        </div>
        </div>{# /flex items-start gap-5 #}

        {# Boutons alignés avec le titre #}
        <div class="flex items-center gap-2 shrink-0 pt-1">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Retour',
                variant: 'back',
                size: 'md',
                icon: 'arrow-left',
                href: backHref
            } only %}
            {% if isOwner %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Modifier',
                    variant: 'primary',
                    size: 'md',
                    icon: 'edit',
                    gradientFrom: ptColor.primary,
                    gradientTo: ptColor.secondary,
                    href: path('app_promptly_edit_page', { id: prompt.id })
                } only %}
            {% endif %}
        </div>

    </div>

    {# ================================================================
       CORPS
       ================================================================ #}

    {% if fieldNames is not empty %}

        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">

            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-gray-50/60">
                <div class="flex items-center gap-3">
                    <span class="inline-flex items-center gap-1.5 text-[12px] font-semibold px-3 py-1 rounded-full border border-dashed border-amber-300 bg-amber-50 text-amber-700">
                        ✎ à compléter
                    </span>
                    <span class="text-[13px] text-gray-400 hidden sm:inline">Cliquez sur les zones colorées pour les remplir</span>
                </div>
                <span class="text-[13px] font-medium shrink-0 text-gray-400 transition-colors duration-300"
                      data-promptly--detail-target="progressLabel">
                    0/{{ fieldCount }} complété{{ fieldCount > 1 ? 's' : '' }}
                </span>
            </div>

            <div data-promptly--detail-target="madlibsContainer"
                 class="px-8 py-7 bg-gray-50/40 text-[16px] leading-[2.4] text-gray-700 transition-colors duration-500">
            </div>

        </div>

    {% else %}

        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">

            <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 bg-gray-50/60">
                <div class="w-8 h-8 rounded-xl flex items-center justify-center"
                     style="background: {{ cardColor }}1A;">
                    <span class="inline-flex items-center justify-center" style="color: {{ cardColor }};">
                        {% include '_atoms/icon/icon.html.twig' with { name: cardIcon, size: 'sm', color: 'current' } only %}
                    </span>
                </div>
                <span class="text-[14px] font-semibold text-gray-700">Prompt prêt à utiliser</span>
                <span class="ml-auto text-[12px] font-semibold px-2.5 py-1 rounded-full bg-green-50 text-green-700 border border-green-200">● Prêt</span>
            </div>

            <div class="p-7 bg-gray-50/50 min-h-48 max-h-[60vh] overflow-y-auto">
                <div class="text-[15px] text-gray-600 leading-relaxed whitespace-pre-wrap break-words font-mono"
                     data-promptly--detail-target="preview"></div>
            </div>

        </div>

    {% endif %}

</div>{# /max-w-4xl #}

{# ── Footer sticky ── #}
<div class="fixed bottom-0 right-0 z-30 bg-white/95 backdrop-blur-sm border-t border-gray-100 shadow-[0_-4px_20px_rgba(0,0,0,0.06)]"
     style="left: var(--sidebar-width, 250px);">
    <div class="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between gap-4">

        {# Contexte #}
        <div class="flex items-center gap-3 min-w-0"></div>

        {# Actions #}
        <div class="flex items-center gap-2 shrink-0">

            <button type="button"
                    class="h-10 w-10 flex items-center justify-center rounded-xl border cursor-pointer transition-all duration-200 hover:scale-110 active:scale-125
                           {{ favorited ? 'bg-red-50 border-red-200 text-red-400' : 'bg-white border-gray-200 text-gray-400' }}"
                    data-action="click->promptly--detail#toggleFavorite"
                    data-promptly--detail-target="favBtn"
                    data-tooltip="{{ favorited ? 'Retirer des favoris' : 'Ajouter aux favoris' }}"
                    aria-label="{{ favorited ? 'Retirer des favoris' : 'Ajouter aux favoris' }}">
                {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'sm', color: 'current' } only %}
            </button>

            {% include '_atoms/button/button.html.twig' with {
                label: 'Ouvrir dans Serenia',
                gradientFrom: '#8B5CF6',
                gradientTo: '#7C3AED',
                size: 'md',
                icon: 'send',
                iconPosition: 'right',
                type: 'button',
                attr: {
                    'data-action': 'click->promptly--detail#sendToSerenia',
                    'data-promptly--detail-target': 'sereniaBtn'
                }
            } only %}

            {% include '_atoms/button/button.html.twig' with {
                label: 'Copier le prompt',
                variant: 'primary',
                size: 'md',
                icon: 'copy',
                gradientFrom: ptColor.primary,
                gradientTo: ptColor.secondary,
                type: 'button',
                attr: {
                    'data-action': 'click->promptly--detail#copyPrompt',
                    'data-promptly--detail-target': 'copyBtn'
                }
            } only %}

        </div>

    </div>
</div>

</div>{# /data-controller #}

{% endblock %}