{% 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>

<!-- Which tool do I want? The three authoring surfaces answer different questions. -->
<div style="background:#0d1b2e;border:1px solid #1a3560;border-radius:8px;padding:14px 16px;margin-bottom:22px;">
  <div style="color:#9bb8d8;font-size:13px;font-weight:600;margin-bottom:8px;">Which one do I want?</div>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;">
    <div>
      <a href="/document-intelligence/techwriter" style="color:#7ab3f0;font-size:12px;font-weight:600;text-decoration:none;">✍️ Tech Writer</a>
      <p style="color:#7a8cb0;font-size:11.5px;margin:3px 0 0;line-height:1.5;">Writing something <strong>new</strong> from a template — with inline WriteGuard.</p>
    </div>
    <div>
      <a href="/docgen/new" style="color:#7ab3f0;font-size:12px;font-weight:600;text-decoration:none;">🔄 DocGen</a>
      <p style="color:#7a8cb0;font-size:11.5px;margin:3px 0 0;line-height:1.5;">Have <strong>diagrams, configs, or docs</strong> to reconcile into one authoritative document.</p>
    </div>
    <div>
      <a href="/document-intelligence/docdrift" style="color:#7ab3f0;font-size:12px;font-weight:600;text-decoration:none;">🛰️ DocDrift</a>
      <p style="color:#7a8cb0;font-size:11.5px;margin:3px 0 0;line-height:1.5;">Something changed — <strong>which docs and NIST controls are now wrong?</strong> Automatic; nothing to upload.</p>
    </div>
  </div>
  <p style="color:#5a7aa0;font-size:11px;margin:10px 0 0;line-height:1.5;">
    Tech Writer and DocGen share the same documents — author in one, regenerate in the other. Drop files above to ingest.
  </p>
</div>

<!-- Canvas Pages — grouped by workflow order -->
{% for g in page_groups %}
<div style="margin-bottom:22px;">
  <h3 style="color:#9bb8d8;font-size:12px;text-transform:uppercase;letter-spacing:.6px;margin:0 0 2px;">{{ g.label }}</h3>
  <p style="color:#5a7aa0;font-size:11px;margin:0 0 10px;">{{ g.desc }}</p>
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;">
    {% for p in g.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>
</div>
{% endfor %}

<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');
  var collectionInput = document.getElementById('collection-input');

  // Pre-fill collection ID when arriving from the Collections page upload link.
  var params = new URLSearchParams(window.location.search);
  var prefillCollection = params.get('collection');
  if (prefillCollection && collectionInput) {
    collectionInput.value = prefillCollection;
  }

  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%';
        // docmod: don't leave the user hanging - offer the next step inline.
        results.innerHTML +=
          '<div style="margin-top:10px;display:flex;gap:8px;align-items:center;">' +
          '<button id="post-upload-scan" style="background:#2a1a3a;color:#a78bfa;padding:7px 14px;border:1px solid #4a2a6e;border-radius:5px;cursor:pointer;font-size:12px;">' +
          '🧭 Scan for outdated content →</button>' +
          '<a href="/document-intelligence/freshness" style="color:#7ab3f0;font-size:11px;">or open Freshness &amp; Modernization</a>' +
          '<span id="post-upload-scan-status" style="color:#7a8cb0;font-size:11px;"></span></div>';
        document.getElementById('post-upload-scan').addEventListener('click', function() {
          var btn = this, st = document.getElementById('post-upload-scan-status');
          btn.disabled = true; st.textContent = 'Scanning…';
          fetch('/document-intelligence/api/modernization/scan', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({collection_id: collectionId})
          }).then(function(r){ return r.json(); }).then(function(d) {
            if (d.error) { st.textContent = 'Scan failed: ' + d.error; btn.disabled = false; return; }
            window.location.href = '/document-intelligence/freshness';
          }).catch(function(e){ st.textContent = 'Scan failed: ' + e.message; btn.disabled = false; });
        });
        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();
    fileInput.value = '';  // allow re-uploading the same file
  }

  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 chunkCount = ev.chunks || 0;
        var hasWarnings = ev.errors && ev.errors.length;
        var isDuplicate = hasWarnings && ev.errors.some(function(e) { return e.indexOf('Duplicate') >= 0; });
        var isEmpty = chunkCount === 0 && !isDuplicate;
        var info = chunkCount + ' chunks';
        if (ev.kg_entities) info += ' · ' + ev.kg_entities + ' KG entities';
        if (isDuplicate) {
          info = 'Duplicate detected — linked to existing document' + (ev.doc_id ? ' (' + ev.doc_id + ')' : '');
        }
        if (isEmpty) {
          info = '0 chunks — file may be image-based, corrupted, or unsupported. Try re-exporting as text.';
        }
        results.innerHTML += rowHtml(filename, !isEmpty, info);
        if (hasWarnings) {
          ev.errors.forEach(function(err) {
            results.innerHTML += '<div style="padding:2px 8px;font-size:11px;color:#fbbf24;">⚠ ' + err + '</div>';
          });
        }
        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 %}