{% extends "base.html" %}
{% block content %}
<h2>📚 Question Bank</h2>

<!-- ============ Search + Source filter + Actions ============ -->
<div class="row mb-4">
  <div class="col-lg-8">
    <form method="get" class="row g-2 align-items-end" id="search-form">

      <div class="col-md-5 position-relative">
        <label for="search-input" class="form-label small text-muted mb-1">Search</label>
        <input type="text" id="search-input" name="search" value="{{ search }}"
               class="form-control" placeholder="Search all fields..."
               autocomplete="off">
        <div id="suggestions" class="list-group"
             style="position:absolute; z-index:1000; width:calc(100% - 24px);
                    max-height:240px; overflow-y:auto; display:none;">
        </div>
      </div>

      <div class="col-md-4">
        <label for="source-filter" class="form-label small text-muted mb-1">Source</label>
        <select name="source" id="source-filter" class="form-select">
          <option value="">All sources</option>
          {% for s in sources %}
            <option value="{{ s }}" {% if s == source_filter %}selected{% endif %}>{{ s }}</option>
          {% endfor %}
          {% if not sources %}
            <option value="" disabled>(no source tags yet)</option>
          {% endif %}
        </select>
      </div>

      <!-- Preserve current sort order across searches -->
      <input type="hidden" name="sort"  value="{{ sort_by }}">
      <input type="hidden" name="order" value="{{ order }}">

      <div class="col-md-3 d-flex gap-2">
        <button type="submit" class="btn btn-primary flex-grow-1">
          <i class="bi bi-search"></i> Search
        </button>
        <a href="{{ url_for('question_list') }}" class="btn btn-secondary">Clear</a>
      </div>
    </form>
  </div>

  <div class="col-lg-4 text-end mt-3 mt-lg-0 d-flex align-items-end justify-content-end gap-2">
    <a href="{{ url_for('question_paper') }}" class="btn btn-outline-success">
      <i class="bi bi-file-text"></i> Whole Paper
    </a>
    <a href="{{ url_for('browse_chapters') }}" class="btn btn-outline-info">
      <i class="bi bi-book"></i> By Chapter
    </a>
  </div>
</div>

<!-- ============ Active filter indicator ============ -->
{% if source_filter %}
<div class="alert alert-info py-2 mb-3 d-flex justify-content-between align-items-center">
  <span>
    <i class="bi bi-funnel-fill"></i>
    Filtering by source: <strong>{{ source_filter }}</strong>
  </span>
  <a href="{{ url_for('question_list', search=search, sort=sort_by, order=order) }}"
     class="btn btn-sm btn-outline-secondary">
    Clear source filter
  </a>
</div>
{% endif %}

