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

{% block content %}
<div class="container page-content">
    <div class="page-header-row">
        <h1>Publications</h1>
        {% if user %}
        <a href="/publications/new" class="btn btn-primary">Add Publication</a>
        {% endif %}
    </div>

    <!-- Filters -->
    <div class="filter-bar">
        <input type="text" id="searchQ" placeholder="Search publications..." class="form-control filter-input">
        <select id="filterField" class="form-control filter-select">
            <option value="">All Fields</option>
            {% for field in fields %}
            <option value="{{ field.id }}">{{ field.name }}</option>
            {% endfor %}
        </select>
        <select id="filterSort" class="form-control filter-select">
            <option value="newest">Newest</option>
            <option value="oldest">Oldest</option>
            <option value="popular">Most Viewed</option>
            <option value="cited">Most Cited</option>
        </select>
        <input type="number" id="yearFrom" placeholder="Year from" class="form-control filter-input-sm">
        <input type="number" id="yearTo" placeholder="Year to" class="form-control filter-input-sm">
        <button class="btn btn-outline" onclick="loadPublications()">Filter</button>
    </div>

    <div id="pubResults" class="pub-list"></div>
    <div id="pubPagination" class="pagination"></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentPage = 1;

async function loadPublications(page = 1) {
    currentPage = page;
    const params = new URLSearchParams();
    const q = document.getElementById('searchQ').value;
    const fieldId = document.getElementById('filterField').value;
    const sort = document.getElementById('filterSort').value;
    const yearFrom = document.getElementById('yearFrom').value;
    const yearTo = document.getElementById('yearTo').value;
    if (q) params.set('q', q);
    if (fieldId) params.set('field_id', fieldId);
    if (sort) params.set('sort', sort);
    if (yearFrom) params.set('year_from', yearFrom);
    if (yearTo) params.set('year_to', yearTo);
    params.set('page', page);

    const res = await fetch('/api/publications?' + params.toString());
    const data = await res.json();
    const container = document.getElementById('pubResults');

    if (data.results.length === 0) {
        container.innerHTML = '<p class="empty-state">No publications found.</p>';
    } else {
        container.innerHTML = data.results.map(p => `
            <div class="pub-list-item">
                <div class="pub-list-type">${p.publication_type}</div>
                <div class="pub-list-content">
                    <h3><a href="/publications/${p.id}">${escapeHtml(p.title)}</a></h3>
                    <div class="pub-list-meta">
                        <span>${p.author ? p.author.full_name : 'Unknown'}${p.author && p.author.is_verified ? ' <span class="verified-badge">✓</span>' : ''}</span>
                        ${p.field ? `<span style="color:${p.field.color}">${p.field.name}</span>` : ''}
                        ${p.year ? `<span>${p.year}</span>` : ''}
                        ${p.journal ? `<span>${escapeHtml(p.journal)}</span>` : ''}
                    </div>
                    ${p.abstract ? `<p class="pub-list-abstract">${escapeHtml(p.abstract).substring(0, 200)}...</p>` : ''}
                    <div class="pub-list-tags">${(p.tags || []).map(t => `<a href="/publications?tag=${t.slug}" class="tag">${t.name}</a>`).join('')}</div>
                    <div class="pub-list-stats">
                        <span>👁 ${p.view_count} views</span>
                        <span>📄 ${p.citation_count} citations</span>
                    </div>
                </div>
            </div>
        `).join('');
    }

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

// Load from URL params
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('tag')) {
    // Will need tag filter implementation
}
loadPublications();
</script>
{% endblock %}