<div class="page-shell">
  <div class="content-container">
    <app-header
      title="SALUD UT"
      subtitle="Módulo de autorizaciones médicas"
      [showUserInfo]="true"
      [userName]="getNombreUsuario()"
      [userRole]="getNombreRolFormateado()"
      [showLogout]="true"
      (logout)="logout()"
    ></app-header>

    <!-- Mensaje de error -->
    <div class="alert alert-error" *ngIf="errorMessage">
      <span class="alert-icon" aria-hidden="true">!</span>
      <span class="alert-message">{{ errorMessage }}</span>
      <button class="alert-close" (click)="cerrarMensajeError()" title="Cerrar">
        &times;
      </button>
    </div>

    <!-- Main Content -->
    <main class="dashboard-main">
      <!-- Welcome Section -->
      <section class="welcome-section card">
        <h2>Bienvenido, {{ getNombreUsuario() }}</h2>
        <p class="welcome-date">{{ getFechaActual() }}</p>
        <p class="welcome-description">
          Sistema de autorizaciones médicas para el INPEC
        </p>
      </section>

      <!-- Quick Actions -->
      <section class="quick-actions">
        <h3 class="section-title">Acciones rápidas</h3>
        <div class="actions-grid">
          <!-- Buscar Pacientes (disponible para todos) -->
          <div class="action-card" (click)="irABusquedaPacientes()">
            <span class="action-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" role="img" aria-label="">
                <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"></circle>
                <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="currentColor" stroke-width="2"></line>
              </svg>
            </span>
            <h4>Buscar pacientes</h4>
            <p>Consultar información de pacientes y generar autorizaciones</p>
          </div>

          <!-- Cargar Pacientes (solo administradores) -->
          <div
            class="action-card"
            *ngIf="puedeCargarPacientes()"
            (click)="abrirCargadorPacientes(inputExcelPacientes)"
          >
            <span class="action-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" role="img" aria-label="">
                <path
                  d="M12 3v12m0 0l-4-4m4 4l4-4"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <rect x="4" y="17" width="16" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="2"></rect>
              </svg>
            </span>
            <h4>Cargar pacientes</h4>
            <p>
              {{ cargandoExcel
                ? 'Cargando archivo de pacientes...'
                : 'Subir archivo Excel con datos de pacientes' }}
            </p>
            <div class="admin-badge">Solo admin</div>
          </div>

          <!-- Cargar CUPS (solo administradores) -->
          <div
            class="action-card"
            *ngIf="puedeCargarCups()"
            (click)="irACargarCups()"
          >
            <span class="action-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" role="img" aria-label="">
                <path
                  d="M12 3v12m0 0l-4-4m4 4l4-4"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <rect x="4" y="17" width="16" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="2"></rect>
              </svg>
            </span>
            <h4>Cargar CUPS</h4>
            <p>
              Subir nota tecnica y tabla referencia
            </p>
            <div class="admin-badge">Solo admin</div>
          </div>

          <!-- Ver Autorizaciones por Fecha (solo administradores) -->
          <div
            class="action-card"
            (click)="irAVerAutorizacionesPorFecha()"
            *ngIf="puedeVerTodasAutorizaciones()"
          >
            <span class="action-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" role="img" aria-label="">
                <rect x="3" y="4" width="18" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2"></rect>
                <line x1="8" y1="2.5" x2="8" y2="6.5" stroke="currentColor" stroke-width="2"></line>
                <line x1="16" y1="2.5" x2="16" y2="6.5" stroke="currentColor" stroke-width="2"></line>
                <line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="2"></line>
              </svg>
            </span>
            <h4>Autorizaciones por fecha</h4>
            <p>Consultar y descargar autorizaciones por rango de fechas</p>
            <div class="admin-badge">Solo admin</div>
          </div>

          <div
            class="action-card"
            *ngIf="puedeGestionarUsuarios()"
            (click)="irAUsuarios()"
          >
            <span class="action-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" role="img" aria-label="">
                <circle cx="9" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"></circle>
                <path
                  d="M2 21c0-3.5 3.1-6 7-6s7 2.5 7 6"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                ></path>
                <circle cx="18" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle>
              </svg>
            </span>
            <h3>Gestionar usuarios</h3>
            <p>Crear y administrar usuarios del sistema.</p>
            <span class="admin-badge">Solo admin</span>
          </div>
        </div>

        <!-- Input de archivo real (oculto) -->
        <input
          #inputExcelPacientes
          type="file"
          accept=".xlsx,.xls"
          hidden
          (click)="$event.stopPropagation()"
          (change)="onExcelSelected($event)"
        />

        <!-- Mensaje de estado de la carga -->
        <p class="excel-status" *ngIf="estadoCargaExcel">
          {{ estadoCargaExcel }}
        </p>
      </section>

      <!-- User Role Information -->
      <section class="role-info card" *ngIf="currentUser">
        <h3 class="section-title">Información de acceso</h3>
        <div class="role-details">
          <div class="role-item">
            <span class="role-label">Rol:</span>
            <span class="role-value">{{ getNombreRolFormateado() }}</span>
          </div>

          <!-- Sedes asignadas (solo para administrativos) -->
          <div
            class="role-item"
            *ngIf="
              currentUser.nombre_rol === 'administrativo_sede' &&
              getSedesUsuario().length > 0
            "
          >
            <span class="role-label">Sedes asignadas:</span>
            <div class="sedes-list">
              <span
                class="sede-badge"
                *ngFor="let sede of getSedesUsuario()"
                [title]="sede.nombre_establecimiento"
              >
                {{ sede.nombre_establecimiento }}
              </span>
            </div>
          </div>
        </div>
      </section>

      <!-- Permissions Summary -->
      <section class="permissions-summary card">
        <h3 class="section-title">Permisos disponibles</h3>
        <div class="permissions-grid">
          <div
            class="permission-item"
            [class.has-permission]="puedeGenerarAutorizaciones()"
          >
            <span class="permission-icon" *ngIf="puedeGenerarAutorizaciones(); else noPermGen">
              &check;
            </span>
            <ng-template #noPermGen>
              <span class="permission-icon">&times;</span>
            </ng-template>
            <span class="permission-text">Generar autorizaciones</span>
          </div>

          <div
            class="permission-item"
            [class.has-permission]="puedeCargarPacientes()"
          >
            <span class="permission-icon" *ngIf="puedeCargarPacientes(); else noPermExcel">
              &check;
            </span>
            <ng-template #noPermExcel>
              <span class="permission-icon">&times;</span>
            </ng-template>
            <span class="permission-text">Cargar pacientes (Excel)</span>
          </div>

          <div
            class="permission-item"
            [class.has-permission]="puedeDescargarPdfs()"
          >
            <span class="permission-icon" *ngIf="puedeDescargarPdfs(); else noPermPdf">
              &check;
            </span>
            <ng-template #noPermPdf>
              <span class="permission-icon">&times;</span>
            </ng-template>
            <span class="permission-text">Descargar PDFs</span>
          </div>

          <div
            class="permission-item"
            [class.has-permission]="puedeVerTodasAutorizaciones()"
          >
            <span class="permission-icon" *ngIf="puedeVerTodasAutorizaciones(); else noPermAll">
              &check;
            </span>
            <ng-template #noPermAll>
              <span class="permission-icon">&times;</span>
            </ng-template>
            <span class="permission-text">Ver todas las autorizaciones</span>
          </div>
        </div>
      </section>
    </main>
  </div>
</div>
