<div class="page-shell">
  <div class="content-container masivas-container">
    <app-header
      title="Carga masiva de autorizaciones"
      subtitle="Sube la plantilla Excel y genera autorizaciones pendientes"
      badgeText="SALUD UT"
      [showUserInfo]="isLoggedIn()"
      [userName]="getCurrentUser()?.nombre_completo"
      [userRole]="getCurrentUser()?.nombre_rol"
      [showLogout]="isLoggedIn()"
      (logout)="logout()"
      [showBack]="true"
      backLabel="Volver"
      (back)="volverDashboard()"
    ></app-header>

    <div class="card masivas-card">
      <h2>Subir plantilla</h2>
      <p class="subtitle">
        La columna de numero de autorizacion se ignora. Todas las autorizaciones quedan en estado pendiente.
      </p>

      <div class="form-row">
        <label>Archivo Excel:</label>
        <input
          #archivoInput
          type="file"
          accept=".xlsx,.xls"
          (change)="onArchivoSelected($event)"
        />
        <span class="file-name" *ngIf="archivoFile">{{ archivoFile.name }}</span>
      </div>

      <div class="form-row acciones">
        <button
          class="btn btn-primary"
          (click)="procesarMasivo(archivoInput)"
          [disabled]="isLoading || !archivoFile"
        >
          {{ isLoading ? 'Procesando...' : 'Procesar autorizaciones' }}
        </button>
      </div>

      <div class="status ok" *ngIf="statusMessage">{{ statusMessage }}</div>
      <div class="status error" *ngIf="errorMessage">{{ errorMessage }}</div>
    </div>

    <div class="card resumen-card" *ngIf="resumen">
      <h2>Resumen de la carga</h2>
      <div class="summary-grid">
        <div class="summary-item">
          <span class="summary-label">Total filas</span>
          <span class="summary-value">{{ resumen.total || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">Creadas</span>
          <span class="summary-value">{{ resumen.creadas || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">Omitidas</span>
          <span class="summary-value">{{ resumen.omitidas || resumen.omitidos || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">Duplicadas</span>
          <span class="summary-value">{{ resumen.duplicados || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">Sin paciente</span>
          <span class="summary-value">{{ resumen.sin_paciente || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">Sin CUPS</span>
          <span class="summary-value">{{ resumen.sin_cups || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">Sin IPS</span>
          <span class="summary-value">{{ resumen.sin_ips || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">CUPS no cubiertos</span>
          <span class="summary-value">{{ resumen.cups_no_cubiertos || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">IPS sin convenio</span>
          <span class="summary-value">{{ resumen.ips_sin_convenio || 0 }}</span>
        </div>
      </div>

      <div
        class="summary-note"
        *ngIf="(resumen.cups_no_cubiertos || 0) > 0 || (resumen.ips_sin_convenio || 0) > 0"
      >
        Se detectaron CUPS no cubiertos o IPS sin convenio. Las autorizaciones quedan pendientes para revision.
      </div>

      <div class="error-list" *ngIf="errores.length">
        <h3>Errores (max 50)</h3>
        <div class="error-table">
          <table class="table">
            <thead>
              <tr>
                <th>Fila</th>
                <th>Error</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let e of errores">
                <td>{{ e.fila || '-' }}</td>
                <td>{{ e.error || 'Error en fila' }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
