import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { Observable, of, Subscription } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { environment } from '../../../../environments/environment';

/**
 * 🎯 RouteLocationTrackerComponent - Rastreamento de Localização de Rotas
 * 
 * Componente para exibir informações de localização e rastreamento de rotas,
 * incluindo origem, destino, paradas e posição atual do veículo.
 * 
 * ✨ Funcionalidades:
 * - Exibição de informações da rota
 * - Mapa integrado do Google Maps
 * - Histórico de posições
 * - Status de entrega em tempo real
 * - Integração com dados de GPS
 */

interface RouteData {
  routeId: string;
  routeNumber: string;
  type: 'firstMile' | 'lineHaul' | 'lastMile' | 'custom';
  status: 'pending' | 'inProgress' | 'completed' | 'delayed' | 'cancelled';
  origin: {
    address: string;
    city: string;
    state: string;
    zipCode: string;
    latitude?: number;
    longitude?: number;
  };
  destination: {
    address: string;
    city: string;
    state: string;
    zipCode: string;
    latitude?: number;
    longitude?: number;
  };
  currentLocation?: {
    latitude: number;
    longitude: number;
    address?: string;
    timestamp?: Date;
  };
  vehiclePlate?: string;
  driverName?: string;
  scheduledDeparture?: Date;
  scheduledArrival?: Date;
}

interface LocationHistoryItem {
  id: string;
  timestamp: Date;
  latitude: number;
  longitude: number;
  address: string;
  status: 'em-movimento' | 'parado' | 'entregando' | 'carregando';
  speed?: number;
  description?: string;
}

@Component({
  selector: 'app-route-location-tracker',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './route-location-tracker.component.html',
  styleUrl: './route-location-tracker.component.scss'
})
export class RouteLocationTrackerComponent implements OnInit, OnDestroy {
  @Input() routeData: RouteData | null = null;

  // Estados do componente
  isLoading = false;
  hasError = false;
  errorMessage = '';
  
  // Dados de localização
  currentAddress = '';
  isAddressLoading = false;
  
  // Histórico de localizações
  locationHistory: LocationHistoryItem[] = [];
  isHistoryLoading = false;
  
  // Google Maps
  private readonly googleMapsApiKey = environment.googleMapsApiKey;
  
  private subscriptions = new Subscription();

  constructor(
    private sanitizer: DomSanitizer,
    private http: HttpClient
  ) {}

  ngOnInit(): void {
    this.initializeComponent();
  }

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

  private initializeComponent(): void {
    if (!this.routeData) {
      this.loadMockRouteData();
    }
    
    this.loadCurrentLocation();
    this.loadLocationHistory();
  }

  /**
   * 🎯 Carrega dados mock para desenvolvimento
   */
  private loadMockRouteData(): void {
    this.routeData = {
      routeId: 'route_mock_001',
      routeNumber: 'RT-2024-001',
      type: 'lastMile',
      status: 'inProgress',
      origin: {
        address: 'Av. Paulista, 1000 - Bela Vista',
        city: 'São Paulo',
        state: 'SP',
        zipCode: '01310-100',
        latitude: -23.5631,
        longitude: -46.6554
      },
      destination: {
        address: 'Rua das Flores, 123 - Vila Madalena',
        city: 'São Paulo',
        state: 'SP',
        zipCode: '05435-010',
        latitude: -23.5505,
        longitude: -46.6890
      },
      currentLocation: {
        latitude: -23.5589,
        longitude: -46.6731,
        timestamp: new Date()
      },
      vehiclePlate: 'ABC-1234',
      driverName: 'João Silva',
      scheduledDeparture: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 horas atrás
      scheduledArrival: new Date(Date.now() + 1 * 60 * 60 * 1000) // 1 hora no futuro
    };
  }

  /**
   * 🎯 Carrega a localização atual e resolve o endereço
   */
  private loadCurrentLocation(): void {
    if (!this.routeData?.currentLocation) {
      return;
    }

    this.isAddressLoading = true;
    
    this.geocodeLocation(
      this.routeData.currentLocation.latitude,
      this.routeData.currentLocation.longitude
    ).subscribe({
      next: (address) => {
        this.currentAddress = address;
        this.isAddressLoading = false;
      },
      error: (error) => {
        console.error('Erro ao geocodificar localização:', error);
        this.currentAddress = 'Endereço não disponível';
        this.isAddressLoading = false;
      }
    });
  }

