import { DOCUMENT } from "@angular/common";
import { Component, Inject, OnInit } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { Title } from "@angular/platform-browser";
import { Router } from "@angular/router";
import { setDomaineDDFromLayout } from "src/app/custom/common";

import { ProjectsStore } from "src/app/stores/projects.store";
import { getAllElements } from "src/app/custom/common";
import { AuthenticationService } from 'src/app/core/services/authentication.service';

@Component({
  selector: "app-layout",
  templateUrl: "./layout.component.html",
  styleUrls: ["./layout.component.scss"],
})
export class LayoutComponent implements OnInit {
  public layoutList: any = [];
  current_label = "";
  public sidebarCollapsed = false;
  public currentUser: any = null;

  constructor(
    public dialog: MatDialog,
    @Inject(DOCUMENT) private document: Document,
    private router: Router,
    private projectStore: ProjectsStore,
    private titleService: Title,
    private authService: AuthenticationService
  ) {}

  async ngOnInit() {
    const arrows = this.document.querySelectorAll(".arrow");
    arrows.forEach((arrow) => {
      arrow.addEventListener("click", (e) => {
        const arrowParent = (e.target as HTMLElement).closest(".arrow")
          ?.parentElement?.parentElement;
        if (arrowParent) {
          arrowParent.classList.toggle("showMenu");
        }
      });
    });

    const sidebar = this.document.querySelector(".ng-layout");
    const sidebarBtns = this.document.querySelectorAll(".bx-menu");

    sidebarBtns.forEach((sidebarBtn) => {
      sidebarBtn.addEventListener("click", (e) => {
        e.preventDefault();
        e.stopPropagation();
        console.log("Toggle menu clicked"); // Debug
        sidebar?.classList.toggle("close");
      });
    });

    // Désactiver le chargement automatique des menus de l'ancien système
    console.log("🔄 Ancien système de layout désactivé - utilisation des nouveaux modules");
    
    // Redirection vers les nouveaux modules si on est sur l'ancien système
    const currentUrl = this.router.url;
    if (currentUrl.includes('/admin/client/') || currentUrl.includes('/admin/vente/')) {
      console.log('🔄 Redirection depuis ancien système vers nouveaux modules');
      this.router.navigate(['/admin/client/accounts']);
      return;
    }
    
    // Initialiser l'état de la sidebar depuis localStorage
    const sidebarState = localStorage.getItem('sidebarCollapsed');
    if (sidebarState) {
      this.sidebarCollapsed = sidebarState === 'true';
    }
    
    // Initialiser l'utilisateur
    this.initializeUser();
  }
  
  /**
   * Initialise les données utilisateur depuis l'AuthenticationService
   */
  private initializeUser(): void {
    // Utiliser l'AuthenticationService pour obtenir l'utilisateur actuel
    const user = this.authService.currentUser;
    
    if (user) {
      this.currentUser = {
        name: user.fullname || user.firstname || user.username || 'Utilisateur',
        email: user.email || '',
        avatar: this.generateAvatar(user.fullname || user.firstname || user.username || 'U'),
        role: user.role || 'Utilisateur',
        permissions: user.permissions || []
      };
    } else {
      // Fallback vers localStorage si pas encore dans AuthService
      const userData = localStorage.getItem('__user');
      if (userData) {
        try {
          const localUser = JSON.parse(userData);
          this.currentUser = {
            name: localUser.fullname || localUser.firstname || 'Utilisateur',
            email: localUser.email || '',
            avatar: this.generateAvatar(localUser.fullname || localUser.firstname || 'U'),
            role: localUser.role || 'Utilisateur',
            permissions: localUser.permissions || []
          };
        } catch (error) {
          this.currentUser = {
            name: 'Utilisateur',
            email: '',
            avatar: 'U',
            role: 'Utilisateur',
            permissions: []
          };
        }
      }
    }
  }
  
  /**
   * Génère un avatar à partir du nom
   */
  private generateAvatar(name: string): string {
    return name
      .split(' ')
      .map(word => word.charAt(0))
      .join('')
      .toUpperCase()
      .substring(0, 2);
  }
  
  /**
   * Retourne l'avatar de l'utilisateur
   */
  getUserAvatar(): string {
    return this.currentUser?.avatar || 'U';
  }
  
  /**
   * Retourne le nom de l'utilisateur
   */
  getUserName(): string {
    return this.currentUser?.name || 'Utilisateur';
  }
  
  /**
   * Vérifie si l'utilisateur a une permission spécifique
   */
  hasPermission(permission: string): boolean {
    return this.authService.hasPermission(permission);
  }
  
  /**
   * Vérifie si l'utilisateur est authentifié
   */
  isAuthenticated(): boolean {
    return this.authService.isAuthenticated;
  }
  
  /**
   * Déconnexion via AuthenticationService
   */
  onLogout(): void {
    console.log('🔒 Début de la déconnexion...');

    this.authService.logout().subscribe({
      next: () => {
        console.log('✅ Déconnexion réussie');
        this.router.navigate(['/login']);
      },
      error: (error) => {
        console.error('❌ Erreur lors de la déconnexion:', error);
        // Déconnexion forcée même en cas d'erreur
        localStorage.clear();
        this.router.navigate(['/login']);
      }
    });
  }

  /**
   * Toggle du menu mobile
   */
  public toggleMobileMenu(): void {
    this.sidebarCollapsed = !this.sidebarCollapsed;
    localStorage.setItem('sidebarCollapsed', this.sidebarCollapsed.toString());
  }

  /**
   * Gestion de la recherche globale
   */
  public onGlobalSearch(query: string): void {
    console.log('Recherche globale:', query);
    // TODO: Implémenter la recherche globale
  }

  /**
   * Changement de module principal
   */
  public onModuleChange(moduleId: string): void {
    console.log('Module changé:', moduleId);
    // La navigation est gérée par HybridNavigationComponent
  }

  /**
   * Changement de sous-module
   */
  public onSubModuleChange(subModuleId: string): void {
    console.log('Sous-module changé:', subModuleId);
    // La navigation est gérée par HybridNavigationComponent
  }

  public trackByFn(index: number, item: any) {
    return item.id; // unique id corresponding to the item
  }

  public closeDialog(layout: any) {
    this.current_label = layout.name;
    this.titleService.setTitle(layout.name + ` | ESTAIR-CONNECT`);
    this.document.body.classList.remove("pop-element");
    this.dialog.closeAll();
    setDomaineDDFromLayout(layout);
  }

  private checkTitle(url: string) {
    const repsonse = this.layoutList.filter((res: any) => {
      return res.route === url;
    });
    if (repsonse.length == 0) {
      this.current_label = this.layoutList[0].name;
      return "Projets | ESTAIR-CONNECT";
    }
    return repsonse[0]?.name + ` | ESTAIR-CONNECT`;
  }
}