{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}AI Assistant{% endblock %}

{% block extrastyle %}
<style>
  :root {
    --ai-bg: #0f1117;
    --ai-surface: #1a1d27;
    --ai-surface-2: #22263a;
    --ai-border: #2e3350;
    --ai-accent: #6c63ff;
    --ai-accent-hover: #857dff;
    --ai-text: #e8eaf6;
    --ai-text-muted: #7b82a8;
    --ai-user-bubble: #6c63ff;
    --ai-ai-bubble: #1a1d27;
    --ai-code-bg: #0d0f18;
    --ai-success: #4caf82;
    --ai-error: #e05a6a;
    --ai-radius: 14px;
    --ai-radius-sm: 8px;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  }

  #ai-assistant-wrap {
    max-width: 860px;
    margin: 24px auto;
    font-family: -apple-system, 'Segoe UI', sans-serif;
  }

  .ai-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }

  .ai-header-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--ai-accent), #a78bfa);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  .ai-header-text h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ai-text);
  }

  .ai-header-text p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ai-text-muted);
  }

  .ai-provider-badge {
    margin-left: auto;
    background: var(--ai-surface-2);
    border: 1px solid var(--ai-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--ai-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .ai-provider-badge .dot {
    width: 7px;
    height: 7px;
    background: var(--ai-success);
    border-radius: 50%;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .ai-chat-box {
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius);
    display: flex;
    flex-direction: column;
    height: 540px;
    overflow: hidden;
  }

  .ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--ai-border) transparent;
  }

  .ai-messages::-webkit-scrollbar { width: 4px; }
  .ai-messages::-webkit-scrollbar-track { background: transparent; }
  .ai-messages::-webkit-scrollbar-thumb { background: var(--ai-border); border-radius: 4px; }

  .ai-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    gap: 4px;
    animation: fadeUp 0.25s ease;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .ai-msg.user { align-self: flex-end; align-items: flex-end; }
  .ai-msg.assistant { align-self: flex-start; align-items: flex-start; }

  .ai-msg-label {
    font-size: 11px;
    color: var(--ai-text-muted);
    margin-bottom: 2px;
    padding: 0 4px;
  }

  .ai-msg-bubble {
    padding: 11px 15px;
    border-radius: var(--ai-radius);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ai-text);
  }

  .ai-msg.user .ai-msg-bubble {
    background: var(--ai-user-bubble);
    border-bottom-right-radius: 4px;
  }

  .ai-msg.assistant .ai-msg-bubble {
    background: var(--ai-ai-bubble);
    border: 1px solid var(--ai-border);
    border-bottom-left-radius: 4px;
  }

  .ai-code-block {
    background: var(--ai-code-bg);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #a5b4fc;
    margin-top: 10px;
    overflow-x: auto;
    white-space: pre;
  }

  .ai-result-block {
    margin-top: 10px;
  }

  .ai-result-label {
    font-size: 11px;
    color: var(--ai-text-muted);
    margin-bottom: 6px;
  }

  /* Table result */
  .ai-result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .ai-result-table th {
    text-align: left;
    color: var(--ai-text-muted);
    font-weight: 500;
    padding: 5px 8px;
    border-bottom: 1px solid var(--ai-border);
    white-space: nowrap;
  }

  .ai-result-table td {
    padding: 5px 8px;
    color: var(--ai-text);
    border-bottom: 1px solid rgba(46,51,80,0.4);
    word-break: break-all;
  }

  /* Scalar result */
  .ai-result-scalar {
    font-size: 28px;
    font-weight: 700;
    color: var(--ai-accent-hover);
  }

  .ai-error-bubble {
    background: rgba(224, 90, 106, 0.1);
    border: 1px solid rgba(224, 90, 106, 0.3);
    border-radius: var(--ai-radius-sm);
    padding: 10px 14px;
    color: var(--ai-error);
    font-size: 13px;
    margin-top: 8px;
  }

  /* Input row */
  .ai-input-row {
    border-top: 1px solid var(--ai-border);
    padding: 14px 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--ai-surface);
  }

  .ai-input {
    flex: 1;
    background: var(--ai-surface-2);
    border: 1px solid var(--ai-border);
    border-radius: 24px;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--ai-text);
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
  }

  .ai-input::placeholder { color: var(--ai-text-muted); }
  .ai-input:focus { border-color: var(--ai-accent); }

  .ai-send-btn {
    background: var(--ai-accent);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.1s;
  }

  .ai-send-btn:hover { background: var(--ai-accent-hover); }
  .ai-send-btn:active { transform: scale(0.94); }
  .ai-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .ai-send-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Typing indicator */
  .ai-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    align-items: center;
  }

  .ai-typing span {
    width: 7px;
    height: 7px;
    background: var(--ai-text-muted);
    border-radius: 50%;
    animation: bounce 1.2s infinite;
  }

  .ai-typing span:nth-child(2) { animation-delay: 0.2s; }
  .ai-typing span:nth-child(3) { animation-delay: 0.4s; }

  @keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-5px); opacity: 1; }
  }
