{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}
{% load static %}

{% block content %}
<div class="container">
  <form method="get" class="search-form">
    <h1 class="page-title">Illustration Search</h1>
    <div class="search-row">
      <input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
      <button class="btn btn-primary">Search</button>

      <!-- Help button -->
      <button
        class="btn btn-secondary help-toggle"
        type="button"
        data-target="#search-help-panel"
      >
        Help
      </button>
    </div>

    <!-- Help panel -->
    <div id="search-help-panel" class="help-panel">
      <h3>How to Use Search Operators</h3>
      <ul>
        <li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
            <em>Example:</em> <code>faith</code></li>
        <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
            <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
        <li><strong>OR search</strong> — use <code>OR</code> (uppercase).<br>
            <em>Example:</em> <code>love OR kindness</code></li>
        <li><strong>Exclude terms</strong> — use <code>-</code> to remove.<br>
            <em>Example:</em> <code>hope -future</code></li>
        <li><strong>Wildcard search</strong> — use <code>*</code>.<br>
            <em>Example:</em> <code>lov*</code></li>
        <li><strong>Scripture search</strong> — type a Bible book.<br>
            <em>Example:</em> <code>John 3:16</code></li>
      </ul>
    </div>

    <div class="filter-row">
      {% for f in field_options %}
        <label class="check-pill">
          <input type="checkbox" name="{{ f.name }}" {% if f.checked %}checked{% endif %}>
          <span>{{ f.label }}</span>
        </label>
      {% endfor %}
    </div>
  </form>

  {% if ran_search and result_count == 0 %}
    <div class="empty-state">
      <div class="empty-title">No results</div>
      <div class="empty-subtitle">Try broadening your terms or enabling more fields above.</div>
    </div>
  {% endif %}

  <!-- ===== History Dropdown ===== -->
  <div class="card" style="padding:0; margin:16px 0 12px;">
    <h1 class="page-title dropdown-toggle" data-target="#history-panel">
         Search History
      <span class="chevron">▾</span>
    </h1>
    <div id="history-panel" class="dropdown-panel">
      <hr style="border:none; border-top:1px solid var(--border); margin:12px 0;">

      <!-- Recent Searches -->
      <div style="margin-top:6px;">
        <div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div>
        <ul id="searchHistoryList" class="small" style="margin:0; padding-left:18px;"></ul>
        <div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div>
      </div>

      <hr style="border:none; border-top:1px solid var(--border); margin:12px 0;">

      <!-- Recently Viewed -->
      <div>
        <div class="small muted" style="margin-bottom:6px;">Recently Viewed Illustrations</div>
        <ul id="recentViewsList" class="small" style="margin:0; padding-left:18px;"></ul>
        <div id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  // --- CSRF helper ---
  function getCookie(name){
    const m = document.cookie.match('(^|;)\\s*'+name+'\\s*=\\s*([^;]+)');
    return m ? m.pop() : '';
  }
  const csrftoken = getCookie('csrftoken');

  // Build entry view URL
  const ENTRY_URL_TEMPLATE = "{% url 'entry_view' 1 %}";
  function entryUrlFor(id){
    return ENTRY_URL_TEMPLATE.replace(/\/\d+\/?$/, '/' + id + '/');
  }

  // First N words
  function firstWords(text, n){
    const clean = (text || '').replace(/\s+/g, ' ').trim();
    if (!clean) return '';
    const words = clean.split(' ');
    if (words.length <= n) return clean;
    return words.slice(0, n).join(' ') + '…';
  }

  // Font prefs
  function applyFont(size){
    const root = document.documentElement;
    root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge');
    root.classList.add('fs-'+size);
  }
  fetch("{% url 'api_get_prefs' %}").then(r=>r.json()).then(j=>{
    if (j.ok) applyFont(j.font_size || 'default');
  }).catch(()=>{});

  // Search history (PUT BACK selected-fields subtitle)
  function renderHistory(items){
    const list = document.getElementById('searchHistoryList');
    const empty = document.getElementById('searchHistoryEmpty');
    list.innerHTML = '';
    if (!items || !items.length){ empty.style.display='block'; return; }
    empty.style.display='none';
    items.forEach(it=>{
      const params = new URLSearchParams();
      if (it.q) params.set('q', it.q);
      const sel = it.selected || {};
      Object.keys(sel).forEach(k=>{ if (sel[k]) params.set(k, 'on'); });

      const li = document.createElement('li');
      const selectedList = Object.keys(sel).filter(k=>sel[k]).join(', ');
      li.innerHTML = `<a href="{% url 'search' %}?${params.toString()}"><strong>${it.q || '(blank)'}</strong></a>
        <span class="muted">— ${selectedList}</span>`;
      list.appendChild(li);
    });
  }
  fetch("{% url 'api_get_search_history' %}").then(r=>r.json()).then(j=>{
    if (j.ok) renderHistory(j.items);
  }).catch(()=>{});

  // Recently viewed
  function renderRecent(items){
    const list = document.getElementById('recentViewsList');
    const empty = document.getElementById('recentViewsEmpty');
    list.innerHTML = '';
    if (!items || !items.length){ empty.style.display='block'; return; }
    empty.style.display='none';
    items.forEach(it=>{
      const url = entryUrlFor(it.entry_id);
      const snippet = (it.snippet && it.snippet.trim())
        || firstWords(it.illustration || '', 20)
        || `Entry #${it.entry_id}`;
      const when = new Date(it.viewed_at);
      const li = document.createElement('li');
      li.innerHTML = `<a href="${url}">${snippet}</a>
        <span class="muted"> — ${when.toLocaleString()}</span>`;
      list.appendChild(li);
    });
  }
  fetch("{% url 'api_get_recent_views' %}").then(r=>r.json()).then(j=>{
    if (j.ok) renderRecent(j.items);
  }).catch(()=>{});

  // Dropdown toggle for History
  document.querySelectorAll('.dropdown-toggle').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      const target = document.querySelector(btn.dataset.target);
      if (target){
        target.classList.toggle('open');
        btn.classList.toggle('open');
      }
    });
  });

  // Help panel toggle (unchanged)
  document.addEventListener('click', function(e){
    const btn = e.target.closest('.help-toggle');
    if (btn) {
      const panel = document.querySelector(btn.dataset.target || '#search-help-panel');
      if (panel) panel.classList.toggle('open');
      return;
    }
    const panel = document.querySelector('#search-help-panel');
    if (!panel) return;
    if (panel.classList.contains('open')) {
      const clickedInside = panel.contains(e.target) || e.target.closest('.help-toggle');
      if (!clickedInside) panel.classList.remove('open');
    }
  });
})();
</script>

<style>
  /* Help panel */
  .help-panel{
    display:none;
    margin-top:10px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
    font-size:14px;
  }
  .help-panel.open{ display:block; }

  /* Dropdown panel */
  .dropdown-panel { display:none; padding:12px; }
  .dropdown-panel.open { display:block; }

  /* Chevron style sized for heading */
  .page-title .chevron {
    font-size: 0.9em;
    margin-left: 8px;
    vertical-align: middle;
    transition: transform 0.2s ease;
    display:inline-block;
  }
  .page-title.open .chevron { transform: rotate(180deg); }
  .dropdown-toggle { cursor:pointer; }
</style>
{% endblock %}