<!doctype html>
{% set upload_dialog_mode = upload_dialog_mode|default("all") %}
<dialog
  id="case-upload-dialog"
  class="dashboard-upload-modal"
  data-case-upload-dialog
  data-case-upload-mode="{{ upload_dialog_mode }}"
>
  <div class="dashboard-upload-modal__surface">
    <div class="dashboard-upload-modal__header">
      <div>
        <p class="dashboard-card__eyebrow case-upload-eyebrow">Entrada rápida</p>
        <h3 id="case-upload-dialog-title" data-case-upload-title>
          {{ "Agregar documento al caso" if upload_dialog_mode == "support-only" else "Cargue guiado de documentos" }}
        </h3>
        <p class="ui-text-muted" data-case-upload-copy>
          {% if upload_dialog_mode == "support-only" %}
            Asocia un soporte a un caso existente sin salir de la bandeja operativa.
          {% else %}
            Procesa una historia clínica o agrega soportes complementarios sin abandonar la bandeja.
          {% endif %}
        </p>
      </div>
      <button
        type="button"
        class="dashboard-upload-modal__close"
        data-case-upload-close
        aria-label="Cerrar cargue guiado"
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m6 6 12 12M18 6 6 18" />
        </svg>
      </button>
    </div>

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

    <section class="ui-card ui-hidden" data-case-upload-tracker aria-live="polite">
      <div class="ui-stack">
        <p class="dashboard-card__eyebrow">Seguimiento</p>
        <h4 data-case-upload-tracker-title>Carga en preparación</h4>
        <p class="ui-text-muted" data-case-upload-tracker-status>
          El documento fue aceptado y está esperando procesamiento.
        </p>
        <p class="ui-text-muted" data-case-upload-tracker-detail></p>
        <div class="dashboard-upload-tracker__actions">
          <button
            type="button"
            class="ui-button ui-button--accent ui-hidden"
            data-case-upload-retry
            aria-busy="false"
          >
            Reintentar procesamiento
          </button>
          <a
            class="ui-button ui-button--secondary"
            data-case-upload-tracker-link
            href="/casos"
            target="_self"
          >
            Ver casos
          </a>
        </div>
      </div>
    </section>

    <section class="ui-card ui-hidden" data-case-upload-session aria-live="polite">
      <div class="ui-stack">
        <div class="dashboard-upload-panel__actions">
          <div>
            <p class="dashboard-card__eyebrow">Caso activo</p>
            <h4 data-case-upload-session-title>Sesión manual en curso</h4>
            <p class="ui-text-muted" data-case-upload-session-copy>
              Los soportes nuevos se asociarán al `case_key` activo hasta que decidas cambiarlo.
            </p>
          </div>
          <button type="button" class="ui-button ui-button--ghost ui-hidden" data-case-upload-change-case>
            Cambiar caso
          </button>
        </div>
        <div class="dashboard-upload-session__meta" data-case-upload-session-meta></div>
        <div class="dashboard-upload-session__queue ui-stack">
          <p class="dashboard-card__eyebrow">Cargas en curso</p>
          <div data-case-upload-session-queue></div>
        </div>
      </div>
    </section>

    <section class="ui-card ui-hidden" data-case-upload-confirmation aria-live="polite">
      <div class="ui-stack">
        <p class="dashboard-card__eyebrow">Confirmación requerida</p>
        <h4 data-case-upload-confirmation-title>Revisa el documento antes de continuar</h4>
        <p class="ui-text-muted" data-case-upload-confirmation-copy>
          El sistema detectó datos provisionales o una contradicción que debes resolver antes de materializar.
        </p>
        <div class="dashboard-upload-confirmation__warnings ui-stack ui-hidden" data-case-upload-warning-list></div>
        <div class="dashboard-upload-confirmation__impacts ui-stack ui-hidden" data-case-upload-impact-list></div>
        <div class="ui-stack ui-hidden" data-case-upload-type-resolution>
          <p class="ui-text-muted">
            El sistema detectó un tipo documental diferente. Usa el detectado salvo que necesites forzar el tipo elegido.
          </p>
          <label class="ui-field">
            <input
              type="radio"
              name="case-upload-effective-document-type"
              value=""
              data-case-upload-effective-type-option="detected"
            />
            <span data-case-upload-effective-type-label="detected">Usar tipo detectado</span>
          </label>
          <label class="ui-field">
            <input
              type="radio"
              name="case-upload-effective-document-type"
              value=""
              data-case-upload-effective-type-option="selected"
            />
            <span data-case-upload-effective-type-label="selected">Mantener tipo seleccionado</span>
          </label>
        </div>
        <div class="ui-grid ui-grid--3 ui-hidden" data-case-upload-identity-fields>
          <label class="ui-field">
            <span>Número de caso</span>
            <input type="text" data-case-upload-confirm-case-number />
          </label>
          <label class="ui-field">
            <span>Identificación</span>
            <input type="text" data-case-upload-confirm-patient-id />
          </label>
          <label class="ui-field">
            <span>Nombre completo</span>
            <input type="text" data-case-upload-confirm-patient-name />
          </label>
        </div>
        <div class="dashboard-upload-panel__actions">
          <button type="button" class="ui-button ui-button--accent" data-case-upload-confirm-accept>
            Confirmar y continuar
          </button>
          <button type="button" class="ui-button ui-button--ghost" data-case-upload-confirm-cancel>
            Cancelar carga
          </button>
        </div>
      </div>
    </section>

    <div class="dashboard-upload-switch" role="tablist" aria-label="Tipo de cargue" data-case-upload-switch>
      <button
        type="button"
        class="dashboard-upload-switch__button is-active"
        data-case-upload-tab="story"
        role="tab"
        aria-selected="true"
      >
        Historia clínica
      </button>
      <button
        type="button"
        class="dashboard-upload-switch__button"
        data-case-upload-tab="support"
        role="tab"
        aria-selected="false"
      >
        Documento adicional
      </button>
      <button
        type="button"
        class="dashboard-upload-switch__button"
        data-case-upload-tab="prefactura"
        role="tab"
        aria-selected="false"
      >
        Prefactura
      </button>
    </div>

    <div class="dashboard-upload-panels">
      <form class="dashboard-upload-panel is-active" data-case-upload-panel="story" data-case-upload-story-form>
        <label for="case-upload-story-file">Archivo PDF</label>
        <input id="case-upload-story-file" type="file" name="file" accept=".pdf" required />
        <div class="dashboard-upload-panel__actions">
          <button class="ui-button" type="submit" data-submit-label="Procesar historia">Procesar historia</button>
          <p class="ui-text-muted">El sistema sube el archivo y dispara el procesamiento clínico base.</p>
        </div>
      </form>

      <form class="dashboard-upload-panel ui-hidden" data-case-upload-panel="support" data-case-upload-support-form>
        <div class="ui-grid ui-grid--2">
          <div class="ui-stack">
            <label for="case-upload-support-file">Archivo PDF</label>
            <input id="case-upload-support-file" type="file" name="file" accept=".pdf" required />
          </div>
          <div class="ui-stack">
            <label for="case-upload-support-type">Tipo de documento</label>
            <select id="case-upload-support-type" name="tipo_documento" required>
              <option value="">Selecciona un tipo</option>
              <option value="quirurgico">Quirúrgico</option>
              <option value="factura">Factura</option>
              <option value="laboratorio">Laboratorio</option>
              <option value="radiologia">Radiología</option>
              <option value="generico">Genérico</option>
            </select>
          </div>
        </div>

        <div class="dashboard-upload-panel__case-picker ui-hidden" data-case-upload-case-picker>
          <div class="ui-alert ui-alert--info ui-hidden" data-case-upload-case-lock>
            <div class="ui-alert__body" data-case-upload-case-lock-copy></div>
          </div>
          <div class="ui-field">
            <label for="case-upload-case-search">Buscar caso</label>
            <input
              id="case-upload-case-search"
              type="search"
              autocomplete="off"
              placeholder="Buscar por cédula, número o case key"
              data-case-upload-case-search
            />
            <p class="ui-field__help">Filtra los casos disponibles antes de asociar el documento.</p>
          </div>
          <div class="ui-field">
            <label for="case-upload-case-select">Caso destino</label>
            <select
              id="case-upload-case-select"
              name="case_key"
              size="6"
              data-case-upload-case-select
            ></select>
            <p class="ui-field__help" data-case-upload-case-caption>
              Selecciona el caso que recibirá el documento.
            </p>
          </div>
        </div>

        <div class="ui-stack" data-case-upload-patient-field>
          <label for="case-upload-support-patient">Nombre del paciente (opcional)</label>
          <input
            id="case-upload-support-patient"
            type="text"
            name="nombre_paciente"
            placeholder="Déjalo vacío si debe inferirse automáticamente"
            data-case-upload-patient-input
          />
        </div>

        <div class="dashboard-upload-panel__actions">
          <button class="ui-button ui-button--accent" type="submit" data-submit-label="Agregar soporte">
            Agregar soporte
          </button>
          <p class="ui-text-muted" data-case-upload-support-help>
            Ideal para completar el caso con factura, quirúrgico o ayudas diagnósticas.
          </p>
        </div>
      </form>

      <form
        class="dashboard-upload-panel ui-hidden"
        data-case-upload-panel="prefactura"
        data-case-upload-prefactura-form
      >
        <label for="case-upload-prefactura-file">PDF compuesto de prefactura</label>
        <input id="case-upload-prefactura-file" type="file" name="file" accept=".pdf" required />
        <div class="dashboard-upload-panel__actions">
          <button class="ui-button ui-button--accent" type="submit" data-submit-label="Procesar prefactura">
            Procesar prefactura
          </button>
          <p class="ui-text-muted">
            Sube el PDF único con prefactura y soportes. El sistema separa categorías y consolida el caso por número de caso.
          </p>
        </div>
      </form>

    </div>
  </div>
</dialog>
