<div class="transaction-details">
  <!-- Loading State -->
  @if (loading && !transaction) {
    <div class="text-center py-5">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Chargement...</span>
      </div>
      <p class="mt-2 text-muted">Chargement des détails de la transaction...</p>
    </div>
  }

  <!-- Messages -->
  @if (error) {
    <div class="alert alert-danger d-flex align-items-center">
      <ng-icon name="lucideAlertCircle" class="me-2"></ng-icon>
      <div class="flex-grow-1">{{ error }}</div>
      <button class="btn-close" (click)="error = ''"></button>
    </div>
  }

  @if (success) {
    <div class="alert alert-success d-flex align-items-center">
      <ng-icon name="lucideCheckCircle" class="me-2"></ng-icon>
      <div class="flex-grow-1">{{ success }}</div>
      <button class="btn-close" (click)="success = ''"></button>
    </div>
  }

  @if (transaction && !loading) {
    <div class="row">
      <!-- Colonne principale -->
      <div class="col-lg-8">
        <!-- En-tête de la transaction -->
        <div class="card mb-4">
          <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
              <h5 class="card-title mb-0 me-3">Transaction #{{ transaction.id }}</h5>
              <span [class]="getStatusBadgeClass(transaction.status)" class="badge">
                <ng-icon [name]="getStatusIcon(transaction.status)" class="me-1"></ng-icon>
                {{ transaction.status }}
              </span>
            </div>
            <div class="d-flex gap-2">
              <button class="btn btn-outline-secondary btn-sm" (click)="copyToClipboard(transaction.id)" 
                      ngbTooltip="Copier l'ID">
                <ng-icon name="lucideCopy"></ng-icon>
              </button>
              <button class="btn btn-outline-secondary btn-sm" (click)="printDetails()" 
                      ngbTooltip="Imprimer">
                <ng-icon name="lucidePrinter"></ng-icon>
              </button>
              <button class="btn btn-outline-primary btn-sm" (click)="loadTransactionDetails()" 
                      [disabled]="loading" ngbTooltip="Actualiser">
                <ng-icon name="lucideRefreshCw" [class.spin]="loading"></ng-icon>
              </button>
            </div>
          </div>
          <div class="card-body">
            <!-- Montant et informations principales -->
            <div class="row mb-4">
              <div class="col-md-6">
                <div class="d-flex align-items-center">
                  <div class="transaction-amount-icon bg-primary rounded-circle p-3 me-3">
                    <ng-icon name="lucideEuro" class="text-white fs-4"></ng-icon>
                  </div>
                  <div>
                    <div class="text-muted small">Montant</div>
                    <div [class]="getAmountColor(transaction.amount) + ' h3 mb-0'">
                      {{ formatCurrency(transaction.amount, transaction.currency) }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="d-flex align-items-center h-100">
                  <div class="transaction-date-icon bg-secondary rounded-circle p-3 me-3">
                    <ng-icon name="lucideCalendar" class="text-white fs-4"></ng-icon>
                  </div>
                  <div>
                    <div class="text-muted small">Date de transaction</div>
                    <div class="h6 mb-0">{{ formatDate(transaction.transactionDate) }}</div>
                    <small class="text-muted">{{ formatRelativeTime(transaction.transactionDate) }}</small>
                  </div>
                </div>
              </div>
            </div>

            <!-- Informations détaillées -->
            <div class="row">
              <div class="col-12">
                <h6 class="border-bottom pb-2 mb-3">Informations de la transaction</h6>
              </div>
              
              <div class="col-md-6 mb-3">
                <label class="form-label text-muted small mb-1">MSISDN</label>
                <div class="d-flex align-items-center">
                  <ng-icon name="lucideSmartphone" class="me-2 text-muted"></ng-icon>
                  <span class="fw-medium font-monospace">{{ transaction.msisdn }}</span>
                  <button class="btn btn-sm btn-link p-0 ms-2" (click)="copyToClipboard(transaction.msisdn)">
                    <ng-icon name="lucideCopy" class="text-muted"></ng-icon>
                  </button>
                </div>
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label text-muted small mb-1">Opérateur</label>
                <div class="d-flex align-items-center">
                  <ng-icon name="lucideGlobe" class="me-2 text-muted"></ng-icon>
                  <span class="fw-medium">{{ transaction.operator }}</span>
                  <span class="badge bg-light text-dark ms-2">{{ transaction.country }}</span>
                </div>
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label text-muted small mb-1">Produit</label>
                <div class="d-flex align-items-center">
                  <ng-icon name="lucidePackage" class="me-2 text-muted"></ng-icon>
                  <div>
                    <div class="fw-medium">{{ transaction.productName }}</div>
                    <small class="text-muted">ID: {{ transaction.productId }}</small>
                  </div>
                </div>
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label text-muted small mb-1">Catégorie</label>
                <div>
                  <span class="badge bg-info">{{ transaction.productCategory }}</span>
                </div>
              </div>

              @if (transaction.merchantName) {
                <div class="col-md-6 mb-3">
                  <label class="form-label text-muted small mb-1">Marchand</label>
                  <div class="d-flex align-items-center">
                    <ng-icon name="lucideUser" class="me-2 text-muted"></ng-icon>
                    <span class="fw-medium">{{ transaction.merchantName }}</span>
                  </div>
                </div>
              }

              @if (transaction.externalId) {
                <div class="col-md-6 mb-3">
                  <label class="form-label text-muted small mb-1">ID Externe</label>
                  <div class="d-flex align-items-center">
                    <span class="font-monospace small">{{ transaction.externalId }}</span>
                    <button class="btn btn-sm btn-link p-0 ms-2" (click)="copyToClipboard(transaction.externalId!)">
                      <ng-icon name="lucideCopy" class="text-muted"></ng-icon>
                    </button>
                  </div>
                </div>
              }
            </div>

            <!-- Informations techniques -->
            <div class="row mt-4">
              <div class="col-12">
                <h6 class="border-bottom pb-2 mb-3">Informations techniques</h6>
              </div>
              
              <div class="col-md-6 mb-2">
                <label class="form-label text-muted small mb-1">Créé le</label>
                <div class="small">{{ formatDate(transaction.createdAt) }}</div>
              </div>

              <div class="col-md-6 mb-2">
                <label class="form-label text-muted small mb-1">Mis à jour le</label>
                <div class="small">{{ formatDate(transaction.updatedAt) }}</div>
              </div>

              @if (transaction.userAgent) {
                <div class="col-12 mb-2">
                  <label class="form-label text-muted small mb-1">User Agent</label>
                  <div class="small font-monospace text-truncate">{{ transaction.userAgent }}</div>
                </div>
              }

              @if (transaction.ipAddress) {
                <div class="col-md-6 mb-2">
                  <label class="form-label text-muted small mb-1">Adresse IP</label>
                  <div class="small font-monospace">{{ transaction.ipAddress }}</div>
                </div>
              }
            </div>

            <!-- Détails d'erreur -->
            @if (showErrorDetails()) {
              <div class="row mt-4">
                <div class="col-12">
                  <h6 class="border-bottom pb-2 mb-3 text-danger">
                    <ng-icon name="lucideAlertCircle" class="me-2"></ng-icon>
                    Détails de l'erreur
                  </h6>
                </div>
                
                @if (transaction.errorCode) {
                  <div class="col-md-6 mb-2">
                    <label class="form-label text-muted small mb-1">Code d'erreur</label>
                    <div class="fw-medium text-danger">{{ transaction.errorCode }}</div>
                  </div>
                }

                @if (transaction.errorMessage) {
                  <div class="col-12 mb-2">
                    <label class="form-label text-muted small mb-1">Message d'erreur</label>
                    <div class="alert alert-danger small mb-0">{{ transaction.errorMessage }}</div>
                  </div>
                }
              </div>
            }
          </div>
        </div>
      </div>

      <!-- Colonne latérale - Actions et métadonnées -->
      <div class="col-lg-4">
        <!-- Actions -->
        <div class="card mb-4">
          <div class="card-header bg-light">
            <h6 class="card-title mb-0">Actions</h6>
          </div>
          <div class="card-body">
            <div class="d-grid gap-2">
              <!-- Remboursement -->
              @if (canRefund()) {
                <button 
                  class="btn btn-warning"
                  (click)="refundTransaction()"
                  [disabled]="refunding"
                >
                  @if (refunding) {
                    <div class="spinner-border spinner-border-sm me-2" role="status">
                      <span class="visually-hidden">Chargement...</span>
                    </div>
                  }
                  <ng-icon name="lucideUndo2" class="me-1"></ng-icon>
                  Rembourser
                </button>
              }

              <!-- Réessayer -->
              @if (canRetry()) {
                <button 
                  class="btn btn-info"
                  (click)="retryTransaction()"
                  [disabled]="retrying"
                >
                  @if (retrying) {
                    <div class="spinner-border spinner-border-sm me-2" role="status">
                      <span class="visually-hidden">Chargement...</span>
                    </div>
                  }
                  <ng-icon name="lucideRefreshCw" class="me-1"></ng-icon>
                  Réessayer
                </button>
              }

              <!-- Annuler -->
              @if (canCancel()) {
                <button 
                  class="btn btn-secondary"
                  (click)="cancelTransaction()"
                >
                  <ng-icon name="lucideBan" class="me-1"></ng-icon>
                  Annuler
                </button>
              }

              <!-- Télécharger les détails -->
              <button class="btn btn-outline-primary">
                <ng-icon name="lucideDownload" class="me-1"></ng-icon>
                Télécharger PDF
              </button>
            </div>
          </div>
        </div>

        <!-- Métadonnées -->
        <div class="card">
          <div class="card-header bg-light">
            <h6 class="card-title mb-0">Métadonnées</h6>
          </div>
          <div class="card-body">
            <div class="small">
              <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">ID Transaction:</span>
                <span class="font-monospace">{{ transaction.id }}</span>
              </div>
              
              <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">Opérateur ID:</span>
                <span>{{ transaction.operatorId }}</span>
              </div>
              
              @if (transaction.merchantId) {
                <div class="d-flex justify-content-between mb-2">
                  <span class="text-muted">Marchand ID:</span>
                  <span class="font-monospace small">{{ transaction.merchantId }}</span>
                </div>
              }
              
              <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">Devise:</span>
                <span>{{ transaction.currency }}</span>
              </div>
              
              <div class="d-flex justify-content-between">
                <span class="text-muted">Statut:</span>
                <span [class]="getStatusBadgeClass(transaction.status)" class="badge">
                  {{ transaction.status }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- Données personnalisées -->
        @if (getCustomDataKeys().length > 0) {
          <div class="card mt-4">
            <div class="card-header bg-light">
              <h6 class="card-title mb-0">Données personnalisées</h6>
            </div>
            <div class="card-body">
              <div class="small">
                @for (key of getCustomDataKeys(); track key) {
                  <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">{{ key }}:</span>
                    <span class="font-monospace small">{{ transaction.customData![key] }}</span>
                  </div>
                }
              </div>
            </div>
          </div>
        }
      </div>
    </div>
  }

  <!-- Transaction non trouvée -->
  @if (!transaction && !loading) {
    <div class="text-center py-5">
      <ng-icon name="lucideAlertCircle" class="text-muted fs-1 mb-3"></ng-icon>
      <h5 class="text-muted">Transaction non trouvée</h5>
      <p class="text-muted mb-4">La transaction avec l'ID "{{ transactionId }}" n'existe pas ou a été supprimée.</p>
      <button class="btn btn-primary" routerLink="/transactions">
        <ng-icon name="lucideArrowLeft" class="me-1"></ng-icon>
        Retour à la liste
      </button>
    </div>
  }
</div>