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

{% block title %}Casos · EpicrisisIA{% endblock %}
{% block body_class %}cases-page{% endblock %}
{% block shell_class %}cases-shell{% endblock %}

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

{% block header_actions %}
  <div class="cases-header-actions ui-cluster">
    <a href="/dashboard" class="ui-button ui-button--secondary">Volver al dashboard</a>
  </div>
{% endblock %}

{% block content %}
  <div
    class="cases-app"
    data-cases-app
    data-initial-case-key="{{ initial_case_key }}"
    data-initial-documento-id="{{ initial_documento_id }}"
  >
    <section class="cases-workspace ui-card">
      <header class="cases-workspace__header">
        <div class="cases-workspace__intro">
          <div>
            <p class="cases-workspace__eyebrow">Bandeja clínica</p>
            <h1>Casos indexados por <code>case_key</code></h1>
            <p class="cases-workspace__copy">
              Explora la base documental por caso, filtra por estado operativo y agrega nuevos soportes sin salir de la bandeja.
            </p>
          </div>
          <div class="cases-workspace__summary" data-cases-summary>
            <article class="cases-stat">
              <span>Casos visibles</span>
              <strong data-cases-summary-filtered>0</strong>
            </article>
            <article class="cases-stat">
              <span>Documentos visibles</span>
              <strong data-cases-summary-documents>0</strong>
            </article>
            <article class="cases-stat">
              <span>Epicrisis listas</span>
              <strong data-cases-summary-epicrisis>0</strong>
            </article>
            <article class="cases-stat">
              <span>RIPS listos</span>
              <strong data-cases-summary-rips>0</strong>
            </article>
          </div>
        </div>

        <div class="cases-toolbar">
          <search class="cases-search" aria-label="Buscar casos">
            <label class="ui-sr-only" for="cases-search-input">Buscar por cédula, número de caso o case key</label>
            <div class="cases-search__field">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" />
              </svg>
              <input
                id="cases-search-input"
                type="search"
                name="q"
                autocomplete="off"
                placeholder="Buscar cédula, número de caso o case key"
                data-cases-filter="q"
              />
            </div>
          </search>

          <div class="cases-toolbar__actions ui-cluster">
            <button type="button" class="ui-button ui-button--secondary" data-cases-queue-open>
              Cola operativa
            </button>
            <button
              type="button"
              class="ui-button ui-button--accent"
              data-case-upload-open="support"
              aria-controls="case-upload-dialog"
              aria-haspopup="dialog"
            >
              Nuevo documento
            </button>
            <button type="button" class="ui-button ui-button--ghost" data-cases-reset-filters>Limpiar filtros</button>
          </div>
        </div>

        <form class="cases-filters" data-cases-filters novalidate>
          <label class="ui-field">
            <span>Estado de epicrisis</span>
            <select data-cases-filter="epicrisis_status">
              <option value="">Todos</option>
              <option value="pendiente">Pendiente</option>
              <option value="en_cola">En cola</option>
              <option value="procesando">Procesando</option>
              <option value="completado">Completado</option>
            </select>
          </label>

          <label class="ui-field">
            <span>Tipo documental</span>
            <select data-cases-filter="document_type" data-cases-document-type>
              <option value="">Todos</option>
            </select>
          </label>

          <label class="ui-field">
            <span>Estado RIPS</span>
            <select data-cases-filter="rips_status">
              <option value="">Todos</option>
              <option value="sin_rips">Sin RIPS</option>
              <option value="rips_listo">RIPS listo</option>
              <option value="rips_con_observaciones">RIPS con observaciones</option>
            </select>
          </label>

          <label class="ui-field">
            <span>Volumen documental</span>
            <select data-cases-filter="document_count_range">
              <option value="">Todos</option>
              <option value="1-2">1 a 2 documentos</option>
              <option value="3-5">3 a 5 documentos</option>
              <option value="6+">6 o más</option>
            </select>
          </label>

          <label class="ui-field">
            <span>PDF/Epicrisis</span>
            <select data-cases-filter="has_epicrisis_pdf">
              <option value="">Todos</option>
              <option value="yes">Disponible</option>
              <option value="no">Pendiente</option>
            </select>
          </label>

          <label class="ui-field">
            <span>Actualizado desde</span>
            <input type="date" data-cases-filter="updated_from" aria-label="Filtrar casos actualizados desde esta fecha" />
          </label>

          <label class="ui-field">
            <span>Actualizado hasta</span>
            <input type="date" data-cases-filter="updated_to" aria-label="Filtrar casos actualizados hasta esta fecha" />
          </label>
        </form>

        <div class="cases-toolbar__foot">
          <p class="cases-toolbar__meta" data-cases-results-meta>Preparando bandeja de casos…</p>
          <p class="cases-toolbar__legacy ui-hidden" data-cases-legacy-note></p>
          <output class="ui-sr-only" aria-live="polite" data-cases-live></output>
        </div>
      </header>

      <div class="cases-workspace__body">
        <section class="cases-browser ui-card" aria-labelledby="cases-browser-title">
          <div class="cases-pane__header">
            <div>
              <p class="cases-pane__eyebrow">Listado</p>
              <h2 id="cases-browser-title">Casos disponibles</h2>
            </div>
            <span class="cases-pane__count" data-cases-count>0</span>
          </div>

          <div class="cases-pane__scroll">
            <div class="cases-accordion ui-hidden" data-cases-list></div>
            <div class="cases-empty" data-cases-empty>
              <h3>No hay casos disponibles con <code>case_key</code>.</h3>
              <p>Procesa historias o consolida soportes desde el dashboard para poblar esta bandeja.</p>
            </div>
          </div>
        </section>

        <section class="cases-detail ui-card" aria-labelledby="cases-detail-title">
          <div class="cases-pane__header">
            <div>
              <p class="cases-pane__eyebrow">Detalle</p>
              <h2 id="cases-detail-title">Caso seleccionado</h2>
            </div>
          </div>

          <div class="cases-pane__scroll">
            <div class="cases-empty" data-cases-detail-empty>
              <h3>Selecciona un caso</h3>
              <p>La bandeja de detalle mostrará documentos, estados y acciones rápidas del <code>case_key</code> activo.</p>
            </div>
            <div class="cases-detail__content ui-hidden" data-cases-detail></div>
          </div>
        </section>
      </div>
    </section>
  </div>

  <dialog
    class="cases-queue"
    data-cases-queue
    aria-labelledby="cases-queue-title"
    aria-describedby="cases-queue-description"
  >
    <div class="cases-queue__surface">
      <header class="cases-queue__header">
        <div class="cases-queue__headline">
          <p class="cases-pane__eyebrow">Continuidad operativa</p>
          <h2 id="cases-queue-title">Trabajos en curso y recientes</h2>
          <p id="cases-queue-description">
            Reanuda sesiones manuales, revisa lotes y retoma epicrisis sin reutilizar estado oculto del modal.
          </p>
        </div>
        <button
          type="button"
          class="cases-queue__close"
          data-cases-queue-close
          aria-label="Cerrar cola operativa"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="m6 6 12 12M18 6 6 18" />
          </svg>
        </button>
      </header>
      <div class="cases-queue__meta">
        <p data-cases-queue-meta>Preparando continuidad operativa…</p>
        <button type="button" class="ui-button ui-button--ghost" data-cases-queue-refresh>Actualizar</button>
      </div>
      <section class="cases-queue__summary" data-cases-queue-summary></section>
      <section class="cases-queue__list" data-cases-queue-list></section>
    </div>
  </dialog>

  <dialog
    class="cases-sheet"
    data-cases-sheet
    aria-labelledby="cases-sheet-title"
    aria-describedby="cases-sheet-description"
  >
    <div class="cases-sheet__surface">
      <header class="cases-sheet__header">
        <div class="cases-sheet__headline">
          <p class="cases-pane__eyebrow" data-cases-sheet-eyebrow>Lectura documental</p>
          <h2 id="cases-sheet-title" data-cases-sheet-title>Visor del caso</h2>
          <p id="cases-sheet-description" data-cases-sheet-description>
            Navega entre documentos clínicos y artefactos operativos sin salir de la bandeja.
          </p>
        </div>
        <button
          type="button"
          class="cases-sheet__close"
          data-cases-sheet-close
          aria-label="Cerrar visor documental"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="m6 6 12 12M18 6 6 18" />
          </svg>
        </button>
      </header>

      <div class="cases-sheet__layout">
        <aside class="cases-sheet__rail" data-cases-sheet-rail></aside>
        <section class="cases-sheet__content" data-cases-sheet-content></section>
      </div>
    </div>
  </dialog>

  <dialog
    class="cases-confirm-dialog"
    data-cases-confirm-dialog
    aria-labelledby="cases-confirm-title"
    aria-describedby="cases-confirm-description"
  >
    <form method="dialog" class="cases-confirm-dialog__surface">
      <header class="cases-confirm-dialog__header">
        <p class="cases-pane__eyebrow" data-cases-confirm-eyebrow>Confirmar acción</p>
        <h2 id="cases-confirm-title" data-cases-confirm-title>Eliminar elemento</h2>
      </header>
      <div class="cases-confirm-dialog__body">
        <p id="cases-confirm-description" data-cases-confirm-description></p>
        <div class="cases-confirm-dialog__warning ui-hidden" data-cases-confirm-warning></div>
      </div>
      <footer class="cases-confirm-dialog__actions">
        <button type="button" class="ui-button ui-button--ghost" data-cases-confirm-cancel>Cancelar</button>
        <button type="button" class="ui-button ui-button--danger" data-cases-confirm-accept>Eliminar</button>
      </footer>
    </form>
  </dialog>

{% endblock %}

{% block scripts %}
  <script src="/static/js/cases.js"></script>
{% endblock %}
