{% extends "base.html" %}

{% block title %}Recherche{% endblock %}

{% block content %}
<style>
.section-group {
    margin-bottom: 2rem;
    border: 1px solid rgba(125, 110, 88, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-bg-main) 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(125, 110, 88, 0.08);
}

.section-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-accent);
}

.summary-text {
    margin: 0.5rem 0;
    font-style: italic;
    color: var(--color-text-main);
    line-height: 1.5;
}

.concepts {
    margin-top: 0.5rem;
}

.chunks-list {
    margin-left: 1.5rem;
    margin-top: 1rem;
}

.chunk-item {
    background: white;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--color-accent-alt);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(85, 107, 99, 0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.chunk-item:hover {
    box-shadow: 0 2px 6px rgba(85, 107, 99, 0.18);
    transform: translateX(2px);
}
</style>
<section class="section">
    <h1>🔍 Recherche sémantique</h1>
    <p class="lead">Posez une question en langage naturel pour trouver des passages pertinents</p>

    <!-- Search form -->
    <div class="search-box">
        <form method="get" action="/search">
            <div class="form-group">
                <label class="form-label" for="q">Votre question</label>
                <input 
                    type="text" 
                    name="q" 
                    id="q" 
                    class="form-control search-input" 
                    value="{{ query }}"
                    placeholder="Ex: Qu'est-ce que la sagesse ? Pourquoi philosopher ?"
                    autofocus
                >
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="author">Auteur</label>
                    <select name="author" id="author" class="form-control">
                        <option value="">Tous les auteurs</option>
                        {% if stats and stats.author_list %}
                            {% for author in stats.author_list %}
                                <option value="{{ author }}" {{ 'selected' if author_filter == author else '' }}>{{ author }}</option>
                            {% endfor %}
                        {% endif %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="work">Œuvre</label>
                    <select name="work" id="work" class="form-control">
                        <option value="">Toutes les œuvres</option>
                        {% if stats and stats.work_list %}
                            {% for work in stats.work_list %}
                                <option value="{{ work }}" {{ 'selected' if work_filter == work else '' }}>{{ work }}</option>
                            {% endfor %}
                        {% endif %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="limit">Résultats</label>
                    <select name="limit" id="limit" class="form-control">
                        <option value="5" {{ 'selected' if limit == 5 else '' }}>5</option>
                        <option value="10" {{ 'selected' if limit == 10 else '' }}>10</option>
                        <option value="20" {{ 'selected' if limit == 20 else '' }}>20</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="sections_limit">Sections (hiérarchique)</label>
                    <select name="sections_limit" id="sections_limit" class="form-control">
                        <option value="3" {{ 'selected' if sections_limit == 3 else '' }}>3 sections</option>
                        <option value="5" {{ 'selected' if sections_limit == 5 else '' }}>5 sections</option>
                        <option value="10" {{ 'selected' if sections_limit == 10 else '' }}>10 sections</option>
                        <option value="20" {{ 'selected' if sections_limit == 20 else '' }}>20 sections</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="mode">Mode de recherche</label>
                    <select name="mode" id="mode" class="form-control">
                        <option value="" {{ 'selected' if not mode else '' }}>🤖 Auto-détection</option>
                        <option value="simple" {{ 'selected' if mode == 'simple' else '' }}>📄 Simple (Chunks)</option>
                        <option value="hierarchical" {{ 'selected' if mode == 'hierarchical' else '' }}>🌳 Hiérarchique (Summary → Chunks)</option>
                        <option value="summary" {{ 'selected' if mode == 'summary' else '' }}>📚 Résumés uniquement (90% visibilité)</option>
                    </select>
                </div>
            </div>
            <div class="mt-2">
                <button type="submit" class="btn btn-primary">Rechercher</button>
                <a href="/search" class="btn" style="margin-left: 0.5rem;">Réinitialiser</a>
            </div>
        </form>
    </div>

    <!-- Results -->
    {% if query %}
        <div class="ornament">·</div>

        {% if results_data %}
            <!-- Mode indicator and stats -->
            <div class="mb-3" style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
                <div>
                    <strong>{{ results_data.total_chunks }}</strong> passage{% if results_data.total_chunks > 1 %}s{% endif %} trouvé{% if results_data.total_chunks > 1 %}s{% endif %}
                </div>
                <div>
                    {% if results_data.mode == "hierarchical" %}
                        <span class="badge" style="background-color: var(--color-accent-alt); color: white; font-size: 0.9em;">
                            🌳 Recherche hiérarchique ({{ results_data.sections|length }} sections)
                        </span>
                    {% elif results_data.mode == "summary" %}
                        <span class="badge" style="background-color: #556B63; color: white; font-size: 0.9em;">
                            📚 Résumés uniquement (90% visibilité)
                        </span>
                    {% else %}
                        <span class="badge" style="background-color: var(--color-accent); color: white; font-size: 0.9em;">
                            📄 Recherche simple
                        </span>
                    {% endif %}
                </div>
                {% if author_filter or work_filter %}
                    <div style="flex-grow: 1;"></div>
                    <div>
                        {% if author_filter %}
                            <span class="badge badge-author">{{ author_filter }}</span>
                        {% endif %}
                        {% if work_filter %}
                            <span class="badge badge-work">{{ work_filter }}</span>
                        {% endif %}
                    </div>
                {% endif %}
            </div>

            <!-- Fallback reason warning (when forced hierarchical but no results) -->
            {% if results_data.fallback_reason %}
                <div class="alert" style="background-color: rgba(125, 110, 88, 0.1); border: 1px solid var(--color-accent); color: var(--color-text-strong); padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
                    <strong>⚠️ Mode hiérarchique forcé :</strong> {{ results_data.fallback_reason }}
                    <br>
                    <small>💡 Essayez une requête sur un sujet présent dans le corpus (ex: "croyance", "signe", "inférence") ou basculez en mode Auto-détection.</small>
                </div>
            {% endif %}

            {% if results_data.results %}

            <!-- Hierarchical display: sections with grouped chunks -->
            {% if results_data.mode == "hierarchical" and results_data.sections %}
                <div>
                    <h3 style="font-size: 1.3em; margin-bottom: 1.5rem; color: var(--color-accent);">📚 Sections pertinentes avec passages</h3>

                    {% for section in results_data.sections %}
                        <div class="section-group" style="margin-bottom: 2.5rem; border: 2px solid rgba(125, 110, 88, 0.3); border-radius: 10px; overflow: hidden; box-shadow: 0 3px 12px rgba(125, 110, 88, 0.12);">
                            <!-- Section header -->
                            <div class="section-header" style="margin: 0; padding: 1.25rem 1.5rem; border-bottom: 3px solid var(--color-accent);">
                                <!-- Ligne 1 : Auteur, œuvre, similarité, nb passages -->
                                <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;">
                                    {% if section.chunks and section.chunks[0].work %}
                                        {% if section.chunks[0].work.author %}
                                            <span class="badge badge-author">{{ section.chunks[0].work.author }}</span>
                                        {% endif %}
                                        {% if section.chunks[0].work.title %}
                                            <span class="badge badge-work">{{ section.chunks[0].work.title }}</span>
                                        {% endif %}
                                    {% endif %}
                                    <span class="badge badge-similarity">⚡ {{ section.similarity }}% similaire</span>
                                    <span class="badge" style="background-color: var(--color-accent); color: white; font-weight: 500;">{{ section.chunks_count }} passage{% if section.chunks_count > 1 %}s{% endif %}</span>
                                </div>

                                <!-- Ligne 2 : Hiérarchie (chapter title du premier chunk) -->
                                {% if section.chunks and section.chunks[0].chapterTitle %}
                                <div style="margin-bottom: 0.5rem;">
                                    <span style="color: var(--color-accent);">🗂️ {{ section.chunks[0].chapterTitle }}</span>
                                </div>
                                {% endif %}

                                <!-- Ligne 3 : Titre section -->
                                <div style="margin-bottom: 0.75rem;">
                                    <span style="color: var(--color-accent);">📂 {{ section.title[:120] }}{% if section.title|length > 120 %}...{% endif %}</span>
                                </div>
                                {% if section.summary_text and section.summary_text != section.title and section.summary_text != section.section_path %}
                                    <p class="summary-text" style="margin: 0.75rem 0 0 0; padding: 0.75rem; background: rgba(255, 255, 255, 0.5); border-radius: 4px; font-size: 0.9em; color: var(--color-text-main); font-style: italic; line-height: 1.6;">{{ section.summary_text }}</p>
                                {% endif %}
                                {% if section.concepts %}
                                    <div class="concepts" style="margin-top: 0.75rem;">
                                        <strong style="font-size: 0.85em; color: var(--color-accent); margin-right: 0.5rem;">Concepts :</strong>
                                        {% for concept in section.concepts %}
                                            <span class="badge" style="background-color: rgba(125, 110, 88, 0.15); color: var(--color-accent); border: 1px solid rgba(125, 110, 88, 0.3); margin-right: 0.25rem; font-size: 0.85em;">{{ concept }}</span>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <!-- Chunks under this section (fond blanc, indentés) -->
                            {% if section.chunks %}
                                <div class="chunks-list" style="padding: 1.5rem; background: white;">
                                    {% for chunk in section.chunks %}
                                        <div class="chunk-item" style="background: white; padding: 1rem; margin-bottom: 0.75rem; border-left: 3px solid var(--color-accent-alt); border-radius: 4px; box-shadow: 0 1px 3px rgba(85, 107, 99, 0.12);">
                                            <div style="margin-bottom: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
                                                {% if chunk.work and chunk.work.author %}
                                                    <span class="badge badge-author">{{ chunk.work.author }}</span>
                                                {% endif %}
                                                {% if chunk.work and chunk.work.title %}
                                                    <span class="badge badge-work">{{ chunk.work.title }}</span>
                                                {% endif %}
                                                <span class="badge badge-similarity">⚡ {{ chunk.similarity }}% similaire</span>
                                            </div>
                                            <div class="passage-text" style="margin-bottom: 0.5rem;">"{{ chunk.text }}"</div>
                                            <div class="passage-meta" style="font-size: 0.85em; color: #666;">
                                                <strong>Section :</strong> {{ chunk.sectionPath or '—' }} &nbsp;│&nbsp;
                                                <strong>Type :</strong> {{ chunk.unitType or '—' }} &nbsp;│&nbsp;
                                                <strong>Langue :</strong> {{ (chunk.language or '—') | upper }}
                                            </div>
                                            {% if chunk.keywords %}
                                                <div style="margin-top: 0.5rem;">
                                                    {% for kw in chunk.keywords %}
                                                        <span class="keyword-tag">{{ kw }}</span>
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p style="margin-left: 1rem; color: #999; font-style: italic;">Aucun passage trouvé pour cette section</p>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>

            <!-- Summary display -->
            {% elif results_data.mode == "summary" %}
                {% for result in results_data.results %}
                <div class="passage-card" style="border-left-width: 4px;">
                    <div class="passage-header">
                        <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
                            <span style="font-size: 1.3rem;">{{ result.doc_icon }}</span>
                            <span class="badge badge-author">{{ result.doc_name }}</span>
                            {% if result.author %}
                                <span class="badge badge-work">{{ result.author }}{% if result.year %} ({{ result.year }}){% endif %}</span>
                            {% endif %}
                        </div>
                        <span class="badge badge-similarity">⚡ {{ result.similarity }}% similaire</span>
                    </div>

                    <h3 style="font-size: 1.1rem; margin: 0.75rem 0; color: var(--color-text-strong); font-family: var(--font-title);">
                        {{ result.title }}
                    </h3>

                    {% if result.text and result.text != result.title %}
                        <div class="passage-text" style="background: rgba(255, 255, 255, 0.5); padding: 1rem; border-radius: 6px; border-left: 3px solid var(--color-accent-alt); margin: 0.75rem 0;">
                            {% if result.text|length > 400 %}
                                {{ result.text[:397] }}...
                            {% else %}
                                {{ result.text }}
                            {% endif %}
                        </div>
                    {% endif %}

                    {% if result.concepts %}
                        <div style="margin-top: 0.75rem;">
                            <strong style="font-size: 0.85em; color: var(--color-accent);">Concepts :</strong>
                            {% for concept in result.concepts[:8] %}
                                <span class="keyword-tag" style="background-color: rgba(125, 110, 88, 0.12); border-color: rgba(125, 110, 88, 0.3);">{{ concept }}</span>
                            {% endfor %}
                            {% if result.concepts|length > 8 %}
                                <span class="keyword-tag" style="background-color: transparent;">+{{ result.concepts|length - 8 }} autres</span>
                            {% endif %}
                        </div>
                    {% endif %}

                    <div class="passage-meta" style="margin-top: 0.75rem;">
                        {% if result.chunks_count > 0 %}
                            <span style="background-color: var(--color-accent-alt); color: white; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.85em;">
                                📄 {{ result.chunks_count }} passage{% if result.chunks_count > 1 %}s{% endif %} détaillé{% if result.chunks_count > 1 %}s{% endif %}
                            </span>
                        {% endif %}
                        {% if result.section_path %}
                            &nbsp;│&nbsp; <strong>Section :</strong> {{ result.section_path[:70] }}{% if result.section_path|length > 70 %}...{% endif %}
                        {% endif %}
                    </div>
                </div>
                {% endfor %}

            <!-- Simple display (original) -->
            {% else %}
                {% for result in results_data.results %}
                <div class="passage-card">
                    <div class="passage-header">
                        <div>
                            <span class="badge badge-work">{{ result.work.title if result.work else '?' }} {{ result.sectionPath or '' }}</span>
                            <span class="badge badge-author">{{ result.work.author if result.work else 'Anonyme' }}</span>
                        </div>
                        {% if result.similarity %}
                            <span class="badge badge-similarity">⚡ {{ result.similarity }}% similaire</span>
                        {% endif %}
                    </div>
                    <div class="passage-text">"{{ result.text }}"</div>
                    <div class="passage-meta">
                        <strong>Type :</strong> {{ result.unitType or '—' }} &nbsp;│&nbsp;
                        <strong>Langue :</strong> {{ (result.language or '—') | upper }} &nbsp;│&nbsp;
                        <strong>Index :</strong> {{ result.orderIndex or '—' }}
                    </div>
                    {% if result.keywords %}
                        <div class="mt-2">
                            {% for kw in result.keywords %}
                                <span class="keyword-tag">{{ kw }}</span>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
            {% endif %}
            {% endif %}
        {% else %}
            <div class="empty-state">
                <div class="empty-state-icon">🔮</div>
                <h3>Aucun résultat trouvé</h3>
                <p class="text-muted">Essayez une autre formulation ou modifiez vos filtres.</p>
            </div>
        {% endif %}
    {% else %}
        <!-- Suggestions -->
        <div class="card">
            <h3>💡 Suggestions de recherche</h3>
            <div class="mt-2">
                <p class="mb-2">Voici quelques exemples de questions que vous pouvez poser :</p>
                <div>
                    <a href="/search?q=Qu%27est-ce%20que%20la%20vertu%20%3F" class="badge" style="cursor: pointer;">Qu'est-ce que la vertu ?</a>
                    <a href="/search?q=La%20mort%20est-elle%20%C3%A0%20craindre%20%3F" class="badge" style="cursor: pointer;">La mort est-elle à craindre ?</a>
                    <a href="/search?q=Comment%20atteindre%20le%20bonheur%20%3F" class="badge" style="cursor: pointer;">Comment atteindre le bonheur ?</a>
                    <a href="/search?q=Qu%27est-ce%20que%20la%20justice%20%3F" class="badge" style="cursor: pointer;">Qu'est-ce que la justice ?</a>
                    <a href="/search?q=L%27%C3%A2me%20est-elle%20immortelle%20%3F" class="badge" style="cursor: pointer;">L'âme est-elle immortelle ?</a>
                </div>
            </div>
        </div>
    {% endif %}
</section>
{% endblock %}


