import { Component } from '@angular/core';
import { NgIconComponent } from '@ng-icons/core';
import { DecimalPipe } from '@angular/common';
import { NgbDropdownModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';

interface Transaction {
  id: string;
  user: string;
  operator: string;
  amount: number;
  status: 'success' | 'pending' | 'failed';
  date: string;
}

@Component({
  selector: 'app-recent-transactions',
  imports: [
    NgIconComponent,
    DecimalPipe,
    NgbPaginationModule,
    NgbDropdownModule,
  ],
  template: `
    <div class="card">
      <div class="card-header justify-content-between align-items-center border-dashed">
        <h4 class="card-title mb-0">Transactions Récentes</h4>
        <a href="javascript:void(0);" class="btn btn-sm btn-primary">
          <ng-icon name="lucideFile" class="me-1" />
          Exporter
        </a>
      </div>

      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-centered table-custom table-sm table-nowrap table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th>Transaction</th>
                <th>Utilisateur</th>
                <th>Opérateur</th>
                <th>Montant</th>
                <th>Statut</th>
                <th style="width: 30px;"></th>
              </tr>
            </thead>
            <tbody>
              @for (transaction of transactions; track transaction.id) {
                <tr>
                  <td>
                    <span class="text-muted fs-xs">#{{ transaction.id }}</span>
                  </td>
                  <td>
                    <span class="fw-semibold">{{ transaction.user }}</span>
                  </td>
                  <td>
                    <span class="badge bg-light text-dark">{{ transaction.operator }}</span>
                  </td>
                  <td>
                    <span class="fw-semibold">{{ transaction.amount | number }} XOF</span>
                  </td>
                  <td>
                    <span [class]="getStatusClass(transaction.status)" class="badge">
                      {{ getStatusText(transaction.status) }}
                    </span>
                  </td>
                  <td>
                    <div ngbDropdown placement="bottom-end">
                      <a href="javascript:void(0);" ngbDropdownToggle class="text-muted drop-arrow-none card-drop p-0">
                        <ng-icon name="lucideMoreVertical" class="fs-lg" />
                      </a>
                      <div class="dropdown-menu-end" ngbDropdownMenu>
                        <a href="javascript:void(0)" ngbDropdownItem>Voir détails</a>
                        <a href="javascript:void(0)" ngbDropdownItem>Rembourser</a>
                      </div>
                    </div>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      </div>

      <div class="card-footer border-0">
        <div class="align-items-center justify-content-between row text-center text-sm-start">
          <div class="col-sm">
            <div class="text-muted">
              Affichage de <span class="fw-semibold">1</span> à 
              <span class="fw-semibold">8</span> sur 
              <span class="fw-semibold">156</span> Transactions
            </div>
          </div>
          <div class="col-sm-auto mt-3 mt-sm-0">
            <ngb-pagination
              [pageSize]="8"
              [collectionSize]="156"
              class="pagination-sm pagination-boxed mb-0 justify-content-center"
            />
          </div>
        </div>
      </div>
    </div>
  `,
})
export class RecentTransactions {
  transactions: Transaction[] = [
    {
      id: 'TX-5001',
      user: 'Alice Koné',
      operator: 'Orange',
      amount: 2500,
      status: 'success',
      date: '2024-10-28 14:30'
    },
    {
      id: 'TX-5002',
      user: 'David Sarr',
      operator: 'MTN',
      amount: 1500,
      status: 'success',
      date: '2024-10-28 14:25'
    },
    {
      id: 'TX-5003',
      user: 'Sophia Diop',
      operator: 'Airtel',
      amount: 3000,
      status: 'pending',
      date: '2024-10-28 14:20'
    },
    {
      id: 'TX-5004',
      user: 'James Traoré',
      operator: 'Moov',
      amount: 2000,
      status: 'success',
      date: '2024-10-28 14:15'
    },
    {
      id: 'TX-5005',
      user: 'Ava Camara',
      operator: 'Orange',
      amount: 1000,
      status: 'failed',
      date: '2024-10-28 14:10'
    },
    {
      id: 'TX-5006',
      user: 'Ethan Diallo',
      operator: 'MTN',
      amount: 3500,
      status: 'success',
      date: '2024-10-28 14:05'
    },
    {
      id: 'TX-5007',
      user: 'Mia Bah',
      operator: 'Orange',
      amount: 1800,
      status: 'success',
      date: '2024-10-28 14:00'
    },
    {
      id: 'TX-5008',
      user: 'Lucas Keita',
      operator: 'Airtel',
      amount: 2200,
      status: 'pending',
      date: '2024-10-28 13:55'
    }
  ];

  getStatusClass(status: string): string {
    switch (status) {
      case 'success': return 'bg-success';
      case 'pending': return 'bg-warning';
      case 'failed': return 'bg-danger';
      default: return 'bg-secondary';
    }
  }

  getStatusText(status: string): string {
    switch (status) {
      case 'success': return 'Succès';
      case 'pending': return 'En cours';
      case 'failed': return 'Échec';
      default: return 'Inconnu';
    }
  }
}