<div class="modern-list-view">

  <!-- 1. KPIs/Badges en haut -->
  <div class="kpi-section" *ngIf="badges && badges.length > 0">
    <div class="kpi-grid">
      <div class="kpi-card"
           *ngFor="let badge of badges; let i = index"
           [attr.data-badge-type]="badge.type">
        <div class="kpi-icon" [style.background]="getKpiColor(i)">
          <mat-icon>{{ badge.icon || getDefaultKpiIcon(i) }}</mat-icon>
        </div>
        <div class="kpi-content">
          <div class="kpi-value">
            <span *ngIf="!loading">{{ badge.result | number:'1.0-0' }}</span>
            <div *ngIf="loading" class="kpi-skeleton"></div>
          </div>
          <div class="kpi-label">{{ badge.title }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 2. Header avec titre et boutons d'action -->
  <div class="page-header">
    <div class="header-content">
      <div class="page-title-section">
        <mat-icon class="title-icon">{{ icon }}</mat-icon>
        <div class="title-text">
          <h1 class="page-title">{{ title }}</h1>
          <p class="page-description" *ngIf="description">{{ description }}</p>
        </div>
      </div>

      <!-- Actions CTA -->
      <div class="header-actions">
        <ng-container *ngFor="let cta of ctas">
          <button *ngIf="cta.action !== 'delete' && cta.action !== 'update'"
                  mat-raised-button
                  [color]="cta.action === 'create' ? 'primary' : ''"
                  [disabled]="loading"
                  (click)="onActionClick(cta.action)"
                  [matTooltip]="cta.label">
            <mat-icon>{{ cta.icon || getDefaultActionIcon(cta.action) }}</mat-icon>
            <span>{{ cta.label }}</span>
          </button>

          <!-- Actions nécessitant une sélection -->
          <button *ngIf="(cta.action === 'delete' || cta.action === 'update') && selectedRows.length > 0"
                  mat-raised-button
                  [color]="cta.action === 'delete' ? 'warn' : ''"
                  (click)="onActionClick(cta.action)"
                  [matTooltip]="cta.label">
            <mat-icon>{{ cta.icon || getDefaultActionIcon(cta.action) }}</mat-icon>
            <span>{{ cta.label }}</span>
          </button>
        </ng-container>

        <!-- Bouton refresh toujours présent -->
        <button mat-icon-button
                (click)="refreshData()"
                matTooltip="Actualiser">
          <mat-icon>refresh</mat-icon>
        </button>
      </div>
    </div>
  </div>

  <!-- 3. Toolbar de filtres et recherche -->
  <div class="filters-toolbar">
    <div class="toolbar-left">
      <!-- Informations de sélection -->
      <div class="selection-info" *ngIf="selectedRows.length > 0">
        <mat-icon>check_circle</mat-icon>
        <span>{{ selectedRows.length }} sélectionné(s)</span>
        <button mat-icon-button (click)="clearSelection()">
          <mat-icon>close</mat-icon>
        </button>
      </div>

      <!-- Contrôles de vue -->
      <div class="view-controls">
        <button mat-icon-button
                [class.active]="viewMode === 'table'"
                (click)="toggleViewMode()"
                matTooltip="Vue tableau">
          <mat-icon>table_view</mat-icon>
        </button>
        <button mat-icon-button
                [class.active]="viewMode === 'cards'"
                (click)="toggleViewMode()"
                matTooltip="Vue cartes">
          <mat-icon>view_module</mat-icon>
        </button>

        <button mat-stroked-button
                [class.active]="showFilters"
                (click)="toggleFilters()">
          <mat-icon>filter_list</mat-icon>
          <span>Filtres</span>
        </button>
      </div>
    </div>

    <div class="toolbar-right">
      <!-- Recherche rapide -->
      <div class="quick-search">
        <mat-icon>search</mat-icon>
        <input type="text"
               placeholder="Rechercher..."
               [(ngModel)]="searchQuery"
               (input)="onSearchChange($any($event.target).value)">
      </div>
    </div>
  </div>

  <!-- Zone Tableau AG-Grid Moderne -->
  <div class="table-container">
    <ag-grid-angular
      #agGrid
      class="ag-theme-estair"
      [rowData]="data"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [gridOptions]="gridOptions"
      (gridReady)="onGridReady($event)"
      (selectionChanged)="onSelectionChanged($event)"
      (rowDoubleClicked)="onRowDoubleClicked($event)"
      (cellClicked)="onCellClicked($event)">
    </ag-grid-angular>
    
    <!-- État vide -->
    <div class="empty-state" *ngIf="!loading && (!data || data.length === 0)">
      <div class="empty-content">
        <mat-icon class="empty-icon">{{ icon || 'inbox' }}</mat-icon>
        <h3 class="empty-title">Aucune donnée disponible</h3>
        <p class="empty-description">
          Il n'y a actuellement aucun élément à afficher dans ce module.
        </p>
        <button class="empty-action" 
                *ngIf="hasCreatePermission()"
                (click)="onActionClick('create')">
          <mat-icon>add</mat-icon>
          <span>Créer le premier élément</span>
        </button>
      </div>
    </div>
  </div>

</div>