{% 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 stays inline with Search -->
      <button
        class="btn btn-secondary help-toggle"
        type="button"
        data-target="#search-help-panel"
      >
        Help
      </button>
    </div>

    <!-- Help panel sits below the row -->
    <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) to match any of several terms.<br>
            <em>Example:</em> <code>love OR kindness</code></li>
        <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
            <em>Example:</em> <code>hope -future</code></li>
        <li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
            <em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
        <li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
            <em>Example:</em> <code>John 3:16</code></li>
      </ul>
      <p><strong>Tip:</strong> Combine operators:<br>
         <em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
    </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>

    <div class="muted small">Total entries: {{ total }}</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 %}
</div>
<!-- ===== User controls: font size + history + recent views ===== -->
<div class="card" style="padding:12px; margin:12px 0;">
  <div class="meta-label">Font size DOES NOT WORK YET</div>
  <div style="display:flex; gap:8px; margin-top:8px;">
    <button class="nav-btn" data-font-choice="small"   type="button">Small</button>
    <button class="nav-btn" data-font-choice="default" type="button">Default</button>
    <button class="nav-btn" data-font-choice="large"   type="button">Large</button>
    <button class="nav-btn" data-font-choice="xlarge"  type="button">Extra-Large</button>
  </div>
</div>

<div class="card" style="padding:12px; margin:12px 0;">
  <div class="meta-label">Your Recent Searches</div>
  <ul id="searchHistoryList" class="small" style="margin:8px 0 0; padding-left:18px;"></ul>
  <div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div>
</div>

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

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

  // --- Font prefs: fetch + apply + persist ---
  function applyFont(size){
    const root = document.documentElement;
    root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge');
    root.classList.add('fs-'+size);
    document.querySelectorAll('[data-font-choice]').forEach(b=>{
      b.classList.toggle('primary', b.getAttribute('data-font-choice')===size);
    });
  }
  fetch("{% url 'api_get_prefs' %}").then(r=>r.json()).then(j=>{
    if (j.ok) applyFont(j.font_size || 'default');
  }).catch(()=>{});

  document.querySelectorAll('[data-font-choice]').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      const size = btn.getAttribute('data-font-choice');
      applyFont(size);
      const fd = new FormData(); fd.append('size', size);
      fetch("{% url 'api_set_font_size' %}", {
        method:'POST', body:fd, headers:{'X-CSRFToken': csrftoken}
      }).catch(()=>{});
    });
  });

  // --- Search history: fetch + render ---
  const histList = document.getElementById('searchHistoryList');
  const histEmpty = document.getElementById('searchHistoryEmpty');
  function renderHistory(items){
    histList.innerHTML = '';
    if (!items || !items.length){ histEmpty.style.display='block'; return; }
    histEmpty.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');
      li.innerHTML = `<a href="{% url 'search' %}?${params.toString()}"><strong>${it.q || '(blank)'}</strong></a>
        <span class="muted">— ${Object.keys(sel).filter(k=>sel[k]).join(', ')}</span>`;
      histList.appendChild(li);
    });
  }
  fetch("{% url 'api_get_search_history' %}").then(r=>r.json()).then(j=>{
    if (j.ok) renderHistory(j.items);
  }).catch(()=>{});

  // --- Recently viewed: fetch + render ---
  const rvList = document.getElementById('recentViewsList');
  const rvEmpty = document.getElementById('recentViewsEmpty');
  function renderRecent(items){
    rvList.innerHTML = '';
    if (!items || !items.length){ rvEmpty.style.display='block'; return; }
    rvEmpty.style.display = 'none';
    items.forEach(it=>{
      const li = document.createElement('li');
      const when = new Date(it.viewed_at);
      li.innerHTML = `<a href="{% url 'entry_view' 0 %}".replace('0', it.entry_id)>#${it.entry_id}</a>
        <span class="muted"> — ${when.toLocaleString()}</span>`;
      rvList.appendChild(li);
    });
  }
  fetch("{% url 'api_get_recent_views' %}").then(r=>r.json()).then(j=>{
    if (j.ok) renderRecent(j.items);
  }).catch(()=>{});

  // --- Log searches reliably using Beacon on submit ---
  const searchForm = document.querySelector('form.search-form');
  if (searchForm){
    searchForm.addEventListener('submit', ()=>{
      try{
        const fd = new FormData(searchForm);
        const data = new URLSearchParams();
        data.append('q', (fd.get('q') || '').trim());
        // selected checkboxes (match your field names)
        ['subject','illustration','application','scripture_raw','source','talk_title','talk_number','entry_code']
          .forEach(k=>{
            if (fd.get(k)) data.append(`sel[${k}]`, 'on');
          });
        const blob = new Blob([data.toString()], {type:'application/x-www-form-urlencoded'});
        navigator.sendBeacon("{% url 'api_log_search' %}", blob);
      }catch(_){}
    });
  }
})();
</script>

<!-- Styles for the help panel -->
<style>
  .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;
    line-height:1.6;
  }
  .help-panel.open{ display:block; }
  .help-panel code{ background:#f3f4f6; padding:2px 4px; border-radius:4px; font-size:90%; }
  .help-panel h3{ margin:0 0 8px; font-size:16px; }
  .help-panel ul{ margin:0 0 8px 18px; }
</style>

<!-- Inline JS to toggle the panel (click button to toggle, click away to close) -->
<script>
  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>
{% endblock %}