{% extends "base.html" %}
{% set active_page = 'search' %}

{% block title %}Global Search - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container search-page">
    <div class="page-header">
        <h1 class="page-title">Global Search</h1>
        <p class="page-subtitle">Search worksets, files, biospecimen entities, manifests, clusters, and admin entities from one place.</p>
    </div>

    <form id="portal-search-form" class="card search-query-card" method="get" action="/portal/search" data-global-search-form>
        <div class="search-query-row">
            <input type="text" name="q" class="form-control search-query-input" value="{{ search.query }}" placeholder="Try: type:file tag:germline or state:in_progress" autocomplete="off">
            {% if is_admin %}
            <select name="scope" class="form-control form-select search-scope-select" data-submit-on-change>
                <option value="all" {% if search.scope == 'all' %}selected{% endif %}>All customers</option>
                <option value="mine" {% if search.scope == 'mine' %}selected{% endif %}>My customer only</option>
            </select>
            {% else %}
            <input type="hidden" name="scope" value="mine">
            {% endif %}
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-search"></i> Search
            </button>
        </div>
        <div class="search-operators-hint">
            Operators: <code>type:</code> <code>state:</code> <code>region:</code> <code>customer:</code> <code>tag:</code>
        </div>
    </form>

    {% if search.warnings %}
    <div class="alert alert-warning">
        <i class="fas fa-exclamation-triangle"></i>
        <div>
            <strong>Search warnings</strong>
            <ul class="search-warnings-list">
                {% for warning in search.warnings %}
                <li>{{ warning }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}

    <div class="search-layout">
        <aside>
            <form id="portal-search-facets" class="card search-facets" method="get" action="/portal/search">
                <input type="hidden" name="q" value="{{ search.query }}">
                <input type="hidden" name="scope" value="{{ search.scope }}">
                <input type="hidden" name="limit_per_type" value="{{ search.limit_per_type }}">

                <h3 class="card-title"><i class="fas fa-filter"></i> Filters</h3>

                <div class="form-group">
                    <label class="form-label">Types</label>
                    <div class="search-type-list">
                        {% for facet in type_facets %}
                        <label class="search-type-item">
                            <input type="checkbox" name="type" value="{{ facet.key }}" {% if facet.selected %}checked{% endif %} data-submit-on-change>
                            <span>{{ facet.label }}</span>
                            <span class="badge badge-outline">{{ facet.count }}</span>
                        </label>
                        {% endfor %}
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">State</label>
                    <input type="text" name="state" class="form-control" value="{{ search.filters.state | default('') }}" placeholder="in_progress">
                </div>

                <div class="form-group">
                    <label class="form-label">Region</label>
                    <input type="text" name="region" class="form-control" value="{{ search.filters.region | default('') }}" placeholder="us-east-1">
                </div>

                {% if is_admin %}
                <div class="form-group">
                    <label class="form-label">Customer</label>
                    <input type="text" name="customer" class="form-control" value="{{ search.filters.customer | default('') }}" placeholder="cust-123 or user@example.com">
                </div>
                {% endif %}

                <div class="form-group">
                    <label class="form-label">Tag</label>
                    <input type="text" name="tag" class="form-control" value="{{ (search.filters.tags or []) | join(',') }}" placeholder="germline,clinical">
                </div>

                <div class="form-group">
                    <label class="form-label">File Format</label>
                    <input type="text" name="file_format" class="form-control" value="{{ search.filters.file_format | default('') }}" placeholder="fastq">
                </div>

                <div class="form-group">
                    <label class="form-label">Sample Type</label>
                    <input type="text" name="sample_type" class="form-control" value="{{ search.filters.sample_type | default('') }}" placeholder="blood">
                </div>

                <div class="form-group">
                    <label class="form-label">Platform</label>
                    <input type="text" name="platform" class="form-control" value="{{ search.filters.platform | default('') }}" placeholder="NovaSeq">
                </div>

                <div class="d-flex gap-sm">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fas fa-check"></i> Apply
                    </button>
                    <a href="/portal/search?q={{ search.query | urlencode }}&scope={{ search.scope }}" class="btn btn-outline btn-sm">Clear</a>
                </div>
            </form>
        </aside>

        <section>
            <div class="search-results-summary">
                <strong>{{ search.total }}</strong> result{% if search.total != 1 %}s{% endif %}
                {% if search.query %} for <code>{{ search.query }}</code>{% endif %}
            </div>

            {% if not has_query and not has_filters %}
            <div class="card empty-state">
                <div class="empty-state-icon"><i class="fas fa-search"></i></div>
                <h4 class="empty-state-title">Start searching</h4>
                <p class="empty-state-text">Enter text or operators to search across all portal entities.</p>
            </div>
            {% elif search.total == 0 %}
            <div class="card empty-state">
                <div class="empty-state-icon"><i class="fas fa-search-minus"></i></div>
                <h4 class="empty-state-title">No matching results</h4>
                <p class="empty-state-text">Try broadening your query or removing filters.</p>
            </div>
            {% endif %}

            {% for type_name in search.types %}
            {% set hits = search.results.get(type_name, []) %}
            {% if hits %}
            <div class="card search-group-card" id="search-group-{{ type_name }}">
                <div class="search-group-header">
                    <h3 class="card-title">{{ type_labels.get(type_name, type_name | replace('_', ' ') | title) }}</h3>
                    <span class="badge badge-info">{{ search.returned_counts.get(type_name, 0) }}</span>
                </div>

                <div class="search-hit-list">
                    {% for hit in hits %}
                    <a href="{{ hit.url }}" class="search-hit-item">
                        <div class="search-hit-main">
                            <div class="search-hit-title">{{ hit.title }}</div>
                            <div class="search-hit-subtitle">{{ hit.subtitle }}</div>
                            <div class="search-hit-badges">
                                {% if is_admin and search.scope == 'all' and hit.customer_id %}
                                <span class="badge badge-outline">customer:{{ hit.customer_id }}</span>
                                {% endif %}
                                {% for badge in hit.badges %}
                                <span class="badge badge-outline">{{ badge }}</span>
                                {% endfor %}
                            </div>
                        </div>
                        <i class="fas fa-arrow-right"></i>
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </section>
    </div>
</div>
{% endblock %}