<!-- ============ Pagination (top) ============ -->
<div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
  <div class="small text-muted">
    Showing
    <strong>{{ (page - 1) * per_page + 1 }}</strong>–<strong>{{ [page * per_page, total]|min }}</strong>
    of <strong>{{ total }}</strong> question{{ '' if total == 1 else 's' }}
    {% if source_filter %}· source: <code>{{ source_filter }}</code>{% endif %}
    {% if search %}· search: <code>{{ search }}</code>{% endif %}
  </div>

  <div class="d-flex align-items-center gap-2">
    {# Rows-per-page selector #}
    <form method="get" class="d-inline-flex align-items-center gap-1 mb-0">
      <input type="hidden" name="search" value="{{ search }}">
      <input type="hidden" name="sort" value="{{ sort_by }}">
      <input type="hidden" name="order" value="{{ order }}">
      <input type="hidden" name="source" value="{{ source_filter }}">
      <label class="small text-muted mb-0">Per page:</label>
      <select name="per_page" class="form-select form-select-sm"
              style="width:auto;" onchange="this.form.submit()">
        {% for n in [25, 50, 100, 200] %}
          <option value="{{ n }}" {% if n == per_page %}selected{% endif %}>{{ n }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>

{# Page navigation #}
{% if total_pages > 1 %}
<nav aria-label="Question pages" class="mb-2">
  <ul class="pagination pagination-sm mb-0 flex-wrap">
    {% set base_args = {'search': search, 'sort': sort_by, 'order': order,
                        'source': source_filter, 'per_page': per_page} %}

    <li class="page-item {% if page <= 1 %}disabled{% endif %}">
      <a class="page-link" href="{{ url_for('question_list', page=1, **base_args) }}">&laquo; First</a>
    </li>
    <li class="page-item {% if page <= 1 %}disabled{% endif %}">
      <a class="page-link" href="{{ url_for('question_list', page=page-1, **base_args) }}">Prev</a>
    </li>

    {% set window_start = [1, page - 3]|max %}
    {% set window_end   = [total_pages, page + 3]|min %}

    {% if window_start > 1 %}
      <li class="page-item"><a class="page-link" href="{{ url_for('question_list', page=1, **base_args) }}">1</a></li>
      {% if window_start > 2 %}
        <li class="page-item disabled"><span class="page-link">…</span></li>
      {% endif %}
    {% endif %}

    {% for p in range(window_start, window_end + 1) %}
      <li class="page-item {% if p == page %}active{% endif %}">
        <a class="page-link" href="{{ url_for('question_list', page=p, **base_args) }}">{{ p }}</a>
      </li>
    {% endfor %}

    {% if window_end < total_pages %}
      {% if window_end < total_pages - 1 %}
        <li class="page-item disabled"><span class="page-link">…</span></li>
      {% endif %}
      <li class="page-item"><a class="page-link" href="{{ url_for('question_list', page=total_pages, **base_args) }}">{{ total_pages }}</a></li>
    {% endif %}

    <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
      <a class="page-link" href="{{ url_for('question_list', page=page+1, **base_args) }}">Next</a>
    </li>
    <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
      <a class="page-link" href="{{ url_for('question_list', page=total_pages, **base_args) }}">Last &raquo;</a>
    </li>
  </ul>
</nav>
{% endif %}

<!-- ============ Table ============ -->
<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>
          {% set new_order = 'desc' if sort_by == 'question_date' and order == 'asc' else 'asc' %}
          <a href="{{ url_for('question_list', sort='question_date', order=new_order, search=search, source=source_filter, page=1) }}">
            Date
            {% if sort_by == 'question_date' %}{{ '▲' if order == 'asc' else '▼' }}{% endif %}
          </a>
        </th>
        <th>
          {% set new_order = 'desc' if sort_by == 'institution' and order == 'asc' else 'asc' %}
          <a href="{{ url_for('question_list', sort='institution', order=new_order, search=search, source=source_filter, page=1) }}">
            Institution
            {% if sort_by == 'institution' %}{{ '▲' if order == 'asc' else '▼' }}{% endif %}
          </a>
        </th>
        <th>
          {% set new_order = 'desc' if sort_by == 'level' and order == 'asc' else 'asc' %}
          <a href="{{ url_for('question_list', sort='level', order=new_order, search=search, source=source_filter, page=1) }}">
            Level
            {% if sort_by == 'level' %}{{ '▲' if order == 'asc' else '▼' }}{% endif %}
          </a>
        </th>
        <th>
          {% set new_order = 'desc' if sort_by == 'subject' and order == 'asc' else 'asc' %}
          <a href="{{ url_for('question_list', sort='subject', order=new_order, search=search, source=source_filter, page=1) }}">
            Subject
            {% if sort_by == 'subject' %}{{ '▲' if order == 'asc' else '▼' }}{% endif %}
          </a>
        </th>
        <th>Syllabus</th>
        <th>
          {% set new_order = 'desc' if sort_by == 'paper' and order == 'asc' else 'asc' %}
          <a href="{{ url_for('question_list', sort='paper', order=new_order, search=search, source=source_filter, page=1) }}">
            Paper
            {% if sort_by == 'paper' %}{{ '▲' if order == 'asc' else '▼' }}{% endif %}
          </a>
        </th>
        <th>
          {% set new_order = 'desc' if sort_by == 'syllabus_code' and order == 'asc' else 'asc' %}
          <a href="{{ url_for('question_list', sort='syllabus_code', order=new_order, search=search, source=source_filter, page=1) }}">
            Syllabus Code
            {% if sort_by == 'syllabus_code' %}{{ '▲' if order == 'asc' else '▼' }}{% endif %}
          </a>
        </th>
        <th>
          {% set new_order = 'desc' if sort_by == 'source' and order == 'asc' else 'asc' %}
          <a href="{{ url_for('question_list', sort='source', order=new_order, search=search, source=source_filter, page=1) }}">
            Source
            {% if sort_by == 'source' %}{{ '▲' if order == 'asc' else '▼' }}{% endif %}
          </a>
        </th>
        <th>Group</th>
        <th>Q.No.</th>
        <th>Marks</th>
        <th>Type</th>
        <th>Preview</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for q in questions %}
      <tr>
        <td>{{ q.question_date }}</td>
        <td>{{ q.institution }}</td>
        <td>
          {% if q.level and q.alias %}L{{ q.level }} ({{ q.alias }})
          {% elif q.level %}L{{ q.level }}
          {% elif q.alias %}{{ q.alias }}
          {% endif %}
        </td>
        <td>{{ q.subject }}</td>
        <td>
          {% set _p = lookup_paper(q.paper) %}
          {% if _p and _p.syllabus %}
            <span class="badge bg-secondary">{{ _p.syllabus.display_name }}</span>
          {% else %}
            <span class="text-muted">—</span>
          {% endif %}
        </td>
        <td>
          {% if _p and _p.paper %}
            {{ _p.paper.display_name }}
          {% else %}
            {{ q.paper or '' }}
          {% endif %}
        </td>
        <td>{{ q.syllabus_code or '' }}</td>
        <td>
          {% if q.source %}
            <span class="badge bg-info text-dark">{{ q.source }}</span>
          {% else %}
            <span class="text-muted small fst-italic">untagged</span>
          {% endif %}
        </td>
        <td>{{ q.group or '' }}</td>
        <td>{{ q.question_number }}</td>
        <td>{{ q.marks if q.marks else '' }}</td>
        <td>{{ q.type or 'essay' }}</td>
        <td>
          {% set preview = (q.nepali_transcription or q.english_transcription or '') %}
          {{ preview[:60] }}{% if preview|length > 60 %}…{% endif %}
        </td>
        <td>
          <a href="{{ url_for('question_detail', id=q.id) }}" class="btn btn-sm btn-info">
            <i class="bi bi-eye"></i>
          </a>
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="14" class="text-center text-muted py-4">
          No questions found.
          {% if source_filter %}
            <br>
            <a href="{{ url_for('question_list') }}" class="small">Clear all filters</a>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- JavaScript for autocomplete -->
<script>
  const searchInput = document.getElementById('search-input');
  const suggestionsBox = document.getElementById('suggestions');

  searchInput.addEventListener('input', function() {
    const query = this.value.trim();
    if (query.length < 2) {
      suggestionsBox.style.display = 'none';
      return;
    }

    fetch('/question/suggestions?q=' + encodeURIComponent(query))
      .then(response => response.json())
      .then(data => {
        suggestionsBox.innerHTML = '';
        if (data.length === 0) {
          suggestionsBox.style.display = 'none';
          return;
        }
        data.forEach(item => {
          const div = document.createElement('div');
          div.className = 'list-group-item list-group-item-action';
          div.textContent = item;
          div.style.cursor = 'pointer';
          div.addEventListener('click', function() {
            searchInput.value = this.textContent;
            suggestionsBox.style.display = 'none';
            document.getElementById('search-form').submit();
          });
          suggestionsBox.appendChild(div);
        });
        suggestionsBox.style.display = 'block';
      });
  });

  // Hide suggestions when clicking outside
  document.addEventListener('click', function(e) {
    if (!suggestionsBox.contains(e.target) && e.target !== searchInput) {
      suggestionsBox.style.display = 'none';
    }
  });
</script>
{% endblock %}