{% extends "base.html" %}
{% block title %}Handoff — 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;">🤝 Knowledge Handoff</h2>
    <p style="color:#7a8cb0;font-size:12px;margin:4px 0 0;">Capture retiring-SME knowledge into a living collection via CoD-verified generation.</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>

<!-- New session form -->
<div style="background:#0b1726;border:1px solid #1a3560;border-radius:8px;padding:16px;margin-bottom:20px;">
  <h3 style="margin:0 0 12px;color:#9bb8d8;font-size:14px;">Start New Handoff Session</h3>
  <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
    <input id="departing" placeholder="Departing owner ID" style="flex:1;min-width:180px;background:#050d1f;border:1px solid #1a3560;color:#b8d0e8;padding:8px 10px;border-radius:5px;font-size:12px;">
    <input id="successor" placeholder="Successor owner ID" style="flex:1;min-width:180px;background:#050d1f;border:1px solid #1a3560;color:#b8d0e8;padding:8px 10px;border-radius:5px;font-size:12px;">
    <input id="dest-collection" placeholder="Destination collection" value="default" style="flex:1;min-width:180px;background:#050d1f;border:1px solid #1a3560;color:#b8d0e8;padding:8px 10px;border-radius:5px;font-size:12px;">
    <button onclick="startSession()" style="background:#1e3a6e;color:#7ab3f0;padding:8px 18px;border:1px solid #2a4a8e;border-radius:5px;cursor:pointer;font-size:12px;font-weight:600;">🚀 Start Session</button>
  </div>
  <div id="session-msg" style="margin-top:10px;color:#5a7aa0;font-size:11px;display:none;"></div>
</div>

<!-- Sessions list -->
<div style="background:#0b1726;border:1px solid #1a3560;border-radius:8px;padding:14px;">
  <h3 style="margin:0 0 12px;color:#9bb8d8;font-size:14px;">Active Sessions</h3>
  {% for s in sessions %}
  <div style="background:#050d1f;border:1px solid #1a3560;border-radius:6px;padding:14px;margin-bottom:12px;">
    <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:8px;">
      <div>
        <strong style="color:#eaeaea;font-size:13px;">{{ s.title }}</strong>
        <span style="margin-left:8px;font-size:10px;padding:2px 7px;border-radius:3px;"
          {% if s.status == 'open' %}style="background:#1a2e52;color:#7ab3f0;"
          {% elif s.status == 'closed' %}style="background:#052e16;color:#4ade80;"
          {% else %}style="background:#1e293b;color:#94a3b8;"{% endif %}>
          {{ s.status }}
        </span>
      </div>
      <span style="color:#7a8cb0;font-size:11px;">{{ s.created_at[:16] }}…</span>
    </div>
    <div style="display:flex;gap:16px;color:#94a3b8;font-size:11px;margin-bottom:10px;">
      <div>👤 {{ s.departing_owner_id }} → {{ s.successor_owner_id }}</div>
      <div>📁 {{ s.dest_collection_id }}</div>
      <div>📝 Agenda: {{ s.answered_count }}/{{ s.agenda_count }}</div>
      <div>✨ Generated: {{ s.generated_count }}</div>
      <div>🏷️ Orphans: {{ s.orphan_count }}</div>
    </div>
    {% if s.status == 'open' %}
    <div style="display:flex;gap:8px;">
      <button onclick="closeSession('{{ s.session_id }}')" style="background:#2e1a05;color:#fbbf24;padding:5px 12px;border:1px solid #5a3a1a;border-radius:4px;cursor:pointer;font-size:11px;">✓ Close &amp; Reassign</button>
    </div>
    {% endif %}
  </div>
  {% else %}
  <div style="text-align:center;color:#3a6080;padding:24px;">No handoff sessions yet. Start one above to capture institutional knowledge before it walks out the door.</div>
  {% endfor %}
</div>

<script>
function startSession() {
  var departing = document.getElementById('departing').value.trim();
  var successor = document.getElementById('successor').value.trim();
  var dest = document.getElementById('dest-collection').value.trim();
  var msg = document.getElementById('session-msg');
  if (!departing || !successor) { msg.style.display = 'block'; msg.textContent = 'Departing and successor IDs are required.'; msg.style.color = '#f87171'; return; }
  msg.style.display = 'block'; msg.textContent = 'Creating session…'; msg.style.color = '#7ab3f0';
  fetch('/document-intelligence/api/handoff/start', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({departing_owner_id: departing, successor_owner_id: successor, dest_collection_id: dest})
  }).then(function(r) { return r.json(); })
    .then(function(data) {
      if (data.error) { msg.style.color = '#f87171'; msg.textContent = 'Error: ' + data.error; }
      else { msg.style.color = '#4ade80'; msg.textContent = 'Session created: ' + data.session_id; setTimeout(function() { location.reload(); }, 800); }
    })
    .catch(function(e) { msg.style.color = '#f87171'; msg.textContent = 'Failed: ' + e.message; });
}

function closeSession(sessionId) {
  if (!confirm('Close session and reassign orphaned docs to successor?')) return;
  fetch('/document-intelligence/api/handoff/' + sessionId + '/close', {method: 'POST'})
    .then(function(r) { return r.json(); })
    .then(function(data) {
      if (data.error) { alert('Error: ' + data.error); }
      else { location.reload(); }
    })
    .catch(function() { alert('Close failed.'); });
}
</script>

{% set iqe_canvas = "dic" %}
{% set iqe_api_route = "/document-intelligence/api/iqe-query" %}
{% set iqe_title = "IQE Query — Handoff" %}
{% set iqe_examples = [
  {"label": "Open sessions", "query": "foreach s in dic.handoff_sessions where s.status == 'open' select s.session_id, s.title, s.answered_count, s.agenda_count"}
] %}
{% include "includes/iqe_query_widget.html" %}
{% endblock %}