import { Component, OnInit } from '@angular/core';
import { FinanceService } from './services/finance.service';

/**
 * Composant de diagnostic pour le module Finance
 */
@Component({
  selector: 'app-finance-diagnostic',
  template: `
    <div style="padding: 20px; font-family: 'Segoe UI', sans-serif;">
      <h1 style="color: #2c3e50;">🔧 Diagnostic - Module Finance</h1>
      
      <div style="background: white; padding: 20px; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <h2>💳 Test du Service Transactions</h2>
        <div [style.color]="transactionsStatus.color">{{ transactionsStatus.message }}</div>
        
        <div *ngIf="transactions.length > 0" style="margin-top: 20px;">
          <h3>Transactions chargées ({{ transactions.length }}) :</h3>
          <div *ngFor="let item of transactions" style="padding: 10px; margin: 5px 0; background: #f8f9fa; border-radius: 5px;">
            <strong>{{ item.reference }}</strong> - {{ item.account_name }}
            <span [style.background]="getTransactionColor(item.type)" 
                  style="color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">
              {{ item.type }}
            </span>
            <div style="font-size: 12px; color: #6c757d; margin-top: 4px;">
              {{ item.amount | currency:'EUR' }} - {{ item.description }}
            </div>
            <div style="font-size: 12px; color: #6c757d;">
              {{ item.bank_name }} - Statut: {{ item.status }}
            </div>
          </div>
        </div>
      </div>
      
      <div style="background: white; padding: 20px; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <h2>💰 Test du Service Soldes</h2>
        <div [style.color]="soldesStatus.color">{{ soldesStatus.message }}</div>
        
        <div *ngIf="soldes.length > 0" style="margin-top: 20px;">
          <h3>Soldes chargés ({{ soldes.length }}) :</h3>
          <div *ngFor="let item of soldes" style="padding: 10px; margin: 5px 0; background: #f8f9fa; border-radius: 5px;">
            <strong>{{ item.account_name }}</strong>
            <span [style.background]="getSoldeColor(item.balance)" 
                  style="color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">
              {{ item.status }}
            </span>
            <div style="font-size: 12px; color: #6c757d; margin-top: 4px;">
              <strong>Solde:</strong> {{ item.balance | currency:'EUR' }} | 
              <strong>Limite:</strong> {{ item.credit_limit | currency:'EUR' }} | 
              <strong>Disponible:</strong> {{ item.available | currency:'EUR' }}
            </div>
            <div style="font-size: 12px; color: #6c757d;">
              <strong>Encours:</strong> {{ item.outstanding | currency:'EUR' }} - 
              MAJ: {{ item.last_update | date:'dd/MM/yyyy HH:mm' }}
            </div>
          </div>
        </div>
      </div>
      
      <div style="margin-top: 20px;">
        <button (click)="testServices()" 
                style="background: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;">
          🔄 Tester les Services
        </button>
        <button (click)="refreshData()" 
                style="background: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
          🔄 Rafraîchir les Données
        </button>
      </div>
      
      <div style="background: #d4edda; padding: 15px; border-radius: 8px; margin: 20px 0;">
        <h3 style="color: #155724; margin-top: 0;">✅ Liens de Navigation</h3>
        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
          <a href="/admin/finance/test" style="background: #007bff; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
            📋 Test Principal
          </a>
          <a href="/admin/customers/test" style="background: #6c757d; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
            👥 Customers
          </a>
          <a href="/admin/billets/test" style="background: #fd7e14; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
            🎫 Billets
          </a>
        </div>
      </div>
    </div>
  `,
  providers: [FinanceService]
})
export class FinanceDiagnosticComponent implements OnInit {
  
  transactionsStatus = { message: 'En attente de test...', color: '#6c757d' };
  soldesStatus = { message: 'En attente de test...', color: '#6c757d' };
  
  transactions: any[] = [];
  soldes: any[] = [];
  
  constructor(private financeService: FinanceService) {}
  
  ngOnInit(): void {
    this.testServices();
  }
  
  testServices(): void {
    this.testTransactions();
    this.testSoldes();
  }
  
  testTransactions(): void {
    this.transactionsStatus = { message: 'Test en cours...', color: '#ffc107' };
    
    this.financeService.getTransactions().subscribe({
      next: (data) => {
        this.transactions = data;
        this.transactionsStatus = { message: `✅ Service fonctionnel - ${data.length} transactions chargées`, color: '#28a745' };
      },
      error: (error) => {
        this.transactionsStatus = { message: `❌ Erreur: ${error.message}`, color: '#dc3545' };
      }
    });
  }
  
  testSoldes(): void {
    this.soldesStatus = { message: 'Test en cours...', color: '#ffc107' };
    
    this.financeService.getSoldes().subscribe({
      next: (data) => {
        this.soldes = data;
        this.soldesStatus = { message: `✅ Service fonctionnel - ${data.length} soldes chargés`, color: '#28a745' };
      },
      error: (error) => {
        this.soldesStatus = { message: `❌ Erreur: ${error.message}`, color: '#dc3545' };
      }
    });
  }
  
  refreshData(): void {
    this.financeService.refreshData();
    setTimeout(() => this.testServices(), 500);
  }
  
  getTransactionColor(type: string): string {
    switch (type) {
      case 'credit': return '#28a745';
      case 'debit': return '#dc3545';
      case 'transfer': return '#007bff';
      default: return '#6c757d';
    }
  }
  
  getSoldeColor(balance: number): string {
    if (balance < 0) return '#dc3545';
    if (balance < 1000) return '#ffc107';
    return '#28a745';
  }
}


