{% extends "base.html" %}

{% block content %}
<script>
    function clearResults() {
        document.getElementById('rg-results').innerHTML = '';
        document.getElementById('rg-status').style.display = 'none';
        
        // Reset export button using shared logic
        const idPrefix = 'rg';
        const exportBtn = document.getElementById(`${idPrefix}-export-btn`);
        const exportToggle = document.getElementById(`${idPrefix}-export-toggle`);
        if (exportBtn) {
            exportBtn.disabled = true;
            exportBtn.classList.add('opacity-50');
            exportBtn.classList.remove('btn-secondary');
            exportBtn.classList.add('btn-outline-secondary');
            exportBtn.dataset.hashes = '';
        }
        if (exportToggle) {
            exportToggle.disabled = true;
            exportToggle.classList.add('opacity-50');
            exportToggle.classList.remove('btn-secondary');
            exportToggle.classList.add('btn-outline-secondary');
        }
    }

    /**
     * Client-side table sorting.
     * @param {string} tableId - The ID of the table or a selector to find the table.
     * @param {number} colIdx - 0-based column index.
     * @param {string} type - 'num' or 'str'.
     */
    function sortTable(tableElement, colIdx, type) {
        const tbody = tableElement.querySelector('tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));
        const isAsc = tableElement.dataset.sortCol === String(colIdx) && tableElement.dataset.sortDir === 'asc';
        
        rows.sort((a, b) => {
            let aVal = a.cells[colIdx].innerText.replace(/[%|,]/g, '').trim();
            let bVal = b.cells[colIdx].innerText.replace(/[%|,]/g, '').trim();
            
            if (type === 'num') {
                aVal = parseFloat(aVal) || 0;
                bVal = parseFloat(bVal) || 0;
                return isAsc ? bVal - aVal : aVal - bVal;
            } else {
                return isAsc ? bVal.localeCompare(aVal) : aVal.localeCompare(bVal);
            }
        });

        // Re-append sorted rows
        rows.forEach(row => tbody.appendChild(row));
        
        // Update state
        tableElement.dataset.sortCol = colIdx;
        tableElement.dataset.sortDir = isAsc ? 'desc' : 'asc';
    }

    function updateRipgrepFeedback() {
        const input = document.getElementById('rg-input');
        const feedback = document.getElementById('rg-feedback');
        if (!input || !feedback) return;

        const query = input.value.trim();
        feedback.classList.remove('is-ok', 'is-error');
        if (!query) {
            feedback.textContent = 'Press Enter or choose Summary, Counts, or Details to search document text.';
            return;
        }

        try {
            new RegExp(query);
            feedback.classList.add('is-ok');
            feedback.textContent = 'Regex looks valid. Press Enter or choose a search mode.';
        } catch (err) {
            feedback.classList.add('is-error');
            feedback.textContent = `Regex syntax issue - ${err.message}`;
        }
    }

    window.addEventListener('load', () => {
        const input = document.getElementById('rg-input');
        if (input) {
            input.addEventListener('input', updateRipgrepFeedback);
            updateRipgrepFeedback();
        }
    });
</script>

<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="rg-input" 
                       name="q" 
                       placeholder="Ripgrep full-text search..."
                       hx-get="{{ url_for('main.rg_search') }}" 
                       hx-trigger="keyup[key=='Enter']" 
                       hx-target="#rg-stream-sink" 
                       hx-swap="innerHTML"
                       hx-vals='{"summary": "true"}'
                       hx-include="#rg-controls input, #extra-options-container input"
                       hx-indicator="#rg-indicator"
                       hx-on:click="clearResults()"
                       autocapitalize="none"
                       autocorrect="off"
                       spellcheck="false"
                       autofocus>
                <i class="bi bi-x-circle clear-input" onclick="clearInput('rg-input')"></i>
            </div>
            <div id="rg-feedback" class="query-feedback">
                Press Enter or choose Summary, Counts, or Details to search document text.
            </div>
        </div>
    </div>

    <!-- Standardized Buttons Row -->
    <div id="rg-controls" class="d-flex flex-wrap align-items-center gap-2 mb-4">
        <!-- Main Actions (Separate) -->
        <button hx-get="{{ url_for('main.rg_search') }}" 
                hx-vals='{"summary": "true"}'
                hx-target="#rg-stream-sink" 
                hx-swap="innerHTML"
                hx-include="#rg-input, #extra-options-container input"
                hx-indicator="#rg-indicator"
                hx-on:click="clearResults()"
                class="btn btn-success px-4 fw-bold shadow-sm">
            Summary
        </button>
        <button hx-get="{{ url_for('main.rg_search') }}" 
                hx-vals='{"counts": "true"}'
                hx-target="#rg-stream-sink" 
                hx-swap="innerHTML"
                hx-include="#rg-input, #extra-options-container input"
                hx-indicator="#rg-indicator"
                hx-on:click="clearResults()"
                class="btn btn-warning px-4 fw-bold shadow-sm text-dark">
            Counts
        </button>
        <button hx-get="{{ url_for('main.rg_search') }}" 
                hx-target="#rg-stream-sink" 
                hx-swap="innerHTML"
                hx-include="#rg-input, #extra-options-container input"
                hx-indicator="#rg-indicator"
                hx-on:click="clearResults()"
                class="btn btn-primary px-4 fw-bold shadow-sm">
            Details
        </button>

        {% set id_prefix = 'rg' %}
        {% set input_id = 'rg-input' %}
        {% include "components/export_button.html" with context %}

        <!-- Options Dropdown -->
        <div class="dropdown">
            <button class="btn btn-outline-secondary px-3 shadow-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                <i class="bi bi-gear-fill me-1"></i> Options
            </button>
            <div id="extra-options-container" class="dropdown-menu shadow-sm p-3" style="min-width: 320px;">
                <!-- Filter -->
                <div class="mb-3">
                    <span class="dropdown-header px-0 text-uppercase small pb-2 border-bottom mb-2">Filter</span>
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="filter" id="filter_tagged" value="tagged" checked>
                        <label class="btn btn-outline-secondary btn-sm" for="filter_tagged">Tagged</label>
                        <input type="radio" class="btn-check" name="filter" id="filter_all" value="all">
                        <label class="btn btn-outline-secondary btn-sm" for="filter_all">All</label>
                    </div>
                </div>

                <!-- Context -->
                <div class="mb-3">
                    <span class="dropdown-header px-0 text-uppercase small pb-2 border-bottom mb-2">Context Lines</span>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white small">Before:</span>
                        <input type="number" name="before" value="0" min="0" max="10" class="form-control">
                        <span class="input-group-text bg-white small">After:</span>
                        <input type="number" name="after" value="0" min="0" max="10" class="form-control">
                    </div>
                </div>

                <!-- Case & Globs -->
                <div class="row g-2">
                    <div class="col-6">
                        <span class="dropdown-header px-0 text-uppercase small pb-1 mb-1">Case</span>
                        <select name="case" class="form-select form-select-sm">
                            <option value="ignore" selected>Ignore</option>
                            <option value="sensitive">Sensitive</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <span class="dropdown-header px-0 text-uppercase small pb-1 mb-1">Glob</span>
                        <input type="text" name="glob1" placeholder="*.md" class="form-control form-control-sm">
                    </div>
                </div>
                
                <div class="mt-3 pt-2 border-top">
                     <button hx-get="{{ url_for('main.rg_search') }}" hx-vals='{"files": "true"}' 
                            hx-target="#rg-stream-sink" hx-include="#rg-input, #extra-options-container input" hx-indicator="#rg-indicator"
                            hx-on:click="clearResults()" class="btn btn-outline-secondary btn-sm w-100">List Matching Files</button>
                </div>
            </div>
        </div>

        <div id="rg-indicator" class="htmx-indicator d-flex align-items-center gap-2 text-primary small ms-2">
            <div class="spinner-border spinner-border-sm" role="status"></div>
        </div>
    </div>
</div>

<div id="rg-status" class="alert alert-secondary py-2 px-3 mb-3 border-0 shadow-sm" style="display: none; font-size: 0.85rem;">
    <!-- Last command will be displayed here -->
</div>

<div id="rg-indicator" class="htmx-indicator mb-3">
    <div class="d-flex align-items-center gap-2 text-primary">
        <div class="spinner-border spinner-border-sm" role="status"></div>
        <span>Running ripgrep search...</span>
    </div>
</div>

<div id="rg-stream-sink" style="display: none;"></div>

<div id="rg-stats-header" class="mb-3">
    <!-- Stats will be injected here via OOB swap -->
</div>

<div id="rg-results"></div>

<div id="rg-more-container" class="text-center my-4" style="display: none;">
    <!-- More button will be injected here via OOB swap -->
</div>
{% endblock %}