{% extends "base.html" %}

{% block title %}Search — Ontoref{% endblock title %}
{% block nav_search %}active{% endblock nav_search %}

{% block content %}
<!-- Hidden context for JS -->
<input type="hidden" id="search-slug" value="{% if slug %}{{ slug }}{% endif %}">

<!-- Page header: tab switcher -->
<div class="mb-4 flex items-center gap-1.5">
  <button id="tab-search"
          class="btn btn-sm btn-primary gap-1.5"
          title="Search ontology nodes, ADRs and modes">
    <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
    </svg>
    <span class="nav-label">Search</span>
  </button>
  <button id="tab-bookmarks"
          class="btn btn-sm btn-ghost gap-1.5"
          title="Saved bookmarks">
    <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M5 3a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2H5z"/>
    </svg>
    <span class="nav-label">Bookmarks</span>
    <span id="bm-count" class="badge badge-xs badge-ghost hidden"></span>
  </button>
  <div class="flex-1"></div>
  <button id="btn-reset-search" class="btn btn-xs btn-ghost">Clear</button>
</div>

<div class="flex gap-0 h-[calc(100vh-196px)] min-h-[400px]">

  <!-- Left: tab content (search or bookmarks) -->
  <div class="flex flex-col bg-base-200 rounded-l-lg" style="flex:0 0 320px;min-width:200px">

    <!-- ── Search pane ── -->
    <div id="search-pane" class="flex flex-col flex-1 overflow-hidden">
      <div class="p-3 border-b border-base-content/10">
        <div class="relative">
          <input id="search-input" type="search" placeholder="Search nodes, ADRs, modes…"
                 class="input input-bordered input-sm w-full pr-8 font-mono"
                 autocomplete="off" autocorrect="off" spellcheck="false">
          <svg class="absolute right-2.5 top-2 w-4 h-4 text-base-content/30 pointer-events-none"
               fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
          </svg>
        </div>
      </div>
      <div id="results-count" class="px-3 py-1 text-xs text-base-content/40 border-b border-base-content/10 hidden"></div>
      <ul id="results-list" class="flex-1 overflow-y-auto divide-y divide-base-content/10 text-sm"></ul>
    </div>

    <!-- ── Bookmarks pane ── -->
    <div id="bookmarks-pane" class="flex flex-col flex-1 overflow-hidden hidden">
      <div class="flex items-center justify-between px-3 py-2 border-b border-base-content/10">
        <span class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
          Saved bookmarks
        </span>
        <button id="btn-clear-bookmarks"
                class="btn btn-ghost btn-xs text-base-content/30 hover:text-error">
          clear all
        </button>
      </div>
      <ul id="bookmarks-list" class="flex-1 overflow-y-auto divide-y divide-base-content/10 text-sm"></ul>
      <div id="bookmarks-empty" class="flex-1 flex items-center justify-center text-base-content/25 text-xs hidden">
        No bookmarks yet — star a result to save it
      </div>
    </div>
  </div>

  <!-- Resize handle -->
  <div id="search-resize" class="w-1.5 bg-base-300 hover:bg-primary/40 cursor-col-resize transition-colors flex-shrink-0"></div>

  <!-- Right: detail panel -->
  <div id="detail-panel" class="flex-1 bg-base-200 rounded-r-lg overflow-y-auto p-5 hidden min-w-[200px]">
    <!-- filled by JS -->
  </div>

  <!-- Empty right side when nothing selected -->
  <div id="detail-empty" class="flex-1 bg-base-200 rounded-r-lg flex items-center justify-center text-base-content/25 text-sm">
    <div class="text-center">
      <svg class="w-10 h-10 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
      </svg>
      Type to search, click a result to view
    </div>
  </div>

</div>
{% endblock content %}

{% block scripts %}
<script>
const slugInput    = document.getElementById('search-slug');
const input        = document.getElementById('search-input');
const resultsList  = document.getElementById('results-list');
const resultsCount = document.getElementById('results-count');
const detail       = document.getElementById('detail-panel');
const detailEmpty  = document.getElementById('detail-empty');
const resetBtn     = document.getElementById('btn-reset-search');
const resizeHandle = document.getElementById('search-resize');

const LEFT_PANEL = document.querySelector('#search-pane').closest('div.flex-col');
const CONTAINER  = LEFT_PANEL.parentElement;

let results = [];
let searchTimer = null;
let selectedItem = null;

