{% extends "base.html" %}
{% block title %}Search & Chat — Document Intelligence — ICDEV™{% endblock %}
{% block content %}
<div class="cui-banner" style="background:#1a1a2e;border:1px solid #e94560;padding:4px 12px;font-size:11px;color:#e94560;text-align:center;margin-bottom:12px;">CUI // SP-CTI</div>

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
  <div>
    <h2 style="margin:0;color:#eaeaea;font-size:20px;">🔍 Search &amp; Chat</h2>
    <p style="color:#7a8cb0;font-size:12px;margin:4px 0 0;">Grounded no-LLM search with mandatory citations · Conversational AI with evidence verification</p>
  </div>
  <a href="/document-intelligence/" style="background:#0f3460;color:#7ab3f0;padding:8px 16px;border-radius:5px;text-decoration:none;font-size:13px;">← Back to DIC</a>
</div>

<!-- Mode Toggle -->
<div style="display:flex;gap:2px;background:#050d1f;border:1px solid #1a3560;border-radius:6px;padding:3px;width:fit-content;margin-bottom:18px;">
  <button id="btn-search" onclick="setMode('search')"
    style="background:#0f3460;color:#7ab3f0;padding:6px 18px;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:600;">
    Search
  </button>
  <button id="btn-chat" onclick="setMode('chat')"
    style="background:none;color:#5a7aa0;padding:6px 18px;border:none;border-radius:4px;cursor:pointer;font-size:13px;">
    Chat
  </button>
</div>

<!-- Search Bar -->
<div style="display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;">
  <input type="text" id="query-input" placeholder="Ask a question or search your documents…"
    style="flex:1;min-width:280px;background:#050d1f;border:1px solid #1a3560;color:#b8d0e8;padding:10px 14px;border-radius:5px;font-size:13px;"
    onkeydown="if(event.key==='Enter') submitQuery()">
  <input type="text" id="collection-filter" placeholder="Collection ID (optional)"
    style="background:#050d1f;border:1px solid #1a3560;color:#b8d0e8;padding:10px 12px;border-radius:5px;font-size:12px;width:180px;">
  <button onclick="submitQuery()"
    style="background:#0f3460;color:#7ab3f0;padding:10px 20px;border:1px solid #1e3a6e;border-radius:5px;cursor:pointer;font-size:13px;font-weight:600;">
    Go
  </button>
</div>

<!-- Search Results Panel -->
<div id="search-panel">
  <div id="search-results"></div>
</div>

<!-- Chat Panel -->
<div id="chat-panel" style="display:none;">
  <div id="chat-thread" style="min-height:200px;max-height:500px;overflow-y:auto;background:#050d1f;border:1px solid #1a3560;border-radius:8px;padding:16px;margin-bottom:12px;"></div>
  <div id="chat-thinking" style="display:none;color:#5a7aa0;font-size:12px;padding:8px 0;">Thinking…</div>
</div>

<script>
var _mode = 'search';
var _chatHistory = [];

function setMode(mode) {
  _mode = mode;
  var isSearch = mode === 'search';
  document.getElementById('btn-search').style.background = isSearch ? '#0f3460' : 'none';
  document.getElementById('btn-search').style.color = isSearch ? '#7ab3f0' : '#5a7aa0';
  document.getElementById('btn-chat').style.background = isSearch ? 'none' : '#0f3460';
  document.getElementById('btn-chat').style.color = isSearch ? '#5a7aa0' : '#7ab3f0';
  document.getElementById('search-panel').style.display = isSearch ? 'block' : 'none';
  document.getElementById('chat-panel').style.display = isSearch ? 'none' : 'block';
  document.getElementById('query-input').placeholder = isSearch
    ? 'Search your documents…'
    : 'Ask a question about your documents…';
}

function submitQuery() {
  var query = document.getElementById('query-input').value.trim();
  if (!query) return;
  if (_mode === 'search') runSearch(query);
  else runChat(query);
}

