<div class="page-shell">
  <div class="content-container">
    <app-header
      [title]="titulo"
      subtitle="Resumen mensual del estado de autorizaciones"
      badgeText="SALUD UT"
      [showUserInfo]="true"
      [userName]="authService.getCurrentUser()?.nombre_completo || null"
      [userRole]="authService.getCurrentUser()?.nombre_rol || null"
      [showLogout]="true"
      (logout)="authService.logout()"
      [showBack]="true"
      backLabel="Volver"
      (back)="volverAtras()"
    ></app-header>

    <div class="card controles-card">
      <div class="form-row">
        <label for="periodo">Periodo:</label>
        <select id="periodo" [(ngModel)]="periodo" (change)="onPeriodoChange()">
          <option value="dia">Dia</option>
          <option value="semana">Semana</option>
          <option value="mes">Mes</option>
          <option value="anio">Año</option>
        </select>

        <ng-container *ngIf="periodo === 'dia' || periodo === 'semana'">
          <label for="mesBase">Mes:</label>
          <input
            id="mesBase"
            type="month"
            [(ngModel)]="mesSeleccionado"
            (change)="cargarEstadisticas()"
          />
        </ng-container>

        <ng-container *ngIf="periodo === 'mes' || periodo === 'anio'">
          <label for="anio">Año:</label>
          <input
            id="anio"
            type="number"
            min="2020"
            [(ngModel)]="anioSeleccionado"
            (change)="cargarEstadisticas()"
          />
        </ng-container>
        <button class="btn btn-primary" (click)="cargarEstadisticas()" [disabled]="isLoading">
          {{ isLoading ? 'Cargando...' : 'Actualizar' }}
        </button>
      </div>
    </div>

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

    <div class="stats-grid" *ngIf="data">
      <div class="stat-card">
        <h3>Autorizadas</h3>
        <p class="stat-value">{{ data.resumen.autorizadas }}</p>
      </div>
      <div class="stat-card">
        <h3>No autorizadas</h3>
        <p class="stat-value">{{ data.resumen.no_autorizadas }}</p>
      </div>
      <div class="stat-card">
        <h3>Pendientes</h3>
        <p class="stat-value">{{ data.resumen.pendientes }}</p>
      </div>
      <div class="stat-card total">
        <h3>Total</h3>
        <p class="stat-value">{{ data.resumen.total }}</p>
      </div>
    </div>

    <div class="card histogram-card" *ngIf="data">
      <div class="histogram-header">
        <h3>Autorizaciones por dia</h3>
        <span class="histogram-range">
          {{ data.rango.inicio }} a {{ data.rango.fin }}
        </span>
      </div>

      <div class="histogram">
        <div
          class="histogram-bar"
          *ngFor="let bucket of chartBuckets"
          [class.selected]="bucket.key === selectedBucket?.key"
          [attr.title]="
            bucket.inicio +
            ' a ' +
            bucket.fin +
            ' | total: ' +
            (bucket.total || 0) +
            ' | autorizadas: ' +
            (bucket.autorizadas || 0) +
            ' | no autorizadas: ' +
            (bucket.no_autorizadas || 0) +
            ' | pendientes: ' +
            (bucket.pendientes || 0)
          "
          (click)="seleccionarBucket(bucket)"
        >
          <div class="bar-value" *ngIf="bucket.total">{{ bucket.total }}</div>
          <div class="bar-track">
            <div class="bar" [style.height]="getBarHeight(bucket)">
              <div
                class="segment autorizadas"
                *ngIf="bucket.autorizadas > 0"
                [style.height]="getSegmentHeight(bucket, 'autorizadas')"
              ></div>
              <div
                class="segment no-autorizadas"
                *ngIf="bucket.no_autorizadas > 0"
                [style.height]="getSegmentHeight(bucket, 'no_autorizadas')"
              ></div>
              <div
                class="segment pendientes"
                *ngIf="tienePendientes && bucket.pendientes > 0"
                [style.height]="getSegmentHeight(bucket, 'pendientes')"
              ></div>
            </div>
          </div>
          <div class="bar-label">{{ bucket.label }}</div>
        </div>
      </div>

      <div class="legend">
        <div class="legend-item">
          <span class="legend-dot autorizadas"></span>
          Autorizadas
        </div>
        <div class="legend-item">
          <span class="legend-dot no-autorizadas"></span>
          No autorizadas
        </div>
        <div class="legend-item" *ngIf="tienePendientes">
          <span class="legend-dot pendientes"></span>
          Pendientes
        </div>
      </div>
    </div>

    <div class="card detalle-card" *ngIf="selectedBucket">
      <div class="detalle-header">
        <h4>Autorizaciones del {{ formatRangeLabel(selectedBucket.inicio, selectedBucket.fin) }}</h4>
        <button class="btn btn-secondary btn-sm" type="button" (click)="limpiarDetalle()">
          Cerrar
        </button>
      </div>

      <div class="detalle-status" *ngIf="isLoadingDetalle">
        Cargando autorizaciones del rango...
      </div>
      <div class="detalle-status error" *ngIf="errorDetalle">{{ errorDetalle }}</div>
      <div
        class="detalle-empty"
        *ngIf="!isLoadingDetalle && !errorDetalle && autorizacionesDetalle.length === 0"
      >
        No hay autorizaciones en este rango.
      </div>

      <div
        class="detalle-status"
        *ngIf="detalleLimitado && !isLoadingDetalle && !errorDetalle"
      >
        Mostrando hasta 500 autorizaciones.
      </div>

      <div
        class="table-container"
        *ngIf="!isLoadingDetalle && !errorDetalle && autorizacionesDetalle.length > 0"
      >
        <table class="table detalle-table">
          <thead>
            <tr>
              <th>Numero</th>
              <th>Interno</th>
              <th>Paciente</th>
              <th>CUPS</th>
              <th>Estado</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let aut of autorizacionesDetalle">
              <td class="numero-autorizacion">{{ aut.numero_autorizacion }}</td>
              <td class="interno">{{ aut.interno }}</td>
              <td class="nombre-paciente">{{ aut.nombre_paciente }}</td>
              <td class="cup-codigo">{{ aut.cup_codigo }}</td>
              <td class="estado">
                <span class="estado-pill">
                  {{ getEstadoAutorizacionLabel(aut.estado_autorizacion) }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
