<div class="page-shell">
  <div class="content-container ips-reps-container">
    <app-header
      title="Cargar IPS y REPS"
      subtitle="Actualiza prestadores e informacion de profesionales"
      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="upload-grid">
      <div class="card upload-card">
        <h2>Cargar IPS</h2>
        <p class="subtitle">
          Sube el archivo ips.xlsx para actualizar convenios y datos de IPS.
        </p>

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

        <div class="form-row acciones">
          <button
            class="btn btn-primary"
            (click)="procesarIps(ipsInput)"
            [disabled]="isLoadingIps || !ipsFile"
          >
            {{ isLoadingIps ? 'Procesando...' : 'Cargar IPS' }}
          </button>
        </div>

        <div class="status ok" *ngIf="statusIps">{{ statusIps }}</div>
        <div class="status error" *ngIf="errorIps">{{ errorIps }}</div>

        <div class="summary-grid" *ngIf="ipsResumen">
          <div class="summary-item">
            <span class="summary-label">Total filas</span>
            <span class="summary-value">{{ ipsResumen.total || 0 }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">Insertadas</span>
            <span class="summary-value">{{ ipsResumen.insertados || 0 }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">Actualizadas</span>
            <span class="summary-value">{{ ipsResumen.actualizados || 0 }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">Omitidas</span>
            <span class="summary-value">{{ ipsResumen.omitidos || 0 }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">Desactivadas</span>
            <span class="summary-value">{{ ipsResumen.desactivados || 0 }}</span>
          </div>
        </div>

        <div class="error-list" *ngIf="ipsErrores.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 ipsErrores">
                  <td>{{ e.fila || '-' }}</td>
                  <td>{{ e.error || 'Error en fila' }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="card upload-card">
        <h2>Cargar REPS</h2>
        <p class="subtitle">
          Sube el archivo reps.xlsx para actualizar profesionales REPS.
        </p>

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

        <div class="form-row acciones">
          <button
            class="btn btn-primary"
            (click)="procesarReps(repsInput)"
            [disabled]="isLoadingReps || !repsFile"
          >
            {{ isLoadingReps ? 'Procesando...' : 'Cargar REPS' }}
          </button>
        </div>

        <div class="status ok" *ngIf="statusReps">{{ statusReps }}</div>
        <div class="status error" *ngIf="errorReps">{{ errorReps }}</div>

        <div class="summary-grid" *ngIf="repsResumen">
          <div class="summary-item">
            <span class="summary-label">Total filas</span>
            <span class="summary-value">{{ repsResumen.total || 0 }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">Insertadas</span>
            <span class="summary-value">{{ repsResumen.insertados || 0 }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">Actualizadas</span>
            <span class="summary-value">{{ repsResumen.actualizados || 0 }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">Omitidas</span>
            <span class="summary-value">{{ repsResumen.omitidos || 0 }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">Desactivados</span>
            <span class="summary-value">{{ repsResumen.desactivados || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