function runSearch(query) {
  var collection = document.getElementById('collection-filter').value.trim();
  var results = document.getElementById('search-results');
  results.innerHTML = '<div style="color:#5a7aa0;font-size:12px;padding:12px 0;">Searching…</div>';
  fetch('/document-intelligence/api/search', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({query: query, collection_id: collection || null, mode: 'grounded'})
  }).then(function(r) { return r.json(); })
    .then(function(data) {
      if (!data.results || !data.results.length) {
        results.innerHTML = '<p style="color:#5a7aa0;padding:12px 0;">No results found. Try uploading documents or broadening your query.</p>';
        return;
      }
      results.innerHTML = data.results.map(function(r) {
        var terms = r.matched_terms && r.matched_terms.length
          ? '<div style="margin-top:6px;font-size:11px;color:#5a7aa0;">Matched: ' + r.matched_terms.join(', ') + '</div>' : '';
        var kg = r.kg_path && r.kg_path.length
          ? '<details style="margin-top:6px;"><summary style="color:#5a7aa0;font-size:11px;cursor:pointer;">Why this result?</summary><div style="color:#7a8cb0;font-size:11px;padding:4px 0;">' + r.kg_path.join(' → ') + '</div></details>' : '';
        return '<div style="background:#0b1726;border:1px solid #1a3560;border-radius:8px;padding:14px;margin-bottom:12px;">' +
          '<div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:6px;">' +
          '<div style="font-size:13px;color:#eaeaea;font-weight:600;">' + (r.doc_title || r.doc_id || 'Document') + '</div>' +
          '<span style="background:#1e293b;color:#94a3b8;font-size:10px;padding:2px 7px;border-radius:3px;">' + (r.score ? (r.score * 100).toFixed(0) + '% match' : '') + '</span>' +
          '</div>' +
          '<div style="color:#a8c8e0;font-size:12px;line-height:1.6;">' + (r.content || '').substring(0, 400) + (r.content && r.content.length > 400 ? '…' : '') + '</div>' +
          '<div style="margin-top:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;">' +
          '<span style="background:#0a2040;color:#4f8ef7;font-size:10px;padding:2px 8px;border-radius:3px;border:1px solid #1a3a60;">' +
          '📎 ' + (r.citation.doc_title || r.citation.doc_id || 'doc') +
          (r.citation.page ? ' · p.' + r.citation.page : '') +
          (r.citation.section ? ' · ' + r.citation.section : '') +
          '</span>' +
          '<span style="background:#1e293b;color:#e94560;font-size:10px;padding:2px 6px;border-radius:3px;">' + (r.citation.classification || 'CUI') + '</span>' +
          '</div>' + terms + kg + '</div>';
      }).join('');
    })
    .catch(function() { results.innerHTML = '<p style="color:#f87171;">Search failed. Check that documents have been ingested.</p>'; });
}

function runChat(message) {
  var collection = document.getElementById('collection-filter').value.trim();
  var thread = document.getElementById('chat-thread');
  _chatHistory.push({role: 'user', content: message});

  thread.innerHTML += '<div style="margin-bottom:12px;text-align:right;">' +
    '<span style="background:#0f3460;color:#b8d8f8;padding:7px 12px;border-radius:8px 8px 2px 8px;font-size:13px;display:inline-block;max-width:80%;">' +
    escHtml(message) + '</span></div>';
  thread.scrollTop = thread.scrollHeight;
  document.getElementById('query-input').value = '';
  document.getElementById('chat-thinking').style.display = 'block';

  fetch('/document-intelligence/api/chat', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({message: message, collection_id: collection || null, history: _chatHistory.slice(-6)})
  }).then(function(r) { return r.json(); })
    .then(function(data) {
      document.getElementById('chat-thinking').style.display = 'none';
      var answer = data.answer || data.error || '(No response)';
      var citations = data.citations && data.citations.length
        ? '<div style="margin-top:8px;display:flex;gap:5px;flex-wrap:wrap;">' +
          data.citations.map(function(c) {
            return '<span style="background:#0a2040;color:#4f8ef7;font-size:10px;padding:2px 7px;border-radius:3px;border:1px solid #1a3a60;">' +
              '📎 ' + (c.doc_title || c.doc_id || 'doc') + (c.page ? ' · p.' + c.page : '') + '</span>';
          }).join('') + '</div>' : '';
      var badge = data.abstained
        ? '<span style="background:#3a1a00;color:#fbbf24;font-size:10px;padding:1px 6px;border-radius:3px;margin-bottom:6px;display:inline-block;">⚠ Insufficient evidence — partial answer</span><br>'
        : data.mode === 'ai_assisted'
          ? '<span style="background:#052e16;color:#4ade80;font-size:10px;padding:1px 6px;border-radius:3px;margin-bottom:6px;display:inline-block;">AI-assisted · CoD-verified · cited</span><br>'
          : '<span style="background:#0a2040;color:#4f8ef7;font-size:10px;padding:1px 6px;border-radius:3px;margin-bottom:6px;display:inline-block;">📎 Grounded · RAG+KG · no LLM</span><br>';

      thread.innerHTML += '<div style="margin-bottom:14px;">' +
        '<div style="background:#0d1b2e;border:1px solid #1a3560;border-radius:2px 8px 8px 8px;padding:12px 14px;max-width:88%;">' +
        badge + '<span style="color:#a8c8e0;font-size:13px;line-height:1.6;">' + escHtml(answer) + '</span>' + citations +
        '</div></div>';
      thread.scrollTop = thread.scrollHeight;
      _chatHistory.push({role: 'assistant', content: answer});
    })
    .catch(function() {
      document.getElementById('chat-thinking').style.display = 'none';
      thread.innerHTML += '<div style="color:#f87171;font-size:12px;padding:8px 0;">Chat request failed.</div>';
    });
}

function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

{% if collection_id %}
document.getElementById('collection-filter').value = '{{ collection_id }}';
{% endif %}
</script>

{% set iqe_canvas = "dic" %}
{% set iqe_api_route = "/document-intelligence/api/iqe-query" %}
{% set iqe_title = "IQE Query — Search" %}
{% set iqe_examples = [
  {"label": "All documents", "query": "foreach d in dic.documents select d.title, d.collection_id"},
  {"label": "SSP fragments", "query": "foreach s in dic.ssp_fragments select s.control_id, s.status"}
] %}
{% include "includes/iqe_query_widget.html" %}
{% endblock %}