import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-hybrid-navigation',
  templateUrl: './hybrid-navigation.component.html',
  styleUrls: ['./hybrid-navigation.component.scss']
})
export class HybridNavigationComponent implements OnInit {
  
  @Input() collapsed = false;
  @Input() showOnlyMainTabs = false;
  @Input() showOnlySubSidebar = false;
  @Input() disableRouteListener = false;
  @Output() moduleChange = new EventEmitter<string>();
  @Output() subModuleChange = new EventEmitter<string>();

  public mainModules$ = new BehaviorSubject<any[]>([]);
  public subModules$ = new BehaviorSubject<any[]>([]);
  public activeModule$ = new BehaviorSubject<string>('');
  public activeSubModule$ = new BehaviorSubject<string>('');

  private menusData: any[] = [];

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.loadRealMenus();
    if (!this.disableRouteListener) {
      this.setupRouteListener();
    }
  }

  /**
   * Charge les vrais menus depuis localStorage
   */
  private async loadRealMenus(): Promise<void> {
    try {
      // Charger depuis localStorage (données réelles de l'app)
      const menusData = localStorage.getItem('__menus');
      console.log('🔍 Vérification localStorage __menus:', menusData ? 'TROUVÉ' : 'NON TROUVÉ');
      
      if (menusData) {
        this.menusData = JSON.parse(menusData);
        console.log('📋 Menus réels chargés depuis localStorage:', this.menusData);
        console.log('📊 Nombre de menus:', this.menusData.length);
        this.menusData.forEach((menu, index) => {
          console.log(`📂 Menu ${index + 1}:`, {
            id: menu.id,
            name: menu.name,
            route: menu.route,
            submenuCount: menu.submenu ? menu.submenu.length : 0
          });
        });
      } else {
        // Fallback : charger depuis le fichier exemple
        console.log('📁 Tentative de chargement depuis layout.json...');
        const response = await fetch('/assets/data/layout.json');
        if (response.ok) {
          this.menusData = await response.json();
          console.log('📋 Menus depuis layout.json:', this.menusData);
        } else {
          console.warn('⚠️ Utilisation des menus par défaut');
          this.menusData = this.getDefaultMenus();
        }
      }
      
      this.buildMainModules();
      this.updateActiveModuleFromRoute();
    } catch (error) {
      console.error('❌ Erreur chargement menus:', error);
      this.menusData = this.getDefaultMenus();
      this.buildMainModules();
    }
  }

  /**
   * Construit les modules principaux depuis les vraies données
   */
  private buildMainModules(): void {
    const mainModules: any[] = [];

    // Ajouter le module Dashboard en premier
    mainModules.push({
      id: 'dashboard',
      name: 'Dashboard',
      icon: 'dashboard',
      route: '/admin/dashboard/reporting',
      color: '#6366F1',
      submenu: [
        {
          label: 'Reporting',
          module: 'reporting',
          domaine: 'dashboard',
          route: '/admin/dashboard/reporting'
        },
        {
          label: 'Général',
          module: 'general',
          domaine: 'dashboard',
          route: '/admin/dashboard/general'
        },
        {
          label: 'Finance',
          module: 'finance',
          domaine: 'dashboard',
          route: '/admin/dashboard/finance'
        },
        {
          label: 'Projets',
          module: 'projects',
          domaine: 'dashboard',
          route: '/admin/dashboard/projects'
        }
      ]
    });

    // Ajouter les vrais modules depuis les données
    if (this.menusData && Array.isArray(this.menusData)) {
      this.menusData.forEach(menu => {
        mainModules.push({
          id: menu.name.toLowerCase(),
          name: menu.name,
          icon: this.getModuleIcon(menu.name),
          route: menu.route,
          color: this.getModuleColor(menu.name),
          submenu: menu.submenu || []
        });
      });
    }

    console.log('🏗️ Modules construits:', mainModules);
    this.mainModules$.next(mainModules);
    
    // Auto-sélectionner le premier module
    if (mainModules.length > 0) {
      this.setActiveModule(mainModules[0].id);
    }
  }

  /**
   * Met à jour les sous-modules selon le module actif
   */
  private updateSubModules(moduleId: string): void {
    console.log('🔄 Recherche sous-modules pour moduleId:', moduleId);
    
    // Gestion spéciale pour le dashboard
    if (moduleId === 'dashboard') {
      const dashboardSubModules = [
        {
          id: 'reporting',
          name: 'Reporting',
          icon: 'assessment',
          route: '/admin/dashboard/reporting',
          count: 6,
          module: 'reporting',
          domaine: 'dashboard'
        },
        {
          id: 'general',
          name: 'Général',
          icon: 'dashboard',
          route: '/admin/dashboard/general',
          count: 4,
          module: 'general',
          domaine: 'dashboard'
        },
        {
          id: 'finance',
          name: 'Finance',
          icon: 'account_balance',
          route: '/admin/dashboard/finance',
          count: 8,
          module: 'finance',
          domaine: 'dashboard'
        },
        {
          id: 'projects',
          name: 'Projets',
          icon: 'assignment',
          route: '/admin/dashboard/projects',
          count: 12,
          module: 'projects',
          domaine: 'dashboard'
        }
      ];
      
      console.log('📊 Sous-modules dashboard générés:', dashboardSubModules);
      this.subModules$.next(dashboardSubModules);
      return;
    }
    
    console.log('🔍 Menus disponibles:', this.menusData.map(m => ({ id: m.id, name: m.name, nameLower: m.name.toLowerCase() })));
    
    // Trouver le module correspondant
    const menuData = this.menusData.find(menu => 
      menu.name.toLowerCase() === moduleId.toLowerCase()
    );

    console.log('📂 Menu trouvé:', menuData ? {
      id: menuData.id,
      name: menuData.name,
      submenuCount: menuData.submenu ? menuData.submenu.length : 0,
      submenu: menuData.submenu
    } : 'AUCUN');

    if (menuData && menuData.submenu && Array.isArray(menuData.submenu)) {
      const subModules = menuData.submenu.map((sub: any) => ({
        id: sub.module.toLowerCase(),
        name: sub.label,
        icon: this.getSubModuleIcon(sub.module),
        route: sub.route,
        count: this.getModuleCount(sub.module),
        module: sub.module,
        domaine: sub.domaine
      }));
      
      console.log('📋 Sous-modules générés:', subModules);
      this.subModules$.next(subModules);
    } else {
      console.log('❌ Aucun sous-module trouvé - tableau vide');
      this.subModules$.next([]);
    }
  }

  /**
   * Détecte le module actif depuis l'URL
   */
  private updateActiveModuleFromRoute(): void {
    const url = this.router.url;
    console.log('🧭 URL actuelle:', url);
    
    // Gestion spéciale pour dashboard
    if (url.includes('/dashboard/')) {
      this.setActiveModule('dashboard');
      
      // Détecter le sous-module dashboard
      if (url.includes('/general/')) {
        this.setActiveSubModule('general');
      } else if (url.includes('/finance/')) {
        this.setActiveSubModule('finance');
      } else if (url.includes('/projects/')) {
        this.setActiveSubModule('projects');
      } else if (url.includes('/reporting/')) {
        this.setActiveSubModule('reporting');
      }
      return;
    }
    
    // Extraire le domaine depuis l'URL
    const segments = url.split('/').filter(segment => segment);
    if (segments.length >= 2) {
      const domain = segments[1];
      
      // Trouver le module correspondant dans les vraies données
      const matchingMenu = this.menusData.find(menu => 
        menu.labs && menu.labs.toLowerCase().includes(domain.toLowerCase())
      );
      
      if (matchingMenu) {
        this.setActiveModule(matchingMenu.name.toLowerCase());
        
        if (segments.length >= 3) {
          const module = segments[2];
          this.setActiveSubModule(module.toLowerCase());
        }
      }
    }
  }

  private setupRouteListener(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.updateActiveModuleFromRoute();
    });
  }

  setActiveModule(moduleId: string): void {
    console.log('🎯 Module actif:', moduleId);
    this.activeModule$.next(moduleId);
    this.moduleChange.emit(moduleId);
    this.updateSubModules(moduleId);
  }

  setActiveSubModule(subModuleId: string): void {
    console.log('📋 Sous-module actif:', subModuleId);
    this.activeSubModule$.next(subModuleId);
    this.subModuleChange.emit(subModuleId);
  }

  navigateToModule(module: any): void {
    console.log('🧭 Navigation vers module:', {
      id: module.id,
      name: module.name,
      route: module.route,
      submenuCount: module.submenu ? module.submenu.length : 0
    });
    
    this.setActiveModule(module.id);
    
    // Naviguer vers le premier sous-module du domaine
    if (module.submenu && module.submenu.length > 0) {
      const firstSubModule = module.submenu[0];
      console.log('📋 Premier sous-module:', {
        label: firstSubModule.label,
        module: firstSubModule.module,
        route: firstSubModule.route,
        domaine: firstSubModule.domaine
      });
      
      // Correction temporaire : si le module principal pointe vers /admin/dashboard 
      // mais les sous-modules vers /admin/rapport, utiliser la route du sous-module
      let routeToUse = firstSubModule.route;
      if (module.route === '/admin/dashboard' && firstSubModule.route.startsWith('/admin/rapport')) {
        routeToUse = firstSubModule.route;
      }
      console.log('🚀 Navigation vers route:', routeToUse);
      this.router.navigate([routeToUse]);
      
      // Sauvegarder l'état
      const navigationState = {
        domaine: firstSubModule.domaine,
        modulename: firstSubModule.module,
        label: firstSubModule.label
      };
      localStorage.setItem('__domaineDD', JSON.stringify(navigationState));
      console.log('💾 État sauvegardé:', navigationState);
    } else {
      console.log('⚠️ Aucun sous-module trouvé pour ce module');
    }
  }

  navigateToSubModule(subModule: any): void {
    console.log('📋 Navigation sous-module:', subModule.name);
    this.setActiveSubModule(subModule.id);
    this.router.navigate([subModule.route]);
    
    // Sauvegarder l'état de navigation
    const navigationState = {
      domaine: subModule.domaine,
      modulename: subModule.module,
      label: subModule.name
    };
    localStorage.setItem('__domaineDD', JSON.stringify(navigationState));
  }

  /**
   * Icônes selon les vrais noms de modules
   */
  private getModuleIcon(moduleName: string): string {
    const icons: { [key: string]: string } = {
      'Vente': 'airplane_ticket',
      'Client': 'people', 
      'Finance': 'account_balance',
      'Support': 'support_agent',
      'Document': 'folder',
      'parametre': 'settings',
      'Rapport': 'dashboard',
      'Dashboard': 'dashboard'
    };
    return icons[moduleName] || 'folder';
  }

  /**
   * Couleurs selon les vrais noms de modules
   */
  private getModuleColor(moduleName: string): string {
    const colors: { [key: string]: string } = {
      'Vente': '#4AA8DC',
      'Client': '#8DA969',
      'Finance': '#F59E0B',
      'Support': '#EF4444',
      'Document': '#8B5CF6',
      'parametre': '#6B7280',
      'Rapport': '#6366F1',
      'Dashboard': '#6366F1'
    };
    return colors[moduleName] || '#6B7280';
  }

  /**
   * Icônes des sous-modules
   */
  private getSubModuleIcon(moduleName: string): string {
    const icons: { [key: string]: string } = {
      'pnr': 'flight_takeoff',
      'presale': 'schedule',
      'etatsdeventes': 'receipt',
      'helpdesk': 'help',
      'bmps': 'receipt_long',
      'factures': 'description',
      'remboursement': 'undo',
      'beneficiaires': 'person',
      'accounts': 'account_circle',
      'contacts': 'contacts',
      'banques': 'account_balance',
      'bspdetails': 'receipt_long',
      'bsps': 'receipt',
      'comptesbancaires': 'account_balance_wallet',
      'creditlimit': 'credit_card',
      'soldes': 'account_balance_wallet',
      'soldesbmp': 'savings',
      'approvisionnements': 'savings',
      'services': 'build',
      'company': 'business',
      'documentfolders': 'folder',
      'documents': 'description'
    };
    return icons[moduleName.toLowerCase()] || 'list';
  }

  /**
   * Compteurs des modules (à récupérer depuis l'API)
   */
  private getModuleCount(moduleName: string): number {
    // Pour l'instant, retourner des valeurs par défaut
    // TODO: Récupérer les vrais compteurs depuis l'API
    return 0;
  }

  /**
   * Menus par défaut en cas d'erreur
   */
  private getDefaultMenus(): any[] {
    return [
      {
        name: "Vente",
        icon: "icon-risks",
        route: "/admin/vente/pnr/list",
        submenu: [
          {
            label: "PNR",
            module: "pnr",
            route: "/admin/vente/pnr/list"
          }
        ]
      }
    ];
  }

  /**
   * Retourne la couleur du module actif
   */
  getActiveModuleColor(): string {
    const activeModule = this.activeModule$.getValue();
    const module = this.mainModules$.getValue().find(m => 
      m.name.toLowerCase() === activeModule.toLowerCase()
    );
    return module?.color || '#6B7280';
  }

  /**
   * Retourne l'icône du module actif
   */
  getActiveModuleIcon(): string {
    const activeModule = this.activeModule$.getValue();
    const module = this.mainModules$.getValue().find(m => 
      m.name.toLowerCase() === activeModule.toLowerCase()
    );
    return module?.icon || 'folder';
  }

  /**
   * Retourne le nom du module actif
   */
  getActiveModuleName(): string {
    const activeModule = this.activeModule$.getValue();
    const module = this.mainModules$.getValue().find(m => 
      m.name.toLowerCase() === activeModule.toLowerCase()
    );
    return module?.name || 'Module';
  }

  /**
   * Retourne la description du module actif
   */
  getActiveModuleDescription(): string {
    const activeModule = this.activeModule$.getValue();
    // Pour l'instant, retourner une description par défaut
    return `Gestion des données ${this.getActiveModuleName().toLowerCase()}`;
  }

  /**
   * Retourne le nombre total d'éléments visibles
   */
  getTotalVisibleItems(): number {
    const subModules = this.subModules$.getValue();
    return subModules.reduce((total, sub) => total + (sub.count || 0), 0);
  }

  /**
   * Retourne l'heure de dernière mise à jour
   */
  getLastUpdateTime(): string {
    return 'il y a 5 min';
  }

  /**
   * Toggle la sidebar (émission d'événement vers le parent)
   */
  toggleSidebar(): void {
    // Cette méthode peut émettre un événement ou gérer l'état de collapse
    console.log('Toggle sidebar clicked');
  }

  // Helpers pour le template
  trackByModuleId(index: number, module: any): string {
    return module.id;
  }

  trackBySubModuleId(index: number, subModule: any): string {
    return subModule.id;
  }
}