<div class="page-shell">
  <div class="content-container">
    <app-header
      title="Autorizaciones por fecha"
      subtitle="Consulta y descarga de autorizaciones por rango de fechas"
      badgeText="SALUD UT"
      [showUserInfo]="isLoggedIn()"
      [userName]="getCurrentUser()?.nombre_completo"
      [userRole]="getCurrentUser()?.nombre_rol"
      [showLogout]="isLoggedIn()"
      (logout)="logout()"
      [showBack]="true"
      backLabel="Volver"
      (back)="volverAtras()"
    ></app-header>

    <!-- Mensajes -->
    <div class="alert alert-error" *ngIf="errorMessage">
      <span class="alert-icon">!</span>
      <span class="alert-message">{{ errorMessage }}</span>
      <button class="alert-close" (click)="limpiarMensajes()">&times;</button>
    </div>

    <div class="alert alert-success" *ngIf="successMessage">
      <span class="alert-icon">&#10003;</span>
      <span class="alert-message">{{ successMessage }}</span>
      <button class="alert-close" (click)="limpiarMensajes()">&times;</button>
    </div>

    <!-- Filtros -->
    <div class="filtros-card card">
      <h2>Rango de fechas</h2>
      <form class="filtros-form" [formGroup]="filtroForm" (ngSubmit)="buscarAutorizaciones()">
        <div class="form-row">
          <div class="form-group">
            <label for="fecha_inicio">Fecha de inicio:</label>
            <input
              id="fecha_inicio"
              type="date"
              formControlName="fecha_inicio"
              [class.error]="fecha_inicio?.invalid && fecha_inicio?.touched"
              (change)="validarFechas()"
            />
            <div class="error-message" *ngIf="fecha_inicio?.invalid && fecha_inicio?.touched">
              {{ getFechaInicioErrorMessage() }}
            </div>
          </div>

          <div class="form-group">
            <label for="fecha_fin">Fecha de fin:</label>
            <input
              id="fecha_fin"
              type="date"
              formControlName="fecha_fin"
              [class.error]="fecha_fin?.invalid && fecha_fin?.touched"
              (change)="validarFechas()"
            />
            <div class="error-message" *ngIf="fecha_fin?.invalid && fecha_fin?.touched">
              {{ getFechaFinErrorMessage() }}
            </div>
          </div>

          <div class="form-actions">
            <button
              type="submit"
              class="btn btn-primary btn-buscar"
              [disabled]="filtroForm.invalid || isLoading"
            >
              <span *ngIf="!isLoading">Buscar</span>
              <span *ngIf="isLoading" class="loading-spinner">
                <span class="spinner"></span>
                Buscando...
              </span>
            </button>
          </div>
        </div>
      </form>
    </div>

    <!-- Resultados -->
    <div class="resultados-section card" *ngIf="hayResultados || autorizaciones.length > 0">
      <div class="resultados-header">
        <h2>
          Resultados ({{ autorizacionesFiltradas.length }} autorizaciones
          <span *ngIf="filtroNumero.trim().length > 0">
            de {{ autorizaciones.length }}
          </span>
          )
        </h2>
        <div class="resultados-filtro-numero">
          <label for="filtroNumero">Buscar numero:</label>
          <input
            id="filtroNumero"
            type="text"
            [ngModel]="filtroNumero"
            (ngModelChange)="onFiltroNumeroChange($event)"
            placeholder="Numero de autorizacion"
          />
        </div>
        <div class="resultados-actions" *ngIf="esAdmin">
          <div class="estado-masivo">
            <label for="estadoMasivo">Estado masivo:</label>
            <select
              id="estadoMasivo"
              [(ngModel)]="estadoMasivo"
              [disabled]="actualizandoMasivo"
            >
              <option value="pendiente">Pendiente</option>
              <option value="autorizado">Autorizado</option>
              <option value="no_autorizado">No autorizado</option>
            </select>
            <button
              class="btn btn-secondary"
              type="button"
              (click)="aplicarEstadoMasivo()"
              [disabled]="actualizandoMasivo || autorizaciones.length === 0"
            >
              {{ actualizandoMasivo ? 'Actualizando...' : 'Aplicar a todo el rango' }}
            </button>
          </div>
          <button
            class="btn btn-secondary btn-exportar"
            (click)="exportarAExcel()"
            title="Exportar a Excel"
            [disabled]="descargandoZip || descargandoPdf"
          >
            Exportar Excel
          </button>
              <button
                class="btn btn-secondary btn-descargar-todos"
                (click)="descargarTodosLosPdfs()"
                title="Descargar todos los PDFs"
                [disabled]="descargandoZip"
              >
                Descargar todos los PDFs
              </button>
        </div>
      </div>

      <!-- Tabla de resultados -->
      <div class="table-container">
        <table class="table autorizaciones-table">
          <thead>
            <tr>
              <th>N° autorización</th>
              <th>Fecha y hora</th>
              <th>Interno</th>
            <th>Nombre paciente</th>
            <th>Version</th>
            <th>Tipo autorizacion</th>
            <th>Tipo servicio</th>
            <th>CUPS</th>
            <th>Cubre</th>
            <th>Nivel</th>
            <th>IPS</th>
            <th>Municipio</th>
            <th>Departamento</th>
            <th>Autorizante</th>
            <th>Establecimiento</th>
            <th>Estado</th>
            <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngIf="autorizacionesFiltradas.length === 0">
              <td class="no-result" colspan="17">
                No hay autorizaciones para ese numero.
              </td>
            </tr>
            <tr
              *ngFor="let aut of autorizacionesFiltradas; let i = index; trackBy: trackByAutorizacion"
              [class.even-row]="i % 2 === 0"
            >
              <td class="numero-autorizacion">
                <strong>{{ aut.numero_autorizacion }}</strong>
              </td>
              <td class="fecha">{{ formatDateTime(aut.fecha_autorizacion) }}</td>
              <td class="interno">{{ aut.interno }}</td>
            <td class="nombre-paciente">{{ aut.nombre_paciente }}</td>
            <td class="version">{{ aut.version || 1 }}</td>
            <td class="tipo-autorizacion">
              {{ getTipoAutorizacionLabel(aut.tipo_autorizacion) }}
            </td>
            <td class="tipo-servicio">
              {{ getTipoServicioLabel(aut.tipo_servicio) }}
            </td>
            <td class="cup-codigo">{{ aut.cup_codigo }}</td>
            <td class="cup-cobertura">
              <span
                class="cobertura-badge"
                [class.cobertura-ok]="esCupCubierto(aut)"
                [class.cobertura-no]="!esCupCubierto(aut)"
              >
                {{ getCoberturaLabel(aut) }}
              </span>
            </td>
            <td class="cup-nivel">{{ aut.cup_nivel }}</td>
            <td class="ips">
              <div class="ips-info">
                <span>{{ aut.nombre_ips }}</span>
                <span
                  class="badge badge-danger ips-convenio"
                  *ngIf="aut.ips_tiene_convenio === false"
                >
                  No cubre IPS
                </span>
              </div>
            </td>
              <td class="municipio">{{ aut.municipio || '-' }}</td>
              <td class="departamento">{{ aut.departamento || '-' }}</td>
              <td class="autorizante">{{ aut.nombre_autorizante }}</td>
              <td class="establecimiento">{{ aut.nombre_establecimiento }}</td>
              <td class="estado">
                <ng-container *ngIf="esAdmin; else estadoTexto">
                  <select
                    [ngModel]="aut.estado_autorizacion || 'pendiente'"
                    (ngModelChange)="actualizarEstadoAutorizacion(aut, $event)"
                    [disabled]="actualizandoEstado[aut.numero_autorizacion]"
                  >
                    <option value="pendiente">Pendiente</option>
                    <option value="autorizado">Autorizado</option>
                    <option value="no_autorizado">No autorizado</option>
                  </select>
                  <span
                    class="mini-status"
                    *ngIf="actualizandoEstado[aut.numero_autorizacion]"
                  >
                    Guardando...
                  </span>
                </ng-container>
                <ng-template #estadoTexto>
                  <span class="estado-label">
                    {{ getEstadoAutorizacionLabel(aut.estado_autorizacion) }}
                  </span>
                </ng-template>
              </td>
              <td class="acciones">
                <button
                  class="btn btn-success btn-sm btn-descargar"
                  (click)="descargarPdf(aut)"
                  title="Descargar PDF"
                  [disabled]="descargandoPdf || !puedeDescargarPdfAutorizacion(aut)"
                >
                  PDF
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="status" *ngIf="avisoAutorizaciones">
      Mostrando hasta {{ limiteAutorizaciones }} autorizaciones.
    </div>

    <!-- Estado vacío -->
    <div class="empty-state card" *ngIf="!hayResultados && !isLoading && autorizaciones.length === 0">
      <div class="empty-icon">&#x1F5C2;</div>
      <h3>No hay resultados para mostrar</h3>
      <p>Selecciona un rango de fechas y haz clic en "Buscar" para consultar las autorizaciones.</p>
    </div>

    <!-- Indicador de carga simple (línea abajo) -->
    <div class="status-line" *ngIf="isLoading">
      <span class="spinner-inline"></span>
      Consultando autorizaciones, por favor espera...
    </div>

    <div class="status-line" *ngIf="descargandoZip">
      <span class="spinner-inline"></span>
      Generando ZIP de autorizaciones, por favor espera...
    </div>

    <div class="status-line" *ngIf="descargandoPdf">
      <span class="spinner-inline"></span>
      Generando PDF, por favor espera...
    </div>
  </div>
</div>
