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

{% block title %}Promptly — Bibliothèque de prompts{% endblock %}

{% block body %}

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

<div class="max-w-7xl mx-auto"
     data-controller="promptly--library"
     data-promptly--library-create-url-value="{{ path('app_promptly_create') }}"
     data-promptly--library-base-url-value="{{ path('app_promptly') }}"
     data-promptly--library-serenia-url-value="{{ path('app_seren_ia') }}"
     data-promptly--library-improve-url-value="{{ path('app_promptly_improve') }}"
     data-promptly--library-improve-min-tokens-value="{{ improveMinTokens|default(1000) }}">

    {# ================================================================
       HERO — titre + description
       ================================================================ #}
    <div class="flex items-center justify-between gap-3 mb-4 sm:mb-8">
        <div class="min-w-0 flex-1">
            <h1 class="text-xl sm:text-[2.25rem] font-black font-secondary tracking-tight leading-tight bg-clip-text text-transparent"
                style="background-image: linear-gradient(to bottom right, {{ ptColor.primary }}, {{ ptColor.secondary }});">
                Bibliothèque de prompts
            </h1>
            <p class="text-xs sm:text-sm text-gray-500 mt-1 max-w-2xl hidden sm:block">
                Accédez à <span class="font-semibold text-gray-700">{{ totalItems }} prompt{{ totalItems > 1 ? 's' : '' }}</span> prêts à l'emploi, personnalisez-les avec vos propres informations et envoyez-les directement vers votre IA en un clic.
            </p>
            <p class="text-xs text-gray-500 mt-0.5 sm:hidden">
                <span class="font-semibold text-gray-700">{{ totalItems }} prompt{{ totalItems > 1 ? 's' : '' }}</span> disponibles
            </p>
        </div>
        <div class="shrink-0">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Nouveau prompt',
                variant: 'primary',
                size: 'md',
                icon: 'plus',
                gradientFrom: ptColor.primary,
                gradientTo: ptColor.secondary,
                mobileIconOnly: true,
                mobileBreakpoint: 'sm',
                href: path('app_promptly_create_page')
            } only %}
        </div>
    </div>

    {# ================================================================
       RECHERCHE + TRI
       ================================================================ #}
    {# Barre de recherche — 2 lignes sur mobile, 1 ligne sur sm+ #}
    <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-5">

        {# Ligne 1 mobile : recherche + favoris #}
        <div class="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
            <div class="relative flex-1">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'sm', color: 'current' } only %}
                </span>
                <input type="text"
                       placeholder="Rechercher un prompt..."
                       value="{{ search }}"
                       class="w-full h-12 pl-11 pr-4 text-sm bg-white border border-gray-200 rounded-2xl shadow-sm
                               focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                               placeholder:text-gray-300 transition-all duration-150"
                       data-promptly--library-target="searchInput"
                       data-action="input->promptly--library#onSearch">
            </div>

            {# Favoris — visible sur toutes tailles #}
            <a href="{{ path('app_promptly', { search: search, sort: sort, category: activeCategory ? activeCategory.slug : '', aiModel: aiModel ?? '', favorites: favoritesOnly ? 0 : 1 }) }}"
               class="shrink-0 flex items-center justify-center w-12 h-12 rounded-2xl border transition-all duration-150
                      {{ favoritesOnly
                          ? 'bg-red-50 border-red-200 text-red-400'
                          : 'bg-white border-gray-200 text-gray-400 hover:border-red-200 hover:bg-red-50 hover:text-red-400' }}">
                {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'sm', color: 'current' } only %}
            </a>
        </div>

        {# Ligne 2 mobile / suite sur sm+ : tri + filtre IA #}
        <div class="flex items-center gap-2 sm:gap-3 shrink-0">

            {# Tri — dropdown custom #}
            {% set sortOptions = [
                { key: 'favorites', label: 'Populaires',    icon: 'heart' },
                { key: 'uses',      label: 'Plus utilisés', icon: 'chart' },
                { key: 'recent',    label: 'Récents',       icon: 'clock' },
                { key: 'alpha',     label: 'A → Z',         icon: 'sort' },
            ] %}
            {% set sortLabel = '' %}
            {% for o in sortOptions %}{% if o.key == sort %}{% set sortLabel = o.label %}{% endif %}{% endfor %}

            <div class="relative shrink-0" data-controller="promptly--sort-dropdown">
                <button type="button"
                        class="flex items-center gap-2 bg-white border border-gray-200 rounded-2xl px-4 h-12 shadow-sm text-sm text-gray-500 whitespace-nowrap hover:border-gray-300 transition-all duration-150"
                        data-action="click->promptly--sort-dropdown#toggle">
                    <span class="text-gray-400">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'sort', size: 'xs', color: 'current' } only %}
                    </span>
                    <span class="hidden sm:inline">Trier :</span>
                    <span class="font-semibold text-gray-700">{{ sortLabel }}</span>
                    <span class="text-gray-400 transition-transform duration-150"
                          data-promptly--sort-dropdown-target="chevron">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'alt-arrow-up', size: 'xs', color: 'current' } only %}
                    </span>
                </button>

                <div hidden
                     data-promptly--sort-dropdown-target="panel"
                     class="absolute right-0 top-full mt-2 w-52 bg-white rounded-2xl border border-gray-100 shadow-xl z-50 py-2 overflow-hidden">
                    {% for option in sortOptions %}
                        {% set isActive = sort == option.key %}
                        <a href="{{ path('app_promptly', { search: search, sort: option.key, category: activeCategory ? activeCategory.slug : '', aiModel: aiModel ?? '' }) }}"
                           class="flex items-center gap-3 px-4 py-3 text-sm transition-colors duration-100
                                  {{ isActive ? 'bg-primary/5 text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50' }}">
                            <span class="{{ isActive ? 'text-primary' : 'text-gray-400' }}">
                                {% include '_atoms/icon/icon.html.twig' with { name: option.icon, size: 'sm', color: 'current' } only %}
                            </span>
                            <span class="flex-1">{{ option.label }}</span>
                            {% if isActive %}
                                <span class="text-primary">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'xs', color: 'current' } only %}
                                </span>
                            {% endif %}
                        </a>
                    {% endfor %}
                </div>
            </div>

            {# Filtre IA #}
            {% if usedAiModels is not empty %}
            <div class="relative shrink-0" data-controller="promptly--sort-dropdown">
                <button type="button"
                        class="flex items-center gap-2 border rounded-2xl px-4 h-12 shadow-sm text-sm whitespace-nowrap transition-all duration-150
                               {{ aiModel
                                   ? 'bg-primary/5 border-primary/30 text-primary font-semibold hover:bg-primary/10'
                                   : 'bg-white border-gray-200 text-gray-500 hover:border-gray-300' }}"
                        data-action="click->promptly--sort-dropdown#toggle">
                    <span class="{{ aiModel ? 'text-primary' : 'text-gray-400' }}">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'magic-stick', size: 'xs', color: 'current' } only %}
                    </span>
                    <span class="hidden sm:inline">IA :</span>
                    <span class="font-semibold {{ aiModel ? 'text-primary' : 'text-gray-700' }}">
                        {{ aiModel ? (aiModels[aiModel] ?? aiModel) : 'Toutes' }}
                    </span>
                    <span class="{{ aiModel ? 'text-primary' : 'text-gray-400' }} transition-transform duration-150"
                          data-promptly--sort-dropdown-target="chevron">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'alt-arrow-up', size: 'xs', color: 'current' } only %}
                    </span>
                </button>

                <div hidden
                     data-promptly--sort-dropdown-target="panel"
                     class="absolute right-0 top-full mt-2 w-56 bg-white rounded-2xl border border-gray-100 shadow-xl z-50 py-2 overflow-hidden">

                    <a href="{{ path('app_promptly', { search: search, sort: sort, category: activeCategory ? activeCategory.slug : '', favorites: favoritesOnly ? 1 : 0 }) }}"
                       class="flex items-center gap-3 px-4 py-2.5 text-sm transition-colors duration-100
                              {{ aiModel is null ? 'bg-primary/5 text-primary font-semibold' : 'text-gray-500 hover:bg-gray-50' }}">
                        <span>Toutes les IA</span>
                        {% if aiModel is null %}
                            <span class="ml-auto text-primary">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'xs', color: 'current' } only %}
                            </span>
                        {% endif %}
                    </a>

                    <div class="border-t border-gray-100 my-1"></div>

                    {% for slug in usedAiModels %}
                        {% set isActive = aiModel == slug %}
                        <a href="{{ path('app_promptly', { search: search, sort: sort, category: activeCategory ? activeCategory.slug : '', favorites: favoritesOnly ? 1 : 0, aiModel: isActive ? '' : slug }) }}"
                           class="flex items-center gap-3 px-4 py-2.5 text-sm transition-colors duration-100
                                  {{ isActive ? 'bg-primary/5 text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50' }}">
                            <span class="flex-1">{{ aiModels[slug] ?? slug }}</span>
                            {% if isActive %}
                                <span class="text-primary">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'xs', color: 'current' } only %}
                                </span>
                            {% endif %}
                        </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

        </div>
    </div>

    {# ================================================================
       FILTRES CATÉGORIE
       ================================================================ #}
    <div class="flex items-center gap-2 mb-5 overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">

        {# Pill "Tous" #}
        <a href="{{ path('app_promptly', { search: search, sort: sort, aiModel: aiModel ?? '' }) }}"
           class="shrink-0 px-4 py-2 rounded-full text-sm font-semibold transition-all duration-150 whitespace-nowrap
                  {{ activeCategory is null
                      ? 'bg-gray-900 text-white'
                      : 'bg-white border border-gray-200 text-gray-600 hover:border-gray-300 shadow-sm' }}">
            Tous
        </a>

        {# Pills catégories #}
        {% for category in categories %}
            {% set isActive = activeCategory and activeCategory.slug == category.slug %}
            {% set catCount = categoryCounts[category.slug] ?? 0 %}
            <a href="{{ path('app_promptly', { search: search, sort: sort, category: isActive ? '' : category.slug }) }}"
               class="shrink-0 flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-all duration-150 whitespace-nowrap
                      {{ isActive
                          ? 'text-white'
                          : 'bg-white border border-gray-200 text-gray-600 hover:border-gray-300 shadow-sm' }}"
               style="{{ isActive ? 'background:' ~ category.colorHex ~ '; border-color:' ~ category.colorHex ~ ';' : '' }}">
                {{ category.name }}
                {% if catCount > 0 %}
                    <span class="text-[11px] font-semibold opacity-70">{{ catCount }}</span>
                {% endif %}
            </a>
        {% endfor %}
    </div>

    {# ================================================================
       GRILLE
       ================================================================ #}
    {% if allItems is empty %}

        {% if search %}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm py-16 flex flex-col items-center gap-4 text-center px-6"
                 data-promptly--library-target="homeView">
                <div class="w-14 h-14 rounded-2xl bg-gray-50 border border-gray-100 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'xl', color: 'secondary' } only %}
                </div>
                <div>
                    <p class="text-base font-semibold text-gray-800">Aucun résultat pour « {{ search }} »</p>
                    <p class="text-sm text-gray-400 mt-1">Essayez d'autres mots-clés ou explorez par catégorie.</p>
                </div>
                <a href="{{ path('app_promptly', { sort: sort, category: activeCategory ? activeCategory.slug : '' }) }}"
                   class="text-sm font-medium text-primary hover:underline transition-colors duration-150">
                    Effacer la recherche
                </a>
            </div>

        {% elseif activeCategory %}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm py-16 flex flex-col items-center gap-4 text-center px-6"
                 data-promptly--library-target="homeView">
                <div class="w-14 h-14 rounded-2xl flex items-center justify-center"
                     style="background: {{ activeCategory.colorHex }}1A;">
                    <span style="color: {{ activeCategory.colorHex }};">
                        {% include '_atoms/icon/icon.html.twig' with { name: activeCategory.icon, size: 'xl', color: 'current' } only %}
                    </span>
                </div>
                <div>
                    <p class="text-base font-semibold text-gray-800">Aucun prompt dans « {{ activeCategory.name }} »</p>
                    <p class="text-sm text-gray-400 mt-1">Soyez le premier à contribuer dans cette catégorie !</p>
                </div>
                <a href="{{ path('app_promptly', { sort: sort }) }}"
                   class="text-sm font-medium text-primary hover:underline">
                    Voir tous les prompts
                </a>
            </div>

        {% else %}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm py-16 flex flex-col items-center gap-5 text-center px-6"
                 data-promptly--library-target="homeView">
                <div class="w-16 h-16 rounded-2xl flex items-center justify-center bg-primary/5 border border-primary/10">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'magic-stick', size: '3xl', color: 'primary' } only %}
                </div>
                <div>
                    <p class="text-lg font-bold text-gray-900 font-secondary">La bibliothèque est vide</p>
                    <p class="text-sm text-gray-400 mt-1.5 max-w-xs mx-auto">
                        Créez votre premier prompt ou invitez vos collègues à contribuer.
                    </p>
                </div>
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Créer le premier prompt',
                    variant: 'primary', size: 'md', icon: 'plus',
                    gradientFrom: ptColor.primary,
                    gradientTo: ptColor.secondary,
                    href: path('app_promptly_create_page')
                } only %}
            </div>
        {% endif %}

    {% else %}

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5"
             data-promptly--library-target="homeView">
            {% for item in allItems %}
                {% include '_molecules/promptly-card/promptly-card.html.twig' with { item: item } only %}
            {% endfor %}
        </div>

    {% endif %}

    {# ── Cibles Stimulus compatibilité ── #}
    <div data-promptly--library-target="explorerView" style="display: none;">
        <div data-promptly--library-target="grid"></div>
    </div>
    <button type="button" data-promptly--library-target="viewHomeBtn" class="hidden"></button>
    <button type="button" data-promptly--library-target="viewExploreBtn" class="hidden"></button>
    <span data-promptly--library-target="statTotalLabel" style="display:none;"></span>
    <div data-promptly--library-target="statFavWrapper" style="display:none;">
        <span data-promptly--library-target="statFavCount"></span>
        <span data-promptly--library-target="statFavLabel"></span>
    </div>
    <span data-promptly--library-target="tabCountAll" style="display:none;"></span>
    <span data-promptly--library-target="tabCountFavorites" style="display:none;"></span>
    <span data-promptly--library-target="tabCountMine" style="display:none;"></span>

    {# ================================================================
       MODALS PARTAGÉES
       ================================================================ #}
    {% include 'promptly/_modals.html.twig' with {
        categories: categories,
        aiModels: aiModels
    } only %}

</div>
{% endblock %}