</style>
{% endblock %}

{% block content %}
<div id="ai-assistant-wrap">

  <div class="ai-header">
    <div class="ai-header-icon">🤖</div>
    <div class="ai-header-text">
      <h2>AI Assistant</h2>
      <p>Consultá tu base de datos en lenguaje natural</p>
    </div>
    <div class="ai-provider-badge">
      <span class="dot"></span>
      {{ provider }}
    </div>
  </div>

  <div class="ai-chat-box">
    <div class="ai-messages" id="ai-messages">
      <div class="ai-msg assistant">
        <span class="ai-msg-label">AI Assistant</span>
        <div class="ai-msg-bubble">
          Hola 👋 Tengo acceso a todos los modelos de tu proyecto Django. Podés preguntarme cualquier cosa sobre tus datos en lenguaje natural.
        </div>
      </div>
    </div>
    <div class="ai-input-row">
      <input
        class="ai-input"
        id="ai-input"
        type="text"
        placeholder="Ej: ¿Cuántos usuarios se registraron esta semana?"
        autocomplete="off"
      />
      <button class="ai-send-btn" id="ai-send-btn" title="Enviar">
        <svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
      </button>
    </div>
  </div>

</div>

<script>
(function () {
  const messagesEl = document.getElementById("ai-messages");
  const inputEl    = document.getElementById("ai-input");
  const sendBtn    = document.getElementById("ai-send-btn");
  const askUrl     = "{% url 'admin:ai_assistant_ask' %}";
  const csrfToken  = "{{ csrf_token }}";

  function scrollBottom() {
    messagesEl.scrollTop = messagesEl.scrollHeight;
  }

  function addMessage(role, html) {
    const wrap   = document.createElement("div");
    wrap.className = `ai-msg ${role}`;
    const label  = document.createElement("span");
    label.className = "ai-msg-label";
    label.textContent = role === "user" ? "Vos" : "AI Assistant";
    const bubble = document.createElement("div");
    bubble.className = "ai-msg-bubble";
    bubble.innerHTML = html;
    wrap.appendChild(label);
    wrap.appendChild(bubble);
    messagesEl.appendChild(wrap);
    scrollBottom();
    return bubble;
  }

  function addTyping() {
    const wrap = document.createElement("div");
    wrap.className = "ai-msg assistant";
    wrap.id = "ai-typing";
    wrap.innerHTML = `
      <span class="ai-msg-label">AI Assistant</span>
      <div class="ai-msg-bubble">
        <div class="ai-typing"><span></span><span></span><span></span></div>
      </div>`;
    messagesEl.appendChild(wrap);
    scrollBottom();
  }

  function removeTyping() {
    const el = document.getElementById("ai-typing");
    if (el) el.remove();
  }

  function renderResult(result) {
    // Array of dicts → table
    if (Array.isArray(result) && result.length > 0 && typeof result[0] === "object") {
      const keys = Object.keys(result[0]);
      let html = `<div class="ai-result-block">
        <div class="ai-result-label">Resultado (${result.length} filas)</div>
        <table class="ai-result-table"><thead><tr>`;
      keys.forEach(k => { html += `<th>${k}</th>`; });
      html += `</tr></thead><tbody>`;
      result.forEach(row => {
        html += "<tr>";
        keys.forEach(k => { html += `<td>${row[k] ?? ""}</td>`; });
        html += "</tr>";
      });
      html += `</tbody></table></div>`;
      return html;
    }
    // Array of scalars
    if (Array.isArray(result)) {
      return `<div class="ai-result-block">
        <div class="ai-result-label">Resultado</div>
        <div>${result.join(", ")}</div>
      </div>`;
    }
    // Single scalar (count, etc.)
    return `<div class="ai-result-block">
      <div class="ai-result-label">Resultado</div>
      <div class="ai-result-scalar">${result}</div>
    </div>`;
  }

  async function ask(question) {
    sendBtn.disabled = true;
    addMessage("user", question);
    addTyping();

    try {
      const resp = await fetch(askUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": csrfToken,
        },
        body: JSON.stringify({ question }),
      });

      const data = await resp.json();
      removeTyping();

      if (data.error) {
        let html = `<div>${data.error}</div>`;
        if (data.code) {
          html += `<div class="ai-code-block">${data.code}</div>`;
        }
        addMessage("assistant", `<div class="ai-error-bubble">${html}</div>`);
      } else {
        let html = "";
        if (data.code) {
          html += `<div class="ai-code-block">${data.code}</div>`;
        }
        html += renderResult(data.result);
        addMessage("assistant", html);
      }
    } catch (err) {
      removeTyping();
      addMessage("assistant", `<div class="ai-error-bubble">Error de conexión: ${err.message}</div>`);
    } finally {
      sendBtn.disabled = false;
      inputEl.focus();
    }
  }

  sendBtn.addEventListener("click", () => {
    const q = inputEl.value.trim();
    if (!q) return;
    inputEl.value = "";
    ask(q);
  });

  inputEl.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendBtn.click();
    }
  });
})();
</script>
{% endblock %}