<div class="edit-details modern-design" (keydown.enter)="$event.preventDefault()">

  <!-- Header moderne compact -->
  <div class="entity-header">
    <mat-progress-bar mode="indeterminate" *ngIf="isLoading" class="loading-indicator"></mat-progress-bar>

    <div class="entity-content">
      <div class="entity-avatar">
        {{ generateAvatar(data.name || objectName || 'D') }}
      </div>
      <div class="entity-info">
        <h1 class="entity-title">{{ data.name || 'Détails' }}</h1>
        <p class="entity-subtitle">{{ objectName }} • ID: {{ data.id }} • UUID: {{ data.uuid || 'N/A' }}</p>

        <div class="entity-badges">
          <div class="entity-badge" *ngFor="let header of headers.slice(0,4)">
            <mat-icon>verified</mat-icon>
            {{ header.displayName }}: {{ data[header?.name] || '-' }}
          </div>
        </div>

        <div class="entity-actions">
          <!-- Bouton Execute SPC avec label et icône dynamiques -->
          <!-- Cas 1: Opération unique - Bouton direct -->
          <button *ngIf="permissionCta('execute') && shouldShowExecuteButton() && getAvailableSpcOperations().length === 1"
                  class="entity-action success"
                  [matTooltip]="getExecuteButtonLabel()"
                  (click)="executeDefaultAction()">
            <mat-icon>{{ getExecuteButtonIcon() }}</mat-icon>
            {{ getExecuteButtonLabel() }}
          </button>

          <!-- Cas 2: Opérations multiples - Bouton avec menu déroulant -->
          <button *ngIf="permissionCta('execute') && shouldShowExecuteButton() && getAvailableSpcOperations().length > 1"
                  class="entity-action success"
                  [matTooltip]="'Choisir une action'"
                  [matMenuTriggerFor]="spcMenu">
            <mat-icon>{{ getExecuteButtonIcon() }}</mat-icon>
            {{ getExecuteButtonLabel() }}
            <mat-icon class="dropdown-icon">arrow_drop_down</mat-icon>
          </button>

          <!-- Menu déroulant pour actions multiples -->
          <mat-menu #spcMenu="matMenu">
            <button mat-menu-item
                    *ngFor="let op of getAvailableSpcOperations()"
                    (click)="executeSpcOperation(op)">
              <mat-icon>{{ getSpcConfig(op)?.icon?.replace('fas fa-', '') || 'play' }}</mat-icon>
              <span>{{ getSpcConfig(op)?.confirmButtonText || op }}</span>
            </button>
          </mat-menu>

          <button *ngIf="permissionCta('update')"
                  class="entity-action primary"
                  [matTooltip]="'Modifier'"
                  (click)="clickEdit()">
            <mat-icon>edit</mat-icon>
            Modifier
          </button>
          <button *ngIf="permissionCta('generate')"
                  class="entity-action"
                  [matTooltip]="'Générer document'"
                  (click)="generateProject()">
            <mat-icon>description</mat-icon>
            Générer
          </button>
          <button *ngIf="permissionCta('delete')"
                  class="entity-action danger"
                  [matTooltip]="'Supprimer'"
                  (click)="handleDelete()">
            <mat-icon>delete</mat-icon>
            Supprimer
          </button>
        </div>
      </div>

      <!-- Bouton de fermeture -->
      <button mat-icon-button
              class="close-btn"
              mat-dialog-close
              matTooltip="Fermer">
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </div>
  <!-- Informations Principales -->
  <!-- <div class="card">
    <div class="card-header">
      <h3 class="card-title">
        <mat-icon>verified</mat-icon>
        Informations Principales
      </h3>
    </div>
    <div class="card-body">
      <div class="datagrid">
        <div class="datagrid-item" *ngFor="let header of headers; let j = index">
          <div class="datagrid-title">{{ headers[j].displayName }}</div>
          <div class="datagrid-content"
               [class.text-primary]="isEmailField(headers[j].name)"
               [class.text-success]="isMoneyField(headers[j].name)"
               [class.fw-bold]="isImportantField(headers[j].name)">
            {{ formatFieldValue(data[headers[j]?.name], headers[j].name) }}
          </div>
        </div>
      </div>
    </div>
  </div> -->

  <!-- <div class="header-details" style="margin-bottom: 30px !important;">
    <div class="wrap-edit">
      <button class="icon-projects" (click)="generateProject()"></button>
      <button *ngIf="isClickEdit && permissionCta('update')" class="edit icon-edit" mat-button (click)="clickEdit()"></button>
      <button *ngIf="isClickEdit && permissionCta('update')" class="edit icon-edit" mat-button (click)="clickEdit()"></button>
    </div>
  </div> -->

  <!-- Section détails -->
  <div class="details-section modern-details">
    <div class="card accordion-card" *ngFor="let bloc of blocs; let k = index">
      <div class="card-header accordion-header"
           [class.expanded]="isBlocOpen(bloc, k)"
           (click)="toggleBloc(bloc, k)">
        <h3 class="card-title">
          <mat-icon>folder</mat-icon>
          {{ bloc }}
        </h3>
        <div class="accordion-toggle">
          <mat-icon>{{ isBlocOpen(bloc, k) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>
        </div>
      </div>
      <div class="card-body accordion-body"
           [@slideToggle]="isBlocOpen(bloc, k) ? 'expanded' : 'collapsed'"
           *ngIf="isBlocOpen(bloc, k)">
        <div class="datagrid">
          <div class="datagrid-item" *ngFor="let item of metadatas[k][bloc]; let i = index">
            <div class="datagrid-title">{{ metadatas[k][bloc][i].displayName }}</div>
            <!-- Champ fichier : lien de téléchargement -->
            <div class="datagrid-content download-link"
                 *ngIf="isFileField(metadatas[k][bloc][i]) && data[metadatas[k][bloc][i]?.name]"
                 (click)="downloadDocument()"
                 style="color:#2563eb;cursor:pointer;display:flex;align-items:center;gap:4px;"
                 title="Télécharger le fichier">
              <mat-icon style="font-size:18px;width:18px;height:18px;">download</mat-icon>
              <span style="text-decoration:underline;">{{ data[metadatas[k][bloc][i]?.name] }}</span>
            </div>
            <!-- Champ référence : cliquable -->
            <div class="datagrid-content reference-link"
                 *ngIf="!isFileField(metadatas[k][bloc][i]) && isReferenceField(metadatas[k][bloc][i], data[metadatas[k][bloc][i]?.name])"
                 (click)="openReferenceDetail(data[metadatas[k][bloc][i]?.name], metadatas[k][bloc][i])"
                 title="Voir le détail">
              <mat-icon class="reference-icon">open_in_new</mat-icon>
              {{ formatFieldValue(data[metadatas[k][bloc][i]?.name], metadatas[k][bloc][i].name) }}
            </div>
            <!-- Champ normal -->
            <div class="datagrid-content"
                 *ngIf="!isFileField(metadatas[k][bloc][i]) && !isReferenceField(metadatas[k][bloc][i], data[metadatas[k][bloc][i]?.name])"
                 [class.text-primary]="isEmailField(metadatas[k][bloc][i].name)"
                 [class.text-success]="isMoneyField(metadatas[k][bloc][i].name)"
                 [class.fw-bold]="isImportantField(metadatas[k][bloc][i].name)">
              {{ formatFieldValue(data[metadatas[k][bloc][i]?.name], metadatas[k][bloc][i].name) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Section tableau contextuel -->
  <div class="contextual-section modern-contextual">
    <div class="card accordion-card">
      <div class="card-header accordion-header"
           [class.expanded]="isAccordionOpen('donnees-contextuelles')"
           (click)="toggleAccordion('donnees-contextuelles')">
        <h3 class="card-title">
          <mat-icon>dashboard</mat-icon>
          Données Contextuelles
        </h3>
        <div class="card-actions">
          <button mat-stroked-button
                  class="btn-outline-primary"
                  (click)="refreshContextualData(); $event.stopPropagation()">
            <mat-icon>refresh</mat-icon>
            Actualiser
          </button>
          <div class="accordion-toggle">
            <mat-icon>{{ isAccordionOpen('donnees-contextuelles') ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>
          </div>
        </div>
      </div>

      <div class="card-body accordion-body"
           [@slideToggle]="isAccordionOpen('donnees-contextuelles') ? 'expanded' : 'collapsed'"
           *ngIf="isAccordionOpen('donnees-contextuelles')">
        <mat-progress-bar mode="indeterminate" *ngIf="isLoadingDetails === true"></mat-progress-bar>

        <!-- Navigation Tabs -->
        <div class="nav-tabs" *ngIf="getTabsWithData().length > 0">
          <button class="nav-link"
                  *ngFor="let tt of getTabsWithData(); let index = index"
                  [class.active]="selectedTabIndex === index"
                  (click)="jumpToTab(tt)">
            <mat-icon>dashboard</mat-icon>
            {{ getTabDisplayName(tt) }}
            <span class="tab-badge">{{ tableau[tt].data.length }}</span>
          </button>

          <!-- Onglet Autres si des onglets vides existent -->
          <button class="nav-link"
                  *ngIf="getTabsWithoutData().length > 0"
                  [class.active]="selectedTabIndex === getTabsWithData().length"
                  (click)="jumpToOthers()">
            <mat-icon>folder_open</mat-icon>
            Autres
            <span class="tab-badge bg-secondary">{{ getTabsWithoutData().length }}</span>
          </button>
        </div>

        <!-- Tab Content -->
        <div class="tab-content">
          <!-- Onglets avec données -->
          <div *ngFor="let tt of getTabsWithData(); let index = index"
               class="tab-pane"
               [class.active]="selectedTabIndex === index">
            <div class="tab-header">
              <h4>{{ getTabDisplayName(tt) }}</h4>
              <div class="tab-info">
                <span class="data-count">{{ tableau[tt].data.length }} élément(s)</span>
                <div class="tab-actions">
                  <button mat-mini-fab
                          color="primary"
                          class="add-contextual-btn"
                          [matTooltip]="'Ajouter ' + getTabDisplayName(tt).toLowerCase()"
                          (click)="createContextualObject(tt)">
                    <mat-icon>add</mat-icon>
                  </button>
                </div>
              </div>
            </div>

            <app-table-vue-details
              [displayedColumns]="getDisplayColumnsForTab(tt)"
              [dataSource]="tableau[tt].data"
              [typeTabs]="tt"
              [relatedTo]="data.id"
              [from]="tt"
              [class.expanded]="isTabExpanded(tt)">
            </app-table-vue-details>
          </div>

          <!-- Onglet Autres (éléments vides) -->
          <div class="tab-pane"
               *ngIf="getTabsWithoutData().length > 0"
               [class.active]="selectedTabIndex === getTabsWithData().length">
            <div class="empty-state">
              <h4>Éléments sans données</h4>
              <div class="empty-tabs-grid">
                <div *ngFor="let tt of getTabsWithoutData()" class="empty-tab-card">
                  <div class="empty-tab-content">
                    <mat-icon class="empty-icon">folder_open</mat-icon>
                    <span class="empty-tab-name">{{ getTabDisplayName(tt) }}</span>
                    <span class="empty-tab-status">Aucune donnée</span>
                  </div>
                  <div class="empty-tab-actions">
                    <button mat-mini-fab
                            color="primary"
                            class="create-contextual-btn"
                            [matTooltip]="'Créer ' + getTabDisplayName(tt).toLowerCase()"
                            (click)="createContextualObject(tt)">
                      <mat-icon>add</mat-icon>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="card-footer">
          <div class="footer-info">
            <span class="text-muted">
              {{ getTabsWithData().length }} onglet(s) avec données • Dernière mise à jour: il y a {{ getLastUpdateTime() }}
            </span>
            <button mat-stroked-button
                    class="btn-outline-primary"
                    (click)="addContextualData()">
              <mat-icon>add</mat-icon>
              Ajouter des données
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>