<div class="page-shell">
  <div class="content-container pacientes-container">
    <app-header
      title="Cargar pacientes"
      subtitle="Sube el Excel de PPL para actualizar pacientes e ingresos"
      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 pacientes-card">
      <h2>Subir archivo</h2>
      <p class="subtitle">
        El sistema procesa paciente, ingreso y establecimiento. Usa la plantilla oficial de pacientes.
      </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)="procesarPacientes(archivoInput)"
          [disabled]="isLoading || !archivoFile"
        >
          {{ isLoading ? 'Procesando...' : 'Procesar pacientes' }}
        </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">Pacientes activos</span>
          <span class="summary-value">{{ resumen.activos || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">Pacientes antiguos</span>
          <span class="summary-value">{{ resumen.antiguos || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</div>
