{% extends "admin/base.html" %}
{% load static %}

{% block footer %}
{{ block.super }}

<script>
  window.AI_ASK_URL = "{{ ai_assistant_ask_url }}";
</script>

{% if ai_assistant_enabled %}

  <link rel="stylesheet" href="{% static 'django_ai_command/css/ai_assistant.css' %}">
  <script src="{% static 'django_ai_command/js/ai_assistant.js' %}"></script>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="{% static 'django_ai_command/js/ai_renderer.js' %}"></script>

<!-- Floating button -->
<button id="ai-float-btn" title="AI Assistant">🤖</button>

<!-- Modal overlay -->
<div id="ai-modal-overlay">
  <div id="ai-modal">
    <div class="ai-modal-header">
      <span class="ai-modal-header-icon">🤖</span>
      <div>
        <div class="ai-modal-header-title">AI Assistant</div>
        <div class="ai-modal-header-sub">Consultá tu base de datos en lenguaje natural</div>
      </div>

      <a class="ai-modal-expand" id="ai-modal-expand" href="/{{ admin_prefix|default:'admin' }}/ai-assistant/" title="Abrir en pantalla completa">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 3 21 3 21 9"/>
          <polyline points="9 21 3 21 3 15"/>
          <line x1="21" y1="3" x2="14" y2="10"/>
          <line x1="3" y1="21" x2="10" y2="14"/>
        </svg>
      </a>
      <button class="ai-modal-close" id="ai-modal-close">✕</button>

    </div>

    <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 👋 Podés preguntarme cualquier cosa sobre tus datos.
        </div>
      </div>
    </div>

    <div class="ai-input-row">
      <input class="ai-input" id="ai-input" type="text"
        placeholder="Ej: ¿Cuántos usuarios hay?" autocomplete="off" />
      <button class="ai-send-btn" id="ai-send-btn">
        <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>

{% endif %}
{% endblock %}