<!-- src/app/modules/merchant-users/stats/stats.html -->
<app-ui-card title="Statistiques de l'Équipe Marchande">
  <a
    helper-text
    href="javascript:void(0);"
    class="icon-link icon-link-hover link-primary fw-semibold"
    >Vue d'ensemble des utilisateurs de votre écosystème marchand
  </a>

  <div card-body>
    @if (!stats) {
      <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 statistiques...</p>
      </div>
    }

    @if (stats) {
      <div class="row">
        <!-- KPI Cards -->
        <div class="col-xl-3 col-md-6">
          <div class="card card-animate">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                  <p class="text-uppercase fw-medium text-muted mb-0">Total Utilisateurs</p>
                  <h4 class="mt-2 mb-0 text-primary">{{ stats.totalUsers }}</h4>
                  <p class="mb-0">
                    <span class="badge bg-success-subtle text-success mt-1">
                      <ng-icon name="lucideUsers" class="me-1"></ng-icon>
                      Équipe complète
                    </span>
                  </p>
                </div>
                <div class="flex-shrink-0">
                  <div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                    <ng-icon name="lucideUsers" class="text-primary fs-20"></ng-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3 col-md-6">
          <div class="card card-animate">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                  <p class="text-uppercase fw-medium text-muted mb-0">Administrateurs</p>
                  <h4 class="mt-2 mb-0 text-danger">{{ stats.totalAdmins }}</h4>
                  <p class="mb-0">
                    <span class="badge bg-danger-subtle text-danger mt-1">
                      <ng-icon name="lucideShield" class="me-1"></ng-icon>
                      Accès complet
                    </span>
                  </p>
                </div>
                <div class="flex-shrink-0">
                  <div class="avatar-sm bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                    <ng-icon name="lucideShield" class="text-danger fs-20"></ng-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3 col-md-6">
          <div class="card card-animate">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                  <p class="text-uppercase fw-medium text-muted mb-0">Managers</p>
                  <h4 class="mt-2 mb-0 text-warning">{{ stats.totalManagers }}</h4>
                  <p class="mb-0">
                    <span class="badge bg-warning-subtle text-warning mt-1">
                      <ng-icon name="lucideUserCog" class="me-1"></ng-icon>
                      Gestion opérationnelle
                    </span>
                  </p>
                </div>
                <div class="flex-shrink-0">
                  <div class="avatar-sm bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                    <ng-icon name="lucideUserCog" class="text-warning fs-20"></ng-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3 col-md-6">
          <div class="card card-animate">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                  <p class="text-uppercase fw-medium text-muted mb-0">Support</p>
                  <h4 class="mt-2 mb-0 text-info">{{ stats.totalSupport }}</h4>
                  <p class="mb-0">
                    <span class="badge bg-info-subtle text-info mt-1">
                      <ng-icon name="lucideHeadphones" class="me-1"></ng-icon>
                      Assistance client
                    </span>
                  </p>
                </div>
                <div class="flex-shrink-0">
                  <div class="avatar-sm bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                    <ng-icon name="lucideHeadphones" class="text-info fs-20"></ng-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Statistiques d'activité -->
        <div class="col-xl-4 col-md-6">
          <div class="card">
            <div class="card-body text-center">
              <h6 class="card-title mb-3">Utilisateurs Actifs</h6>
              <div class="mb-3">
                <h2 class="text-success">{{ stats.activeUsers }}</h2>
                <p class="text-muted mb-0">Comptes activés</p>
              </div>
              <div class="progress mb-2">
                <div class="progress-bar bg-success" 
                     [style.width]="(stats.activeUsers / stats.totalUsers * 100) + '%'">
                  {{ (stats.activeUsers / stats.totalUsers * 100).toFixed(1) }}%
                </div>
              </div>
              <small class="text-muted">
                {{ stats.activeUsers }} sur {{ stats.totalUsers }} utilisateurs
              </small>
            </div>
          </div>
        </div>

        <div class="col-xl-4 col-md-6">
          <div class="card">
            <div class="card-body text-center">
              <h6 class="card-title mb-3">Utilisateurs Inactifs</h6>
              <div class="mb-3">
                <h2 class="text-danger">{{ stats.inactiveUsers }}</h2>
                <p class="text-muted mb-0">Comptes désactivés</p>
              </div>
              <div class="progress mb-2">
                <div class="progress-bar bg-danger" 
                     [style.width]="(stats.inactiveUsers / stats.totalUsers * 100) + '%'">
                  {{ (stats.inactiveUsers / stats.totalUsers * 100).toFixed(1) }}%
                </div>
              </div>
              <small class="text-muted">
                {{ stats.inactiveUsers }} sur {{ stats.totalUsers }} utilisateurs
              </small>
            </div>
          </div>
        </div>

        <div class="col-xl-4 col-md-12">
          <div class="card">
            <div class="card-body text-center">
              <h6 class="card-title mb-3">Répartition des Rôles</h6>
              <div class="d-flex justify-content-around text-center">
                <div>
                  <h4 class="text-danger mb-1">{{ stats.totalAdmins }}</h4>
                  <small class="text-muted">Admins</small>
                </div>
                <div>
                  <h4 class="text-warning mb-1">{{ stats.totalManagers }}</h4>
                  <small class="text-muted">Managers</small>
                </div>
                <div>
                  <h4 class="text-info mb-1">{{ stats.totalSupport }}</h4>
                  <small class="text-muted">Support</small>
                </div>
              </div>
              <div class="mt-3">
                <div class="progress" style="height: 8px;">
                  <div class="progress-bar bg-danger" 
                       [style.width]="(stats.totalAdmins / stats.totalUsers * 100) + '%'"
                       title="Administrateurs">
                  </div>
                  <div class="progress-bar bg-warning" 
                       [style.width]="(stats.totalManagers / stats.totalUsers * 100) + '%'"
                       title="Managers">
                  </div>
                  <div class="progress-bar bg-info" 
                       [style.width]="(stats.totalSupport / stats.totalUsers * 100) + '%'"
                       title="Support">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Résumé textuel -->
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <h6 class="card-title mb-3">Synthèse de l'Équipe</h6>
              <div class="row text-center">
                <div class="col-md-3">
                  <div class="border-end">
                    <h5 class="text-primary mb-1">{{ stats.totalUsers }}</h5>
                    <small class="text-muted">Total Membres</small>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="border-end">
                    <h5 class="text-success mb-1">{{ stats.activeUsers }}</h5>
                    <small class="text-muted">Actifs</small>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="border-end">
                    <h5 class="text-danger mb-1">{{ stats.inactiveUsers }}</h5>
                    <small class="text-muted">Inactifs</small>
                  </div>
                </div>
                <div class="col-md-3">
                  <h5 class="text-info mb-1">{{ stats.totalAdmins + stats.totalManagers + stats.totalSupport }}</h5>
                  <small class="text-muted">Avec Rôle Défini</small>
                </div>
              </div>
              
              <!-- Message d'information -->
              <div class="alert alert-light mt-3 mb-0">
                <div class="d-flex align-items-center">
                  <ng-icon name="lucideInfo" class="me-2 text-info"></ng-icon>
                  <div>
                    <small>
                      Votre équipe marchande est composée de <strong>{{ stats.totalAdmins }} administrateurs</strong>, 
                      <strong>{{ stats.totalManagers }} managers</strong> et <strong>{{ stats.totalSupport }} agents de support</strong>.
                      <strong>{{ stats.activeUsers }} utilisateurs</strong> sont actuellement actifs.
                    </small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    }
  </div>
</app-ui-card>