{% extends 'base.html' %}
{% block content %}
<h2>Theme Catalog (Simple)</h2>
<p style="margin-bottom: 1rem; font-size: .875rem;">
  See a theme that's missing or might be set up wrong? <a href="https://github.com/mwisnowski/mtg_python_deckbuilder/issues/new?template=general-theme-request.md" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: underline;">Submit a request here</a>.
</p>
<div id="theme-catalog-simple">
  <div class="flex gap-3 flex-wrap mb-3.5 items-end">
    <div class="flex-1 min-w-[220px] relative">
      <label class="text-[11px] block opacity-70">Search</label>
      <input type="text" id="theme-search" placeholder="Search themes" aria-label="Search" class="w-full" autocomplete="off" />
      <div id="theme-search-results" class="search-suggestions"></div>
    </div>
    {% if show_theme_filters %}
    <div class="min-w-[140px]">
      <label class="text-[11px] block opacity-70">Quality</label>
      <select id="quality-filter" class="w-full text-[13px]">
        <option value="">All</option>
        <option>Excellent</option>
        <option>Good</option>
        <option>Fair</option>
        <option>Poor</option>
      </select>
    </div>
    <div class="min-w-[140px]">
      <label class="text-[11px] block opacity-70">Pool Size</label>
      <select id="pool-filter" class="w-full text-[13px]">
        <option value="">All</option>
        <option>Vast</option>
        <option>Large</option>
        <option>Moderate</option>
        <option>Small</option>
        <option>Tiny</option>
      </select>
    </div>
    <div class="min-w-[140px]">
      <label class="text-[11px] block opacity-70">Popularity</label>
      <select id="pop-filter" class="w-full text-[13px]">
        <option value="">All</option>
        <option>Very Common</option>
        <option>Common</option>
        <option>Uncommon</option>
        <option>Niche</option>
        <option>Rare</option>
      </select>
    </div>
    {% endif %}
    <button id="clear-search" class="btn btn-ghost text-xs" hidden>Clear</button>
  </div>
  
  {% if show_theme_filters %}
  <div id="quick-filters" class="flex gap-2.5 flex-wrap mb-2">
    <div>
      <div class="text-[10px] opacity-60 mb-0.5">Quality</div>
      <div class="flex gap-1 flex-wrap">
        {% for b in ['Excellent','Good','Fair','Poor'] %}
          <button class="btn btn-ghost quality-chip text-[11px] px-2 py-0.5" data-quality="{{ b }}">{{ b[0] }}</button>
        {% endfor %}
      </div>
    </div>
    <div>
      <div class="text-[10px] opacity-60 mb-0.5">Pool Size</div>
      <div class="flex gap-1 flex-wrap">
        {% for b in ['Vast','Large','Moderate','Small','Tiny'] %}
          <button class="btn btn-ghost pool-chip text-[11px] px-2 py-0.5" data-pool="{{ b }}">{{ b[0] }}</button>
        {% endfor %}
      </div>
    </div>
    <div>
      <div class="text-[10px] opacity-60 mb-0.5">Popularity</div>
      <div class="flex gap-1 flex-wrap">
        {% for b in ['Very Common','Common','Uncommon','Niche','Rare'] %}
          <button class="btn btn-ghost pop-chip text-[11px] px-2 py-0.5" data-pop="{{ b }}">{{ b }}</button>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}
  
  {# Badge Legend #}
  <details class="mb-3 text-xs" style="max-width: 800px;">
    <summary class="cursor-pointer opacity-70 hover:opacity-100" style="user-select: none;">
      ℹ️ Badge Legend
    </summary>
    <div class="mt-2 p-3 rounded" style="background: var(--bg-secondary); border: 1px solid var(--border);">
      <div class="flex flex-col gap-2.5">
        {% if show_theme_quality_badges %}
        <div>
          <div class="font-semibold mb-1">Quality Badges <span class="theme-badge badge-quality-excellent">E</span> <span class="theme-badge badge-quality-good">G</span> <span class="theme-badge badge-quality-fair">F</span> <span class="theme-badge badge-quality-poor">P</span></div>
          <div class="opacity-85">Editorial quality measures how well we've documented and curated each theme. The score is calculated from multiple factors:</div>
          <ul class="mt-1 mb-1 opacity-85 text-[11px] list-disc ml-4 space-y-0.5">
            <li><strong>Card Count & Uniqueness</strong>: Themes with sufficient representative cards and unique synergies score higher</li>
            <li><strong>Description Quality</strong>: Custom descriptions that avoid generic patterns score higher than auto-generated fallbacks</li>
            <li><strong>Metadata Completeness</strong>: Presence of primary/secondary colors, archetype classification, and popularity data</li>
            <li><strong>Curation Status</strong>: Themes marked as reviewed or final have higher quality than draft entries</li>
          </ul>
          <div class="opacity-70 text-[11px]">Higher quality = better-documented, more thoroughly curated, easier to build around</div>
          <div class="mt-1 opacity-70 text-[11px]"><strong>Tiers:</strong> Excellent (75%+) • Good (60-74%) • Fair (40-59%) • Poor (&lt;40%)</div>
          <div class="mt-1.5 opacity-70 text-[11px]">💡 <a href="https://github.com/mwisnowski/mtg_python_deckbuilder" target="_blank" rel="noopener noreferrer" class="underline hover:opacity-100">Help improve theme quality on GitHub</a></div>
        </div>
        {% endif %}
        {% if show_theme_pool_badges %}
        <div>
          <div class="font-semibold mb-1">Pool Size Badges <span class="theme-badge badge-pool-vast">V</span> <span class="theme-badge badge-pool-large">L</span> <span class="theme-badge badge-pool-moderate">M</span> <span class="theme-badge badge-pool-small">S</span> <span class="theme-badge badge-pool-tiny">T</span></div>
          <div class="opacity-85">Total cards available with this theme tag. Larger pools offer more variety and flexibility when building.</div>
          <div class="mt-1 opacity-70 text-[11px]">• Vast (500+) • Large (200-499) • Moderate (50-199) • Small (15-49) • Tiny (&lt;15)</div>
        </div>
        {% endif %}
        {% if show_theme_popularity_badges %}
        <div>
          <div class="font-semibold mb-1">Popularity <span class="theme-badge badge-pop-vc">Very Common</span> <span class="theme-badge badge-pop-c">Common</span> <span class="theme-badge badge-pop-u">Uncommon</span> <span class="theme-badge badge-pop-n">Niche</span> <span class="theme-badge badge-pop-r">Rare</span></div>
          <div class="opacity-85">Usage frequency based on how many commanders and cards are associated with this theme. More popular themes appear in more decks.</div>
        </div>
        {% endif %}
      </div>
    </div>
  </details>
  
  <div id="active-filters" class="flex gap-1.5 flex-wrap mb-2 text-[11px]"></div>
  <div id="theme-results" aria-live="polite" aria-busy="true">
    <div class="flex flex-col gap-2">
      {% for i in range(6) %}<div class="skeleton-card"></div>{% endfor %}
    </div>
  </div>
</div>
<script>
(function(){
  const input = document.getElementById('theme-search');
  const resultsBox = document.getElementById('theme-search-results');
  const clearBtn = document.getElementById('clear-search');
  const qualityFilter = document.getElementById('quality-filter');
  const poolFilter = document.getElementById('pool-filter');
  const popSel = document.getElementById('pop-filter');
  const qualityChips = document.querySelectorAll('.quality-chip');
  const poolChips = document.querySelectorAll('.pool-chip');
  const popChips = document.querySelectorAll('.pop-chip');
  const activeFilters = document.getElementById('active-filters');
  const resultsHost = document.getElementById('theme-results');
  let lastQuery=''; let lastSearchIssued=0; const SEARCH_THROTTLE=150;
  let selectedIndex = -1;
  function hideResults(){ resultsBox.style.display='none'; resultsBox.innerHTML=''; selectedIndex = -1; }
  function buildParams(){
    const params = new URLSearchParams();
    const q = input.value.trim(); if(q) params.set('q', q);
    const quality = qualityFilter ? qualityFilter.value : ''; if(quality) params.set('quality_tier', quality);
    const pool = poolFilter ? poolFilter.value : ''; if(pool) params.set('pool_tier', pool);
    const pop = popSel ? popSel.value : ''; if(pop) params.set('bucket', pop);
    params.set('limit','50'); params.set('offset','0');
    return params.toString();
  }
  function addChip(label, remover){
    const span=document.createElement('span');
    span.className='filter-chip';
    span.innerHTML='<span>'+label+'</span><button class="filter-chip-remove" aria-label="Remove">×</button>';
    span.querySelector('button').addEventListener('click', remover);
    activeFilters.appendChild(span);
  }
  function renderActive(){
    activeFilters.innerHTML='';
    const q = input.value.trim(); if(q) addChip('Search: '+q, ()=>{ input.value=''; fetchList(); });
    const quality = qualityFilter ? qualityFilter.value : ''; if(quality) addChip('Quality: '+quality, ()=>{ qualityFilter.value=''; fetchList(); });
    const pool = poolFilter ? poolFilter.value : ''; if(pool) addChip('Pool: '+pool, ()=>{ poolFilter.value=''; fetchList(); });
    const pop = popSel ? popSel.value : ''; if(pop) addChip('Popularity: '+pop, ()=>{ popSel.value=''; fetchList(); });
  }
  function fetchList(){
    const ps = buildParams();
    resultsHost.setAttribute('aria-busy','true');
    fetch('/themes/fragment/list_simple?'+ps, {cache:'no-store'})
      .then(r=>r.text())
      .then(html=>{
        resultsHost.innerHTML=html;
        if(window.htmx && typeof window.htmx.process==='function'){
          window.htmx.process(resultsHost);
        }
        resultsHost.removeAttribute('aria-busy');
        renderActive();
      })
      .catch(()=>{ resultsHost.innerHTML='<div class="empty" style="font-size:13px;">Failed to load.</div>'; resultsHost.removeAttribute('aria-busy'); });
  }
  function performSearch(q){
    if(!q){ hideResults(); return; }
    const now=Date.now(); if(now - lastSearchIssued < SEARCH_THROTTLE){ clearTimeout(window.__simpleSearchDelay); window.__simpleSearchDelay=setTimeout(()=>performSearch(q), SEARCH_THROTTLE); return; }
    lastSearchIssued=now; const issueId=lastSearchIssued;
    resultsBox.style.display='block';
    resultsBox.innerHTML='<div style="padding:.5rem; font-size:12px; opacity:.7;">Searching…</div>';
    fetch('/themes/api/search?q='+encodeURIComponent(q), {cache:'no-store'})
      .then(r=>r.json()).then(js=>{
        if(issueId!==lastSearchIssued) return;
        if(!js.ok){ hideResults(); return; }
        const items=js.items||[]; if(!items.length){ hideResults(); return; }
        resultsBox.innerHTML=items.map(it=>`<a href="/themes/${it.id}" data-theme-id="${it.id}">${it.theme}</a>`).join('');
        resultsBox.style.display='block';
        selectedIndex = -1;
      }).catch(()=>hideResults());
  }
  function getResultLinks(){ return Array.from(resultsBox.querySelectorAll('a[data-theme-id]')); }
  function selectResultItem(index){
    const links = getResultLinks();
    links.forEach((link, i) => {
      if (i === index) {
        link.classList.add('selected');
        link.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
      } else {
        link.classList.remove('selected');
      }
    });
    selectedIndex = index;
  }
  function applySelectedResult(){
    const links = getResultLinks();
    const link = links[selectedIndex];
    if (link) {
      window.location.href = link.href;
    }
  }
  input.addEventListener('input', function(){
    const q=this.value.trim(); clearBtn.hidden=!q; if(q!==lastQuery){ lastQuery=q; performSearch(q); fetchList(); }
  });
  input.addEventListener('keydown', function(ev){
    const links = getResultLinks();
    const hasResults = links.length > 0;
    
    if (ev.key === 'Escape' && hasResults) {
      hideResults();
      ev.preventDefault();
    } else if (ev.key === 'ArrowDown' && hasResults) {
      ev.preventDefault();
      const newIndex = selectedIndex < links.length - 1 ? selectedIndex + 1 : 0;
      selectResultItem(newIndex);
    } else if (ev.key === 'ArrowUp' && hasResults) {
      ev.preventDefault();
      const newIndex = selectedIndex > 0 ? selectedIndex - 1 : links.length - 1;
      selectResultItem(newIndex);
    } else if (ev.key === 'Enter' && selectedIndex >= 0 && hasResults) {
      ev.preventDefault();
      applySelectedResult();
    } else if(ev.key==='Enter' && ev.shiftKey){ const q=input.value.trim(); if(!q) return; ev.preventDefault(); fetch('/themes/api/search?q='+encodeURIComponent(q)+'&include_synergies=1',{cache:'no-store'}).then(r=>r.json()).then(js=>{ if(!js.ok) return; const items=js.items||[]; if(!items.length) return; resultsBox.innerHTML=items.map(it=>`<a href="/themes/${it.id}" data-theme-id="${it.id}">${it.theme} <span style=\"opacity:.55; font-size:10px;\">(w/ synergies)</span></a>`).join(''); resultsBox.style.display='block'; selectedIndex = -1; }); }
  });
  clearBtn.addEventListener('click', function(){ input.value=''; lastQuery=''; hideResults(); clearBtn.hidden=true; input.focus(); fetchList(); });
  resultsBox.addEventListener('click', function(ev){ const a=ev.target.closest('a[data-theme-id]'); if(!a) return; ev.preventDefault(); window.location.href='/themes/'+a.getAttribute('data-theme-id'); });
  resultsBox.addEventListener('mouseover', function(ev){ 
    const a=ev.target.closest('a[data-theme-id]'); 
    if(!a) return; 
    const links = getResultLinks();
    const index = links.indexOf(a);
    if (index >= 0) {
      selectResultItem(index);
    }
    const id=a.getAttribute('data-theme-id'); 
    if(!id || a._prefetched) return; 
    a._prefetched=true; 
    fetch('/themes/fragment/detail/'+id,{cache:'reload'}).catch(()=>{}); 
  });
  document.addEventListener('click', function(ev){ if(!resultsBox.contains(ev.target) && ev.target!==input){ hideResults(); } });
  if (qualityFilter) {
    qualityFilter.addEventListener('change', fetchList);
    qualityChips.forEach(ch=> ch.addEventListener('click', ()=>{ qualityFilter.value=ch.getAttribute('data-quality'); fetchList(); }));
  }
  if (poolFilter) {
    poolFilter.addEventListener('change', fetchList);
    poolChips.forEach(ch=> ch.addEventListener('click', ()=>{ poolFilter.value=ch.getAttribute('data-pool'); fetchList(); }));
  }
  if (popSel) {
    popSel.addEventListener('change', fetchList);
    popChips.forEach(ch=> ch.addEventListener('click', ()=>{ popSel.value=ch.getAttribute('data-pop'); fetchList(); }));
  }
  // Initial load
  fetchList();
})();
</script>
{% endblock %}