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

{% block content %}
<div class="container page-content">
    <div class="page-header-row">
        <h1>Questions & Answers</h1>
        {% if user %}
        <a href="/questions/new" class="btn btn-primary">Ask a Question</a>
        {% endif %}
    </div>

    <div class="filter-bar">
        <input type="text" id="searchQ" placeholder="Search questions..." 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 Voted</option>
            <option value="unanswered">Unanswered</option>
        </select>
        <button class="btn btn-outline" onclick="loadQuestions()">Filter</button>
    </div>

    <div id="qResults" class="question-list"></div>
    <div id="qPagination" class="pagination"></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
async function loadQuestions(page = 1) {
    const params = new URLSearchParams();
    const q = document.getElementById('searchQ').value;
    const fieldId = document.getElementById('filterField').value;
    const sort = document.getElementById('filterSort').value;
    if (q) params.set('q', q);
    if (fieldId) params.set('field_id', fieldId);
    if (sort) params.set('sort', sort);
    params.set('page', page);

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

    if (data.results.length === 0) {
        container.innerHTML = '<p class="empty-state">No questions found.</p>';
    } else {
        container.innerHTML = data.results.map(q => `
            <div class="question-card">
                <div class="q-votes">
                    <span class="q-vote-count">${q.vote_count}</span>
                    <span class="q-vote-label">votes</span>
                </div>
                <div class="q-answers ${q.answer_count > 0 ? 'has-answers' : ''}">
                    <span class="q-answer-count">${q.answer_count}</span>
                    <span class="q-answer-label">answers</span>
                </div>
                <div class="q-content">
                    <h3><a href="/questions/${q.id}">${escapeHtml(q.title)}</a></h3>
                    <p class="q-body-preview">${escapeHtml(q.body)}</p>
                    <div class="q-meta">
                        <span>Asked by ${q.author ? q.author.full_name : 'Unknown'}${q.author && q.author.is_verified ? ' <span class="verified-badge">✓</span>' : ''}</span>
                        ${q.field ? `<span style="color:${q.field.color}">${q.field.name}</span>` : ''}
                        <span>${new Date(q.created_at).toLocaleDateString()}</span>
                        <span>👁 ${q.view_count}</span>
                    </div>
                    <div class="q-tags">${(q.tags || []).map(t => `<span class="tag">${t.name}</span>`).join('')}</div>
                </div>
            </div>
        `).join('');
    }

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