// ── Tab switching ──────────────────────────────────────────────────────────

const tabSearch    = document.getElementById('tab-search');
const tabBm        = document.getElementById('tab-bookmarks');
const searchPane   = document.getElementById('search-pane');
const bookmarksPane = document.getElementById('bookmarks-pane');

const TAB_KEY = 'ontoref-search-tab';

function setTab(tab) {
  const isBm = tab === 'bookmarks';
  searchPane.classList.toggle('hidden', isBm);
  bookmarksPane.classList.toggle('hidden', !isBm);
  tabSearch.className = isBm ? 'btn btn-sm btn-ghost gap-1.5' : 'btn btn-sm btn-primary gap-1.5';
  tabBm.className     = isBm ? 'btn btn-sm btn-primary gap-1.5' : 'btn btn-sm btn-ghost gap-1.5';
  resetBtn.classList.toggle('hidden', isBm);
  try { localStorage.setItem(TAB_KEY, tab); } catch (_) {}
  if (isBm) renderBookmarks();
  else      { input.focus(); }
}

tabSearch.addEventListener('click', () => setTab('search'));
tabBm.addEventListener('click',     () => setTab('bookmarks'));

// ── Bookmarks ──────────────────────────────────────────────────────────────

const BM_KEY     = 'ontoref-bookmarks';
const bmList     = document.getElementById('bookmarks-list');
const bmCount    = document.getElementById('bm-count');
const bmEmpty    = document.getElementById('bookmarks-empty');
const bmClearBtn = document.getElementById('btn-clear-bookmarks');
const PROJECT    = slugInput.value || '__single__';

function loadBookmarks() {
  try { return JSON.parse(localStorage.getItem(BM_KEY) || '[]'); } catch(_) { return []; }
}
function saveBookmarks(bms) {
  try { localStorage.setItem(BM_KEY, JSON.stringify(bms)); } catch(_) {}
}
function bmKey(r) { return `${r.kind}:${r.id}:${PROJECT}`; }
function isBookmarked(r) { return loadBookmarks().some(b => b.key === bmKey(r)); }

function toggleBookmark(r) {
  let bms = loadBookmarks();
  const key = bmKey(r);
  const idx = bms.findIndex(b => b.key === key);
  if (idx >= 0) {
    bms.splice(idx, 1);
  } else {
    bms.unshift({ key, kind: r.kind, id: r.id, title: r.title,
                  description: r.description, project: PROJECT,
                  pole: r.pole || null, level: r.level || null,
                  saved: Date.now() });
  }
  saveBookmarks(bms);
  renderBookmarks();
  renderResults();
}

function renderBookmarks() {
  const bms = loadBookmarks().filter(b => b.project === PROJECT);
  if (bms.length > 0) {
    bmCount.textContent = bms.length;
    bmCount.classList.remove('hidden');
  } else {
    bmCount.classList.add('hidden');
  }

  if (bms.length === 0) {
    bmList.innerHTML = '';
    if (bmEmpty) bmEmpty.classList.remove('hidden');
    return;
  }
  if (bmEmpty) bmEmpty.classList.add('hidden');

  bmList.innerHTML = bms.map(b => `
    <li class="bm-item cursor-pointer hover:bg-base-300 transition-colors" data-key="${esc(b.key)}">
      <div class="px-3 py-2 flex items-center gap-2">
        <span class="badge badge-xs ${kindCls(b.kind)} flex-shrink-0">${b.kind}</span>
        <span class="text-xs font-medium truncate flex-1">${esc(b.title)}</span>
        <button class="btn-unbm btn btn-ghost btn-xs btn-circle flex-shrink-0 opacity-40 hover:opacity-100 hover:text-error" data-key="${esc(b.key)}" title="Remove">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </li>
  `).join('');

  bmList.querySelectorAll('.bm-item').forEach(el => {
    el.addEventListener('click', e => {
      if (e.target.closest('.btn-unbm')) return;
      const key = el.dataset.key;
      const bm  = loadBookmarks().find(b => b.key === key);
      if (!bm) return;
      if (selectedItem) selectedItem.classList.remove('bg-base-200');
      selectedItem = null;
      showDetailBm(bm);
    });
  });

  bmList.querySelectorAll('.btn-unbm').forEach(el => {
    el.addEventListener('click', e => {
      e.stopPropagation();
      const key = el.dataset.key;
      saveBookmarks(loadBookmarks().filter(b => b.key !== key));
      renderBookmarks();
      renderResults();
    });
  });
}

