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

{% block title %}{% if mode == 'category' %}{{ category.name }} · {% endif %}Rechercher · LivreComment{% endblock %}

{% block body_class %}page-search{% endblock %}

{% block body %}
    {# Mode "subcategories" : breadcrumb retour vers /search #}
    {% if mode == 'category' %}
        <a href="{{ path('app_search') }}" class="search-crumb">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
            Recherche
        </a>
        <h1 class="search-page-title" style="margin-top: 4px;">{{ category.name }}</h1>
        {% if category.personalized ?? false %}
            <p class="search-page-sub">Des sélections faites pour toi, basées sur tes lectures.</p>
        {% endif %}
    {% else %}
        <h1 class="search-page-title">Trouve un livre, un auteur, un ami</h1>
    {% endif %}

    {% set scope_type = type|default('books') %}
    <form method="get" action="{{ path('app_search') }}" role="search"
          class="search-form-wrap"
          data-controller="search-type search-suggest"
          data-search-suggest-url-value="{{ path('app_search_suggest') }}"
          data-search-type-placeholders-value='{"books":"Ex : Le Petit Prince","authors":"Ex : Camus","users":"Ex : lea_b"}'>
        {# Sélecteur de type AU-DESSUS de la barre : choisi AVANT de taper -> on
           tape directement le bon backend (Auteurs/Lecteurs = BDD, zéro appel
           Google Books inutile). Vrais radios -> fonctionne sans JS (choix +
           bouton Chercher). Avec JS, le controller search-type relance la
           recherche si un terme est déjà saisi, et adapte le placeholder. #}
        {% set scope_idx = { books: 0, authors: 1, users: 2 }[scope_type] ?? 0 %}
        <div class="search-scope" role="radiogroup" aria-label="Type de recherche">
            <span class="search-scope__thumb" aria-hidden="true"
                  data-search-type-target="thumb"
                  style="transform: translateX({{ scope_idx * 100 }}%)"></span>
            {% for value, label in { books: 'Livres', authors: 'Auteurs', users: 'Lecteurs' } %}
                <label class="search-scope__seg{{ scope_type == value ? ' is-active' : '' }}"
                       data-search-type-target="seg">
                    <input type="radio" name="type" value="{{ value }}"
                           {{ scope_type == value ? 'checked' : '' }}
                           data-action="change->search-type#switch">
                    <span>{{ label }}</span>
                </label>
            {% endfor %}
        </div>

        <div class="search-form">
            <label for="search-input" class="sr-only">Recherche</label>
            <input
                id="search-input"
                type="search"
                name="q"
                value="{{ query }}"
                placeholder="{% if scope_type == 'authors' %}Ex : Camus{% elseif scope_type == 'users' %}Ex : lea_b{% elseif mode == 'category' %}Cherche dans {{ category.name|lower }}…{% else %}Ex : Le Petit Prince{% endif %}"
                autocomplete="off"
                inputmode="search"
                role="combobox"
                aria-autocomplete="list"
                aria-expanded="false"
                aria-controls="search-suggest-menu"
                data-search-type-target="input"
                data-search-suggest-target="input"
                data-action="input->search-suggest#input keydown->search-suggest#keydown"
            >
            <button type="submit">Chercher</button>
        </div>
        <div id="search-suggest-menu" class="search-suggest__menu" role="listbox" hidden
             data-search-suggest-target="menu"></div>
    </form>

    {# Mode 1 : grille des catégories principales #}
    {% if mode == 'categories' %}
        <section class="discover-section">
            <h2 class="discover-section__title">Parcourir</h2>
            <div class="category-grid">
                {% for slug, cat in categories %}
                    <a href="{{ path('app_search', { cat: slug }) }}" class="category-tile" style="--tile-color: {{ cat.color }};">
                        {% if cat.personalized ?? false %}
                            <span class="category-tile__badge">Personnalisé</span>
                        {% endif %}
                        <span class="category-tile__name">{{ cat.name }}</span>

                        {% if cat.personalized ?? false %}
                            <span class="category-tile__sparkle" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M12 3 14 9l6 1.5-4.5 4 1 6L12 17l-4.5 3.5 1-6L4 10.5 10 9z"/>
                                </svg>
                            </span>
                        {% elseif cat.cover ?? false %}
                            <img
                                class="category-tile__cover"
                                src="{{ cat.cover }}"
                                alt=""
                                loading="lazy"
                                onerror="this.style.display='none'"
                            >
                        {% endif %}
                    </a>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {# Mode 2 : livres de la catégorie (BDD d'abord, puis « plus » par auteurs).
       Liste unifiée de ProviderBookResult rendue comme les résultats de recherche. #}
    {% if mode == 'category' %}
        {% if books|default([])|length > 0 %}
            <ul class="result-list">
                {% for hit in books %}{% include 'search/_provider_hit.html.twig' %}{% endfor %}
            </ul>
            {# « Voir plus » : le frame contient le bouton ; au clic il est
               remplacé (Turbo) par les livres restants du pool, qui s'ajoutent
               en dessous. Sans JS/Turbo, le lien mène à la même page avec les
               items rendus dans le frame -> dégradation propre. #}
            {% if has_more|default(false) %}
                <turbo-frame id="cat-more">
                    {% if show_more_items|default(false) %}
                        <ul class="result-list">
                            {% for hit in more_books %}{% include 'search/_provider_hit.html.twig' %}{% endfor %}
                        </ul>
                    {% else %}
                        <div style="text-align: center; margin-top: var(--space-4);">
                            <a class="btn btn--secondary" href="{{ path('app_search', { cat: category_key, more: 1 }) }}" data-turbo-frame="cat-more">Voir plus</a>
                        </div>
                    {% endif %}
                </turbo-frame>
            {% endif %}
        {% else %}
            <div class="subcat-empty">
                <p class="subcat-empty__title">Rien dans cette catégorie pour l'instant</p>
                <p class="subcat-empty__hint">Le catalogue s'enrichit. Essaie la recherche ci-dessus.</p>
            </div>
        {% endif %}
    {% endif %}

    {# Mode "Pour vous" : recommandations content-based via ForYouService.
       Rendu via _provider_hit (mêmes cartes que le mode category). #}
    {% if mode == 'foryou' %}
        <section class="discover-section">
            <h2 class="discover-section__title">Pour vous</h2>
            <p class="subcat-empty__hint" style="margin: 0 0 var(--space-3)">D'après tes genres, tes auteurs et tes lectures notées.</p>
            {% if recommendations|length > 0 %}
                <ul class="result-list">
                    {% for hit in recommendations %}{% include 'search/_provider_hit.html.twig' %}{% endfor %}
                </ul>
            {% else %}
                <div class="subcat-empty">
                    <p class="subcat-empty__title">Pas encore de reco</p>
                    <p class="subcat-empty__hint">Note quelques livres ou choisis des genres et auteurs pour qu'on affine tes recommandations.</p>
                </div>
            {% endif %}
        </section>
    {% endif %}

    {# Mode 3 : résultats de recherche, wrappés dans un <turbo-frame>.
       Le type (Livres/Auteurs/Lecteurs) se choisit via le segmented control du
       formulaire ci-dessus (controller Stimulus search-type), AVANT de taper :
       on tape directement le bon backend.

       Branchement par type :
         - books : pipeline BookSearchService (GB + OL + cascade ISBN)
         - authors : Authors en BDD (LIKE name)
         - users : Users en BDD (LIKE username + displayName) #}
    {% if mode == 'results' %}
        {% set active_type = type|default('books') %}
        {# Les hits portent `data-turbo-frame="_top"` pour sortir du frame quand
           ils mènent à une fiche (/livres/{ulid}, /auteurs/..., /profil/{handle}). #}
        <turbo-frame id="search-results" data-turbo-action="advance">

        {% if active_type == 'books' %}
            {% if hits|default([])|length > 0 %}
                <ul class="result-list">
                    {% for hit in hits %}{% include 'search/_provider_hit.html.twig' %}{% endfor %}
                </ul>
            {% else %}
                <p class="muted" style="margin-top: var(--space-5);">
                    Aucun livre trouvé pour <strong style="color: var(--ink); font-weight: 500;">{{ query }}</strong>.
                    <br><span style="font-size: 0.9rem;">
                        Essaie une autre orthographe, ou
                        <a href="{{ path('app_book_request_new', {q: query}) }}" style="color: var(--violet); text-decoration: none; font-weight: 500;">propose-le-nous</a>.
                    </span>
                </p>
            {% endif %}

        {% elseif active_type == 'authors' %}
            {% if author_hits|default([])|length > 0 %}
                <ul class="result-list">
                    {% for author in author_hits %}{% include 'search/_author_hit.html.twig' with { author: author } only %}{% endfor %}
                </ul>
            {% else %}
                <p class="muted" style="margin-top: var(--space-5);">
                    Aucun auteur trouvé pour <strong style="color: var(--ink); font-weight: 500;">{{ query }}</strong>.
                </p>
            {% endif %}

        {% elseif active_type == 'users' %}
            {% if user_hits|default([])|length > 0 %}
                <ul class="result-list">
                    {% for u in user_hits %}
                        {% include 'search/_user_hit.html.twig' with {
                            profile: u,
                            is_self: app.user and app.user.id == u.id,
                            is_following: following_by_user_id[u.id]|default(false),
                        } only %}
                    {% endfor %}
                </ul>
            {% else %}
                <p class="muted" style="margin-top: var(--space-5);">
                    Aucun lecteur trouvé pour <strong style="color: var(--ink); font-weight: 500;">{{ query }}</strong>.
                </p>
            {% endif %}
        {% endif %}

        </turbo-frame>
    {% endif %}
{% endblock %}