<div class="pnr-list-container">

  <!-- 1. BADGES DE STATISTIQUES -->
  <div class="stats-badges">
    <div class="badge-card" *ngFor="let badge of badges; let i = index">
      <div class="badge-icon">
        <mat-icon>{{ badge.icon }}</mat-icon>
      </div>
      <div class="badge-content">
        <div class="badge-value">{{ badge.result }}</div>
        <div class="badge-label">{{ badge.title }}</div>
      </div>
    </div>
  </div>

  <!-- 2. EN-TÊTE AVEC TITRE ET BOUTONS -->
  <div class="page-header">
    <div class="header-content">
      <div class="title-section">
        <mat-icon class="page-icon">confirmation_number</mat-icon>
        <div class="title-text">
          <h2>Pnr</h2>
          <p>Gestion et suivi des pnr</p>
        </div>
      </div>
      <div class="header-actions">
        <button mat-raised-button color="primary" (click)="onActionTriggered('create')">
          <mat-icon>add</mat-icon>
          Nouveau
        </button>
        <button mat-stroked-button (click)="onActionTriggered('export')">
          <mat-icon>file_download</mat-icon>
          Exporter
        </button>
        <button mat-icon-button (click)="onActionTriggered('refresh')">
          <mat-icon>refresh</mat-icon>
        </button>
      </div>
    </div>
  </div>

  <!-- 3. FILTRES ET RECHERCHE -->
  <div class="filters-section">
    <div class="filters-toolbar">
      <!-- Sélection multiple -->
      <div class="selection-info" *ngIf="selectedItems.length > 0">
        <mat-icon>check_circle</mat-icon>
        <span>{{ selectedItems.length }} sélectionné(s)</span>
        <button mat-icon-button (click)="selectedItems = []">
          <mat-icon>close</mat-icon>
        </button>
      </div>

      <!-- Boutons de vue -->
      <div class="view-buttons">
        <button mat-icon-button matTooltip="Vue liste">
          <mat-icon>view_list</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Vue grille">
          <mat-icon>view_module</mat-icon>
        </button>
        <button mat-stroked-button>
          <mat-icon>filter_list</mat-icon>
          Filtres
        </button>
      </div>

      <!-- Recherche -->
      <div class="search-box">
        <mat-icon>search</mat-icon>
        <input type="text" placeholder="Rechercher...">
      </div>
    </div>
  </div>

  <!-- 4. TABLEAU DES PNR -->
  <div class="table-container">
    <div class="simple-table" *ngIf="!loading && pnrList.length > 0">
      <table class="data-table">
        <thead>
          <tr>
            <th>
              <input type="checkbox" (change)="onSelectAllChange($event)">
            </th>
            <th>Code PNR</th>
            <th>Passager Principal</th>
            <th>Itinéraire</th>
            <th>Date Départ</th>
            <th>Compagnie</th>
            <th>Classe</th>
            <th>Passagers</th>
            <th>Montant</th>
            <th>Statut</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of pnrList; trackBy: trackByFn" 
              (dblclick)="onRowDoubleClicked(item)"
              [class.selected]="selectedItems.includes(item)">
            <td>
              <input type="checkbox" 
                     [checked]="selectedItems.includes(item)"
                     (change)="toggleSelection(item)">
            </td>
            <td class="pnr-code-cell">
              <strong>{{ item.code }}</strong>
            </td>
            <td>{{ item.main_passenger }}</td>
            <td class="itinerary-cell">
              <div class="route">{{ item.departure }} → {{ item.arrival }}</div>
              <div class="return" *ngIf="item.return_date">
                Retour: {{ item.return_date | date:'dd/MM/yyyy' }}
              </div>
            </td>
            <td>{{ item.departure_date | date:'dd/MM/yyyy' }}</td>
            <td class="airline-cell">
              <div class="airline">{{ item.airline }}</div>
              <div class="flight-number">{{ item.flight_number }}</div>
            </td>
            <td>
              <span class="booking-class" [class]="item.booking_class.toLowerCase()">
                {{ item.booking_class }}
              </span>
            </td>
            <td class="passenger-count">
              <mat-icon>person</mat-icon>
              {{ item.passenger_count }}
            </td>
            <td class="amount-cell">{{ item.total_amount | currency:'EUR':'symbol':'1.2-2' }}</td>
            <td>
              <span class="status-badge" [style.background-color]="getStatusColor(item.status)">
                {{ getStatusLabel(item.status) }}
              </span>
            </td>
            <td class="actions-cell">
              <button mat-icon-button matTooltip="Voir détail" (click)="onRowDoubleClicked(item)">
                <mat-icon>visibility</mat-icon>
              </button>
              <button mat-icon-button matTooltip="Modifier" [disabled]="item.status === 'cancelled'">
                <mat-icon>edit</mat-icon>
              </button>
              <button mat-icon-button matTooltip="Annuler" 
                      [disabled]="item.status === 'cancelled'"
                      color="warn">
                <mat-icon>cancel</mat-icon>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- État vide -->
    <div class="empty-state" *ngIf="!loading && pnrList.length === 0">
      <mat-icon>flight_takeoff</mat-icon>
      <h3>Aucun PNR trouvé</h3>
      <p>Commencez par créer votre première réservation</p>
      <button mat-raised-button color="primary" (click)="onActionTriggered('create')">
        <mat-icon>add</mat-icon>
        Créer un PNR
      </button>
    </div>

    <!-- Chargement -->
    <div class="loading-container" *ngIf="loading">
      <mat-spinner diameter="50"></mat-spinner>
      <p>Chargement des PNR...</p>
    </div>
  </div>
</div>