  /**
   * 🎯 Geocodificação usando Google Geocoding API
   */
  private geocodeLocation(latitude: number, longitude: number): Observable<string> {
    const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${this.googleMapsApiKey}`;
    
    return this.http.get<any>(url).pipe(
      map(response => {
        if (response.status === 'OK' && response.results.length > 0) {
          return response.results[0].formatted_address;
        }
        return 'Endereço não encontrado';
      }),
      catchError(error => {
        console.error('Erro na geocodificação:', error);
        return of('Erro ao obter endereço');
      })
    );
  }

  /**
   * 🎯 Carrega histórico de localizações (mock data)
   */
  private loadLocationHistory(): void {
    this.isHistoryLoading = true;
    
    // Simular carregamento de dados
    setTimeout(() => {
      this.locationHistory = this.generateMockLocationHistory();
      this.isHistoryLoading = false;
    }, 1000);
  }

  /**
   * 🎯 Gera dados mock do histórico de localização
   */
  private generateMockLocationHistory(): LocationHistoryItem[] {
    const baseDate = new Date();
    const history: LocationHistoryItem[] = [];
    
    const locations = [
      { lat: -23.5631, lng: -46.6554, address: 'Av. Paulista, 1000 - Bela Vista, São Paulo - SP', status: 'carregando' as const },
      { lat: -23.5589, lng: -46.6731, address: 'Rua Augusta, 500 - Consolação, São Paulo - SP', status: 'em-movimento' as const },
      { lat: -23.5505, lng: -46.6890, address: 'Rua das Flores, 123 - Vila Madalena, São Paulo - SP', status: 'entregando' as const }
    ];
    
    locations.forEach((loc, index) => {
      history.push({
        id: `loc_${index + 1}`,
        timestamp: new Date(baseDate.getTime() - (locations.length - index) * 30 * 60 * 1000),
        latitude: loc.lat,
        longitude: loc.lng,
        address: loc.address,
        status: loc.status,
        speed: Math.floor(Math.random() * 60) + 20,
        description: this.getStatusDescription(loc.status)
      });
    });
    
    return history.reverse(); // Mais recente primeiro
  }

  /**
   * 🎯 Obtém descrição do status
   */
  private getStatusDescription(status: LocationHistoryItem['status']): string {
    const descriptions = {
      'em-movimento': 'Veículo em trânsito',
      'parado': 'Veículo parado',
      'entregando': 'Realizando entrega',
      'carregando': 'Carregando mercadorias'
    };
    return descriptions[status];
  }

  /**
   * 🎯 Gera URL segura para embed do Google Maps
   */
  getMapEmbedUrl(): SafeResourceUrl {
    if (!this.routeData?.currentLocation) {
      return this.sanitizer.bypassSecurityTrustResourceUrl('');
    }

    const { latitude, longitude } = this.routeData.currentLocation;
    const zoom = 15;
    const url = `https://www.google.com/maps/embed/v1/place?key=${this.googleMapsApiKey}&q=${latitude},${longitude}&zoom=${zoom}&maptype=roadmap`;
    
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  /**
   * 🎯 Obtém classe CSS para o status da rota
   */
  getRouteStatusClass(): string {
    if (!this.routeData?.status) return 'status-unknown';
    
    const statusClasses = {
      'pending': 'status-pending',
      'inProgress': 'status-progress',
      'completed': 'status-completed',
      'delayed': 'status-delayed',
      'cancelled': 'status-cancelled'
    };
    
    return statusClasses[this.routeData.status] || 'status-unknown';
  }

  /**
   * 🎯 Obtém label do status da rota
   */
  getRouteStatusLabel(): string {
    if (!this.routeData?.status) return 'Desconhecido';
    
    const statusLabels = {
      'pending': 'Pendente',
      'inProgress': 'Em Andamento',
      'completed': 'Concluída',
      'delayed': 'Atrasada',
      'cancelled': 'Cancelada'
    };
    
    return statusLabels[this.routeData.status] || 'Desconhecido';
  }

  /**
   * 🎯 Obtém label do tipo da rota
   */
  getRouteTypeLabel(): string {
    if (!this.routeData?.type) return 'Personalizada';
    
    const typeLabels = {
      'firstMile': 'First Mile',
      'lineHaul': 'Line Haul',
      'lastMile': 'Last Mile',
      'custom': 'Personalizada'
    };
    
    return typeLabels[this.routeData.type] || 'Personalizada';
  }

  /**
   * 🎯 Obtém classe CSS para o status do histórico
   */
  getHistoryStatusClass(status: LocationHistoryItem['status']): string {
    const statusClasses = {
      'em-movimento': 'history-status-moving',
      'parado': 'history-status-stopped',
      'entregando': 'history-status-delivering',
      'carregando': 'history-status-loading'
    };
    
    return statusClasses[status] || 'history-status-unknown';
  }

  /**
   * 🎯 Formata data para exibição
   */
  formatDate(date: Date): string {
    return new Intl.DateTimeFormat('pt-BR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    }).format(date);
  }

  /**
   * 🎯 Formata data com null safety
   */
  formatDateSafe(date: Date | undefined): string {
    if (!date) return '';
    return this.formatDate(date);
  }

  /**
   * 🎯 Recarrega dados da localização
   */
  refreshLocation(): void {
    this.loadCurrentLocation();
    this.loadLocationHistory();
  }

  /**
   * 🎯 Carrega mais registros do histórico (método público)
   */
  loadMoreHistory(): void {
    this.loadLocationHistory();
  }
} 