{# CUI // SP-CTI — Phase 4: dedicated ICDEV Q&A chat page #}
{% extends "base.html" %}
{% block title %}Ask ICDEV — ICDEV™ Dashboard{% endblock %}
{% block head %}
<style>
  .ai-page {
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    grid-template-rows: auto 1fr;
    height: calc(100vh - 120px);
    gap: 8px;
    padding: 8px;
  }
  .ai-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg2, #f8f9fa);
    border: 1px solid var(--border, #ddd);
    border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
  }
  .ai-header h1 { margin: 0; font-size: 1.15rem; flex: 0 0 auto; }
  .ai-header .ai-sub { color: var(--text-dim, #888); font-size: 0.85rem; flex: 1; }
  .ai-sessions {
    border: 1px solid var(--border, #ddd);
    border-right: none;
    overflow-y: auto;
    background: var(--bg2, #fafafa);
    padding: 8px;
  }
  .ai-sessions h3 {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    color: var(--text-dim, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ai-session-item {
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text, #333);
    border-left: 3px solid transparent;
    background: var(--bg3, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ai-session-item:hover { background: var(--bg4, #e8f0fb); border-left-color: var(--accent, #1976d2); }
  .ai-session-item.active {
    background: var(--bg4, #e3f2fd);
    border-left-color: var(--red, #e74c3c);
    font-weight: 600;
  }
  .ai-new-btn {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--accent, #1976d2);
    background: var(--bg3, #fff);
    color: var(--accent, #1976d2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .ai-new-btn:hover { background: var(--accent, #1976d2); color: #fff; }
  .ai-chat {
    border: 1px solid var(--border, #ddd);
    border-top: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg2, #fff);
  }
  .ai-transcript {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
  }
  .ai-bubble {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    max-width: 85%;
    line-height: 1.5;
    font-size: 0.9rem;
  }
  .ai-bubble-user {
    background: var(--bg4, #e3f2fd);
    color: var(--text, #0d47a1);
    margin-left: auto;
    border-top-right-radius: 2px;
  }
  .ai-bubble-assistant {
    background: var(--bg3, #f5f5f5);
    color: var(--text, #222);
    margin-right: auto;
    border-top-left-radius: 2px;
  }
  .ai-bubble .ai-role-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-dim, #888);
    margin-bottom: 4px;
    font-weight: 600;
  }
  .ai-empty {
    text-align: center;
    color: var(--text-dim, #999);
    font-style: italic;
    padding: 40px 20px;
  }
  .ai-compose {
    border-top: 1px solid var(--border, #ddd);
    padding: 12px;
    display: flex;
    gap: 8px;
    background: var(--bg3, #fafafa);
  }
  .ai-compose textarea {
    flex: 1;
    min-height: 60px;
    padding: 8px 10px;
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    background: var(--bg2, #fff);
    color: var(--text, #222);
  }
  .ai-compose-controls { display: flex; flex-direction: column; gap: 6px; }
  .ai-send-btn {
    padding: 10px 18px;
    background: var(--accent, #1976d2);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .ai-send-btn:hover { background: var(--accent-hover, #1565c0); }
  .ai-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .ai-narrate-toggle { font-size: 0.75rem; color: var(--text-dim, #666); }
  .ai-citations {
    border: 1px solid var(--border, #ddd);
    border-top: none;
    border-left: none;
    overflow-y: auto;
    background: var(--bg2, #fafafa);
    padding: 14px;
    font-size: 0.85rem;
  }
  .ai-citations h3 {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    color: var(--text-dim, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ai-citation-section { margin-bottom: 16px; }
  .ai-citation-section-title {
    font-weight: 600;
    color: var(--text, #333);
    margin-bottom: 6px;
    font-size: 0.82rem;
  }
  .ai-citation-item {
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--bg3, #fff);
    border-left: 2px solid var(--accent, #1976d2);
    border-radius: 3px;
    font-size: 0.78rem;
    color: var(--text, #444);
    cursor: pointer;
  }
  .ai-citation-item:hover { background: var(--bg4, #e8f0fb); }
  .ai-citation-item.health { border-left-color: var(--red, #e74c3c); }
  .ai-citation-item.suggested { border-left-color: var(--green, #2ecc71); }
  .ai-citation-empty { color: var(--text-dim, #999); font-style: italic; }
</style>
{% endblock %}
{% block content %}
<div class="ai-page">
  <div class="ai-header">
    <h1>Ask ICDEV</h1>
    <span class="ai-sub">
      Natural-language Q&A over skills, agents, MCP servers, canvases, goals, routes, tools, reflexes, and the codebase itself.
      Evidence from RAG + GraphRAG + health probes + suggested next actions.
    </span>
    <a href="/components-map" style="color:var(--accent,#1976d2);text-decoration:none;font-size:0.85rem;">Open /components-map →</a>
  </div>

  <aside class="ai-sessions" aria-label="Prior sessions">
    <button class="ai-new-btn" onclick="aiNewSession()">+ New Session</button>
    <h3>RECENT SESSIONS</h3>
    <div id="ai-session-list">
      <div style="color:var(--text-dim,#aaa);font-size:0.82rem;">Loading…</div>
    </div>
  </aside>

  <section class="ai-chat" aria-label="Chat transcript">
    <div class="ai-transcript" id="ai-transcript">
      <div class="ai-empty">
        Start a new session and ask a question about any ICDEV component.
        <br><br>
        <span style="font-size:0.8rem;">Examples: "What does the Network Design Canvas do?" · "Which MCP server handles compliance?" · "Show me broken routes"</span>
      </div>
    </div>
    <div class="ai-compose">
      <textarea id="ai-compose-input" placeholder="Ask a question about ICDEV…" onkeydown="aiHandleKey(event)"></textarea>
      <div class="ai-compose-controls">
        <button class="ai-send-btn" id="ai-send-btn" onclick="aiSendMessage()">Send</button>
        <label class="ai-narrate-toggle">
          <input type="checkbox" id="ai-narrate-toggle"> Narrate via LLM
        </label>
      </div>
    </div>
  </section>

  <aside class="ai-citations" aria-label="Citations">
    <h3>CITATIONS</h3>
    <div id="ai-citations-content">
      <div class="ai-citation-empty">Send a message to see citations.</div>
    </div>
  </aside>
</div>
{% endblock %}
{% block scripts %}
<script>
var aiCurrentSession = null;

async function aiLoadSessions() {
  try {
    const r = await fetch('/api/ask-icdev/sessions');
    const d = await r.json();
    const list = document.getElementById('ai-session-list');
    const sessions = d.sessions || [];
    if (!sessions.length) {
      list.innerHTML = '<div style="color:var(--text-dim,#aaa);font-size:0.82rem;">No sessions yet.</div>';
      return;
    }
    list.innerHTML = sessions.map(s =>
      '<div class="ai-session-item' + (s.id === aiCurrentSession ? ' active' : '') + '" ' +
      'onclick="aiLoadSession(\'' + aiEsc(s.id) + '\')" title="' + aiEsc(s.title) + '">' +
      aiEsc(s.title) + '</div>'
    ).join('');
  } catch (e) {
    console.error('session list failed', e);
  }
}

async function aiNewSession() {
  const title = prompt('Session title:', 'New ICDEV question');
  if (!title) return;
  try {
    const r = await fetch('/api/ask-icdev/sessions', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({title: title})
    });
    const d = await r.json();
    aiCurrentSession = d.session_id;
    await aiLoadSessions();
    await aiLoadSession(d.session_id);
  } catch (e) {
    alert('Could not create session: ' + e);
  }
}

async function aiLoadSession(sessionId) {
  aiCurrentSession = sessionId;
  try {
    const r = await fetch('/api/ask-icdev/sessions/' + encodeURIComponent(sessionId));
    if (!r.ok) {
      document.getElementById('ai-transcript').innerHTML =
        '<div class="ai-empty">Session not found.</div>';
      return;
    }
    const d = await r.json();
    const messages = d.messages || [];
    const transcript = document.getElementById('ai-transcript');
    if (!messages.length) {
      transcript.innerHTML =
        '<div class="ai-empty">Session "' + aiEsc(d.title) +
        '" — send your first message.</div>';
    } else {
      transcript.innerHTML = messages.map(aiRenderBubble).join('');
      transcript.scrollTop = transcript.scrollHeight;
    }
    // Show citations of the latest assistant turn
    const lastAssistant = messages.filter(m => m.role === 'assistant').pop();
    if (lastAssistant && lastAssistant.citations) {
      aiRenderCitations(lastAssistant.citations);
    } else {
      document.getElementById('ai-citations-content').innerHTML =
        '<div class="ai-citation-empty">Send a message to see citations.</div>';
    }
    await aiLoadSessions();
  } catch (e) {
    console.error('session load failed', e);
  }
}

function aiRenderBubble(m) {
  const roleClass = m.role === 'user' ? 'ai-bubble-user' : 'ai-bubble-assistant';
  const label = m.role === 'user' ? 'You' : 'ICDEV';
  return '<div class="ai-bubble ' + roleClass + '">' +
    '<span class="ai-role-label">' + label + '</span>' +
    aiEsc(m.content).replace(/\n/g, '<br>') +
    '</div>';
}

function aiRenderCitations(citations) {
  const el = document.getElementById('ai-citations-content');
  const parts = [];
  parts.push('<div class="ai-citation-section">' +
    '<div class="ai-citation-section-title">RAG hits (' + (citations.rag_hits || []).length + ')</div>');
  if ((citations.rag_hits || []).length === 0) {
    parts.push('<div class="ai-citation-empty">(none)</div>');
  } else {
    citations.rag_hits.forEach(h => {
      const source = h.source_type || h.metadata && h.metadata.source_type || '?';
      const content = (h.content || h.text || '').substring(0, 120);
      parts.push('<div class="ai-citation-item" title="' + aiEsc(content) + '">[' +
        aiEsc(source) + '] ' + aiEsc(content) + '…</div>');
    });
  }
  parts.push('</div>');

  parts.push('<div class="ai-citation-section">' +
    '<div class="ai-citation-section-title">Graph nodes (' + (citations.graph_nodes || []).length + ')</div>');
  if ((citations.graph_nodes || []).length === 0) {
    parts.push('<div class="ai-citation-empty">(none)</div>');
  } else {
    citations.graph_nodes.forEach(n => {
      const label = n.label || n.id || '?';
      const et = n.entity_type || '?';
      parts.push('<div class="ai-citation-item" title="' + aiEsc(label) + '">[' +
        aiEsc(et) + '] ' + aiEsc(label) + '</div>');
    });
  }
  parts.push('</div>');

  if ((citations.health_hits || []).length > 0) {
    parts.push('<div class="ai-citation-section">' +
      '<div class="ai-citation-section-title">Health (' + citations.health_hits.length + ')</div>');
    citations.health_hits.forEach(h => {
      parts.push('<div class="ai-citation-item health">' +
        aiEsc(h.probe_type) + ' ' + aiEsc(h.status) + ' — ' + aiEsc(h.node_id).substring(0, 40) + '</div>');
    });
    parts.push('</div>');
  }

  if ((citations.suggested || []).length > 0) {
    parts.push('<div class="ai-citation-section">' +
      '<div class="ai-citation-section-title">Suggested actions (' + citations.suggested.length + ')</div>');
    citations.suggested.forEach(s => {
      parts.push('<div class="ai-citation-item suggested">' +
        '[' + aiEsc(s.priority) + '] ' + aiEsc(s.title) + '</div>');
    });
    parts.push('</div>');
  }

  const footer = citations.narrated ? '<em style="color:var(--text-dim,#888);font-size:0.75rem;">LLM-narrated</em>' :
    '<em style="color:var(--text-dim,#888);font-size:0.75rem;">Raw evidence (no LLM)</em>';
  parts.push('<div style="margin-top:10px;text-align:center;">' + footer + '</div>');

  el.innerHTML = parts.join('');
}

async function aiSendMessage() {
  const input = document.getElementById('ai-compose-input');
  const content = input.value.trim();
  if (!content) return;
  if (!aiCurrentSession) {
    // Auto-create a session from the first message
    try {
      const r = await fetch('/api/ask-icdev/sessions', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({title: content.substring(0, 60)})
      });
      const d = await r.json();
      aiCurrentSession = d.session_id;
    } catch (e) {
      alert('Could not create session: ' + e);
      return;
    }
  }
  const narrate = document.getElementById('ai-narrate-toggle').checked;
  const sendBtn = document.getElementById('ai-send-btn');
  sendBtn.disabled = true;
  sendBtn.textContent = 'Thinking…';
  try {
    const r = await fetch('/api/ask-icdev/sessions/' + encodeURIComponent(aiCurrentSession) + '/message', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({content: content, narrate: narrate})
    });
    if (!r.ok) {
      alert('Send failed: ' + r.status);
      return;
    }
    input.value = '';
    await aiLoadSession(aiCurrentSession);
  } catch (e) {
    alert('Send error: ' + e);
  } finally {
    sendBtn.disabled = false;
    sendBtn.textContent = 'Send';
  }
}

function aiHandleKey(e) {
  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
    e.preventDefault();
    aiSendMessage();
  }
}

function aiEsc(s) {
  return String(s === null || s === undefined ? '' : s)
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

document.addEventListener('DOMContentLoaded', aiLoadSessions);
</script>
{% endblock %}