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

{% block title %}Dashboard operativo · EpicrisisIA{% endblock %}
{% block body_class %}dashboard-page{% endblock %}
{% block shell_class %}dashboard-shell{% endblock %}

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

{% block header_actions %}
  <div class="dashboard-header__actions">
    <button
      class="dashboard-header__menu-toggle"
      type="button"
      data-dashboard-nav-toggle
      aria-expanded="false"
      aria-controls="dashboard-sidebar"
    >
      <span class="ui-sr-only">Abrir navegación</span>
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M4 7h16M4 12h16M4 17h16" />
      </svg>
    </button>

    <div class="dashboard-search" data-dashboard-search-root>
      <label class="ui-sr-only" for="dashboard-search-input">Buscar cédula, caso o documento</label>
      <search class="dashboard-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="dashboard-search-input"
          type="search"
          name="q"
          placeholder="Buscar cédula, caso o documento"
          autocomplete="off"
          data-dashboard-search-input
        />
      </search>
      <div class="dashboard-search__results ui-card ui-hidden" data-dashboard-search-results></div>
    </div>

    <div class="dashboard-header__user" data-user-menu-root>
      <button class="dashboard-header__user-button" type="button" data-user-menu-button aria-expanded="false">
        <span class="dashboard-header__user-badge">{{ user.username[:1]|upper }}</span>
        <span class="dashboard-header__user-meta">
          <strong>{{ user.username }}</strong>
          <small>{{ "Administrador" if user.role == "admin" else "Auditor" }}</small>
        </span>
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m7 10 5 5 5-5" />
        </svg>
      </button>
      <div class="dashboard-header__dropdown ui-card ui-hidden" data-user-menu-panel>
        {% if user.role == "admin" %}
          <a href="/panel-admin">Panel admin</a>
        {% endif %}
        <a href="/perfil">Mi perfil</a>
        <a href="/logout">Cerrar sesión</a>
      </div>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="dashboard-app">
    <aside id="dashboard-sidebar" class="dashboard-sidebar" data-dashboard-sidebar>
      <div class="dashboard-sidebar__brand">
        <p class="dashboard-sidebar__eyebrow">Centro de operación clínica</p>
        <h1>EpicrisisIA</h1>
        <p class="dashboard-sidebar__summary">
          Consolida soportes, activa epicrisis y ejecuta RIPS desde una sola bandeja operativa.
        </p>
      </div>

      <nav class="dashboard-nav" aria-label="Navegación principal">
        {% for item in dashboard_nav %}
          <a
            href="{{ item.dashboard_href if item.id == 'upload' else item.href }}"
            class="dashboard-nav__link{% if item.is_active %} is-active{% endif %}"
            {% if item.id == 'upload' %}data-dashboard-jump="dashboard-quick-upload"{% endif %}
          >
            <span>{{ item.label }}</span>
          </a>
        {% endfor %}
      </nav>

      <div class="dashboard-sidebar__footer ui-card">
        <p class="dashboard-sidebar__footer-title">Acceso rápido al lote</p>
        <p class="ui-text-muted">Reabre seguimiento ZIP y las salidas masivas sin salir del tablero.</p>
        <a href="/subir_lote" class="ui-button ui-button--secondary">Abrir carga masiva</a>
      </div>
    </aside>

    <section class="dashboard-main">
      <header class="dashboard-hero">
        <div>
          <p class="dashboard-hero__eyebrow">Tablero operativo</p>
          <h2>Todo el trabajo clínico-administrativo, desde una sola vista</h2>
          <p class="dashboard-hero__copy">
            Entra por búsqueda, carga rápida o cola de casos recientes y dispara la siguiente acción en uno o dos clics.
          </p>
        </div>
        <div class="dashboard-hero__summary" data-dashboard-summary>
          <div class="dashboard-kpi">
            <span class="dashboard-kpi__label">Pacientes activos</span>
            <strong data-summary-patients>0</strong>
          </div>
          <div class="dashboard-kpi">
            <span class="dashboard-kpi__label">Casos consolidados</span>
            <strong data-summary-cases>0</strong>
          </div>
          <div class="dashboard-kpi">
            <span class="dashboard-kpi__label">Epicrisis listas</span>
            <strong data-summary-epicrisis>0</strong>
          </div>
          <div class="dashboard-kpi">
            <span class="dashboard-kpi__label">Documentos</span>
            <strong data-summary-documents>0</strong>
          </div>
        </div>
      </header>

      <output class="dashboard-feedback ui-alert ui-hidden" data-dashboard-feedback aria-live="polite">
        <span class="ui-alert__title" data-dashboard-feedback-title></span>
        <span class="ui-alert__body" data-dashboard-feedback-body></span>
      </output>

      <div class="dashboard-grid">
        <section class="ui-card dashboard-card">
          <div class="dashboard-card__header">
            <div>
              <p class="dashboard-card__eyebrow">Atajos de trabajo</p>
              <h3>Acciones rápidas</h3>
            </div>
            <button
              type="button"
              class="ui-button ui-button--secondary"
              data-case-upload-open="story"
              aria-controls="case-upload-dialog"
              aria-haspopup="dialog"
            >
              Nuevo cargue
            </button>
          </div>
          <div class="dashboard-action-grid">
            <button
              type="button"
              class="dashboard-action"
              data-case-upload-open="story"
              aria-controls="case-upload-dialog"
              aria-haspopup="dialog"
            >
              <strong>Nueva historia clínica</strong>
              <span>Subir y procesar documento base</span>
            </button>
            <button
              type="button"
              class="dashboard-action"
              data-case-upload-open="support"
              aria-controls="case-upload-dialog"
              aria-haspopup="dialog"
            >
              <strong>Documento adicional</strong>
              <span>Factura, quirúrgico, laboratorio o radiología</span>
            </button>
            <button
              type="button"
              class="dashboard-action"
              data-case-upload-open="prefactura"
              aria-controls="case-upload-dialog"
              aria-haspopup="dialog"
            >
              <strong>Prefactura</strong>
              <span>PDF único con soportes del caso</span>
            </button>
            <a href="/casos" class="dashboard-action">
              <strong>Ver casos</strong>
              <span>Ir al detalle profundo y revisión por caso</span>
            </a>
            <a href="/subir_lote" class="dashboard-action">
              <strong>Carga masiva ZIP</strong>
              <span>Seguimiento batch y workbook por lote</span>
            </a>
            <a href="/soat_agent" class="dashboard-action">
              <strong>Codificar SOAT</strong>
              <span>Resolver correspondencias clínicas y administrativas</span>
            </a>
            <a href="/soat_chat" class="dashboard-action">
              <strong>Chat SOAT</strong>
              <span>Consulta guiada para soporte normativo y códigos</span>
            </a>
          </div>
        </section>

        <div class="dashboard-side-stack">
          <section class="ui-card dashboard-card dashboard-card--activity" data-dashboard-collapse-card>
            <div class="dashboard-card__header">
              <div>
                <p class="dashboard-card__eyebrow">Cola de trabajo</p>
                <h3>Actividad reciente</h3>
              </div>
              <div class="dashboard-card__actions">
                <a href="/casos" class="ui-button ui-button--ghost">Ver todos los casos</a>
                <button
                  type="button"
                  class="dashboard-card__collapse"
                  data-dashboard-collapse-button
                  data-expanded-label="Ocultar"
                  data-collapsed-label="Mostrar"
                  aria-expanded="true"
                  aria-controls="dashboard-activity-panel"
                >
                  <span data-dashboard-collapse-label>Ocultar</span>
                  <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="m7 10 5 5 5-5" />
                  </svg>
                </button>
              </div>
            </div>
            <div id="dashboard-activity-panel" class="dashboard-card__panel" data-dashboard-collapse-panel>
              <div class="dashboard-empty ui-hidden" data-dashboard-activity-empty>
                Aún no hay actividad reciente. Empieza con una historia clínica o reabre un caso existente.
              </div>
              <div class="dashboard-activity-list" data-dashboard-activity-list></div>
            </div>
          </section>

          <section class="ui-card dashboard-card dashboard-card--cases" data-dashboard-collapse-card>
            <div class="dashboard-card__header">
              <div>
                <p class="dashboard-card__eyebrow">Seguimiento</p>
                <h3>Casos recientes</h3>
              </div>
              <div class="dashboard-card__actions">
                <a href="/casos" class="ui-button ui-button--secondary">Ir al detalle de casos</a>
                <button
                  type="button"
                  class="dashboard-card__collapse"
                  data-dashboard-collapse-button
                  data-expanded-label="Ocultar"
                  data-collapsed-label="Mostrar"
                  aria-expanded="true"
                  aria-controls="dashboard-cases-panel"
                >
                  <span data-dashboard-collapse-label>Ocultar</span>
                  <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="m7 10 5 5 5-5" />
                  </svg>
                </button>
              </div>
            </div>
            <div id="dashboard-cases-panel" class="dashboard-card__panel" data-dashboard-collapse-panel>
              <div class="dashboard-empty ui-hidden" data-dashboard-cases-empty>
                Todavía no hay casos consolidados para este usuario.
              </div>
              <div class="dashboard-case-grid" data-dashboard-case-grid></div>
            </div>
          </section>

          <section class="ui-card dashboard-card dashboard-card--batches" data-dashboard-collapse-card>
            <div class="dashboard-card__header">
              <div>
                <p class="dashboard-card__eyebrow">Carga masiva</p>
                <h3>Lotes recientes</h3>
              </div>
              <div class="dashboard-card__actions">
                <a href="/subir_lote" class="ui-button ui-button--secondary">Abrir historial</a>
                <button
                  type="button"
                  class="dashboard-card__collapse"
                  data-dashboard-collapse-button
                  data-expanded-label="Ocultar"
                  data-collapsed-label="Mostrar"
                  aria-expanded="true"
                  aria-controls="dashboard-batches-panel"
                >
                  <span data-dashboard-collapse-label>Ocultar</span>
                  <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="m7 10 5 5 5-5" />
                  </svg>
                </button>
              </div>
            </div>
            <div id="dashboard-batches-panel" class="dashboard-card__panel" data-dashboard-collapse-panel>
              <div class="dashboard-empty ui-hidden" data-dashboard-batches-empty>
                Aún no hay lotes recientes para este usuario.
              </div>
              <div class="dashboard-batch-list" data-dashboard-batch-list></div>
            </div>
          </section>
        </div>
      </div>
    </section>
  </div>

  {% set upload_dialog_mode = "all" %}
  {% include "includes/case_upload_dialog.html" %}
{% endblock %}

{% block scripts %}
  <script src="/static/js/case-upload-dialog.js?v={{ case_upload_asset_version }}"></script>
  <script src="/static/js/dashboard.js"></script>
{% endblock %}
