{% extends "base.html" %}

{% block content %}
<div class="container">
    <h1>Busca de Diários Oficiais</h1>

    <form method="GET" action="{% url 'search_diarios' %}" class="mb-4">
        <div class="row mb-3">
            <div class="col-md-12">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" value="{{ query }}" placeholder="Digite sua busca...">
                    <button type="submit" class="btn btn-primary">Buscar</button>
                </div>
            </div>
        </div>
        
        <div class="row mb-3">
            <div class="col-md-4">
                <label for="date_start" class="form-label">Data inicial:</label>
                <input type="date" id="date_start" name="date_start" class="form-control" value="{{ date_start }}">
            </div>
            <div class="col-md-4">
                <label for="date_end" class="form-label">Data final:</label>
                <input type="date" id="date_end" name="date_end" class="form-control" value="{{ date_end }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">Tipo de correspondência:</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="match_type" id="match_partial" value="partial" {% if match_type == 'partial' or not match_type %}checked{% endif %}>
                    <label class="form-check-label" for="match_partial">
                        Qualquer palavra
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="match_type" id="match_exact" value="exact" {% if match_type == 'exact' %}checked{% endif %}>
                    <label class="form-check-label" for="match_exact">
                        Todas as palavras (frase exata)
                    </label>
                </div>
            </div>
        </div>
    </form>

    {% if error %}
        <div class="alert alert-danger">
            Erro na pesquisa: {{ error }}
        </div>
    {% endif %}

    {% if query %}
        <div class="mb-3">
            <h2>Resultados para "{{ query }}"</h2>
            <p>Encontrados {{ total }} resultados</p>
            
            {% if did_you_mean %}
                <div class="alert alert-info">
                    Você quis dizer: <a href="?q={{ did_you_mean }}&date_start={{ date_start }}&date_end={{ date_end }}&match_type={{ match_type }}">{{ did_you_mean }}</a>?
                </div>
            {% endif %}
            
            {% if search_suggestions %}
                <div class="mt-3 mb-3">
                    <h5>Pesquisas relacionadas:</h5>
                    <div class="d-flex flex-wrap gap-2">
                        {% for suggestion in search_suggestions %}
                            <a href="?q={{ suggestion }}&date_start={{ date_start }}&date_end={{ date_end }}&match_type={{ match_type }}" class="badge bg-light text-dark p-2 text-decoration-none">{{ suggestion }}</a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>

        {% if results %}
            <div class="search-results">
                {% for result in results %}
                <div class="card mb-3">
                    <div class="card-header">
                        <h5>{{ result.tipo }} nº {{ result.numero }}</h5>
                        <p class="text-muted">Data: {{ result.data }}</p>
                        {% if result.occurrences > 0 %}
                            <span class="badge bg-info">{{ result.occurrences }} ocorrências encontradas</span>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        {% if result.highlight %}
                            <div class="highlight-section mb-3">
                                <h6>Destaques:</h6>
                                <div class="highlight-content">{{ result.highlight|safe }}</div>
                            </div>
                        {% endif %}

                        {% if result.highlighted_pages %}
                            <div class="highlighted-pages">
                                <h6>Páginas com o termo buscado:</h6>
                                <div class="accordion" id="pagesAccordion{{ result.id }}">
                                    {% for page in result.highlighted_pages %}
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#page{{ result.id }}_{{ page.number }}">
                                                Página {{ page.number }}
                                            </button>
                                        </h2>
                                        <div id="page{{ result.id }}_{{ page.number }}" class="accordion-collapse collapse"
                                             data-bs-parent="#pagesAccordion{{ result.id }}">
                                            <div class="accordion-body">
                                                {{ page.content|safe }}
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}

                        <div class="mt-3">
                            <a href="{{ result.link }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                Ver Diário Online
                            </a>
                            <a href="{% url 'diario_detail' result.id %}" class="btn btn-sm btn-outline-secondary">
                                Ver Detalhes
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- Paginação aprimorada -->
            {% if total_pages > 1 %}
            <nav aria-label="Paginação">
                <ul class="pagination justify-content-center">
                    <!-- Botão primeira página -->
                    <li class="page-item {% if page == 1 %}disabled{% endif %}">
                        <a class="page-link" href="?q={{ query }}&date_start={{ date_start }}&date_end={{ date_end }}&match_type={{ match_type }}&page=1&size={{ size }}">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    
                    <!-- Botão página anterior -->
                    <li class="page-item {% if page == 1 %}disabled{% endif %}">
                        <a class="page-link" href="?q={{ query }}&date_start={{ date_start }}&date_end={{ date_end }}&match_type={{ match_type }}&page={{ page|add:'-1' }}&size={{ size }}">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    
                    <!-- Mostrar apenas um conjunto de páginas ao redor da página atual -->
                    {% with ''|center:total_pages as range %}
                        {% for _ in range %}
                            {% with forloop.counter as i %}
                                {% if i >= page|add:'-2' and i <= page|add:'2' and i > 0 and i <= total_pages %}
                                <li class="page-item {% if i == page %}active{% endif %}">
                                    <a class="page-link" href="?q={{ query }}&date_start={{ date_start }}&date_end={{ date_end }}&match_type={{ match_type }}&page={{ i }}&size={{ size }}">{{ i }}</a>
                                </li>
                                {% endif %}
                            {% endwith %}
                        {% endfor %}
                    {% endwith %}
                    
                    <!-- Botão próxima página -->
                    <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
                        <a class="page-link" href="?q={{ query }}&date_start={{ date_start }}&date_end={{ date_end }}&match_type={{ match_type }}&page={{ page|add:'1' }}&size={{ size }}">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    
                    <!-- Botão última página -->
                    <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
                        <a class="page-link" href="?q={{ query }}&date_start={{ date_start }}&date_end={{ date_end }}&match_type={{ match_type }}&page={{ total_pages }}&size={{ size }}">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            {% endif %}

        {% else %}
            <div class="alert alert-info">
                Nenhum resultado encontrado para a sua busca.
                
                {% if date_start or date_end %}
                <p class="mt-2">Tente expandir o período de busca ou remover os filtros de data.</p>
                {% endif %}
                
                {% if match_type == 'exact' %}
                <p class="mt-2">Tente usar a opção "Qualquer palavra" para resultados mais abrangentes.</p>
                {% endif %}
            </div>
        {% endif %}
    {% endif %}
</div>

<style>
    .highlight-content em {
        background-color: #ffeeba;
        font-style: normal;
        padding: 2px;
        border-radius: 2px;
    }

    .accordion-body em {
        background-color: #ffeeba;
        font-style: normal;
        padding: 2px;
        border-radius: 2px;
    }
    
    .badge {
        font-size: 0.85rem;
    }
</style>

<script>
    // Validar datas ao enviar o formulário
    document.querySelector('form').addEventListener('submit', function(e) {
        const dateStart = document.getElementById('date_start').value;
        const dateEnd = document.getElementById('date_end').value;
        
        if (dateStart && dateEnd && dateStart > dateEnd) {
            e.preventDefault();
            alert('A data inicial não pode ser posterior à data final.');
        }
    });
</script>
{% endblock %}