{% extends "base.html" %}
{% load static %}

{% block title %}Search results — Mockup{% 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 'mockup_search_results' %}"
                  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-8">
                        <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>
            </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 <a href="{% url 'mockup_search_results' %}?q=React">React</a>
            </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 "mockups/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 "mockups/search/partials/result_row.html" with item=item only %}
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endif %}

    <div class="alert alert-light border mt-5 small">
        <strong>Mockup screens (NAV-06):</strong>
        <a href="{% url 'mockup_search_results' %}?q=React">Results — React (all types)</a> ·
        <a href="{% url 'mockup_search_results' %}?q=React&amp;type=skills">Skills only</a> ·
        <a href="{% url 'mockup_search_results' %}?q=zzzznomatch">Empty state</a> ·
        <a href="{% url 'mockup_search_results' %}">No query prompt</a> ·
        <a href="{% url 'mockup_search_suggestions' %}?q=React" target="_blank" rel="noopener">Navbar suggestions fragment</a>
        <span class="text-muted ms-2">(DEBUG only — <code>/mockups/search/</code>)</span>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    console.log('[mockup:search-results] page loaded', {
        query: '{{ query|escapejs }}',
        typeFilter: '{{ type_filter|escapejs }}' || 'all',
        totalCount: {{ total_count }},
    });

    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(reason) {
        if (!form) return;
        console.log('[mockup:search-results] filter apply', {
            reason: reason,
            q: queryInput ? queryInput.value : '',
            type: typeSelect ? typeSelect.value || 'all' : 'all',
        });
        form.submit();
    }

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

    if (queryInput) {
        queryInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                submitFilters('enter');
            }
        });
        queryInput.addEventListener('input', function () {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(function () {
                submitFilters('debounced-input');
            }, 300);
        });
    }

    document.querySelectorAll('[data-testid^="global-search-result-"][data-testid$="-link"]').forEach(function (el) {
        el.addEventListener('click', function (e) {
            e.preventDefault();
            console.log('[mockup:search-results] result click (mock — no navigation)', el.textContent.trim());
        });
    });

    document.querySelectorAll('.mm-search-accordion .mm-search-section-toggle').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var label = btn.querySelector('span:not([aria-hidden])')?.textContent?.trim() || '';
            console.log('[mockup:search-results] section toggle', {
                section: label,
                expanded: !btn.classList.contains('collapsed'),
            });
        });
    });
});
</script>
{% endblock %}