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

/**
 * Composant de diagnostic pour le module Billets
 */
@Component({
  selector: 'app-billets-diagnostic',
  template: `
    <div style="padding: 20px; font-family: 'Segoe UI', sans-serif;">
      <h1 style="color: #2c3e50;">🔧 Diagnostic - Module Billets</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 États de Ventes</h2>
        <div [style.color]="etatsdeventesStatus.color">{{ etatsdeventesStatus.message }}</div>
        
        <div *ngIf="etatsdeventes.length > 0" style="margin-top: 20px;">
          <h3>États de ventes chargés ({{ etatsdeventes.length }}) :</h3>
          <div *ngFor="let item of etatsdeventes" style="padding: 10px; margin: 5px 0; background: #f8f9fa; border-radius: 5px;">
            <strong>{{ item.pnr }}</strong> - {{ item.passenger_name }} - {{ item.destination }}
            <span [style.background]="getStatusColor(item.status)" 
                  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;">
              {{ item.amount | currency:'EUR' }} - {{ item.account_name }}
            </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 PNR</h2>
        <div [style.color]="pnrStatus.color">{{ pnrStatus.message }}</div>
        
        <div *ngIf="pnrData.length > 0" style="margin-top: 20px;">
          <h3>PNR chargés ({{ pnrData.length }}) :</h3>
          <div *ngFor="let item of pnrData" style="padding: 10px; margin: 5px 0; background: #f8f9fa; border-radius: 5px;">
            <strong>{{ item.code }}</strong> - {{ item.main_passenger }}
            <span [style.background]="getStatusColor(item.status)" 
                  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;">
              {{ item.departure }} → {{ item.arrival }} - {{ item.airline }} {{ item.flight_number }}
            </div>
            <div style="font-size: 12px; color: #6c757d;">
              {{ item.passenger_count }} passager(s) - {{ item.total_amount | currency:'EUR' }}
            </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/billets/test" style="background: #007bff; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
            📋 Test Principal
          </a>
          <span style="background: #6c757d; color: white; padding: 8px 16px; border-radius: 4px; opacity: 0.6;">
            🎟️ États de Ventes (bientôt)
          </span>
          <span style="background: #6c757d; color: white; padding: 8px 16px; border-radius: 4px; opacity: 0.6;">
            ✈️ PNR (bientôt)
          </span>
        </div>
      </div>
    </div>
  `,
  providers: [BilletsService]
})
export class BilletsDiagnosticComponent implements OnInit {
  
  etatsdeventesStatus = { message: 'En attente de test...', color: '#6c757d' };
  pnrStatus = { message: 'En attente de test...', color: '#6c757d' };
  
  etatsdeventes: any[] = [];
  pnrData: any[] = [];
  
  constructor(private billetsService: BilletsService) {}
  
  ngOnInit(): void {
    this.testServices();
  }
  
  testServices(): void {
    this.testEtatsdeventes();
    this.testPnr();
  }
  
  testEtatsdeventes(): void {
    this.etatsdeventesStatus = { message: 'Test en cours...', color: '#ffc107' };
    
    this.billetsService.getEtatsdeventes().subscribe({
      next: (data) => {
        this.etatsdeventes = data;
        this.etatsdeventesStatus = { message: `✅ Service fonctionnel - ${data.length} états de ventes chargés`, color: '#28a745' };
      },
      error: (error) => {
        this.etatsdeventesStatus = { message: `❌ Erreur: ${error.message}`, color: '#dc3545' };
      }
    });
  }
  
  testPnr(): void {
    this.pnrStatus = { message: 'Test en cours...', color: '#ffc107' };
    
    this.billetsService.getPnr().subscribe({
      next: (data) => {
        this.pnrData = data;
        this.pnrStatus = { message: `✅ Service fonctionnel - ${data.length} PNR chargés`, color: '#28a745' };
      },
      error: (error) => {
        this.pnrStatus = { message: `❌ Erreur: ${error.message}`, color: '#dc3545' };
      }
    });
  }
  
  refreshData(): void {
    this.billetsService.refreshData();
    setTimeout(() => this.testServices(), 500);
  }
  
  getStatusColor(status: string): string {
    switch (status) {
      case 'issued':
      case 'confirmed': return '#28a745';
      case 'pending': return '#ffc107';
      case 'cancelled': return '#dc3545';
      default: return '#6c757d';
    }
  }
}
