<div class="page-shell">
  <div class="content-container cups-container">
    <app-header
      title="Cargar CUPS"
      subtitle="Sube nota tecnica y tabla referencia"
      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 cups-card">
      <h2>Subir archivos</h2>
      <p class="subtitle">
        Selecciona los dos archivos Excel. El sistema ejecuta el script de Python y carga los SQL.
      </p>

      <div class="form-row">
        <label>Nota tecnica (Excel):</label>
        <input type="file" accept=".xlsx,.xls" (change)="onNotaSelected($event)" />
        <span class="file-name" *ngIf="notaFile">{{ notaFile.name }}</span>
      </div>

      <div class="form-row">
        <label>Tabla referencia (Excel):</label>
        <input type="file" accept=".xlsx,.xls" (change)="onReferenciaSelected($event)" />
        <span class="file-name" *ngIf="referenciaFile">{{ referenciaFile.name }}</span>
      </div>

      <div class="form-row acciones">
        <button
          class="btn btn-primary"
          (click)="procesarCups()"
          [disabled]="isLoading || !notaFile || !referenciaFile"
        >
          {{ isLoading ? 'Procesando...' : 'Procesar CUPS' }}
        </button>
      </div>

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