{% extends "base.html" %}
{% set active_nav = "search" %}

{% block title %}Search - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Unified Search</h1>
        <p class="page-subtitle">Search instances, templates, lineage, and audit records.</p>
    </div>
</div>

<div class="card mb-lg">
    <div class="card-header">
        <form method="get" action="/search" class="flex flex-col gap-md" style="width: 100%;">
            <div class="flex gap-md items-center">
                <input
                    type="search"
                    name="q"
                    class="form-input"
                    style="width: 420px;"
                    placeholder="Search name, EUID, or JSON fields"
                    value="{{ query_text }}"
                >
                <select name="sort_field" class="form-select" style="width: auto;">
                    <option value="created_at" {% if sort_field == "created_at" %}selected{% endif %}>Created At</option>
                    <option value="modified_at" {% if sort_field == "modified_at" %}selected{% endif %}>Modified At</option>
                    <option value="name" {% if sort_field == "name" %}selected{% endif %}>Name</option>
                    <option value="euid" {% if sort_field == "euid" %}selected{% endif %}>EUID</option>
                </select>
                <select name="sort_dir" class="form-select" style="width: auto;">
                    <option value="desc" {% if sort_dir == "desc" %}selected{% endif %}>Descending</option>
                    <option value="asc" {% if sort_dir == "asc" %}selected{% endif %}>Ascending</option>
                </select>
                <select name="page_size" class="form-select" style="width: auto;">
                    <option value="25" {% if page_size == 25 %}selected{% endif %}>25 / page</option>
                    <option value="50" {% if page_size == 50 %}selected{% endif %}>50 / page</option>
                    <option value="100" {% if page_size == 100 %}selected{% endif %}>100 / page</option>
                </select>
            </div>

            <div class="flex gap-md items-center">
                {% for scope in all_scopes %}
                <label class="text-sm">
                    <input type="checkbox" name="scope" value="{{ scope }}" {% if scope in selected_scopes %}checked{% endif %}>
                    {{ scope }}
                </label>
                {% endfor %}
                <label class="text-sm">
                    <input type="checkbox" name="include_deleted" value="true" {% if include_deleted %}checked{% endif %}>
                    include deleted
                </label>
                <button type="submit" class="btn btn-primary">Search</button>
                <a href="/search" class="btn btn-ghost">Reset</a>
                <button type="button" class="btn btn-secondary" onclick="exportSearch('json')">Export JSON</button>
                <button type="button" class="btn btn-secondary" onclick="exportSearch('tsv')">Export TSV</button>
            </div>
        </form>
    </div>
</div>

{% if should_query %}
<div class="card mb-lg">
    <div class="card-header">
        <div class="flex gap-md items-center">
            <span class="status-pill">instance: {{ facets.instance }}</span>
            <span class="status-pill">template: {{ facets.template }}</span>
            <span class="status-pill">lineage: {{ facets.lineage }}</span>
            <span class="status-pill">audit: {{ facets.audit }}</span>
        </div>
        <span class="text-muted text-sm">{{ total }} results in {{ timing_ms }} ms</span>
    </div>
</div>

<div class="card">
    {% if results %}
    <div class="table-container">
        <table class="table">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Name</th>
                    <th>EUID</th>
                    <th>Category</th>
                    <th>Created</th>
                    <th>Modified</th>
                </tr>
            </thead>
            <tbody>
                {% for row in results %}
                <tr>
                    <td><span class="status-pill">{{ row.record_type }}</span></td>
                    <td class="font-medium">{{ row.name }}</td>
                    <td class="text-mono text-sm">{{ row.euid or "—" }}</td>
                    <td class="text-sm">{{ row.category }}/{{ row.type }}/{{ row.subtype }}</td>
                    <td class="text-muted text-sm">{{ row.created_at or "—" }}</td>
                    <td class="text-muted text-sm">{{ row.modified_at or "—" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <p class="text-muted">No matching results.</p>
    </div>
    {% endif %}
</div>

<div class="flex gap-md items-center mt-md">
    {% if prev_url %}
    <a href="{{ prev_url }}" class="btn btn-ghost">← Previous</a>
    {% endif %}
    <span class="text-sm text-muted">Page {{ page }}{% if pages %} of {{ pages }}{% endif %}</span>
    {% if next_url %}
    <a href="{{ next_url }}" class="btn btn-ghost">Next →</a>
    {% endif %}
</div>
{% else %}
<div class="card">
    <div class="empty-state">
        <p class="text-muted">Run a search to see unified results.</p>
    </div>
</div>
{% endif %}

<script>
const SEARCH_EXPORT_PAYLOAD = {{ export_payload_json | safe }};

async function exportSearch(format) {
    const payload = { ...SEARCH_EXPORT_PAYLOAD, format };
    const response = await fetch('/api/search/v2/export', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
        credentials: 'same-origin'
    });
    if (!response.ok) {
        alert('Export failed.');
        return;
    }
    if (format === 'json') {
        const body = await response.json();
        const blob = new Blob([JSON.stringify(body, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'atlas-search-v2.json';
        a.click();
        URL.revokeObjectURL(url);
        return;
    }
    const text = await response.text();
    const blob = new Blob([text], { type: 'text/tab-separated-values' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'atlas-search-v2.tsv';
    a.click();
    URL.revokeObjectURL(url);
}
</script>
{% endblock %}