import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

interface FaqItem {
  question: string;
  answer: string;
  priority: 'high' | 'medium' | 'low';
  expanded: boolean;
  visible: boolean;
}

interface FaqCategory {
  name: string;
  icon: string;
  faqs: FaqItem[];
}

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.scss'],
})
export class FaqComponent implements OnInit, OnDestroy {
  public searchTerm: string = '';
  public faqCategories: FaqCategory[] = [];
  public filteredCategories: FaqCategory[] = [];

  constructor(
    @Inject(DOCUMENT) private document: Document,
    public dialogRef: MatDialogRef<FaqComponent>
  ) {}

  ngOnInit(): void {
    this.document.body.classList.add('pop-in');
    this.initializeFaqData();
    this.filterFaqs();
  }

  ngOnDestroy() {
    this.document.body.classList.remove('pop-in');
  }

  private initializeFaqData(): void {
    this.faqCategories = [
      {
        name: 'Prise en main',
        icon: 'verified',
        faqs: [
          {
            question: 'Comment me connecter à l\'application ?',
            answer: 'Pour vous connecter, utilisez vos identifiants fournis par l\'administrateur. Saisissez votre nom d\'utilisateur et mot de passe sur la page de connexion. En cas d\'oubli, contactez le support technique.',
            priority: 'high',
            expanded: false,
            visible: true
          },
          {
            question: 'Comment réinitialiser mon mot de passe ?',
            answer: 'Cliquez sur "Mot de passe oublié" sur la page de connexion et suivez les instructions envoyées par email.',
            priority: 'medium',
            expanded: false,
            visible: true
          }
        ]
      },
      {
        name: 'Gestion des projets',
        icon: 'dashboard',
        faqs: [
          {
            question: 'Comment créer un nouveau projet ?',
            answer: 'Accédez à la section "Projets" dans le menu principal, puis cliquez sur "Nouveau projet" et remplissez les informations requises.',
            priority: 'low',
            expanded: false,
            visible: true
          },
          {
            question: 'Comment attribuer des tâches aux membres ?',
            answer: 'Dans la vue détaillée du projet, sélectionnez une tâche et utilisez le menu d\'attribution pour assigner des responsabilités aux membres de l\'équipe.',
            priority: 'medium',
            expanded: false,
            visible: true
          }
        ]
      },
      {
        name: 'Rapports et données',
        icon: 'assessment',
        faqs: [
          {
            question: 'Comment exporter les données projet ?',
            answer: 'Utilisez le bouton "Exporter" dans la section rapports pour télécharger les données au format Excel ou PDF selon vos besoins.',
            priority: 'low',
            expanded: false,
            visible: true
          }
        ]
      }
    ];
  }

  filterFaqs(): void {
    if (!this.searchTerm.trim()) {
      this.filteredCategories = this.faqCategories.map(category => ({
        ...category,
        faqs: category.faqs.map(faq => ({ ...faq, visible: true }))
      }));
    } else {
      const searchLower = this.searchTerm.toLowerCase();
      this.filteredCategories = this.faqCategories.map(category => {
        const filteredFaqs = category.faqs.map(faq => ({
          ...faq,
          visible: faq.question.toLowerCase().includes(searchLower) ||
                   faq.answer.toLowerCase().includes(searchLower)
        }));

        return {
          ...category,
          faqs: filteredFaqs
        };
      }).filter(category => category.faqs.some(faq => faq.visible));
    }
  }

  toggleFaq(faq: FaqItem): void {
    faq.expanded = !faq.expanded;
  }

  getPriorityLabel(priority: string): string {
    const labels = {
      'high': 'Urgent',
      'medium': 'Important',
      'low': 'Normal'
    };
    return labels[priority as keyof typeof labels] || priority;
  }

  getTotalArticles(): number {
    return this.faqCategories.reduce((total, category) => total + category.faqs.length, 0);
  }

  closeFaq(): void {
    this.dialogRef.close();
  }

  contactSupport(): void {
    window.open('mailto:support@estair.travel?subject=Support CHAPS', '_blank');
  }

  openUserGuide(): void {
    console.log('Opening user guide...');
    alert('Guide utilisateur : Documentation complète bientôt disponible !');
  }

  openTutorials(): void {
    console.log('Opening tutorials...');
    alert('Tutoriels vidéo : Contenus de formation en préparation !');
  }
}
