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

/**
 * Composant de diagnostic pour le module Support
 */
@Component({
  selector: 'app-support-diagnostic',
  template: `
    <div style="padding: 20px; font-family: 'Segoe UI', sans-serif;">
      <h1 style="color: #2c3e50;">🔧 Diagnostic - Module Support</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 Tickets</h2>
        <div [style.color]="ticketsStatus.color">{{ ticketsStatus.message }}</div>
        
        <div *ngIf="tickets.length > 0" style="margin-top: 20px;">
          <h3>Tickets chargés ({{ tickets.length }}) :</h3>
          <div *ngFor="let item of tickets" style="padding: 10px; margin: 5px 0; background: #f8f9fa; border-radius: 5px;">
            <strong>{{ item.ticket_number }}</strong> - {{ item.subject }}
            <span [style.background]="getPriorityColor(item.priority)" 
                  style="color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">
              {{ item.priority }}
            </span>
            <span [style.background]="getStatusColor(item.status)" 
                  style="color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; margin-left: 5px;">
              {{ item.status }}
            </span>
            <div style="font-size: 12px; color: #6c757d; margin-top: 4px;">
              <strong>Demandeur:</strong> {{ item.requester }} ({{ item.account_name }})
            </div>
            <div style="font-size: 12px; color: #6c757d;">
              <strong>Assigné à:</strong> {{ item.assigned_to }} - 
              <strong>Créé:</strong> {{ item.created_at | date:'dd/MM/yyyy' }}
            </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 Utilisateurs</h2>
        <div [style.color]="usersStatus.color">{{ usersStatus.message }}</div>
        
        <div *ngIf="users.length > 0" style="margin-top: 20px;">
          <h3>Utilisateurs chargés ({{ users.length }}) :</h3>
          <div *ngFor="let item of users" style="padding: 10px; margin: 5px 0; background: #f8f9fa; border-radius: 5px;">
            <strong>{{ item.name }}</strong> - {{ item.email }}
            <span [style.background]="getRoleColor(item.role)" 
                  style="color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">
              {{ item.role }}
            </span>
            <span [style.background]="getUserStatusColor(item.status)" 
                  style="color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; margin-left: 5px;">
              {{ item.status }}
            </span>
            <div style="font-size: 12px; color: #6c757d; margin-top: 4px;">
              <strong>Dernière connexion:</strong> {{ item.last_login | date:'dd/MM/yyyy HH:mm' }} - 
              <strong>Créé:</strong> {{ item.created_at | date:'dd/MM/yyyy' }}
            </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/support/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>
          <a href="/admin/finance/test" style="background: #20c997; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px;">
            💰 Finance
          </a>
        </div>
      </div>
    </div>
  `,
  providers: [SupportService]
})
export class SupportDiagnosticComponent implements OnInit {
  
  ticketsStatus = { message: 'En attente de test...', color: '#6c757d' };
  usersStatus = { message: 'En attente de test...', color: '#6c757d' };
  
  tickets: any[] = [];
  users: any[] = [];
  
  constructor(private supportService: SupportService) {}
  
  ngOnInit(): void {
    this.testServices();
  }
  
  testServices(): void {
    this.testTickets();
    this.testUsers();
  }
  
  testTickets(): void {
    this.ticketsStatus = { message: 'Test en cours...', color: '#ffc107' };
    
    this.supportService.getTickets().subscribe({
      next: (data) => {
        this.tickets = data;
        this.ticketsStatus = { message: `✅ Service fonctionnel - ${data.length} tickets chargés`, color: '#28a745' };
      },
      error: (error) => {
        this.ticketsStatus = { message: `❌ Erreur: ${error.message}`, color: '#dc3545' };
      }
    });
  }
  
  testUsers(): void {
    this.usersStatus = { message: 'Test en cours...', color: '#ffc107' };
    
    this.supportService.getUsers().subscribe({
      next: (data) => {
        this.users = data;
        this.usersStatus = { message: `✅ Service fonctionnel - ${data.length} utilisateurs chargés`, color: '#28a745' };
      },
      error: (error) => {
        this.usersStatus = { message: `❌ Erreur: ${error.message}`, color: '#dc3545' };
      }
    });
  }
  
  refreshData(): void {
    this.supportService.refreshData();
    setTimeout(() => this.testServices(), 500);
  }
  
  getPriorityColor(priority: string): string {
    switch (priority) {
      case 'high': return '#dc3545';
      case 'medium': return '#ffc107';
      case 'low': return '#28a745';
      default: return '#6c757d';
    }
  }
  
  getStatusColor(status: string): string {
    switch (status) {
      case 'open': return '#dc3545';
      case 'in_progress': return '#ffc107';
      case 'resolved': return '#17a2b8';
      case 'closed': return '#28a745';
      default: return '#6c757d';
    }
  }
  
  getRoleColor(role: string): string {
    switch (role) {
      case 'administrator': return '#6f42c1';
      case 'support_tech': return '#007bff';
      case 'support_commercial': return '#28a745';
      case 'account_manager': return '#fd7e14';
      default: return '#6c757d';
    }
  }
  
  getUserStatusColor(status: string): string {
    switch (status) {
      case 'active': return '#28a745';
      case 'inactive': return '#dc3545';
      default: return '#6c757d';
    }
  }
}


