{% extends "base.html" %}

{% block title %}NEXO Chat{% endblock %}
{% block page_title %}NEXO Chat{% endblock %}
{% block page_subtitle %}
<span class="text-[10px] px-1.5 py-0.5 bg-nexo-500/20 text-nexo-400 rounded font-bold uppercase ml-2">Beta</span>
{% endblock %}

{% block content %}
<div class="flex flex-col" style="height: calc(100vh - 7.5rem);">

  <!-- Chat messages area -->
  <div id="chat-messages" class="flex-1 overflow-y-auto px-2 py-4 space-y-4 scroll-smooth">
    <!-- Welcome message rendered by JS -->
  </div>

  <!-- Suggested prompts -->
  <div id="suggestions" class="flex items-center gap-2 px-2 py-3 overflow-x-auto flex-shrink-0">
    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
      What happened last night?
    </button>
    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
      Trust status
    </button>
    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
      Active skills
    </button>
    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
      Recent crons
    </button>
    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
      Pending followups
    </button>
  </div>

  <!-- Input bar -->
  <div class="flex-shrink-0 border-t border-slate-800/50 bg-slate-900/30 backdrop-blur-sm rounded-b-xl px-3 py-3">
    <div class="flex items-end gap-2 max-w-3xl mx-auto">
      <div class="flex-1 relative">
        <textarea
          id="chat-input"
          rows="1"
          placeholder="Ask me anything..."
          class="w-full bg-slate-900/80 border border-slate-700/50 rounded-xl px-4 py-3 text-sm text-slate-200 placeholder-slate-600 resize-none focus:outline-none focus:border-nexo-500/50 focus:ring-1 focus:ring-nexo-500/20 transition-all"
          onkeydown="handleKeydown(event)"
          oninput="autoResize(this)"
        ></textarea>
      </div>
      <button
        id="send-btn"
        onclick="sendMessage()"
        class="w-10 h-10 rounded-xl bg-nexo-500 hover:bg-nexo-600 text-white flex items-center justify-center transition-all duration-200 hover:scale-105 active:scale-95 disabled:opacity-30 disabled:hover:scale-100 flex-shrink-0"
        disabled
      >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19V5m0 0l-7 7m7-7l7 7"/></svg>
      </button>
    </div>
  </div>
</div>

<style>
  #chat-messages::-webkit-scrollbar { width: 4px; }
  #chat-messages::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

  .suggestion-pill {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.4);
    color: #94a3b8;
  }
  .suggestion-pill:hover {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.3);
    color: #c4b5fd;
  }

  .bubble-user {
    background: rgba(124, 58, 237, 0.2);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 16px 16px 4px 16px;
  }
  .bubble-nexo {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.4);
    border-radius: 16px 16px 16px 4px;
  }

  @keyframes bubbleIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .chat-bubble { animation: bubbleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

  @keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
  }
  .typing-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #7C3AED;
    display: inline-block;
  }
  .typing-dot:nth-child(1) { animation: typingDot 1.4s ease-in-out infinite; }
  .typing-dot:nth-child(2) { animation: typingDot 1.4s ease-in-out infinite 0.2s; }
  .typing-dot:nth-child(3) { animation: typingDot 1.4s ease-in-out infinite 0.4s; }

  .data-table-toggle {
    cursor: pointer;
    transition: color 0.15s;
  }
  .data-table-toggle:hover { color: #c4b5fd; }

  .data-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .data-section.open {
    max-height: 500px;
    overflow-y: auto;
  }

  #chat-input {
    max-height: 120px;
    line-height: 1.5;
  }

  .nexo-avatar {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white;
    flex-shrink: 0;
  }
</style>
{% endblock %}

{% block scripts %}
<script>
const STORAGE_KEY = 'nexo-chat-history';
let chatHistory = [];
let isWaiting = false;

function loadHistory() {
  try {
    const stored = sessionStorage.getItem(STORAGE_KEY);
    if (stored) chatHistory = JSON.parse(stored);
  } catch {}
}

function saveHistory() {
  try {
    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(chatHistory.slice(-100)));
  } catch {}
}

function autoResize(el) {
  el.style.height = 'auto';
  el.style.height = Math.min(el.scrollHeight, 120) + 'px';
  document.getElementById('send-btn').disabled = !el.value.trim();
}

function handleKeydown(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendMessage();
  }
}

function scrollToBottom() {
  const container = document.getElementById('chat-messages');
  requestAnimationFrame(() => { container.scrollTop = container.scrollHeight; });
}

