{% extends "base.html" %}
{% block title %}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:20px;">
  <div>
    <h2 style="margin:0;color:#eaeaea;font-size:20px;letter-spacing:.3px;">📄 Document Intelligence Canvas</h2>
    <p style="color:#7a8cb0;font-size:12px;margin:4px 0 0;">Own your documents — grounded no-LLM search with citations · freshness · HITL + AI-labeled generation · air-gap fine-tuning</p>
  </div>
</div>

<!-- Upload Widget -->
<div style="background:#0d1b2e;border:2px dashed #1e3a6e;border-radius:8px;padding:24px;margin-bottom:24px;text-align:center;" id="drop-zone">
  <div style="color:#5a7aa0;font-size:13px;margin-bottom:12px;">📎 Drag &amp; drop files here or click to browse</div>
  <div style="margin-bottom:10px;">
    <span style="background:#1e293b;color:#94a3b8;padding:2px 8px;border-radius:3px;font-size:11px;margin:2px;">PDF</span>
    <span style="background:#1e293b;color:#94a3b8;padding:2px 8px;border-radius:3px;font-size:11px;margin:2px;">DOCX</span>
    <span style="background:#1e293b;color:#94a3b8;padding:2px 8px;border-radius:3px;font-size:11px;margin:2px;">XLSX</span>
    <span style="background:#1e293b;color:#94a3b8;padding:2px 8px;border-radius:3px;font-size:11px;margin:2px;">PPTX</span>
    <span style="background:#1e293b;color:#94a3b8;padding:2px 8px;border-radius:3px;font-size:11px;margin:2px;">PNG/JPG</span>
    <span style="background:#1e293b;color:#94a3b8;padding:2px 8px;border-radius:3px;font-size:11px;margin:2px;">HTML</span>
  </div>
  <div style="display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;">
    <input type="file" id="file-input" multiple accept=".pdf,.docx,.xlsx,.pptx,.png,.jpg,.jpeg,.html,.txt,.md" style="display:none">
    <button onclick="document.getElementById('file-input').click()"
      style="background:#0f3460;color:#7ab3f0;padding:8px 20px;border:1px solid #1e3a6e;border-radius:5px;cursor:pointer;font-size:13px;">
      Choose Files
    </button>
    <input type="text" id="collection-input" placeholder="Collection ID (optional)"
      style="background:#050d1f;border:1px solid #1a3560;color:#b8d0e8;padding:7px 12px;border-radius:5px;font-size:12px;width:200px;">
  </div>
  <div id="upload-progress" style="display:none;margin-top:14px;">
    <div style="background:#0a1525;border-radius:4px;height:6px;overflow:hidden;">
      <div id="progress-bar" style="background:#4f8ef7;height:100%;width:0%;transition:width .3s;"></div>
    </div>
    <div id="upload-status" style="color:#7ab3f0;font-size:12px;margin-top:6px;"></div>
  </div>
  <div id="upload-results" style="margin-top:12px;text-align:left;max-height:120px;overflow-y:auto;"></div>
</div>

<!-- Canvas Pages -->
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;">
  {% for p in pages %}
  {% if p.ready %}
  <a href="{{ p.href }}" style="text-decoration:none;">
    <div style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;padding:16px;transition:border-color .2s;height:100%;"
         onmouseover="this.style.borderColor='#4f8ef7'" onmouseout="this.style.borderColor='#1e3a6e'">
      <h3 style="margin:0 0 6px;color:#eaeaea;font-size:14px;">{{ p.icon }} {{ p.name }}</h3>
      <p style="color:#7a8cb0;font-size:12px;margin:0;">{{ p.desc }}</p>
    </div>
  </a>
  {% else %}
  <div style="background:#0e1730;border:1px dashed #243a5e;border-radius:8px;padding:16px;opacity:.55;height:100%;" title="Pending — {{ p.task }}">
    <h3 style="margin:0 0 6px;color:#9aa8c0;font-size:14px;">{{ p.icon }} {{ p.name }}</h3>
    <p style="color:#5a6e8c;font-size:12px;margin:0;">{{ p.desc }}</p>
    <div style="margin-top:8px;"><span style="background:#1e293b;color:#7a8cb0;font-size:10px;padding:2px 7px;border-radius:3px;">pending · {{ p.task }}</span></div>
  </div>
  {% endif %}
  {% endfor %}
</div>

