<app-ui-card [title]="getCardTitle()">
   <a
    helper-text
    href="javascript:void(0);"
    class="icon-link icon-link-hover link-primary fw-semibold"
    >
    <ng-icon [name]="getHelperIcon()" class="me-1"></ng-icon>
    {{ getHelperText() }}
  </a>

  <div card-body>
  
    <!-- Barre d'actions supérieure -->
    <div class="row mb-3">
      <div class="col-md-6">
        <div class="d-flex align-items-center gap-2">
          <!-- Statistiques rapides -->
          <div class="btn-group btn-group-sm">
            <button 
              type="button" 
              class="btn btn-outline-primary"
              [class.active]="statusFilter === 'all'"
              (click)="filterByStatus('all')"
            >
              Tous ({{ getTotalSubscriptionsCount() }})
            </button>
            <button 
              type="button" 
              class="btn btn-outline-success"
              [class.active]="statusFilter === getActiveStatus()"
              (click)="filterByStatus(getActiveStatus())"
            >
              Actifs ({{ getActiveSubscriptionsCount() }})
            </button>
            <button 
              type="button" 
              class="btn btn-outline-warning text-dark"
              [class.active]="statusFilter === getSuspendedStatus()"
              (click)="filterByStatus(getSuspendedStatus())"
            >
              Suspendus ({{ getSuspendedSubscriptionsCount() }})
            </button>
            <button 
              type="button" 
              class="btn btn-outline-danger"
              [class.active]="statusFilter === getCancelledStatus()"
              (click)="filterByStatus(getCancelledStatus())"
            >
              Annulés ({{ getCancelledSubscriptionsCount() }})
            </button>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="d-flex justify-content-end gap-2">
          <button 
            class="btn btn-outline-secondary" 
            (click)="refreshData()"
            [disabled]="loading"
          >
            <ng-icon name="lucideRefreshCw" class="me-1" [class.spin]="loading"></ng-icon>
            Actualiser
          </button>
        </div>
      </div>
    </div>

    <!-- Barre de recherche et filtres avancés -->
    <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 ID, token..."
            [(ngModel)]="searchTerm"
            (input)="onSearch()"
            [disabled]="loading"
          >
        </div>
      </div>
      
      <div class="col-md-2">
        <select class="form-select" [(ngModel)]="statusFilter" (change)="applyFiltersAndPagination()">
          @for (status of availableStatuses; track status.value) {
            <option [value]="status.value">{{ status.label }}</option>
          }
        </select>
      </div>
      
      <div class="col-md-2">
        <select class="form-select" [(ngModel)]="periodicityFilter" (change)="applyFiltersAndPagination()">
          @for (periodicity of availablePeriodicities; track periodicity.value) {
            <option [value]="periodicity.value">{{ periodicity.label }}</option>
          }
        </select>
      </div>
      
      <div class="col-md-2">
        <select class="form-select" [(ngModel)]="merchantFilter" (change)="applyFiltersAndPagination()">
          <option value="all">Tous les merchants</option>
          <!-- Les options merchants seraient dynamiquement chargées si nécessaire -->
        </select>
      </div>
      
      <div class="col-md-2">
        <button class="btn btn-outline-secondary w-100" (click)="onClearFilters()" [disabled]="loading">
          <ng-icon name="lucideX" class="me-1"></ng-icon>
          Effacer
        </button>
      </div>
    </div>

    <!-- Loading State -->
    @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">{{ getLoadingText() }}</p>
      </div>
    }

    <!-- Error State -->
    @if (error && !loading) {
      <div class="alert alert-danger" role="alert">
        <div class="d-flex align-items-center">
          <ng-icon name="lucideAlertCircle" class="me-2"></ng-icon>
          <div>{{ error }}</div>
          <button class="btn-close ms-auto" (click)="error = ''"></button>
        </div>
      </div>
    }

    <!-- Subscriptions Table -->
    @if (!loading && !error) {
      <div class="table-responsive">
        <table class="table table-hover table-striped">
          <thead class="table-light">
            <tr>
              <!-- Colonne Merchant pour les admins -->
              @if (showMerchantColumn) {
                <th>Merchant</th>
              }
              <!-- Colonne Customer pour les admins -->
              @if (showCustomerColumn) {
                <th>Client</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('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>Périodicité</th>
              <th (click)="sort('status')" class="cursor-pointer">
                <div class="d-flex align-items-center">
                  <span>Statut</span>
                  <ng-icon [name]="getSortIcon('status')" class="ms-1 fs-12"></ng-icon>
                </div>
              </th>
              <th (click)="sort('startDate')" class="cursor-pointer">
                <div class="d-flex align-items-center">
                  <span>Date début</span>
                  <ng-icon [name]="getSortIcon('startDate')" class="ms-1 fs-12"></ng-icon>
                </div>
              </th>
              <th width="120">Actions</th>
            </tr>
          </thead>
          <tbody>
            @for (subscription of displayedSubscriptions; track subscription.id) {
              <tr>
                <!-- Colonne Merchant pour les admins -->
                @if (showMerchantColumn) {
                  <td>
                    <div class="d-flex align-items-center">
                      <div class="avatar-sm bg-secondary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2">
                        <ng-icon name="lucideBuilding" class="text-secondary fs-12"></ng-icon>
                      </div>
                      <div>
                        <small class="text-muted font-monospace">
                          #{{ subscription.merchantPartnerId }}
                        </small>
                      </div>
                    </div>
                  </td>
                }
                <!-- Colonne Customer pour les admins -->
                @if (showCustomerColumn) {
                  <td>
                    <div class="d-flex align-items-center">
                      <div class="avatar-sm bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2">
                        <ng-icon name="lucideUser" class="text-info fs-12"></ng-icon>
                      </div>
                      <div>
                        <small class="text-muted font-monospace">
                          #{{ subscription.customerId }}
                        </small>
                      </div>
                    </div>
                  </td>
                }
                <td>
                  <div class="d-flex align-items-center">
                    <div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2">
                      <ng-icon name="lucideRepeat" class="text-primary fs-12"></ng-icon>
                    </div>
                    <div>
                      <strong class="d-block">#{{ subscription.id }}</strong>
                      <small class="text-muted" [title]="subscription.token">
                        {{ subscription.token.substring(0, 12) }}...
                      </small>
                    </div>
                  </div>
                </td>
                <td>
                  <strong class="d-block">{{ formatAmount(subscription.amount, subscription.currency) }}</strong>
                  <small class="text-muted">{{ subscription.currency }}</small>
                </td>
                <td>
                  <span class="badge bg-light text-dark d-flex align-items-center">
                    <ng-icon name="lucideCalendar" class="me-1" size="14"></ng-icon>
                    {{ getPeriodicityDisplayName(subscription.periodicity) }}
                  </span>
                </td>
                <td>
                  <span class="badge d-flex align-items-center" [ngClass]="getStatusBadgeClass(subscription.status)">
                    <ng-icon 
                      [name]="subscription.status === SubscriptionStatus.ACTIVE ? 'lucideCheckCircle' : 
                              subscription.status === SubscriptionStatus.SUSPENDED ? 'lucidePauseCircle' :
                              subscription.status === SubscriptionStatus.CANCELLED ? 'lucideXCircle' : 'lucideClock'"
                      class="me-1" 
                      size="14"
                    ></ng-icon>
                    {{ getStatusDisplayName(subscription.status) }}
                  </span>
                  @if (isExpiringSoon(subscription)) {
                    <div class="mt-1">
                      <small class="text-warning">
                        <ng-icon name="lucideAlertTriangle" class="me-1" size="12"></ng-icon>
                        Expire bientôt
                      </small>
                    </div>
                  }
                </td>
                <td>
                  <div>
                    <small class="text-muted d-block">
                      Début: {{ formatDate(subscription.startDate) }}
                    </small>
                    <small class="text-muted d-block">
                      Prochain: {{ formatDate(subscription.nextPaymentDate) }}
                    </small>
                    @if (subscription.endDate) {
                      <small class="text-muted d-block">
                        Fin: {{ formatDate(subscription.endDate) }}
                      </small>
                    }
                  </div>
                </td>
                <td>
                  <div class="btn-group btn-group-sm" role="group">
                    <button 
                      class="btn btn-outline-primary btn-sm"
                      (click)="viewSubscriptionDetails(subscription.id)"
                      title="Voir les détails"
                    >
                      <ng-icon name="lucideEye"></ng-icon>
                    </button>
                    <button 
                      class="btn btn-outline-info btn-sm"
                      (click)="viewSubscriptionPayments(subscription.id)"
                      title="Voir les paiements"
                    >
                      <ng-icon name="lucideCreditCard"></ng-icon>
                    </button>
                  </div>
                </td>
              </tr>
            }
            @empty {
              <tr>
                <td [attr.colspan]="getColumnCount()" class="text-center py-4">
                  <div class="text-muted">
                    <ng-icon name="lucideRepeat" class="fs-1 mb-3 opacity-50"></ng-icon>
                    <h5 class="mb-2">{{ getEmptyStateTitle() }}</h5>
                    <p class="mb-3">{{ getEmptyStateDescription() }}</p>
                  </div>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      @if (totalPages > 1) {
        <div class="d-flex justify-content-between align-items-center mt-3">
          <div class="text-muted">
            Affichage de {{ getStartIndex() }} à {{ getEndIndex() }} sur {{ totalItems }} abonnements
          </div>
          <nav>
            <ngb-pagination
              [collectionSize]="totalItems"
              [page]="currentPage"
              [pageSize]="itemsPerPage"
              [maxSize]="5"
              [rotate]="true"
              [boundaryLinks]="true"
              (pageChange)="onPageChange($event)"
            />
          </nav>
        </div>
      }

      <!-- Résumé des résultats -->
      @if (displayedSubscriptions.length > 0) {
        <div class="mt-3 pt-3 border-top">
          <div class="row text-center">
            <div class="col">
              <small class="text-muted">
                <strong>Total :</strong> {{ getTotalSubscriptionsCount() }} abonnements
              </small>
            </div>
            <div class="col">
              <small class="text-muted">
                <strong>Actifs :</strong> {{ getActiveSubscriptionsCount() }}
              </small>
            </div>
            <div class="col">
              <small class="text-muted">
                <strong>Revenu total :</strong> {{ formatAmount(getTotalRevenue(), Currency.XOF) }}
              </small>
            </div>
            <div class="col">
              <small class="text-muted">
                <strong>Quotidiens :</strong> {{ getDailySubscriptionsCount() }}
              </small>
            </div>
            <div class="col">
              <small class="text-muted">
                <strong>Mensuels :</strong> {{ getMonthlySubscriptionsCount() }}
              </small>
            </div>
          </div>
        </div>
      }
    }
  </div>
</app-ui-card>