function renderMessage(msg) {
  if (msg.role === 'user') {
    return `
      <div class="flex justify-end chat-bubble">
        <div class="bubble-user px-4 py-2.5 max-w-lg">
          <p class="text-sm text-slate-200 leading-relaxed">${escapeHtml(msg.content)}</p>
        </div>
      </div>
    `;
  }

  // NEXO response
  let dataHtml = '';
  if (msg.data && msg.data.length > 0) {
    const cols = Object.keys(msg.data[0]);
    dataHtml = `
      <div class="mt-3">
        <button class="data-table-toggle text-[10px] uppercase tracking-wider text-slate-500 font-semibold flex items-center gap-1" onclick="toggleDataSection(this)">
          <svg class="w-3 h-3 transition-transform duration-200 data-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
          ${msg.data.length} results
        </button>
        <div class="data-section mt-2">
          <div class="bg-slate-950/50 rounded-lg border border-slate-800/30 overflow-x-auto">
            <table class="w-full text-xs">
              <thead>
                <tr class="border-b border-slate-800/40">
                  ${cols.map(c => `<th class="px-3 py-2 text-left text-[10px] uppercase tracking-wider text-slate-600 font-semibold">${escapeHtml(c)}</th>`).join('')}
                </tr>
              </thead>
              <tbody class="divide-y divide-slate-800/20">
                ${msg.data.slice(0, 20).map(row => `
                  <tr class="hover:bg-slate-800/20 transition-colors">
                    ${cols.map(c => `<td class="px-3 py-1.5 font-mono text-slate-400 whitespace-nowrap">${escapeHtml(String(row[c] ?? '--'))}</td>`).join('')}
                  </tr>
                `).join('')}
              </tbody>
            </table>
            ${msg.data.length > 20 ? `<div class="px-3 py-2 text-[10px] text-slate-600 border-t border-slate-800/30">+ ${msg.data.length - 20} more rows</div>` : ''}
          </div>
        </div>
      </div>
    `;
  }

  return `
    <div class="flex items-start gap-2.5 chat-bubble">
      <div class="nexo-avatar">N</div>
      <div class="bubble-nexo px-4 py-2.5 max-w-2xl">
        <div class="text-sm text-slate-300 leading-relaxed chat-answer">${formatAnswer(msg.content)}</div>
        ${dataHtml}
        ${msg.query_type ? `<div class="mt-2 text-[9px] text-slate-600 font-mono">query: ${escapeHtml(msg.query_type)}</div>` : ''}
      </div>
    </div>
  `;
}

function formatAnswer(text) {
  if (!text) return '';
  // Basic markdown-like formatting
  let html = escapeHtml(text);
  html = html.replace(/\*\*(.*?)\*\*/g, '<strong class="text-slate-100 font-semibold">$1</strong>');
  html = html.replace(/`(.*?)`/g, '<code class="text-xs bg-slate-800/60 px-1 py-0.5 rounded text-nexo-300 font-mono">$1</code>');
  html = html.replace(/\n/g, '<br>');
  return html;
}

function toggleDataSection(btn) {
  const section = btn.nextElementSibling;
  const chevron = btn.querySelector('.data-chevron');
  section.classList.toggle('open');
  chevron.style.transform = section.classList.contains('open') ? 'rotate(90deg)' : '';
}

function showTyping() {
  const container = document.getElementById('chat-messages');
  const typingEl = document.createElement('div');
  typingEl.id = 'typing-indicator';
  typingEl.className = 'flex items-start gap-2.5 chat-bubble';
  typingEl.innerHTML = `
    <div class="nexo-avatar">N</div>
    <div class="bubble-nexo px-4 py-3">
      <div class="flex items-center gap-1.5">
        <div class="typing-dot"></div>
        <div class="typing-dot"></div>
        <div class="typing-dot"></div>
      </div>
    </div>
  `;
  container.appendChild(typingEl);
  scrollToBottom();
}

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

function renderAllMessages() {
  const container = document.getElementById('chat-messages');
  if (chatHistory.length === 0) {
    container.innerHTML = `
      <div class="flex items-start gap-2.5 chat-bubble">
        <div class="nexo-avatar">N</div>
        <div class="bubble-nexo px-4 py-3 max-w-xl">
          <p class="text-sm text-slate-300 leading-relaxed">I'm <strong class="text-nexo-400">NEXO Chat</strong>. Ask me anything about the system.</p>
          <p class="text-xs text-slate-500 mt-2">I can query diaries, crons, trust, skills, followups, and more.</p>
        </div>
      </div>
    `;
    return;
  }
  container.innerHTML = chatHistory.map(renderMessage).join('');
  scrollToBottom();
}

function sendSuggestion(btn) {
  const text = btn.textContent.trim();
  document.getElementById('chat-input').value = text;
  document.getElementById('send-btn').disabled = false;
  sendMessage();
}

async function sendMessage() {
  const input = document.getElementById('chat-input');
  const text = input.value.trim();
  if (!text || isWaiting) return;

  // Add user message
  chatHistory.push({ role: 'user', content: text });
  saveHistory();
  renderAllMessages();

  // Clear input
  input.value = '';
  input.style.height = 'auto';
  document.getElementById('send-btn').disabled = true;

  // Hide suggestions after first message
  document.getElementById('suggestions').style.display = chatHistory.filter(m => m.role === 'user').length > 1 ? 'none' : '';

  // Show typing
  isWaiting = true;
  showTyping();

  try {
    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: text })
    });

    hideTyping();

    if (!res.ok) {
      const errText = await res.text().catch(() => 'Error');
      chatHistory.push({ role: 'nexo', content: `Error: ${res.status} - ${errText}` });
    } else {
      const data = await res.json();
      chatHistory.push({
        role: 'nexo',
        content: data.answer || 'No response.',
        data: data.data || null,
        query_type: data.query_type || null
      });
    }
  } catch (err) {
    hideTyping();
    chatHistory.push({ role: 'nexo', content: `Connection error: ${err.message}` });
  }

  isWaiting = false;
  saveHistory();
  renderAllMessages();
}

// Initialize
loadHistory();
renderAllMessages();

// Focus input
document.getElementById('chat-input').focus();
</script>
{% endblock %}