{% extends "base.html" %}

{% block content %}
<div class="container-fluid py-3">
    <!-- Standardized Search Input -->
    <div class="search-container row g-2 mb-3">
        <div class="col">
            <div class="search-wrapper shadow-sm">
                <input type="text" 
                       id="search-input" 
                       name="q" 
                       placeholder="Query references..."
                       hx-get="{{ url_for('main.search') }}" 
                       hx-trigger="keyup changed delay:250ms, search-trigger from:body" 
                       hx-target="#results" 
                       hx-include="[name='view_mode']:checked"
                       autocapitalize="none"
                       autocorrect="off"
                       spellcheck="false"
                       autofocus>
                <i class="bi bi-x-circle clear-input" onclick="clearInput('search-input')"></i>
            </div>
            <div id="query-feedback" class="query-feedback">
                Start typing for fuzzy match or enter querex string for recent top 50 or q querex string.
            </div>
        </div>
    </div>

    <!-- Standardized Buttons Row -->
    <div class="d-flex flex-wrap align-items-center gap-2 mb-4">
        <!-- Main Actions -->
        <div class="btn-group shadow-sm">
            <button class="btn btn-primary px-3" onclick="executeRecent(50)">
                Recent
            </button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu shadow-sm">
                <li><a class="dropdown-item small fw-medium" href="#" onclick="executeRecent(50)">50 Recent</a></li>
                <li><a class="dropdown-item small fw-medium" href="#" onclick="executeRecent(100)">100 Recent</a></li>
                <li><a class="dropdown-item small fw-medium" href="#" onclick="executeRecent(250)">250 Recent</a></li>
            </ul>
        </div>

        <button class="btn btn-outline-primary px-3 shadow-sm" 
                onclick="executeReadHistory()">
            <i class="bi bi-book me-1"></i> Read
        </button>

        <button class="btn btn-outline-secondary px-3 shadow-sm" 
                onclick="executeRandom()">
            <i class="bi bi-dice-5 me-1"></i> Random
        </button>

        {% set id_prefix = 'query' %}
        {% set onclick_report = 'openReportStudio()' %}
        {% include "components/report_button.html" %}

        {% set id_prefix = 'query' %}
        {% set input_id = 'search-input' %}
        {% set enabled = true %}
        {% include "components/export_button.html" with context %}

        <!-- Options Dropdown -->
        {% set base_url = url_for('main.search') %}
        {% set include_selector = '#search-input' %}
        {% set target_selector = '#results' %}
        {% set current_mode = 'list' %}
        {% include "components/options_dropdown.html" %}
        <div id="export-indicator" class="htmx-indicator d-flex align-items-center gap-1 text-success small ms-2">
            <div class="spinner-border spinner-border-sm" role="status"></div>
        </div>
    </div>
</div>

<script>
    function openReportStudio() {
        const queryInput = document.getElementById('search-input');
        const query = queryInput ? queryInput.value.trim() : '';
        window.location.href = `{{ url_for('main.reports_page') }}?source=query&q=${encodeURIComponent(query)}`;
    }

    function clearInput(id) {
        const input = document.getElementById(id);
        if (input) {
            input.value = '';
            input.focus();
            htmx.trigger(input, 'keyup');
        }
    }

    function executeRecent(limit = 50) {
        const input = document.getElementById('search-input');
        if (input) {
            input.value = `q top ${limit} recent`;
            htmx.trigger(input, 'keyup');
        }
    }

    function executeReadHistory() {
        const input = document.getElementById('search-input');
        if (input) {
            input.value = `q top 50 select last_read, read_count, * where read_count > 0 order by -last_read`;
            htmx.trigger(input, 'keyup');
        }
    }

    function executeRandom() {
        const input = document.getElementById('search-input');
        if (input) {
            const hex = Math.floor(Math.random() * 256).toString(16).padStart(2, '0').toUpperCase();
            input.value = `q top 25 select year, * hash ~ ^${hex} order by -year`;
            htmx.trigger(input, 'keyup');
        }
    }

    // Deep-linking support
    window.addEventListener('load', () => {
        const urlParams = new URLSearchParams(window.location.search);
        const query = urlParams.get('q');
        if (query) {
            const input = document.getElementById('search-input');
            if (input) {
                input.value = query;
                // Small delay to ensure HTMX is ready
                setTimeout(() => htmx.trigger(input, 'keyup'), 100);
            }
        }
    });
</script>

<div id="results" class="mt-4 shadow-sm rounded bg-white overflow-hidden">
</div>

{% include "components/edit_modal.html" %}
{% endblock %}