import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatBadgeModule } from '@angular/material/badge';
import { Subscription } from 'rxjs';
import { MobileMenuService, MobileMenuNotification } from '../../services/mobile/mobile-menu.service';

@Component({
  selector: 'app-mobile-footer-menu',
  standalone: true,
  imports: [
    CommonModule,
    MatIconModule,
    MatButtonModule,
    MatBadgeModule
  ],
  template: `
    <div class="mobile-footer-menu" [class.visible]="isVisible">
      <div class="menu-container">
        
        <!-- Menu Sidebar -->
        <button 
          class="menu-item sidebar-btn"
          [class.active]="isSidebarVisible"
          (click)="openSidebar()"
          matRipple>
          <div class="menu-icon">
            <i class="fas fa-bars"></i>
          </div>
          <span class="menu-label">Menu</span>
          <div class="notification-badge" *ngIf="getNotificationCount('sidebar') > 0">
            {{ getNotificationCount('sidebar') }}
          </div>
        </button>

        <!-- Dashboard -->
        <button 
          class="menu-item dashboard-btn"
          (click)="navigateToDashboard()"
          matRipple>
          <div class="menu-icon">
            <i class="fas fa-tachometer-alt"></i>
          </div>
          <span class="menu-label">Dashboard</span>
          <div class="notification-badge" *ngIf="getNotificationCount('dashboard') > 0">
            {{ getNotificationCount('dashboard') }}
          </div>
        </button>

        <!-- Motoristas -->
        <button 
          class="menu-item drivers-btn"
          (click)="navigateToDrivers()"
          matRipple>
          <div class="menu-icon">
            <i class="fas fa-user-tie"></i>
          </div>
          <span class="menu-label">Motoristas</span>
          <div class="notification-badge" *ngIf="getNotificationCount('drivers') > 0">
            {{ getNotificationCount('drivers') }}
          </div>
        </button>

        <!-- Veículos -->
        <button 
          class="menu-item vehicles-btn"
          (click)="navigateToVehicles()"
          matRipple>
          <div class="menu-icon">
            <i class="fas fa-car"></i>
          </div>
          <span class="menu-label">Veículos</span>
          <div class="notification-badge" *ngIf="getNotificationCount('vehicles') > 0">
            {{ getNotificationCount('vehicles') }}
          </div>
        </button>

      </div>
      
      <!-- Background decorativo inspirado na imagem -->
      <div class="menu-background"></div>
    </div>
  `,
  styleUrls: ['./mobile-footer-menu.component.scss']
})
export class MobileFooterMenuComponent implements OnInit, OnDestroy {
  @Output() sidebarToggle = new EventEmitter<void>();
  
  isVisible = false;
  isSidebarVisible = false;
  notifications: MobileMenuNotification[] = [];
  private subscriptions = new Subscription();

  constructor(
    private router: Router,
    private mobileMenuService: MobileMenuService
  ) {
    console.log('🔄 Mobile Footer Menu - Template atualizado: Rotas Meli removido, Motoristas adicionado');
  }

  ngOnInit() {
    // Subscribir às notificações
    this.subscriptions.add(
      this.mobileMenuService.notifications$.subscribe(notifications => {
        this.notifications = notifications;
      })
    );

    // Subscribir à visibilidade
    this.subscriptions.add(
      this.mobileMenuService.visibility$.subscribe(isVisible => {
        this.isVisible = isVisible;
      })
    );

    // Subscribir ao estado da sidebar mobile
    this.subscriptions.add(
      this.mobileMenuService.sidebarVisible$.subscribe(isVisible => {
        this.isSidebarVisible = isVisible;
      })
    );

    // ✅ PRODUÇÃO: Demo de notificações desabilitado
    // Será habilitado quando conectar com APIs reais ou WebSocket
    // this.mobileMenuService.startDemoNotifications();
    
    console.log('📱 Mobile Footer Menu inicializado - notificações zeradas para produção');
  }

  ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }

  getNotificationCount(type: MobileMenuNotification['type']): number {
    const notification = this.notifications.find(n => n.type === type);
    return notification?.count || 0;
  }

  openSidebar() {
    console.log('🔧 Abrindo sidebar mobile...');
    this.sidebarToggle.emit();
    // Limpar notificação do sidebar se houver
    this.mobileMenuService.clearNotification('sidebar');
  }

  navigateToDashboard() {
    console.log('📊 Navegando para Dashboard...');
    this.router.navigate(['/app/dashboard']);
    // Limpar notificação do dashboard
    this.mobileMenuService.clearNotification('dashboard');
  }

  navigateToMeliRoutes() {
    console.log('🛣️ Navegando para Rotas Meli...');
    this.router.navigate(['/app/routes/mercado-live']);
    // Limpar notificação das rotas Meli
    this.mobileMenuService.clearNotification('meli');
  }

  navigateToOldVehicles() {
    console.log('🚗 Navegando para Veículos Antigos...');
    this.router.navigate(['/app/old-vehicles']);
    // Limpar notificação dos veículos antigos
    this.mobileMenuService.clearNotification('old-vehicles');
  }
  navigateToDrivers() {
    console.log('🚗 Navegando para motoristas...');
    this.router.navigate(['/app/drivers']);
    // Limpar notificação dos drivers
    this.mobileMenuService.clearNotification('drivers');
  }

  navigateToVehicles() {
    console.log('🚙 Navegando para Veículos...');
    this.router.navigate(['/app/vehicles']);
    // Limpar notificação dos veículos
    this.mobileMenuService.clearNotification('vehicles');
  }
} 