<script>
(function() {
  var fileInput = document.getElementById('file-input');
  var dropZone = document.getElementById('drop-zone');
  var bar = document.getElementById('progress-bar');
  var status = document.getElementById('upload-status');
  var results = document.getElementById('upload-results');
  var progress = document.getElementById('upload-progress');

  dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.style.borderColor = '#4f8ef7'; });
  dropZone.addEventListener('dragleave', function() { dropZone.style.borderColor = '#1e3a6e'; });
  dropZone.addEventListener('drop', function(e) { e.preventDefault(); dropZone.style.borderColor = '#1e3a6e'; uploadFiles(e.dataTransfer.files); });
  fileInput.addEventListener('change', function() { uploadFiles(fileInput.files); });

  function uploadFiles(files) {
    if (!files || !files.length) return;
    var collectionId = document.getElementById('collection-input').value.trim() || 'default';
    progress.style.display = 'block';
    results.innerHTML = '';
    bar.style.width = '2%';
    status.textContent = 'Sending ' + files[0].name + '…';

    // Process files sequentially so the progress bar is meaningful.
    var fileArr = Array.from(files);
    var idx = 0;

    function processNext() {
      if (idx >= fileArr.length) {
        status.textContent = fileArr.length + ' file(s) complete.';
        bar.style.width = '100%';
        return;
      }
      var file = fileArr[idx++];
      var fd = new FormData();
      fd.append('file', file);
      fd.append('collection_id', collectionId);

      // Step 1: POST the file — server responds immediately with job_id (202).
      fetch('/document-intelligence/api/ingest', { method: 'POST', body: fd })
        .then(function(r) { return r.json(); })
        .then(function(data) {
          if (data.error) {
            results.innerHTML += rowHtml(file.name, false, data.error);
            processNext();
            return;
          }
          if (!data.job_id) {
            // Fallback: old sync response (shouldn't happen post-fix).
            results.innerHTML += rowHtml(file.name, true, (data.chunks || 0) + ' chunks');
            processNext();
            return;
          }
          // Step 2: Open SSE stream for live progress.
          openStream(data.job_id, file.name, processNext);
        })
        .catch(function(e) {
          results.innerHTML += rowHtml(file.name, false, 'upload failed: ' + e.message);
          processNext();
        });
    }

    processNext();
  }

  function openStream(jobId, filename, onDone) {
    var src = new EventSource('/document-intelligence/api/ingest/' + jobId + '/stream');
    var stageLabel = {
      extracting: '📄 Extracting text…',
      chunking:   '✂️ Chunking…',
      embedding:  '🧠 Embedding',
      kg_bridge:  '🕸️ Building knowledge graph…',
      done:       '✓ Done',
      error:      '✗ Error',
      heartbeat:  null,
    };

    src.onmessage = function(e) {
      var ev;
      try { ev = JSON.parse(e.data); } catch(ex) { return; }

      var stage = ev.stage || '';
      if (stage === 'heartbeat') return;

      var pct = ev.pct != null ? ev.pct : 50;
      bar.style.width = Math.min(pct, 98) + '%';

      if (stage === 'embedding' && ev.pct != null) {
        status.textContent = filename + ' — ' + ev.detail;
      } else if (stageLabel[stage]) {
        status.textContent = filename + ' — ' + (ev.detail || stageLabel[stage]);
      }

      if (stage === 'done') {
        bar.style.width = '100%';
        var info = (ev.chunks || 0) + ' chunks';
        if (ev.kg_entities) info += ' · ' + ev.kg_entities + ' KG entities';
        if (ev.errors && ev.errors.length) info += ' · ' + ev.errors.length + ' warn(s)';
        results.innerHTML += rowHtml(filename, true, info);
        src.close();
        if (onDone) onDone();
      } else if (stage === 'error') {
        results.innerHTML += rowHtml(filename, false, ev.message || 'ingest error');
        src.close();
        if (onDone) onDone();
      }
    };

    src.onerror = function() {
      results.innerHTML += rowHtml(filename, false, 'connection lost — check dashboard logs');
      src.close();
      if (onDone) onDone();
    };
  }

  function rowHtml(name, ok, msg) {
    return '<div style="padding:4px 8px;font-size:12px;color:' + (ok ? '#4ade80' : '#f87171') + '">' +
      (ok ? '✓ ' : '✗ ') + name + ' — ' + msg + '</div>';
  }
})();
</script>

<!-- IQE Query Widget -->
{% set iqe_canvas = "dic" %}
{% set iqe_api_route = "/document-intelligence/api/iqe-query" %}
{% set iqe_title = "IQE Query — Document Intelligence" %}
{% set iqe_examples = [
  {"label": "All documents", "query": "foreach d in dic.documents select d.title, d.collection_id, d.classification"},
  {"label": "All collections", "query": "foreach c in dic.collections select c.name, c.collection_id"},
  {"label": "Regen queue", "query": "foreach r in dic.regen_queue where r.state == \"queued\" select r.document_id, r.impact_level"}
] %}
{% include "includes/iqe_query_widget.html" %}
{% endblock %}