{% extends "_base.html" %}
{% from "_partials.html" import status_pill, fresh_label %}
{% set active = 'search' %}
{% block title %}trovex — search{% endblock %}

{% block topbar_meta %}
  <span class="mono">{{ "{:,}".format(total) }} docs indexed</span>
{% endblock %}

{% block content %}
<div class="search-head">
  <h1 class="search-title">
    <svg class="icon" aria-hidden="true" style="color: var(--accent); vertical-align:-0.12em;"><use href="#i-search"></use></svg>
    Ask once, get the canonical answer
  </h1>
  <p class="search-lede subtle mono">
    one source of truth for your agents — semantic retrieval, freshness-aware,
    ranked by relevance
  </p>
</div>

<form id="search-form" action="/search" method="get" autocomplete="off"
      hx-get="/search/partial"
      hx-target="#results"
      hx-swap="innerHTML"
      hx-trigger="keyup changed delay:250ms from:input[name=q], change from:select, submit"
      hx-push-url="true"
      hx-indicator="#results-loader">
  <div class="search-shell">
    <span class="prefix" aria-hidden="true"><svg class="icon"><use href="#i-search"></use></svg></span>
    <input type="text" name="q" class="input search-input mono"
           value="{{ q }}"
           placeholder="search docs — semantic, frontmatter-aware, ranked"
           autofocus
           role="combobox"
           aria-autocomplete="list"
           aria-controls="suggest-list"
           aria-expanded="false"
           aria-label="Search query">
    <div class="suffix">
      <span id="results-loader" class="htmx-indicator mono"
            style="font-size: var(--t-11); color: var(--fg-subtle);">…</span>
      <span class="kbd">↵</span>
    </div>
    <ul id="suggest-list" class="suggest" role="listbox" hidden></ul>
  </div>

  {# active tags travel with the form so q/kind/sort changes keep them #}
  {% for t in tags %}<input type="hidden" name="tag" value="{{ t }}">{% endfor %}
  <div style="display: flex; gap: var(--s-3); align-items: center;
              margin-top: var(--s-3); flex-wrap: wrap;">
    <label class="ctl">kind
      <select name="kind" class="ctl-select">
        <option value="" {% if not kind %}selected{% endif %}>all</option>
        <option value="record" {% if kind == 'record' %}selected{% endif %}>record</option>
        <option value="note" {% if kind == 'note' %}selected{% endif %}>note</option>
        <option value="reference" {% if kind == 'reference' %}selected{% endif %}>reference</option>
      </select>
    </label>
    <label class="ctl">sort
      <select name="sort" class="ctl-select">
        <option value="relevance" {% if sort == 'relevance' %}selected{% endif %}>relevance</option>
        <option value="recent" {% if sort == 'recent' %}selected{% endif %}>recent</option>
        <option value="tokens" {% if sort == 'tokens' %}selected{% endif %}>tokens</option>
      </select>
    </label>
    {% for at in active_tags %}
    <a class="active-tag" title="remove tag" href="{{ at.url }}">{{ at.tag }} ✕</a>
    {% endfor %}
    {% if has_filters %}
    <a class="active-tag clear-all" title="clear all filters" href="{{ clear_url }}">clear all ✕</a>
    {% endif %}
    <span class="subtle mono search-shortcuts" style="font-size: var(--t-11); margin-left: auto;">
      <span class="kbd">esc</span> clear · <span class="kbd">/</span> focus · <span class="kbd">↑↓</span> nav · <span class="kbd">↵</span> open
    </span>
  </div>
</form>

<div class="fresh-legend mono" aria-hidden="true">
  <span class="fresh-legend-label">freshness</span>
  <span class="fresh-legend-item" data-s="canonical"><span class="fresh-dot"></span>canonical — trust this</span>
  <span class="fresh-legend-item" data-s="stale"><span class="fresh-dot"></span>stale — verify before use</span>
  <span class="fresh-legend-item" data-s="duplicate"><span class="fresh-dot"></span>duplicate — superseded</span>
</div>

<div class="results-skeleton" style="margin-top: var(--s-6);" aria-hidden="true">
  {% for _ in range(4) %}
  <div class="skeleton-item">
    <div class="sk-line sk-w-40"></div>
    <div class="sk-line sk-w-90"></div>
    <div class="sk-line sk-w-70"></div>
  </div>
  {% endfor %}
</div>

<div id="results" role="region" aria-live="polite" aria-busy="false"
     style="margin-top: var(--s-6);">
  {% include "_results.html" %}
</div>

<style>
  .suggest {
    position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    list-style: none;
    margin: 0; padding: 4px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .suggest-item {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--t-13);
    color: var(--fg);
  }
  .suggest-item:hover, .suggest-item[aria-selected="true"] {
    background: var(--bg-hover);
  }
  .suggest-item .suggest-icon {
    color: var(--fg-subtle);
    font-size: var(--t-11);
  }
  .suggest-item .suggest-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .suggest-item .suggest-count {
    color: var(--fg-faint);
    font-size: var(--t-11);
  }
  .suggest-empty {
    padding: 12px;
    color: var(--fg-subtle);
    font-family: var(--font-mono);
    font-size: var(--t-12);
    text-align: center;
  }
  mark.hl {
    background: var(--accent-soft);
    color: var(--accent);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 500;
  }
  .result-section {
    margin-top: 3px;
    font-size: var(--t-12);
    color: var(--fg-subtle);
    overflow-wrap: anywhere;
  }
  .result-snippet {
    margin-top: var(--s-2);
    font-size: var(--t-13);
    line-height: 1.6;
    color: var(--fg-muted);
  }
  /* Whole content block is one link → click anywhere opens the doc. */
  .result-main { display: block; color: inherit; }
  .result-main:hover .result-path { color: var(--accent); }
  .result-chips { margin-top: var(--s-3); }
  .chips { display: flex; flex-wrap: wrap; gap: 4px; }
  .chip {
    font-family: var(--font-mono); font-size: 10px;
    padding: 1px 6px; border-radius: 999px;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--fg-muted);
  }
  .chip:hover { color: var(--accent); border-color: var(--accent-line); }
  .chip-active { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
  /* Advanced-search controls */
  .ctl {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: var(--t-11);
    color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.06em;
  }
  .ctl-select {
    font-family: var(--font-mono); font-size: var(--t-12);
    color: var(--fg); background: var(--bg-input);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 3px 8px; cursor: pointer;
  }
  .ctl-select:hover { border-color: var(--border-strong); }
  .active-tag {
    font-family: var(--font-mono); font-size: var(--t-11);
    color: var(--accent); background: var(--accent-soft);
    border: 1px solid var(--accent-line); border-radius: 999px;
    padding: 2px 10px;
  }
  .active-tag:hover { color: var(--accent); }
  .clear-all { color: var(--fg-muted); background: var(--bg-input); border-color: var(--border); }
  .clear-all:hover { color: var(--stale); border-color: var(--stale); }

  .results-bar {
    font-size: var(--t-11); margin-bottom: var(--s-3);
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  }
  .results-bar-status { display: inline-flex; gap: var(--s-3); flex-wrap: wrap; }
  .rbs { display: inline-flex; align-items: center; gap: 5px; }
  .rbs-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
  .rbs-canonical { color: var(--canonical); } .rbs-canonical .rbs-dot { background: var(--canonical); }
  .rbs-stale     { color: var(--stale); }     .rbs-stale .rbs-dot     { background: var(--stale); }
  .rbs-duplicate { color: var(--duplicate); } .rbs-duplicate .rbs-dot { background: var(--duplicate); }

  /* Faceted refine row */
  .facets {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-bottom: var(--s-4); padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border);
  }
  .facets-label {
    font-family: var(--font-mono); font-size: var(--t-11);
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle);
    margin-right: var(--s-2);
  }
  .facet {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: var(--t-11);
    padding: 2px 8px; border-radius: 999px;
    background: var(--bg-input); border: 1px solid var(--border); color: var(--fg-muted);
  }
  .facet:hover { color: var(--accent); border-color: var(--accent-line); }
  .facet-n { color: var(--fg-faint); font-size: 10px; }

  /* Result list (semantic + keyboard nav) */
  .result-list { list-style: none; margin: 0; padding: 0; }
  .result-list > li + li { margin-top: var(--s-3); }
  .result.kb-active {
    border-color: var(--accent-line);
    box-shadow: 0 0 0 1px var(--accent-line);
  }

  /* Pager */
  .pager {
    display: flex; align-items: center; justify-content: center; gap: var(--s-4);
    margin-top: var(--s-6); font-family: var(--font-mono); font-size: var(--t-12);
  }
  .pager a { color: var(--accent); }

  .empty-action {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--s-3); padding: 6px 12px;
    font-family: var(--font-mono); font-size: var(--t-12);
    color: var(--accent); background: var(--accent-soft);
    border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  }

  /* ── Page header ────────────────────────────────────── */
  .search-head { margin-bottom: var(--s-5); }
  .search-title {
    display: flex; align-items: center; gap: var(--s-3);
    margin-bottom: var(--s-2);
  }
  .search-lede {
    margin: 0; font-size: var(--t-12); max-width: 60ch; line-height: 1.6;
  }

  /* ── Freshness legend (teaches the canonical/stale vocabulary) ── */
  .fresh-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
    margin-top: var(--s-4);
    font-size: var(--t-11); color: var(--fg-subtle);
  }
  .fresh-legend-label {
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--fg-faint);
  }
  .fresh-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .fresh-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
  .fresh-legend-item[data-s="canonical"] .fresh-dot { background: var(--canonical); box-shadow: 0 0 6px var(--canonical-bg); }
  .fresh-legend-item[data-s="stale"]     .fresh-dot { background: var(--stale); }
  .fresh-legend-item[data-s="duplicate"] .fresh-dot { background: var(--duplicate); }

  /* ── Status-keyed left rail on each result ──────────── */
  .result {
    position: relative; overflow: hidden;
    border-left: 2px solid var(--border);
  }
  /* color the rail by freshness — pill text/glyph/age remain the primary cue */
  .result[data-status="canonical"] { border-left-color: var(--accent-line); }
  .result[data-status="stale"]     { border-left-color: var(--stale); }
  .result[data-status="duplicate"] { border-left-color: var(--duplicate); }
  .result[data-status="stale"],
  .result[data-status="duplicate"] { background: var(--bg-elevated); }

  /* Promote the top canonical hit — "this is the one to trust" */
  .result-list > li:first-child .result[data-status="canonical"] {
    border-color: var(--accent-line);
    box-shadow: inset 2px 0 0 var(--accent), 0 0 0 1px var(--accent-line);
    background:
      linear-gradient(90deg, var(--accent-soft), transparent 38%),
      var(--bg-card);
  }
  .canonical-flag {
    display: none;
    align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: var(--t-11); font-weight: 500;
    color: var(--accent); letter-spacing: 0.02em;
    margin-bottom: var(--s-2);
  }
  .result-list > li:first-child .result[data-status="canonical"] .canonical-flag {
    display: inline-flex;
  }

  /* ── Score tiers — weak matches read as weak ────────── */
  .score-fill[data-tier="high"] { background: linear-gradient(90deg, var(--accent-line), var(--accent)); }
  .score-fill[data-tier="mid"]  { background: linear-gradient(90deg, var(--duplicate-bg), var(--duplicate)); }
  .score-fill[data-tier="low"]  { background: var(--fg-faint); }
  .score-bar .score-num { width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

  /* ── Loading skeletons (reserve space, no CLS, >300ms feedback) ── */
  /* htmx puts .htmx-request on #search-form while the swap is in flight; we
     reveal the skeleton and dim the stale results until the new ones land. */
  .results-skeleton { display: none; }
  #search-form.htmx-request ~ #results { opacity: 0.35; transition: opacity var(--duration); }
  #search-form.htmx-request ~ .results-skeleton { display: block; }
  .skeleton-item {
    padding: var(--s-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 2px solid var(--border);
    border-radius: var(--radius);
  }
  .skeleton-item + .skeleton-item { margin-top: var(--s-3); }
  .sk-line {
    height: 10px; border-radius: 999px;
    background: linear-gradient(90deg, var(--bg-input) 0%, var(--bg-hover) 50%, var(--bg-input) 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.2s ease-in-out infinite;
  }
  .sk-line + .sk-line { margin-top: var(--s-3); }
  .sk-w-40 { width: 40%; } .sk-w-70 { width: 70%; } .sk-w-90 { width: 90%; }
  @keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }

  @media (max-width: 640px) {
    .search-shortcuts { display: none; }
    .fresh-legend { gap: var(--s-3); }
  }
</style>

<script>
  (function () {
    const input = document.querySelector('input[name="q"]');
    const list = document.getElementById('suggest-list');
    if (!input || !list) return;

    let activeIdx = -1;
    let lastFetched = '';
    let fetchToken = 0;

    function close() {
      list.hidden = true;
      input.setAttribute('aria-expanded', 'false');
      activeIdx = -1;
    }
    function open() {
      list.hidden = false;
      input.setAttribute('aria-expanded', 'true');
    }
    function highlight(idx) {
      const items = list.querySelectorAll('.suggest-item');
      items.forEach((el, i) => el.setAttribute('aria-selected', i === idx ? 'true' : 'false'));
      activeIdx = idx;
    }

    async function load(prefix) {
      const token = ++fetchToken;
      try {
        const r = await fetch('/api/suggest?q=' + encodeURIComponent(prefix));
        if (token !== fetchToken) return;  // stale
        const data = await r.json();
        if (data.length === 0) { close(); return; }
        list.innerHTML = data.map(d =>
          '<li class="suggest-item" role="option" data-q="' + d.q.replace(/"/g, '&quot;') + '">' +
            '<span class="suggest-icon">↗</span>' +
            '<span class="suggest-text">' + d.q.replace(/</g, '&lt;') + '</span>' +
            '<span class="suggest-count">' + d.n + '×</span>' +
          '</li>'
        ).join('');
        list.querySelectorAll('.suggest-item').forEach(el => {
          el.addEventListener('mousedown', function (e) {
            e.preventDefault();
            input.value = el.dataset.q;
            close();
            htmx.trigger('#search-form', 'submit');
          });
        });
        open();
        highlight(-1);
      } catch (e) { /* silent */ }
    }

    input.addEventListener('input', function () {
      const v = input.value.trim();
      if (v.length === 0) { lastFetched = ''; load(''); return; }  // recent searches
      if (v.length < 2) { close(); return; }
      if (v === lastFetched) return;
      lastFetched = v;
      load(v);
    });

    input.addEventListener('keydown', function (e) {
      if (list.hidden) return;
      const items = list.querySelectorAll('.suggest-item');
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        highlight((activeIdx + 1) % items.length);
        items[activeIdx]?.scrollIntoView({ block: 'nearest' });
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        highlight(activeIdx <= 0 ? items.length - 1 : activeIdx - 1);
        items[activeIdx]?.scrollIntoView({ block: 'nearest' });
      } else if (e.key === 'Enter' && activeIdx >= 0) {
        e.preventDefault();
        input.value = items[activeIdx].dataset.q;
        close();
        htmx.trigger('#search-form', 'submit');
      } else if (e.key === 'Escape') {
        close();
      }
    });

    input.addEventListener('blur', function () { setTimeout(close, 150); });
    input.addEventListener('focus', function () {
      const v = input.value.trim();
      if (v.length === 0) { load(''); }                 // show recent searches
      else if (v.length >= 2 && list.children.length > 0) { open(); }
    });
  })();
</script>
<script>
  // Keyboard navigation through results: ↑/↓ (or j/k) move, ↵ opens. The
  // autocomplete owns the arrows while its dropdown is open; we take over once
  // it's closed.
  (function () {
    const results = () => Array.from(document.querySelectorAll('.result-list .result'));
    let idx = -1;
    function setActive(n) {
      const r = results();
      if (!r.length) return;
      idx = Math.max(0, Math.min(n, r.length - 1));
      r.forEach((el, i) => el.classList.toggle('kb-active', i === idx));
      r[idx].scrollIntoView({ block: 'nearest' });
    }
    document.addEventListener('keydown', function (e) {
      const suggest = document.getElementById('suggest-list');
      if (suggest && !suggest.hidden) return;  // autocomplete owns the arrows
      const tag = (e.target.tagName || '').toLowerCase();
      const inField = tag === 'input' || tag === 'textarea' || tag === 'select';
      if (inField) {
        // From the query box, ↓ jumps focus into the result list.
        if (e.key === 'ArrowDown') { e.preventDefault(); e.target.blur(); setActive(idx < 0 ? 0 : idx); }
        return;
      }
      if (!results().length) return;
      if (e.key === 'ArrowDown' || e.key === 'j') { e.preventDefault(); setActive(idx + 1); }
      else if (e.key === 'ArrowUp' || e.key === 'k') { e.preventDefault(); setActive(idx - 1); }
      else if (e.key === 'Enter' && idx >= 0) {
        const href = results()[idx].dataset.href;
        if (href) location.href = href;
      }
    });
    document.body.addEventListener('htmx:afterSwap', function (e) {
      if (e.target && e.target.id === 'results') idx = -1;  // reset on new results
    });
  })();
</script>
{% endblock %}