import { Component } from '@angular/core';

/**
 * Composant de test pour le module Billets
 */
@Component({
  selector: 'app-billets-test',
  template: `
    <div style="padding: 20px;">
      <h1 style="color: #2c3e50; margin-bottom: 30px;">
        🎫 Module Billets - Test de Fonctionnement
      </h1>
      
      <div style="background: #e3f2fd; padding: 15px; border-radius: 8px; margin: 20px 0;">
        <h2>✅ Statut de Migration - Module Billets</h2>
        <ul>
          <li>✅ Service BilletsService implémenté</li>
          <li>✅ Données de test générées (4 états de ventes, 3 PNR)</li>
          <li>✅ Composants de liste créés</li>
          <li>✅ Routing configuré</li>
          <li>✅ Interface utilisateur moderne</li>
          <li>🔄 Tests de fonctionnement...</li>
        </ul>
      </div>
      
      <div style="background: #f3e5f5; padding: 15px; border-radius: 8px; margin: 20px 0;">
        <h2>📊 Données de Test Disponibles</h2>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px;">
          <div>
            <h3>🎟️ États de Ventes (4)</h3>
            <ul style="font-size: 14px;">
              <li>ABC123 - Jean Dupont - Dakar → Paris (450,75 €)</li>
              <li>DEF456 - Marie Martin - Abidjan → Londres (680,50 €)</li>
              <li>GHI789 - Ahmed Diallo - Casablanca → Madrid (320,25 €)</li>
              <li>JKL012 - Fatou Sow - Bamako → Dubai (890,00 €)</li>
            </ul>
          </div>
          <div>
            <h3>✈️ PNR - Dossiers (3)</h3>
            <ul style="font-size: 14px;">
              <li>ABC123 - Air France (confirmé)</li>
              <li>DEF456 - British Airways (en attente)</li>
              <li>GHI789 - Royal Air Maroc (annulé)</li>
            </ul>
          </div>
        </div>
      </div>
      
      <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin: 20px 0;">
        <h2>🎯 Fonctionnalités du Module</h2>
        <ul>
          <li><strong>États de Ventes:</strong> Liste des billets émis avec statuts</li>
          <li><strong>PNR:</strong> Gestion des dossiers passagers</li>
          <li><strong>Statistiques:</strong> KPI de vente et performance</li>
          <li><strong>Recherche:</strong> Filtrage par passager, destination, date</li>
          <li><strong>Actions:</strong> Consultation, modification, annulation</li>
        </ul>
      </div>
      
      <div style="background: #fff3cd; padding: 15px; border-radius: 8px; margin: 20px 0; border-left: 4px solid #ffc107;">
        <h2>🧪 Pages de Test Disponibles</h2>
        <div style="display: flex; gap: 15px; flex-wrap: wrap; margin-top: 15px;">
          <a href="/admin/billets/test" 
             style="background: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block;">
            📋 Page de Test
          </a>
          <a href="/admin/billets/diagnostic" 
             style="background: #28a745; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block;">
            🔧 Diagnostic Services
          </a>
          <span style="background: #6c757d; color: white; padding: 10px 20px; border-radius: 5px; display: inline-block; opacity: 0.6;">
            🎟️ États de Ventes (bientôt)
          </span>
          <span style="background: #6c757d; color: white; padding: 10px 20px; border-radius: 5px; display: inline-block; opacity: 0.6;">
            ✈️ Liste PNR (bientôt)
          </span>
        </div>
      </div>
      
      <div style="background: #d1ecf1; padding: 15px; border-radius: 8px; margin: 20px 0;">
        <h2>🔗 Navigation vers Autres Modules</h2>
        <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;">
          <a href="/admin/customers/test" style="background: #6c757d; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
            👥 Customers
          </a>
          <a href="/admin/finance/test" style="background: #fd7e14; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
            💰 Finance (à venir)
          </a>
          <a href="/admin/support/test" style="background: #20c997; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
            🛠️ Support (à venir)
          </a>
        </div>
      </div>
    </div>
  `,
  styles: [`
    h1 { color: #2c3e50; }
    h2 { color: #34495e; margin-top: 0; }
    h3 { color: #495057; margin-top: 0; }
    li { margin: 8px 0; }
  `]
})
export class BilletsTestComponent { }
