{% extends "base.html" %}

{% block title %}Search results - Mimir{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3" data-testid="global-search-results-page">

    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Search results</li>
        </ol>
    </nav>

    <section class="hg-page-header rounded-2 mb-3">
        <h1 class="hg-page-title mb-1 d-flex align-items-center gap-2">
            <i class="fa-solid fa-magnifying-glass hg-page-title-icon text-muted" aria-hidden="true"></i>
            <span>Search results</span>
        </h1>
        <p class="text-muted small mb-0">Find playbooks, workflows, activities, and related entities across your library</p>
    </section>

    <div class="card border-0 shadow-sm rounded-3 mb-3" data-testid="global-search-filters-form">
        <div class="card-body">
            <form method="get"
                  action="{% url 'global_search' %}"
                  id="global-search-filters-form"
                  role="search"
                  aria-label="Search filters">
                <div class="row g-3 align-items-end">
                    <div class="col-12 col-md-6">
                        <label for="global-search-query-input" class="form-label hg-label-caps mb-1">Search for</label>
                        <input type="search"
                               class="form-control form-control-sm hg-filter-control bg-body-secondary border-0 rounded-2"
                               id="global-search-query-input"
                               name="q"
                               value="{{ query }}"
                               placeholder="Enter keywords…"
                               data-testid="global-search-query-input"
                               aria-label="Search for"
                               autocomplete="off" />
                    </div>
                    <div class="col-12 col-md-4">
                        <label for="global-search-type-filter" class="form-label hg-label-caps mb-1">Type</label>
                        <select id="global-search-type-filter"
                                name="type"
                                class="form-select form-select-sm hg-filter-control bg-body-secondary border-0 rounded-2"
                                data-testid="global-search-type-filter"
                                aria-label="Filter by entity type">
                            {% for choice in type_choices %}
                            <option value="{{ choice.value }}"
                                    {% if type_filter == choice.value %}selected{% endif %}>
                                {{ choice.label }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-12 col-md-2 d-grid">
                        <button type="submit"
                                class="btn btn-sm btn-primary"
                                data-testid="global-search-submit-button">
                            Search
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {% if show_no_query_prompt %}
    <div class="card border-0 shadow-sm rounded-3">
        <div class="card-body py-5 text-center" role="status" data-testid="global-search-no-query-prompt">
            <i class="fa-solid fa-magnifying-glass fa-2x text-muted mb-3" aria-hidden="true"></i>
            <p class="text-muted mb-2">Enter a search term to find playbooks and related content.</p>
            <p class="small text-muted mb-0">
                Try searching from the navbar or enter a term above.
            </p>
        </div>
    </div>
    {% elif show_empty_state %}
    <div class="alert alert-light border rounded-3 shadow-sm" role="alert" data-testid="global-search-empty-state">
        <i class="fa-solid fa-circle-info me-2 text-muted" aria-hidden="true"></i>
        No results found for "<strong>{{ query }}</strong>".
        Try broadening your query or set Type to <strong>All types</strong>.
    </div>
    {% else %}
    <p class="mm-search-summary mb-3" data-testid="global-search-summary">
        Showing results for "<strong>{{ query }}</strong>" · {{ total_count }} match{{ total_count|pluralize:"es" }}
    </p>

    {% if type_filter %}
    {% for section in sections %}
    <div class="card border-0 shadow-sm rounded-3 mb-3" data-testid="{{ section.testid }}">
        <div class="card-header bg-white border-bottom py-3">
            <h2 class="h6 mb-0 mm-search-section-heading">
                <span class="mm-search-section-icon-wrap" aria-hidden="true">
                    <i class="fa-solid {{ section.icon }} mm-search-section-icon"></i>
                </span>
                <span class="mm-search-section-label">{{ section.label }}</span>
                <span class="badge bg-secondary mm-search-section-count">{{ section.count }}</span>
            </h2>
        </div>
        <div class="list-group list-group-flush">
            {% for item in section.items %}
            {% include "search/partials/result_row.html" with item=item only %}
            {% endfor %}
        </div>
    </div>
    {% endfor %}
    {% else %}
    <div class="accordion mm-search-accordion" id="global-search-sections">
        {% for section in sections %}
        <div class="accordion-item" data-testid="{{ section.testid }}">
            <h2 class="accordion-header" id="heading-{{ section.key }}">
                <button class="accordion-button {% if not forloop.first %}collapsed{% endif %} mm-search-section-toggle"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapse-{{ section.key }}"
                        aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                        aria-controls="collapse-{{ section.key }}"
                        data-testid="global-search-section-toggle-{{ section.key }}">
                    <span class="mm-search-section-chevron-wrap" aria-hidden="true">
                        <i class="fa-solid fa-chevron-down mm-search-section-chevron"></i>
                    </span>
                    <span class="mm-search-section-icon-wrap" aria-hidden="true">
                        <i class="fa-solid {{ section.icon }} mm-search-section-icon"></i>
                    </span>
                    <span class="mm-search-section-label">{{ section.label }}</span>
                    <span class="badge bg-secondary mm-search-section-count">{{ section.count }}</span>
                </button>
            </h2>
            <div id="collapse-{{ section.key }}"
                 class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
                 aria-labelledby="heading-{{ section.key }}"
                 data-bs-parent="#global-search-sections">
                <div class="list-group list-group-flush">
                    {% for item in section.items %}
                    {% include "search/partials/result_row.html" with item=item only %}
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var form = document.getElementById('global-search-filters-form');
    var queryInput = document.getElementById('global-search-query-input');
    var typeSelect = document.getElementById('global-search-type-filter');
    var debounceTimer = null;

    function submitFilters() {
        if (form) {
            form.submit();
        }
    }

    if (typeSelect) {
        typeSelect.addEventListener('change', function () {
            submitFilters();
        });
    }

    if (queryInput) {
        queryInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                submitFilters();
            }
        });
        queryInput.addEventListener('input', function () {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(submitFilters, 300);
        });
    }
});
</script>
{% endblock %}