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

{% block title %}Análisis clínico rápido · EpicrisisIA{% endblock %}
{% block body_class %}app-page app-page--analyze{% 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">Proceso asistido</p>
            <h1>Análisis automático de la última historia clínica</h1>
            <p>Esta vista ejecuta el procesamiento rápido del último PDF cargado y muestra hallazgos, CIE-10 y CUPS.</p>
          </div>
          <div class="app-page__note">
            Se usa como consola de verificación rápida. El flujo principal de cargue sigue ocurriendo en dashboard y casos.
          </div>
        </div>
      </section>

      <section class="ui-card app-page__section">
        <div class="app-page__section-head">
          <div>
            <p class="app-page__eyebrow">Resultado</p>
            <h2>Salida del procesamiento</h2>
          </div>
        </div>
        <div id="resultado" class="app-page__empty">
          <p>Cargando análisis…</p>
        </div>
      </section>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    document.addEventListener("DOMContentLoaded", async () => {
      const resultadoDiv = document.getElementById("resultado");

      try {
        const res = await fetch("/procesar_ultimo_pdf");
        if (!res.ok) throw new Error("No se pudo obtener la historia clínica.");
        const data = await res.json();

        const analisisHtml = data.analisis_html || "<p>No hay análisis disponible.</p>";
        resultadoDiv.classList.remove("app-page__empty");
        resultadoDiv.classList.add("app-page__results");
        resultadoDiv.innerHTML = `
          <article class="app-page__card">
            <div class="app-page__card-head">
              <h3>${data.nombre_paciente || "Paciente sin nombre"}</h3>
              <span class="app-page__chip">${data.usuario || "usuario"}</span>
            </div>
            <div>${analisisHtml}</div>
          </article>
        `;

        const cieList = data.codigos_cie10 || [];
        resultadoDiv.innerHTML += cieList.length
          ? `
            <article class="app-page__card">
              <h3>Códigos CIE-10 asignados</h3>
              <table>
                <thead><tr><th>Diagnóstico</th><th>Código CIE-10</th></tr></thead>
                <tbody>
                  ${cieList
                    .map((item) => {
                      const diag = String(item.diagnostico || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
                      const code = String(item.codigo_asignado || item.codigo || "")
                        .replaceAll(/\n/g, "<br/>")
                        .replaceAll(/</g, "&lt;")
                        .replaceAll(/>/g, "&gt;");
                      return `<tr><td>${diag}</td><td>${code}</td></tr>`;
                    })
                    .join("")}
                </tbody>
              </table>
            </article>
          `
          : `<article class="app-page__card"><h3>Códigos CIE-10 asignados</h3><p>No se asignaron códigos CIE-10.</p></article>`;

        const cupsList = data.codigos_cups || [];
        resultadoDiv.innerHTML += cupsList.length
          ? `
            <article class="app-page__card">
              <h3>Códigos CUPS asignados</h3>
              <table>
                <thead><tr><th>Procedimiento</th><th>Código CUPS</th></tr></thead>
                <tbody>
                  ${cupsList
                    .map((item) => {
                      const proc = String(item.procedimiento || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
                      const code = String(item.codigo_cups || "")
                        .replaceAll(/\n/g, "<br/>")
                        .replaceAll(/</g, "&lt;")
                        .replaceAll(/>/g, "&gt;");
                      return `<tr><td>${proc}</td><td>${code}</td></tr>`;
                    })
                    .join("")}
                </tbody>
              </table>
            </article>
          `
          : `<article class="app-page__card"><h3>Códigos CUPS asignados</h3><p>No se asignaron códigos CUPS.</p></article>`;
      } catch (error) {
        resultadoDiv.innerHTML = `<p>${error.message}</p>`;
      }
    });
  </script>
{% endblock %}
