<div class="etatsdeventes-list-container">
  
  <!-- En-tête -->
  <div class="page-header">
    <h2>États de Ventes</h2>
    <p>Gestion des billets émis et des ventes réalisées</p>
  </div>

  <!-- Barre d'actions -->
  <div class="action-toolbar">
    <button mat-raised-button color="primary" (click)="onActionTriggered('create')">
      <mat-icon>add</mat-icon>
      Nouveau Billet
    </button>
    <button mat-stroked-button (click)="onActionTriggered('export')">
      <mat-icon>file_download</mat-icon>
      Exporter
    </button>
    <button mat-stroked-button (click)="onActionTriggered('refresh')">
      <mat-icon>refresh</mat-icon>
      Actualiser
    </button>
  </div>

  <!-- Tableau des états de ventes -->
  <div class="table-container">
    <div class="simple-table" *ngIf="!loading && etatsdeventes.length > 0">
      <table class="data-table">
        <thead>
          <tr>
            <th>
              <input type="checkbox" (change)="onSelectAllChange($event)">
            </th>
            <th>Date</th>
            <th>PNR</th>
            <th>Passager</th>
            <th>Vol</th>
            <th>Montant</th>
            <th>Commission</th>
            <th>Statut</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let etat of etatsdeventes; trackBy: trackByFn; let i = index">
            <td>
              <input 
                type="checkbox" 
                [checked]="selectedItems.includes(etat)"
                (change)="toggleSelection(etat)">
            </td>
            <td>{{ etat.date | date:'dd/MM/yyyy' }}</td>
            <td>{{ etat.pnr }}</td>
            <td>{{ etat.passenger_name }}</td>
            <td>{{ etat.flight_number }}</td>
            <td class="amount">{{ etat.amount | currency:'EUR':'symbol':'1.2-2':'fr' }}</td>
            <td class="commission">{{ etat.commission | currency:'EUR':'symbol':'1.2-2':'fr' }}</td>
            <td>
              <span [class]="'status-' + etat.status">
                {{ getStatusLabel(etat.status) }}
              </span>
            </td>
            <td>
              <button mat-icon-button matTooltip="Voir détail" (click)="viewEtat(etat)">
                <mat-icon>visibility</mat-icon>
              </button>
              <button mat-icon-button matTooltip="Modifier" (click)="editEtat(etat)" [disabled]="etat.status === 'cancelled'">
                <mat-icon>edit</mat-icon>
              </button>
              <button mat-icon-button matTooltip="Télécharger" (click)="downloadTicket(etat)" color="primary">
                <mat-icon>file_download</mat-icon>
              </button>
              <button mat-icon-button matTooltip="Supprimer" (click)="deleteEtat(etat)" 
                      [disabled]="etat.status === 'cancelled'"
                      color="warn">
                <mat-icon>delete</mat-icon>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- État vide -->
    <div class="empty-state" *ngIf="!loading && etatsdeventes.length === 0">
      <mat-icon>airplane_ticket</mat-icon>
      <h3>Aucun état de vente</h3>
      <p>Commencez par créer votre premier billet</p>
      <button mat-raised-button color="primary" (click)="onActionTriggered('create')">
        <mat-icon>add</mat-icon>
        Nouveau Billet
      </button>
    </div>

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