<div class="container-fluid">
  <app-page-title
    title="Dashboard DCB"
    subTitle="Monitoring en temps réel des paiements mobiles"
    [badge]="{icon:'lucideSmartphone', text:'Direct Carrier Billing'}"
  />
  <!-- Contenu du dashboard -->
  <div class="container-fluid dcb-dashboard">
  <!-- En-tête avec contrôles -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item active">Direct Carrier Billing</li>
            </ol>
          </nav>
        </div>
        
        <div class="d-flex align-items-center gap-3">
          <!-- Dernière mise à jour -->
          @if (lastUpdated) {
            <small class="text-muted">
              MAJ: {{ lastUpdated | date:'HH:mm:ss' }}
            </small>
          }
          
          <!-- Auto-refresh -->
          <div class="form-check form-switch">
            <input 
              class="form-check-input" 
              type="checkbox" 
              id="autoRefresh"
              [(ngModel)]="autoRefresh"
              (change)="onAutoRefreshToggle()"
            >
            <label class="form-check-label small" for="autoRefresh">
              Auto-refresh
            </label>
          </div>

          <!-- Bouton refresh manuel -->
          <button 
            class="btn btn-outline-primary btn-sm"
            (click)="onRefresh()"
            [disabled]="loading"
          >
            <ng-icon name="lucideRefreshCw" [class.spin]="loading"></ng-icon>
          </button>

          <!-- Filtres de période -->
          <div class="btn-group">
            <button 
              *ngFor="let range of timeRanges" 
              class="btn btn-outline-primary btn-sm"
              [class.active]="timeRange === range"
              (click)="onTimeRangeChange(range)"
            >
              {{ range }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Messages d'alerte -->
  @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>
  }

  <!-- Loading State -->
  @if (loading && !analytics) {
    <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 données DCB...</p>
    </div>
  }

  @if (!loading && analytics) {
    <!-- KPI Cards -->
    <div class="row mb-4">
      <!-- Chiffre d'affaires total -->
      <div class="col-xl-3 col-md-6 mb-3">
        <div class="card kpi-card h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="flex-grow-1">
                <span class="text-muted text-uppercase small fw-semibold">Chiffre d'Affaires</span>
                <h3 class="mt-2 mb-1 text-primary">{{ formatCurrency(analytics.totalRevenue) }}</h3>
                <div class="d-flex align-items-center mt-2">
                  <span [class]="getGrowthClass(analytics.monthlyGrowth)" class="fw-semibold">
                    <ng-icon [name]="getGrowthIcon(analytics.monthlyGrowth)" class="me-1"></ng-icon>
                    {{ analytics.monthlyGrowth > 0 ? '+' : '' }}{{ analytics.monthlyGrowth }}%
                  </span>
                  <span class="text-muted small ms-2">vs mois dernier</span>
                </div>
              </div>
              <div class="flex-shrink-0">
                <div class="kpi-icon bg-primary">
                  <ng-icon name="lucideEuro"></ng-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Transactions totales -->
      <div class="col-xl-3 col-md-6 mb-3">
        <div class="card kpi-card h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="flex-grow-1">
                <span class="text-muted text-uppercase small fw-semibold">Transactions</span>
                <h3 class="mt-2 mb-1 text-success">{{ formatNumber(analytics.totalTransactions) }}</h3>
                <div class="d-flex align-items-center mt-2">
                  <span class="text-success fw-semibold">
                    {{ formatPercentage(analytics.successRate) }}
                  </span>
                  <span class="text-muted small ms-2">taux de succès</span>
                </div>
              </div>
              <div class="flex-shrink-0">
                <div class="kpi-icon bg-success">
                  <ng-icon name="lucideCreditCard"></ng-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Montant moyen -->
      <div class="col-xl-3 col-md-6 mb-3">
        <div class="card kpi-card h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="flex-grow-1">
                <span class="text-muted text-uppercase small fw-semibold">Montant Moyen</span>
                <h3 class="mt-2 mb-1 text-info">{{ formatCurrency(analytics.averageAmount) }}</h3>
                <div class="text-muted small mt-2">par transaction</div>
              </div>
              <div class="flex-shrink-0">
                <div class="kpi-icon bg-info">
                  <ng-icon name="lucideBarChart3"></ng-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Aujourd'hui -->
      <div class="col-xl-3 col-md-6 mb-3">
        <div class="card kpi-card h-100">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="flex-grow-1">
                <span class="text-muted text-uppercase small fw-semibold">Aujourd'hui</span>
                <h3 class="mt-2 mb-1 text-warning">{{ formatCurrency(analytics.todayStats.revenue) }}</h3>
                <div class="text-muted small mt-2">
                  {{ analytics.todayStats.transactions }} transactions
                </div>
              </div>
              <div class="flex-shrink-0">
                <div class="kpi-icon bg-warning">
                  <ng-icon name="lucideTrendingUp"></ng-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Deuxième ligne : Statistiques détaillées -->
    <div class="row mb-4">
      <!-- Performances opérateurs -->
      <div class="col-xl-8 mb-4">
        <div class="card h-100">
          <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Performances par Opérateur</h5>
            <span class="badge bg-primary">{{ operators.length }} opérateurs</span>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover table-sm mb-0">
                <thead>
                  <tr>
                    <th>Opérateur</th>
                    <th>Pays</th>
                    <th>Statut</th>
                    <th>Taux de Succès</th>
                    <th>Progression</th>
                  </tr>
                </thead>
                <tbody>
                  @for (operator of operators; track operator.id) {
                    <tr>
                      <td class="fw-semibold">{{ operator.name }}</td>
                      <td>
                        <span class="badge bg-light text-dark">{{ operator.country }}</span>
                      </td>
                      <td>
                        <span [class]="getOperatorStatusClass(operator.status)" class="badge">
                          {{ operator.status === 'ACTIVE' ? 'Actif' : 'Inactif' }}
                        </span>
                      </td>
                      <td>
                        <span [class]="getSuccessRateClass(operator.successRate)" class="fw-semibold">
                          {{ formatPercentage(operator.successRate) }}
                        </span>
                      </td>
                      <td>
                        <div class="d-flex align-items-center">
                          <div class="flex-grow-1 me-2">
                            <ngb-progressbar 
                              [value]="operator.successRate" 
                              [max]="100"
                              [class]="getProgressBarClass(operator.successRate)"
                              class="progress-sm"
                            ></ngb-progressbar>
                          </div>
                          <small class="text-muted">{{ operator.successRate }}%</small>
                        </div>
                      </td>
                    </tr>
                  }
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- Top opérateurs par revenu -->
      <div class="col-xl-4 mb-4">
        <div class="card h-100">
          <div class="card-header bg-light">
            <h5 class="card-title mb-0">Top Opérateurs - Revenus</h5>
          </div>
          <div class="card-body">
            @for (operator of analytics.topOperators; track operator.operator; let i = $index) {
              <div class="d-flex align-items-center mb-3 pb-2 border-bottom">
                <div class="flex-shrink-0 me-3">
                  <div class="rank-badge bg-primary text-white">{{ i + 1 }}</div>
                </div>
                <div class="flex-grow-1">
                  <h6 class="mb-1">{{ operator.operator }}</h6>
                  <div class="d-flex justify-content-between align-items-center">
                    <span class="text-muted small">{{ operator.count }} trans.</span>
                    <span class="fw-semibold text-primary">
                      {{ formatCurrency(operator.revenue) }}
                    </span>
                  </div>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </div>

    <!-- Transactions récentes -->
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Transactions Récentes</h5>
            <a href="javascript:void(0)" class="btn btn-outline-primary btn-sm">
              Voir toutes les transactions
            </a>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover mb-0">
                <thead class="table-light">
                  <tr>
                    <th>MSISDN</th>
                    <th>Opérateur</th>
                    <th>Produit</th>
                    <th>Montant</th>
                    <th>Statut</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  @for (transaction of recentTransactions; track transaction.id) {
                    <tr>
                      <td class="fw-medium font-monospace">{{ transaction.msisdn }}</td>
                      <td>
                        <span class="badge bg-light text-dark">{{ transaction.operator }}</span>
                      </td>
                      <td class="text-truncate" style="max-width: 150px;" 
                          [ngbTooltip]="transaction.productName">
                        {{ transaction.productName }}
                      </td>
                      <td class="fw-bold text-primary">
                        {{ formatCurrency(transaction.amount, transaction.currency) }}
                      </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="text-muted small">
                        {{ transaction.transactionDate | date:'dd/MM/yy HH:mm' }}
                      </td>
                    </tr>
                  }
                  @empty {
                    <tr>
                      <td colspan="6" class="text-center py-4 text-muted">
                        <ng-icon name="lucideCreditCard" class="fs-1 mb-2 d-block"></ng-icon>
                        Aucune transaction récente
                      </td>
                    </tr>
                  }
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  }
  </div>

</div>
