<div class="transactions-container">
  <!-- En-tête avec actions -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h4 class="mb-1">Gestion des Transactions</h4>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item">
                <a href="javascript:void(0)" class="text-decoration-none">DCB Transactions</a>
              </li>
            </ol>
          </nav>
        </div>
        
        <div class="d-flex gap-2">
          <!-- Export -->
          <div ngbDropdown>
            <button class="btn btn-outline-primary" ngbDropdownToggle>
              <ng-icon name="lucideDownload" class="me-1"></ng-icon>
              Exporter
            </button>
            <div ngbDropdownMenu>
              <button ngbDropdownItem (click)="exportTransactions('csv')">CSV</button>
              <button ngbDropdownItem (click)="exportTransactions('excel')">Excel</button>
              <button ngbDropdownItem (click)="exportTransactions('pdf')">PDF</button>
            </div>
          </div>
          
          <!-- Refresh -->
          <button class="btn btn-outline-secondary" (click)="loadTransactions()" [disabled]="loading">
            <ng-icon name="lucideRefreshCw" [class.spin]="loading"></ng-icon>
          </button>
        </div>
      </div>
    </div>
  </div>

    <!-- Statistiques rapides -->
    @if (paginatedData?.stats) {
    <div class="row mb-4">
        <div class="col-12">
        <div class="card bg-light">
            <div class="card-body py-3">
            <div class="row text-center">
                <div class="col">
                <small class="text-muted">Total</small>
                <div class="h5 mb-0">{{ getTotal() }}</div>
                </div>
                <div class="col">
                <small class="text-muted">Succès</small>
                <div class="h5 mb-0 text-success">{{ getSuccessCount() }}</div>
                </div>
                <div class="col">
                <small class="text-muted">Échecs</small>
                <div class="h5 mb-0 text-danger">{{ getFailedCount() }}</div>
                </div>
                <div class="col">
                <small class="text-muted">En attente</small>
                <div class="h5 mb-0 text-warning">{{ getPendingCount() }}</div>
                </div>
                <div class="col">
                <small class="text-muted">Taux de succès</small>
                <div class="h5 mb-0 text-primary">{{ getSuccessRate() }}%</div>
                </div>
                <div class="col">
                <small class="text-muted">Montant total</small>
                <div class="h5 mb-0">{{ formatCurrency(getTotalAmount()) }}</div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    }

  <!-- Barre de recherche et filtres -->
  <div class="row mb-3">
    <div class="col-md-4">
      <div class="input-group">
        <span class="input-group-text">
          <ng-icon name="lucideSearch"></ng-icon>
        </span>
        <input 
          type="text" 
          class="form-control" 
          placeholder="Rechercher par MSISDN, ID..."
          [(ngModel)]="searchTerm"
          (keyup.enter)="onSearch()"
        >
      </div>
    </div>
    
    <div class="col-md-8">
      <div class="d-flex gap-2">
        <!-- Filtre statut -->
        <select class="form-select" style="width: auto;" (change)="onStatusFilterChange($any($event.target).value)">
          <option value="all">Tous les statuts</option>
          @for (status of statusOptions; track status) {
            <option [value]="status">{{ status }}</option>
          }
        </select>

        <!-- Filtre opérateur -->
        <select class="form-select" style="width: auto;" (change)="onOperatorFilterChange($any($event.target).value)">
          <option value="">Tous les opérateurs</option>
          @for (operator of operatorOptions; track operator) {
            <option [value]="operator">{{ operator }}</option>
          }
        </select>

        <button class="btn btn-outline-primary" (click)="onSearch()">
          <ng-icon name="lucideFilter" class="me-1"></ng-icon>
          Filtrer
        </button>

        <button class="btn btn-outline-secondary" (click)="onClearFilters()">
          <ng-icon name="lucideX" class="me-1"></ng-icon>
          Effacer
        </button>
      </div>
    </div>
  </div>

  <!-- Messages d'erreur -->
  @if (error) {
    <div class="alert alert-danger">
      <ng-icon name="lucideXCircle" class="me-2"></ng-icon>
      {{ error }}
    </div>
  }

  <!-- Loading -->
  @if (loading) {
    <div class="text-center py-4">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Chargement...</span>
      </div>
      <p class="mt-2 text-muted">Chargement des transactions...</p>
    </div>
  }

  <!-- Tableau des transactions -->
  @if (!loading) {
    <div class="card">
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th width="50">
                  <input 
                    type="checkbox" 
                    class="form-check-input"
                    [checked]="selectAll"
                    (change)="toggleSelectAll()"
                  >
                </th>
                <th (click)="sort('id')" class="cursor-pointer">
                  <div class="d-flex align-items-center">
                    <span>ID</span>
                    <ng-icon [name]="getSortIcon('id')" class="ms-1 fs-12"></ng-icon>
                  </div>
                </th>
                <th (click)="sort('msisdn')" class="cursor-pointer">
                  <div class="d-flex align-items-center">
                    <span>MSISDN</span>
                    <ng-icon [name]="getSortIcon('msisdn')" class="ms-1 fs-12"></ng-icon>
                  </div>
                </th>
                <th>Opérateur</th>
                <th (click)="sort('amount')" class="cursor-pointer">
                  <div class="d-flex align-items-center">
                    <span>Montant</span>
                    <ng-icon [name]="getSortIcon('amount')" class="ms-1 fs-12"></ng-icon>
                  </div>
                </th>
                <th>Produit</th>
                <th>Statut</th>
                <th (click)="sort('transactionDate')" class="cursor-pointer">
                  <div class="d-flex align-items-center">
                    <span>Date</span>
                    <ng-icon [name]="getSortIcon('transactionDate')" class="ms-1 fs-12"></ng-icon>
                  </div>
                </th>
                <th width="120">Actions</th>
              </tr>
            </thead>
            <tbody>
              @for (transaction of transactions; track transaction.id) {
                <tr [class.table-active]="selectedTransactions.has(transaction.id)">
                  <td>
                    <input 
                      type="checkbox" 
                      class="form-check-input"
                      [checked]="selectedTransactions.has(transaction.id)"
                      (change)="toggleTransactionSelection(transaction.id)"
                    >
                  </td>
                  <td class="font-monospace small">{{ transaction.id }}</td>
                  <td class="font-monospace">{{ transaction.msisdn }}</td>
                  <td>
                    <span class="badge bg-light text-dark">{{ transaction.operator }}</span>
                  </td>
                  <td>
                    <span [class]="getAmountColor(transaction.amount)">
                      {{ formatCurrency(transaction.amount, transaction.currency) }}
                    </span>
                  </td>
                  <td>
                    <div class="text-truncate" style="max-width: 150px;" 
                         [ngbTooltip]="transaction.productName">
                      {{ transaction.productName }}
                    </div>
                  </td>
                  <td>
                    <span [class]="getStatusBadgeClass(transaction.status)" class="badge">
                      <ng-icon [name]="getStatusIcon(transaction.status)" class="me-1"></ng-icon>
                      {{ transaction.status }}
                    </span>
                  </td>
                  <td class="small text-muted">
                    {{ formatDate(transaction.transactionDate) }}
                  </td>
                  <td>
                    <div class="btn-group btn-group-sm" role="group">
                      <button 
                        class="btn btn-outline-primary"
                        (click)="viewTransactionDetails(transaction.id)"
                        ngbTooltip="Voir les détails"
                      >
                        <ng-icon name="lucideEye"></ng-icon>
                      </button>
                      
                      @if (transaction.status === 'SUCCESS') {
                        <button 
                          class="btn btn-outline-warning"
                          (click)="refundTransaction(transaction.id)"
                          ngbTooltip="Rembourser"
                        >
                          <ng-icon name="lucideUndo2"></ng-icon>
                        </button>
                      }
                      
                      @if (transaction.status === 'FAILED') {
                        <button 
                          class="btn btn-outline-info"
                          (click)="retryTransaction(transaction.id)"
                          ngbTooltip="Réessayer"
                        >
                          <ng-icon name="lucideRefreshCw"></ng-icon>
                        </button>
                      }
                    </div>
                  </td>
                </tr>
              }
              @empty {
                <tr>
                  <td colspan="8" class="text-center py-4">
                    <ng-icon name="lucideCreditCard" class="text-muted fs-1 mb-2 d-block"></ng-icon>
                    <p class="text-muted mb-3">Aucune transaction trouvée</p>
                    <button class="btn btn-primary" (click)="onClearFilters()">
                      Réinitialiser les filtres
                    </button>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Pagination -->
    @if (paginatedData && paginatedData.totalPages > 1) {
      <div class="d-flex justify-content-between align-items-center mt-3">
        <div class="text-muted">
            Affichage de {{ (filters.page! - 1) * filters.limit! + 1 }} à 
            {{ (filters.page! * filters.limit!) > (paginatedData.total || 0) ? (paginatedData.total || 0) : (filters.page! * filters.limit!) }}
            sur {{ paginatedData.total || 0 }} transactions
        </div>
        <nav>
          <ngb-pagination
            [collectionSize]="paginatedData.total"
            [page]="filters.page!"
            [pageSize]="filters.limit!"
            [maxSize]="5"
            [rotate]="true"
            [boundaryLinks]="true"
            (pageChange)="onPageChange($event)"
          />
        </nav>
      </div>
    }
  }
</div>