import { Component } from '@angular/core';
import { NgIconComponent } from '@ng-icons/core';
import { CountUpModule } from 'ngx-countup';

@Component({
  selector: 'app-payment-stats',
  imports: [NgIconComponent, CountUpModule],
  template: `
    <div class="card">
      <div class="card-header bg-light">
        <h5 class="card-title mb-0">Statistiques des Paiements</h5>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <!-- Journalier -->
          <div class="col-md-6 col-xl-3">
            <div class="card border-primary border-2">
              <div class="card-body text-center p-3">
                <ng-icon name="lucideCalendar" class="text-primary fs-20 mb-2" />
                <h6 class="text-primary mb-2">Journalier</h6>
                <h4 class="fw-bold mb-1">
                  <span [countUp]="342">342</span>
                </h4>
                <p class="text-muted mb-1">Transactions</p>
                <div class="d-flex justify-content-between small">
                  <span>245K XOF</span>
                  <span class="text-success">
                    <ng-icon name="lucideTrendingUp" class="me-1 fs-12" />
                    98.2%
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Hebdomadaire -->
          <div class="col-md-6 col-xl-3">
            <div class="card border-info border-2">
              <div class="card-body text-center p-3">
                <ng-icon name="lucideCalendarDays" class="text-info fs-20 mb-2" />
                <h6 class="text-info mb-2">Hebdomadaire</h6>
                <h4 class="fw-bold mb-1">
                  <span [countUp]="2150">2,150</span>
                </h4>
                <p class="text-muted mb-1">Transactions</p>
                <div class="d-flex justify-content-between small">
                  <span>1.58M XOF</span>
                  <span class="text-success">
                    <ng-icon name="lucideTrendingUp" class="me-1 fs-12" />
                    97.8%
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Mensuel -->
          <div class="col-md-6 col-xl-3">
            <div class="card border-success border-2">
              <div class="card-body text-center p-3">
                <ng-icon name="lucideCalendarRange" class="text-success fs-20 mb-2" />
                <h6 class="text-success mb-2">Mensuel</h6>
                <h4 class="fw-bold mb-1">
                  <span [countUp]="8450">8,450</span>
                </h4>
                <p class="text-muted mb-1">Transactions</p>
                <div class="d-flex justify-content-between small">
                  <span>6.25M XOF</span>
                  <span class="text-warning">
                    <ng-icon name="lucideTrendingDown" class="me-1 fs-12" />
                    96.5%
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Annuel -->
          <div class="col-md-6 col-xl-3">
            <div class="card border-warning border-2">
              <div class="card-body text-center p-3">
                <ng-icon name="lucideCalendar" class="text-warning fs-20 mb-2" />
                <h6 class="text-warning mb-2">Annuel</h6>
                <h4 class="fw-bold mb-1">
                  <span [countUp]="12500">12,500</span>
                </h4>
                <p class="text-muted mb-1">Transactions</p>
                <div class="d-flex justify-content-between small">
                  <span>9.85M XOF</span>
                  <span class="text-success">
                    <ng-icon name="lucideTrendingUp" class="me-1 fs-12" />
                    95.2%
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Résumé global -->
        <div class="row mt-3">
          <div class="col-12">
            <div class="alert alert-light mb-0">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <strong>Performance globale:</strong> 
                  <span class="text-success">97.4% de taux de succès</span>
                </div>
                <div class="text-muted small">
                  Dernière mise à jour: {{ getCurrentTime() }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class PaymentStats {
  getCurrentTime(): string {
    return new Date().toLocaleTimeString('fr-FR', {
      hour: '2-digit',
      minute: '2-digit'
    });
  }
}