{% extends "base.html" %}
{% block title %}Search — {{ settings.APP_NAME }}{% endblock %}

{% block content %}
<div class="container page-content">
    <h1>Advanced Search</h1>
    <div class="search-form-advanced">
        <div class="form-group">
            <input type="text" id="searchQuery" placeholder="Search publications, questions, researchers..." class="form-control form-control-lg" autofocus>
        </div>
        <div class="filter-bar">
            <select id="searchType" class="form-control filter-select">
                <option value="publications">Publications</option>
                <option value="questions">Questions</option>
                <option value="jobs">Jobs</option>
            </select>
            <select id="searchField" class="form-control filter-select">
                <option value="">All Fields</option>
                {% for field in fields %}
                <option value="{{ field.id }}">{{ field.name }}</option>
                {% endfor %}
            </select>
            <input type="text" id="searchAuthor" placeholder="Author name..." class="form-control filter-input-sm">
            <input type="number" id="searchYearFrom" placeholder="Year from" class="form-control filter-input-sm">
            <input type="number" id="searchYearTo" placeholder="Year to" class="form-control filter-input-sm">
            <select id="searchSort" class="form-control filter-select">
                <option value="newest">Newest</option>
                <option value="oldest">Oldest</option>
                <option value="popular">Most Popular</option>
            </select>
            <button class="btn btn-primary" onclick="doSearch()">Search</button>
        </div>
    </div>

    <div id="searchResults" class="search-results"></div>
    <div id="searchPagination" class="pagination"></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Pre-fill from URL params
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('q')) document.getElementById('searchQuery').value = urlParams.get('q');
if (urlParams.get('q')) doSearch();

async function doSearch(page = 1) {
    const q = document.getElementById('searchQuery').value;
    const type = document.getElementById('searchType').value;
    const fieldId = document.getElementById('searchField').value;
    const author = document.getElementById('searchAuthor').value;
    const yearFrom = document.getElementById('searchYearFrom').value;
    const yearTo = document.getElementById('searchYearTo').value;
    const sort = document.getElementById('searchSort').value;

    const params = new URLSearchParams();
    if (q) params.set('q', q);
    if (fieldId) params.set('field_id', fieldId);
    if (author) params.set('author', author);
    if (yearFrom) params.set('year_from', yearFrom);
    if (yearTo) params.set('year_to', yearTo);
    if (sort) params.set('sort', sort);
    params.set('page', page);

    let endpoint;
    if (type === 'questions') endpoint = '/api/questions';
    else if (type === 'jobs') endpoint = '/api/jobs';
    else endpoint = '/api/publications';

    const res = await fetch(`${endpoint}?${params.toString()}`);
    const data = await res.json();
    const container = document.getElementById('searchResults');

    if (data.results.length === 0) {
        container.innerHTML = '<p class="empty-state">No results found. Try different keywords or filters.</p>';
        document.getElementById('searchPagination').innerHTML = '';
        return;
    }

    if (type === 'publications') {
        container.innerHTML = data.results.map(p => `
            <div class="search-result-item">
                <div class="search-result-type">📄 Publication</div>
                <h3><a href="/publications/${p.id}">${escapeHtml(p.title)}</a></h3>
                <div class="search-result-meta">
                    ${p.author ? `<span>${p.author.full_name}${p.author.is_verified ? ' ✓' : ''}</span>` : ''}
                    ${p.field ? `<span style="color:${p.field.color}">${p.field.name}</span>` : ''}
                    ${p.year ? `<span>${p.year}</span>` : ''}
                </div>
                ${p.abstract ? `<p>${escapeHtml(p.abstract).substring(0, 200)}...</p>` : ''}
            </div>
        `).join('');
    } else if (type === 'questions') {
        container.innerHTML = data.results.map(q => `
            <div class="search-result-item">
                <div class="search-result-type">❓ Question</div>
                <h3><a href="/questions/${q.id}">${escapeHtml(q.title)}</a></h3>
                <div class="search-result-meta">
                    <span>${q.answer_count} answers</span>
                    <span>${q.vote_count} votes</span>
                    ${q.field ? `<span style="color:${q.field.color}">${q.field.name}</span>` : ''}
                </div>
            </div>
        `).join('');
    } else {
        container.innerHTML = data.results.map(j => `
            <div class="search-result-item">
                <div class="search-result-type">💼 Job</div>
                <h3><a href="/jobs/${j.id}">${escapeHtml(j.title)}</a></h3>
                <div class="search-result-meta">
                    <span>🏛️ ${escapeHtml(j.institution)}</span>
                    ${j.location ? `<span>📍 ${escapeHtml(j.location)}</span>` : ''}
                    <span class="job-type-badge">${j.job_type}</span>
                </div>
            </div>
        `).join('');
    }

    const totalPages = Math.ceil(data.total / data.per_page);
    const pagEl = document.getElementById('searchPagination');
    if (totalPages > 1) {
        let html = '';
        for (let i = 1; i <= totalPages; i++) {
            html += `<button class="page-btn ${i === page ? 'active' : ''}" onclick="doSearch(${i})">${i}</button>`;
        }
        pagEl.innerHTML = html;
    } else { pagEl.innerHTML = ''; }
}

document.getElementById('searchQuery').addEventListener('keydown', (e) => {
    if (e.key === 'Enter') doSearch();
});
</script>
{% endblock %}