{% extends "base.html" %}
{% block title %}Recherche de documents{% endblock %}

{% block content %}
<div class="row g-4">
  <!-- Contenu principal (pleine largeur) -->
  <div class="col-12">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="h4 mb-0 text-dark">Recherche de documents</h2>
    </div>

    <!-- Formulaire de recherche -->
    <form method="GET" action="{{ url_for('main.document_search') }}" class="row g-3 mb-4">
      <div class="col-md-6">
        <input type="text" name="q" value="{{ request.args.get('q','') }}"
               placeholder="Rechercher un document..." class="form-control">
      </div>
      <div class="col-md-3">
        <select name="type" class="form-select">
          <option value="">Tous les types</option>
          {% for ft in file_types %}
          <option value="{{ ft }}" {% if request.args.get('type') == ft %}selected{% endif %}>
            {{ ft|upper }}
          </option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-primary btn-custom w-100">
          <i class="bi bi-search me-1"></i> Rechercher
        </button>
      </div>
    </form>

    <!-- Résultats de recherche -->
    {% if documents.items %}
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4 mb-4">
        {% for document in documents.items %}
        <div class="col">
          <div class="card card-custom h-100">
            <div class="card-body d-flex flex-column">
              <div class="d-flex align-items-center gap-2 mb-3">
                {% if document.file_type in FILE_TYPE_ICONS %}
                  <img src="{{ url_for('static', filename='images/' ~ FILE_TYPE_ICONS[document.file_type]) }}"
                       alt="{{ document.file_type }}" style="width: 24px; height: 24px;">
                {% else %}
                  <i class="bi bi-file-earmark-text fs-4"></i>
                {% endif %}
                <h3 class="h6 mb-0 text-dark">
                  {{ highlight_keywords(document.title, query)|safe }}
                </h3>
              </div>
              <p class="card-text text-secondary small flex-grow-1">
                {{ highlight_keywords(document.description|default('Aucune description'), query)|safe }}
              </p>
              <!-- Affichage de l'extrait du contenu avec les mots-clés surlignés -->
              {% if document.found_keywords and 'Contenu' in document.found_keywords and document.content_snippet_highlighted %}
              <div class="mt-2 p-2 bg-light rounded">
                <small class="text-muted">Extrait du contenu :</small>
                <p class="mb-0 small">
                  {{ document.content_snippet_highlighted|safe }}
                </p>
              </div>
              {% endif %}
              <!-- Affichage des mots-clés trouvés -->
              {% if document.found_keywords %}
              <div class="mt-2">
                <small class="text-muted">Trouvé dans :</small>
                <ul class="list-inline mb-0">
                  {% for location in document.found_keywords %}
                    <li class="list-inline-item">
                      <span class="badge bg-info">{{ location }}</span>
                    </li>
                  {% endfor %}
                </ul>
              </div>
              {% endif %}
            </div>
            <div class="card-footer bg-transparent border-top-0">
              <a href="{{ url_for('main.view_document', document_id=document.id) }}" class="btn btn-sm btn-outline-primary btn-custom">
                <i class="bi bi-eye me-1"></i> Voir le document
              </a>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

      <!-- Pagination simplifiée et corrigée -->
      {% if documents.pages > 1 %}
      <nav aria-label="Pagination" class="d-flex justify-content-center mt-4">
        <ul class="pagination">
          <!-- Début -->
          <li class="page-item {% if not documents.has_prev %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('main.document_search', q=query, type=selected_type, page=1) }}" aria-label="Début">
              Début
            </a>
          </li>

          <!-- Précédent -->
          <li class="page-item {% if not documents.has_prev %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('main.document_search', q=query, type=selected_type, page=documents.prev_num) }}" aria-label="Précédent">
              Précédent
            </a>
          </li>

          <!-- Pages (limité à 5 pages autour de la page actuelle) -->
          {% set start_page = documents.page - 2 %}
          {% if start_page < 1 %}
            {% set start_page = 1 %}
          {% endif %}
          {% set end_page = documents.page + 2 %}
          {% if end_page > documents.pages %}
            {% set end_page = documents.pages %}
          {% endif %}
          {% for p in range(start_page, end_page + 1) %}
            <li class="page-item {% if p == documents.page %}active{% endif %}">
              <a class="page-link" href="{{ url_for('main.document_search', q=query, type=selected_type, page=p) }}">{{ p }}</a>
            </li>
          {% endfor %}

          <!-- Suivant -->
          <li class="page-item {% if not documents.has_next %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('main.document_search', q=query, type=selected_type, page=documents.next_num) }}" aria-label="Suivant">
              Suivant
            </a>
          </li>

          <!-- Fin -->
          <li class="page-item {% if not documents.has_next %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('main.document_search', q=query, type=selected_type, page=documents.pages) }}" aria-label="Fin">
              Fin
            </a>
          </li>
        </ul>
      </nav>
      {% endif %}

    {% else %}
      <!-- Aucun résultat -->
      <div class="alert alert-info alert-custom">
        <div class="d-flex align-items-center">
          <i class="bi bi-info-circle me-2"></i>
          <span>Aucun document trouvé.</span>
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}