<!doctype html>
{% extends "index.html" %}

{% block title %}Chat SOAT · EpicrisisIA{% endblock %}
{% block body_class %}app-page app-page--soat-chat{% endblock %}
{% block shell_class %}app-page__shell{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="/static/css/app-pages.css" />
{% endblock %}

{% block header_actions %}
  {% set back_href = "/dashboard" %}
  {% set back_label = "Volver al dashboard" %}
  {% include "includes/auth_header_actions.html" %}
{% endblock %}

{% block content %}
  <div class="app-page__content">
    <div class="app-page__stack">
      <section class="ui-card app-page__hero">
        <div class="app-page__hero-grid">
          <div>
            <p class="app-page__eyebrow">Consulta normativa</p>
            <h1>Chat SOAT</h1>
            <p>Pregunta por códigos, soporte normativo o interpretación del manual SOAT sin salir de la consola.</p>
          </div>
          <div class="app-page__note">
            Responde con base en el índice SOAT cargado. Si no hay contexto suficiente, el asistente debe indicarlo.
          </div>
        </div>
      </section>

      <section class="ui-card app-page__section">
        <div class="app-page__section-head">
          <div>
            <p class="app-page__eyebrow">Interacción</p>
            <h2>Consulta guiada</h2>
          </div>
        </div>

        <div class="app-page__form">
          <div class="app-page__form-grid">
            <label class="ui-field" style="grid-column: 1 / -1;">
              <span>Pregunta</span>
              <input
                id="mensaje"
                type="text"
                placeholder="Ej. ¿qué código aplica para desbridamiento en pie?"
                autocomplete="off"
              />
            </label>
          </div>
          <div class="app-page__actions">
            <button class="ui-button" type="button" onclick="enviar()">Enviar consulta</button>
          </div>
        </div>

        <div id="respuesta" class="app-page__empty ui-hidden"></div>
        <div id="fuentes" class="app-page__note ui-hidden"></div>
      </section>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    async function enviar() {
      const input = document.getElementById("mensaje");
      const texto = input.value.trim();
      if (!texto) {
        globalThis.AppToast?.show?.("Escribe una pregunta antes de enviar.", {
          type: "info",
          duration: 2600,
        });
        return;
      }

      const respDiv = document.getElementById("respuesta");
      const fuentesDiv = document.getElementById("fuentes");
      respDiv.classList.remove("ui-hidden");
      respDiv.innerHTML = "<p>Consultando manual SOAT...</p>";
      fuentesDiv.classList.add("ui-hidden");
      fuentesDiv.textContent = "";

      try {
        const res = await fetch("/soat/chat", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ mensaje: texto }),
        });
        const data = await res.json();
        if (!res.ok) {
          throw new Error(data.detail || "Error en la consulta SOAT");
        }

        respDiv.innerHTML = `<div class="app-page__results"><p>${String(data.respuesta || "").replace(/\n/g, "<br />")}</p></div>`;
        if (Array.isArray(data.fuentes) && data.fuentes.length) {
          fuentesDiv.textContent = `Fuentes: ${data.fuentes.map((fuente) => `p.${fuente.page}`).join(", ")}`;
          fuentesDiv.classList.remove("ui-hidden");
        }
      } catch (error) {
        respDiv.innerHTML = `<p>${error.message}</p>`;
      }
    }
  </script>
{% endblock %}
