{% extends "base.html" %}
{% block title %}Search - SupportHub{% endblock %}
{% block content %}
<div class="p-6 max-w-5xl mx-auto">
  {# Header #}
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Search</h1>
    <div id="search-stats" class="text-sm text-gray-500 dark:text-gray-400 hidden"></div>
  </div>

  {# Search container #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-4 mb-4">
    {# Search input #}
    <div class="relative">
      <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 text-xl">search</span>
      <input type="text" id="search-input" autocomplete="off" placeholder="Describe the issue you're looking for..."
             class="w-full pl-10 pr-10 py-3 text-base rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors">
      <div id="search-spinner" class="absolute right-3 top-1/2 -translate-y-1/2 hidden">
        <svg class="animate-spin h-5 w-5 text-brand-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
      </div>
    </div>

    {# Filters row #}
    <div class="flex flex-wrap items-center gap-3 mt-3">
      {# Extended toggle #}
      <label class="flex items-center gap-2 cursor-pointer select-none">
        <button type="button" id="extended-toggle" role="switch" aria-checked="false"
                class="relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none bg-gray-200 dark:bg-gray-700"
                onclick="toggleExtended()">
          <span class="pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition duration-200 ease-in-out translate-x-0"></span>
        </button>
        <span class="text-sm text-gray-600 dark:text-gray-400">Extended Search</span>
      </label>

      <div class="h-5 w-px bg-gray-300 dark:bg-gray-600"></div>

      {# Status chips #}
      <div id="status-chips" class="flex items-center gap-1">
        <button data-status="" class="status-chip active px-2.5 py-1 rounded-full text-xs font-medium transition-colors">All</button>
        <button data-status="open" class="status-chip px-2.5 py-1 rounded-full text-xs font-medium transition-colors">Open</button>
        <button data-status="in_progress" class="status-chip px-2.5 py-1 rounded-full text-xs font-medium transition-colors">In Progress</button>
        <button data-status="waiting_customer" class="status-chip px-2.5 py-1 rounded-full text-xs font-medium transition-colors">Waiting</button>
        <button data-status="closed" class="status-chip px-2.5 py-1 rounded-full text-xs font-medium transition-colors">Closed</button>
      </div>

      <div class="h-5 w-px bg-gray-300 dark:bg-gray-600"></div>

      {# Product dropdown #}
      <select id="product-filter" class="text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-brand-500">
        <option value="">All Products</option>
        {% for p in products %}
        <option value="{{ p.id }}">{{ p.name }}</option>
        {% endfor %}
      </select>
    </div>

    {# Index status #}
    {% if rag_enabled and index_count > 0 %}
    <div class="flex items-center gap-1.5 mt-2 text-xs text-gray-500 dark:text-gray-400">
      <span class="material-symbols-outlined text-green-500 text-sm">check_circle</span>
      {{ index_count | int }} threads indexed
    </div>
    {% elif not rag_enabled %}
    <div class="flex items-center gap-1.5 mt-2 text-xs text-amber-600 dark:text-amber-400">
      <span class="material-symbols-outlined text-sm">warning</span>
      RAG disabled — semantic search unavailable
    </div>
    {% endif %}
  </div>

  {# Results area #}
  <div id="results-area">
    {# Initial state #}
    <div id="initial-state" class="flex flex-col items-center py-16 text-gray-400 dark:text-gray-500">
      <span class="material-symbols-outlined text-6xl mb-4">manage_search</span>
      <p class="text-lg font-medium mb-2">Search your support history</p>
      <p class="text-sm mb-4">Describe an issue in natural language to find related tickets</p>
      <div class="flex flex-wrap gap-2 justify-center">
        <button onclick="trySuggestion(this)" class="suggestion-chip px-3 py-1.5 rounded-full text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-600 dark:hover:text-brand-400 transition-colors cursor-pointer">module installation error 500</button>
        <button onclick="trySuggestion(this)" class="suggestion-chip px-3 py-1.5 rounded-full text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-600 dark:hover:text-brand-400 transition-colors cursor-pointer">cookie consent not showing</button>
        <button onclick="trySuggestion(this)" class="suggestion-chip px-3 py-1.5 rounded-full text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-600 dark:hover:text-brand-400 transition-colors cursor-pointer">performance slow page load</button>
        <button onclick="trySuggestion(this)" class="suggestion-chip px-3 py-1.5 rounded-full text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-600 dark:hover:text-brand-400 transition-colors cursor-pointer">multistore compatibility</button>
      </div>
    </div>

    {# Results container #}
    <div id="results-container" class="space-y-3 hidden"></div>

    {# No results #}
    <div id="no-results" class="flex flex-col items-center py-16 text-gray-400 dark:text-gray-500 hidden">
      <span class="material-symbols-outlined text-5xl mb-3">search_off</span>
      <p class="text-lg font-medium mb-1">No matching tickets found</p>
      <p class="text-sm" id="no-results-hint">Try different keywords or enable Extended Search for keyword matching</p>
    </div>

    {# Error state #}
    <div id="error-state" class="flex flex-col items-center py-16 text-gray-400 dark:text-gray-500 hidden">
      <span class="material-symbols-outlined text-5xl mb-3 text-red-400">cloud_off</span>
      <p class="text-lg font-medium mb-1" id="error-message">Search unavailable</p>
      <button onclick="doSearch()" class="mt-3 px-4 py-2 rounded-lg text-sm font-medium bg-brand-600 text-white hover:bg-brand-700 transition-colors">Retry</button>
    </div>
  </div>
</div>

<style>
  .status-chip { background: transparent; color: #6b7280; }
  .dark .status-chip { color: #9ca3af; }
  .status-chip:hover { background: #f3f4f6; }
  .dark .status-chip:hover { background: #374151; }
  .status-chip.active { background: #eef2ff; color: #4338ca; }
  .dark .status-chip.active { background: rgba(99,102,241,.1); color: #818cf8; }

  @keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .search-card { animation: cardFadeIn 0.3s ease-out forwards; opacity: 0; }
</style>

<script>
(function(){
  const input = document.getElementById('search-input');
  const spinner = document.getElementById('search-spinner');
  const statsEl = document.getElementById('search-stats');
  const initialState = document.getElementById('initial-state');
  const resultsContainer = document.getElementById('results-container');
  const noResults = document.getElementById('no-results');
  const errorState = document.getElementById('error-state');
  const errorMsg = document.getElementById('error-message');
  const noResultsHint = document.getElementById('no-results-hint');

  let debounceTimer = null;
  let abortController = null;
  let extendedOn = localStorage.getItem('search_extended') === '1';
  let activeStatus = '';
  let activeCard = -1;

  // Initialize extended toggle
  const toggle = document.getElementById('extended-toggle');
  if (extendedOn) applyExtendedState(true);

  // Restore from URL params
  const params = new URLSearchParams(location.search);
  if (params.get('q')) {
    input.value = params.get('q');
    if (params.get('status')) setActiveStatus(params.get('status'));
    if (params.get('product')) document.getElementById('product-filter').value = params.get('product');
    if (params.get('extended') === '1') { extendedOn = true; applyExtendedState(true); }
    setTimeout(() => doSearch(), 100);
  }

  // Search-as-you-type
  input.addEventListener('input', function() {
    showSpinner();
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => doSearch(), 500);
  });

  input.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') { clearTimeout(debounceTimer); doSearch(); }
    if (e.key === 'Escape') { input.value = ''; showState('initial'); updateUrl(); }
    if (e.key === 'ArrowDown') { e.preventDefault(); navigateCards(1); }
    if (e.key === 'ArrowUp') { e.preventDefault(); navigateCards(-1); }
  });

  // Global / shortcut
  document.addEventListener('keydown', function(e) {
    if (e.key === '/' && document.activeElement !== input && !e.ctrlKey && !e.metaKey) {
      e.preventDefault();
      input.focus();
    }
  });

  // Status chips
  document.querySelectorAll('.status-chip').forEach(btn => {
    btn.addEventListener('click', function() {
      setActiveStatus(this.dataset.status);
      if (input.value.trim().length >= 2) doSearch();
    });
  });

  // Product filter
  document.getElementById('product-filter').addEventListener('change', function() {
    if (input.value.trim().length >= 2) doSearch();
  });

  function setActiveStatus(status) {
    activeStatus = status;
    document.querySelectorAll('.status-chip').forEach(c => {
      c.classList.toggle('active', c.dataset.status === status);
    });
  }

  window.toggleExtended = function() {
    extendedOn = !extendedOn;
    localStorage.setItem('search_extended', extendedOn ? '1' : '0');
    applyExtendedState(extendedOn);
    if (input.value.trim().length >= 2) doSearch();
  };

  function applyExtendedState(on) {
    const t = document.getElementById('extended-toggle');
    const knob = t.querySelector('span');
    t.setAttribute('aria-checked', on);
    if (on) {
      t.classList.remove('bg-gray-200', 'dark:bg-gray-700');
      t.classList.add('bg-brand-600');
      knob.classList.remove('translate-x-0');
      knob.classList.add('translate-x-4');
    } else {
      t.classList.add('bg-gray-200', 'dark:bg-gray-700');
      t.classList.remove('bg-brand-600');
      knob.classList.add('translate-x-0');
      knob.classList.remove('translate-x-4');
    }
  }

  window.trySuggestion = function(btn) {
    input.value = btn.textContent;
    input.focus();
    doSearch();
  };

  window.doSearch = doSearch;
  function doSearch() {
    const q = input.value.trim();
    if (q.length < 2) { showState('initial'); hideSpinner(); return; }

    showSpinner();
    if (abortController) abortController.abort();
    abortController = new AbortController();

    const fd = new FormData();
    fd.append('query', q);
    fd.append('extended', extendedOn ? '1' : '0');
    if (activeStatus) fd.append('status', activeStatus);
    const prodVal = document.getElementById('product-filter').value;
    if (prodVal) fd.append('product_id', prodVal);

    updateUrl(q);

    fetch('/api/search', {
      method: 'POST',
      headers: { 'X-CSRFToken': getCsrf() },
      body: fd,
      signal: abortController.signal,
    })
    .then(r => r.json())
    .then(data => {
      if (!extendedOn) return data;
      // Artificial thinking delay for extended search (2-4s)
      const delay = 2000 + Math.random() * 2000;
      return new Promise(res => setTimeout(() => res(data), delay));
    })
    .then(data => {
      hideSpinner();
      if (data.error && data.total === 0) {
        errorMsg.textContent = data.error;
        showState('error');
        return;
      }
      if (data.total === 0) {
        noResultsHint.textContent = extendedOn
          ? 'Try different keywords or broaden your search'
          : 'Try different keywords or enable Extended Search for keyword matching';
        showState('no-results');
      } else {
        renderResults(data);
        showState('results');
      }
      // Stats
      let statParts = [`${data.total} result${data.total !== 1 ? 's' : ''}`];
      if (data.query_time_ms) statParts.push(`${data.query_time_ms}ms`);
      if (data.semantic_count > 0) statParts.push(`${data.semantic_count} semantic`);
      if (data.keyword_count > 0) statParts.push(`${data.keyword_count} keyword`);
      statsEl.textContent = statParts.join(' \u00B7 ');
      statsEl.classList.remove('hidden');
    })
    .catch(err => {
      if (err.name === 'AbortError') return;
      hideSpinner();
      errorMsg.textContent = 'Network error';
      showState('error');
    });
  }

  function showState(state) {
    initialState.classList.toggle('hidden', state !== 'initial');
    resultsContainer.classList.toggle('hidden', state !== 'results');
    noResults.classList.toggle('hidden', state !== 'no-results');
    errorState.classList.toggle('hidden', state !== 'error');
    if (state === 'initial') statsEl.classList.add('hidden');
    activeCard = -1;
  }

  function showSpinner() { spinner.classList.remove('hidden'); }
  function hideSpinner() { spinner.classList.add('hidden'); }

  function updateUrl(q) {
    const p = new URLSearchParams();
    if (q) p.set('q', q);
    if (activeStatus) p.set('status', activeStatus);
    const prod = document.getElementById('product-filter').value;
    if (prod) p.set('product', prod);
    if (extendedOn) p.set('extended', '1');
    const qs = p.toString();
    history.replaceState(null, '', qs ? '?'+qs : location.pathname);
  }

  function navigateCards(dir) {
    const cards = resultsContainer.querySelectorAll('.search-card');
    if (!cards.length) return;
    // Remove highlight from current
    if (activeCard >= 0 && activeCard < cards.length) cards[activeCard].classList.remove('ring-2', 'ring-brand-500');
    activeCard += dir;
    if (activeCard < 0) activeCard = 0;
    if (activeCard >= cards.length) activeCard = cards.length - 1;
    cards[activeCard].classList.add('ring-2', 'ring-brand-500');
    cards[activeCard].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
    // Enter navigates
    cards[activeCard].onkeydown = function(e) {
      if (e.key === 'Enter') cards[activeCard].querySelector('a').click();
    };
  }

  function renderResults(data) {
    const c = resultsContainer;
    c.innerHTML = '';
    data.results.forEach((r, i) => {
      const card = document.createElement('div');
      card.className = 'search-card';
      card.style.animationDelay = (i < 10 ? i * 50 : 0) + 'ms';

      // Score badge color
      let scoreBg, scoreTxt;
      if (r.score >= 80) { scoreBg = 'bg-green-100 dark:bg-green-500/10'; scoreTxt = 'text-green-700 dark:text-green-300'; }
      else if (r.score >= 50) { scoreBg = 'bg-yellow-100 dark:bg-yellow-500/10'; scoreTxt = 'text-yellow-700 dark:text-yellow-300'; }
      else { scoreBg = 'bg-gray-100 dark:bg-gray-700'; scoreTxt = 'text-gray-600 dark:text-gray-400'; }

      // Status badge
      let statusHtml = '';
      const sm = {
        open: ['bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-300', 'Open'],
        in_progress: ['bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-300', 'In Progress'],
        waiting_customer: ['bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-300', 'Waiting'],
        closed: ['bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-300', 'Closed'],
      };
      if (sm[r.status]) {
        statusHtml = `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${sm[r.status][0]}">${sm[r.status][1]}</span>`;
      }

      // Priority badge
      let prioHtml = '';
      const pm = {
        p1: 'bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-300',
        p2: 'bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-300',
        p3: 'bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-300',
      };
      if (pm[r.priority]) {
        prioHtml = `<span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${pm[r.priority]}">${r.priority.toUpperCase()}</span>`;
      }

      // Product icon
      let productIcon = '';
      if (r.pico_url) {
        productIcon = `<img src="${r.pico_url}" class="w-5 h-5 rounded" alt="">`;
      }

      // Source badge
      let sourceHtml = '';
      if (r.source === 'keyword') sourceHtml = '<span class="text-[10px] px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-300 font-medium">KW</span>';
      else if (r.source === 'both') sourceHtml = '<span class="text-[10px] px-1.5 py-0.5 rounded bg-brand-100 dark:bg-brand-500/10 text-brand-700 dark:text-brand-300 font-medium">AI+KW</span>';

      // VIP badge
      let vipHtml = '';
      const rev = parseFloat(r.customer_revenue);
      if (rev > 500) vipHtml = '<span class="text-[10px] px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300 font-bold">VIP</span>';
      else if (rev > 100) vipHtml = '<span class="material-symbols-outlined text-sm text-amber-400" style="font-size:14px" title="Valued customer">military_tech</span>';

      // Summary
      let summaryHtml = '';
      if (r.summary_text) {
        summaryHtml = `<p class="text-sm text-gray-600 dark:text-gray-400 mt-1 line-clamp-3">${escapeHtml(r.summary_text)}</p>`;
      }

      // Date
      let dateStr = '';
      if (r.last_activity_at) {
        const d = new Date(r.last_activity_at);
        dateStr = d.toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric' });
      }

      card.innerHTML = `
        <a href="/ticket/${r.ticket_id}" class="block rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 hover:border-brand-300 dark:hover:border-brand-500 hover:shadow-sm transition-all">
          <div class="flex items-center gap-2 mb-1">
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold ${scoreBg} ${scoreTxt}">${r.score}%</span>
            ${sourceHtml}
            ${productIcon}
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 truncate">${escapeHtml(r.product_name)}</span>
            <div class="flex-1"></div>
            ${statusHtml}
            ${prioHtml}
            ${vipHtml}
          </div>
          <div class="flex items-center gap-1.5 mb-0.5">
            <span class="text-xs text-gray-400 dark:text-gray-500">#${r.provider_thread_id || r.ticket_id}</span>
            <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">${escapeHtml(r.subject)}</span>
          </div>
          ${summaryHtml}
          <div class="flex items-center gap-4 mt-2 text-xs text-gray-500 dark:text-gray-400">
            ${r.customer_display_name ? `<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">person</span>${escapeHtml(r.customer_display_name)}</span>` : ''}
            ${dateStr ? `<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">calendar_today</span>${dateStr}</span>` : ''}
            ${r.nb_messages ? `<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">chat</span>${r.nb_messages} msgs</span>` : ''}
            ${r.ps_version ? `<span>PS ${escapeHtml(r.ps_version)}</span>` : ''}
          </div>
        </a>
      `;
      c.appendChild(card);
    });
  }

  function escapeHtml(str) {
    if (!str) return '';
    const d = document.createElement('div');
    d.textContent = str;
    return d.innerHTML;
  }

  function getCsrf() {
    const meta = document.querySelector('meta[name="csrf-token"]');
    return meta ? meta.getAttribute('content') : '';
  }
})();
</script>
{% endblock %}