function showDetailBm(bm) {
  detail.classList.remove('hidden');
  detailEmpty.classList.add('hidden');
  detail.innerHTML = `
    <div class="flex items-start justify-between mb-3">
      <div class="flex-1 min-w-0">
        <h2 class="font-bold text-base leading-tight">${esc(bm.title)}</h2>
        <div class="flex flex-wrap gap-1 mt-1.5">
          <span class="badge badge-xs ${kindCls(bm.kind)}">${bm.kind}</span>
          ${bm.level ? `<span class="badge badge-xs badge-ghost">${esc(bm.level)}</span>` : ''}
          ${bm.pole  ? `<span class="badge badge-xs" style="background:${poleColor(bm.pole)};color:#111;border:none">${esc(bm.pole)}</span>` : ''}
        </div>
      </div>
      <button class="btn btn-ghost btn-xs btn-circle text-warning" title="Remove bookmark"
              onclick="toggleBookmark(${JSON.stringify(bm).replace(/</g,'\\u003c')})">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
          <path d="M5 3a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2H5z"/>
        </svg>
      </button>
    </div>
    <p class="text-xs text-base-content/40 mb-3">${esc(bm.description)}</p>
    <p class="text-xs font-mono text-base-content/30">id: ${esc(bm.id)}</p>
  `;
}

bmClearBtn.addEventListener('click', () => {
  saveBookmarks(loadBookmarks().filter(b => b.project !== PROJECT));
  renderBookmarks();
  renderResults();
});

// ── Persistence ────────────────────────────────────────────────────────────

const STORAGE_KEY = 'ontoref-search:' + PROJECT;

function saveQuery(q) { try { sessionStorage.setItem(STORAGE_KEY, q); } catch (_) {} }
function loadQuery()  { try { return sessionStorage.getItem(STORAGE_KEY) || ''; } catch (_) { return ''; } }

// ── Search ─────────────────────────────────────────────────────────────────

input.addEventListener('input', () => {
  saveQuery(input.value);
  clearTimeout(searchTimer);
  searchTimer = setTimeout(doSearch, 280);
});
input.addEventListener('keydown', e => { if (e.key === 'Escape') { reset(); e.preventDefault(); } });

async function doSearch() {
  const q = input.value.trim();
  if (!q) { clearResults(); return; }
  const slug = slugInput.value;
  const url  = `/search?q=${encodeURIComponent(q)}${slug ? `&slug=${encodeURIComponent(slug)}` : ''}`;
  let data;
  try {
    const res = await fetch(url);
    data = await res.json();
  } catch (err) {
    resultsCount.textContent = 'Search error';
    resultsCount.classList.remove('hidden');
    return;
  }
  results = data.results || [];
  renderResults();
}

function renderResults() {
  if (results.length === 0) {
    resultsList.innerHTML = '<li class="px-3 py-8 text-center text-xs text-base-content/40">No results</li>';
    resultsCount.textContent = '0 results';
    resultsCount.classList.remove('hidden');
    return;
  }
  resultsCount.textContent = `${results.length} result${results.length === 1 ? '' : 's'}`;
  resultsCount.classList.remove('hidden');

  resultsList.innerHTML = results.map((r, i) => {
    const starred = isBookmarked(r);
    return `
    <li class="result-item cursor-pointer hover:bg-base-300 transition-colors" data-idx="${i}">
      <div class="px-3 py-2.5 flex items-start gap-1">
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-1 mb-1">
            <span class="badge badge-xs ${kindCls(r.kind)}">${r.kind}</span>
            ${r.level ? `<span class="badge badge-xs badge-ghost">${esc(r.level)}</span>` : ''}
            ${r.pole  ? `<span class="badge badge-xs" style="background:${poleColor(r.pole)};color:#111;border:none">${esc(r.pole)}</span>` : ''}
          </div>
          <div class="text-sm font-medium leading-tight truncate">${esc(r.title)}</div>
          <div class="text-xs text-base-content/50 leading-tight truncate mt-0.5">${esc(r.description)}</div>
        </div>
        <button class="btn-star btn btn-ghost btn-xs btn-circle flex-shrink-0 mt-0.5 ${starred ? 'text-warning' : 'text-base-content/20 hover:text-warning'}"
                data-idx="${i}" title="${starred ? 'Remove bookmark' : 'Bookmark'}">
          <svg class="w-3.5 h-3.5" fill="${starred ? 'currentColor' : 'none'}" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2H5z"/>
          </svg>
        </button>
      </div>
    </li>`;
  }).join('');

  document.querySelectorAll('.result-item').forEach(el => {
    el.addEventListener('click', e => {
      if (e.target.closest('.btn-star')) return;
      if (selectedItem) selectedItem.classList.remove('bg-base-200');
      el.classList.add('bg-base-200');
      selectedItem = el;
      showDetail(parseInt(el.dataset.idx));
    });
  });
  document.querySelectorAll('.btn-star').forEach(el => {
    el.addEventListener('click', e => {
      e.stopPropagation();
      toggleBookmark(results[parseInt(el.dataset.idx)]);
    });
  });
}

