{% extends "base.html" %}
{% block title %}AI Investigation Assistant{% endblock %}

{% block content %}
<div class="container py-4" style="max-width:860px;">

  <div class="topbar mb-3">
    <span class="page-title">
      <i class="bi bi-chat-dots"></i>AI Investigation Assistant
    </span>
    <button id="btnClear" class="btn btn-outline-secondary btn-sm">Clear Chat</button>
  </div>

  <p class="text-muted mb-3">
    Ask me about cases, evidence, risk scores, or custody chains.
    I have live access to the database and will base my answers on real records.
  </p>

  {#  Chat window  #}
  <div id="chatWindow"
       class="border rounded p-3 mb-3 bg-light"
       style="height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:12px;">
    <div class="text-center text-muted small mt-auto">
      Start the conversation by typing a question below.
    </div>
  </div>

  <style>
    .chat-bubble-user {
      background: linear-gradient(135deg, #2D3B3A 0%, #212C2B 100%);
      color: #ffffff;
      box-shadow: 0 2px 5px rgba(45, 59, 58, 0.15);
      border-radius: 14px 14px 2px 14px !important;
    }
    .chat-bubble-assistant {
      background-color: #ffffff;
      border: 1px solid #E2E6E6;
      color: #2D3B3A;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
      border-radius: 14px 14px 14px 2px !important;
    }
    #btnSend {
      background-color: #2D3B3A;
      border-color: #2D3B3A;
      color: #ffffff;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #btnSend:hover {
      background-color: #3DBFA0 !important;
      border-color: #3DBFA0 !important;
      color: #1E2E2D !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(61, 191, 160, 0.2);
    }
    #userInput:focus {
      border-color: #3DBFA0;
      box-shadow: 0 0 0 0.25rem rgba(61, 191, 160, 0.2);
    }
  </style>

  {#  Input row  #}
  <div class="input-group">
    <input type="text" id="userInput" class="form-control"
           placeholder="e.g. What is the risk score for evidence #1?"
           autocomplete="off" />
    <button id="btnSend" class="btn">Send</button>
  </div>

  {#  Metadata bar  #}
  <div id="metaBar" class="mt-2 small text-muted d-none">
    Intent: <span id="metaIntent">-</span> &nbsp;|&nbsp;
    Context used: <span id="metaContext">-</span> &nbsp;|&nbsp;
    Validation: <span id="metaValidation">-</span>
    <span id="metaWarning" class="text-danger ms-2"></span>
  </div>

</div>

<script type="application/json" id="chatHistory">{{ history|tojson }}</script>
<script>
// CSRF token read from the <meta> tag in base.html - required for POST fetches
const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const chatWindow  = document.getElementById('chatWindow');
const userInput   = document.getElementById('userInput');
const btnSend     = document.getElementById('btnSend');
const btnClear    = document.getElementById('btnClear');
const metaBar     = document.getElementById('metaBar');

//  Render a message bubble 
function addBubble(role, text) {
  const isUser = role === 'user';
  const wrap = document.createElement('div');
  wrap.className = `d-flex ${isUser ? 'justify-content-end' : 'justify-content-start'}`;

  const bubble = document.createElement('div');
  bubble.className = `px-3 py-2 ${isUser
    ? 'chat-bubble-user'
    : 'chat-bubble-assistant'
  }`;
  bubble.style.maxWidth = '75%';
  bubble.style.whiteSpace = 'pre-wrap';
  bubble.style.wordBreak = 'break-word';

  // Convert **bold** to <strong> and bullet lines to cleaner display
  bubble.innerHTML = text
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/^- /gm, '- ');

  wrap.appendChild(bubble);
  chatWindow.appendChild(wrap);
  chatWindow.scrollTop = chatWindow.scrollHeight;
}

//  Typing indicator 
function showTyping() {
  const wrap = document.createElement('div');
  wrap.id = 'typingIndicator';
  wrap.className = 'd-flex justify-content-start';
  wrap.innerHTML = `
    <div class="rounded px-3 py-2 bg-white border text-muted fst-italic">
      DEICMS-AI is thinking…
    </div>`;
  chatWindow.appendChild(wrap);
  chatWindow.scrollTop = chatWindow.scrollHeight;
}

function hideTyping() {
  const el = document.getElementById('typingIndicator');
  if (el) el.remove();
}

//  Send a message 
async function sendMessage() {
  const msg = userInput.value.trim();
  if (!msg) return;

  // Clear placeholder if present
  const placeholder = chatWindow.querySelector('.text-center');
  if (placeholder) placeholder.remove();

  addBubble('user', msg);
  userInput.value = '';
  btnSend.disabled = true;
  showTyping();

  try {
    const res = await fetch("{{ url_for('assistant.chat') }}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': CSRF_TOKEN,
      },
      body: JSON.stringify({ message: msg }),
    });

    const data = await res.json();
    hideTyping();

    if (data.error) {
      addBubble('assistant', `Error: ${data.error}`);
    } else {
      addBubble('assistant', data.reply);

      // Update metadata bar
      metaBar.classList.remove('d-none');
      document.getElementById('metaIntent').textContent     = data.intent || '-';
      document.getElementById('metaContext').textContent    = data.context_used ? 'Yes' : 'No';
      document.getElementById('metaValidation').textContent = data.validation_passed ? 'Passed' : 'Failed';
      const warnEl = document.getElementById('metaWarning');
      warnEl.textContent = data.warning ? `Warning: ${data.warning}` : '';
    }
  } catch (err) {
    hideTyping();
    addBubble('assistant', 'Network error. Please check your connection and try again.');
  } finally {
    btnSend.disabled = false;
    userInput.focus();
  }
}

//  Clear chat 
async function clearChat() {
  await fetch("{{ url_for('assistant.clear') }}", {
    method: 'POST',
    headers: { 'X-CSRFToken': CSRF_TOKEN },
  });
  chatWindow.innerHTML = `
    <div class="text-center text-muted small mt-auto">
      Chat cleared. Start a new conversation below.
    </div>`;
  metaBar.classList.add('d-none');
}

//  Event listeners 
btnSend.addEventListener('click', sendMessage);
btnClear.addEventListener('click', clearChat);
userInput.addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendMessage();
  }
});

//  Replay saved conversation on page load (persists until "Clear Chat") 
try {
  const saved = JSON.parse(document.getElementById('chatHistory').textContent || '[]');
  if (saved.length) {
    const ph = chatWindow.querySelector('.text-center');
    if (ph) ph.remove();
    saved.forEach(m => addBubble(m.role, m.content));
  }
} catch (e) { /* no saved history */ }
</script>
{% endblock %}