function showDetail(idx) {
  const r = results[idx];
  const starred = isBookmarked(r);
  detail.classList.remove('hidden');
  detailEmpty.classList.add('hidden');
  detail.innerHTML = `
    <div class="flex items-start justify-between mb-3">
      <div class="flex-1 min-w-0">
        <h2 class="font-bold text-base leading-tight">${esc(r.title)}</h2>
        <div class="flex flex-wrap gap-1 mt-1.5">
          <span class="badge badge-xs ${kindCls(r.kind)}">${r.kind}</span>
          ${r.level ? `<span class="badge badge-xs badge-ghost">${esc(r.level)}</span>` : ''}
          ${r.pole  ? `<span class="badge badge-xs" style="background:${poleColor(r.pole)};color:#111;border:none">${esc(r.pole)}</span>` : ''}
        </div>
      </div>
      <button id="detail-star" class="btn btn-ghost btn-xs btn-circle ${starred ? 'text-warning' : 'text-base-content/25 hover:text-warning'}" title="${starred ? 'Remove bookmark' : 'Bookmark this'}">
        <svg class="w-4 h-4" fill="${starred ? 'currentColor' : 'none'}" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2H5z"/>
        </svg>
      </button>
    </div>
    <p class="text-xs font-mono text-base-content/30 mb-4 truncate">${esc(r.path)}</p>
    <div class="space-y-1 text-sm">${r.detail_html}</div>
  `;
  document.getElementById('detail-star').addEventListener('click', () => {
    toggleBookmark(r);
    showDetail(idx);
  });
}

function clearResults() {
  results = [];
  resultsList.innerHTML = '';
  resultsCount.classList.add('hidden');
  detail.classList.add('hidden');
  detail.innerHTML = '';
  detailEmpty.classList.remove('hidden');
  selectedItem = null;
}
function reset() { input.value = ''; saveQuery(''); clearResults(); input.focus(); }
resetBtn.addEventListener('click', reset);

// ── Resize handle ──────────────────────────────────────────────────────────

let resizing = false;
resizeHandle.addEventListener('mousedown', e => {
  resizing = true;
  document.body.style.cursor = 'col-resize';
  document.body.style.userSelect = 'none';
  e.preventDefault();
});
document.addEventListener('mousemove', e => {
  if (!resizing) return;
  const rect = CONTAINER.getBoundingClientRect();
  const newW = Math.max(160, Math.min(e.clientX - rect.left, rect.width * 0.6));
  LEFT_PANEL.style.flex = `0 0 ${newW}px`;
});
document.addEventListener('mouseup', () => {
  if (!resizing) return;
  resizing = false;
  document.body.style.cursor = '';
  document.body.style.userSelect = '';
});

// ── Helpers ────────────────────────────────────────────────────────────────

function kindCls(kind)  { return { node: 'badge-primary', adr: 'badge-secondary', mode: 'badge-accent' }[kind] || 'badge-neutral'; }
function poleColor(p)   { return { Yang: '#f59e0b', Yin: '#3b82f6', Spiral: '#8b5cf6' }[p] || '#6b7280'; }
function esc(s)         { return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

// ── Init ───────────────────────────────────────────────────────────────────

renderBookmarks();
const savedTab = (() => { try { return localStorage.getItem(TAB_KEY); } catch (_) { return null; } })();
setTab(savedTab === 'bookmarks' ? 'bookmarks' : 'search');

const savedQuery = loadQuery();
if (savedQuery) { input.value = savedQuery; doSearch(); }
</script>
{% endblock scripts %}
