import { Component, OnInit, OnDestroy } from '@angular/core';
import { DashboardFilterService } from '../../services/dashboard-filter.service';
import { Subscription } from 'rxjs';

interface DealerLocation {
  id: number;
  name: string;
  lat: number;
  lng: number;
  status: 'active' | 'inactive' | 'training' | 'onboarding';
  city: string;
  state: string;
}

@Component({
  selector: 'app-shield-map-chart',
  templateUrl: './map-chart.component.html',
  styleUrls: ['./map-chart.component.scss']
})
export class MapChartComponent implements OnInit, OnDestroy {
  private filterSubscription: Subscription = new Subscription();
  
  // Mock dealer location data
  originalDealerLocations: DealerLocation[] = [
    { id: 1, name: 'ABC Motors', lat: 28.6139, lng: 77.2090, status: 'active', city: 'New Delhi', state: 'Delhi' },
    { id: 2, name: 'XYZ Auto', lat: 19.0760, lng: 72.8777, status: 'active', city: 'Mumbai', state: 'Maharashtra' },
    { id: 3, name: 'PQR Dealers', lat: 13.0827, lng: 80.2707, status: 'training', city: 'Chennai', state: 'Tamil Nadu' },
    { id: 4, name: 'LMN Enterprises', lat: 12.9716, lng: 77.5946, status: 'inactive', city: 'Bangalore', state: 'Karnataka' },
    { id: 5, name: 'DEF Solutions', lat: 22.5726, lng: 88.3639, status: 'active', city: 'Kolkata', state: 'West Bengal' },
    { id: 6, name: 'GHI Services', lat: 25.3176, lng: 82.9739, status: 'onboarding', city: 'Varanasi', state: 'Uttar Pradesh' },
    { id: 7, name: 'JKL Group', lat: 23.0225, lng: 72.5714, status: 'active', city: 'Ahmedabad', state: 'Gujarat' },
    { id: 8, name: 'MNO Corp', lat: 18.5204, lng: 73.8567, status: 'training', city: 'Pune', state: 'Maharashtra' }
  ];
  
  dealerLocations: DealerLocation[] = [...this.originalDealerLocations];

  // Status colors
  statusColors = {
    active: '#0a192f',
    inactive: '#64748b',
    training: '#ff6b35',
    onboarding: '#f59e0b'
  };

  // Status labels
  statusLabels = {
    active: 'Active',
    inactive: 'Inactive',
    training: 'Training',
    onboarding: 'Onboarding'
  };

  hoveredDealer: DealerLocation | null = null;

  constructor(private filterService: DashboardFilterService) { }

  ngOnInit(): void {
    // Subscribe to filter changes
    this.filterSubscription.add(
      this.filterService.filterState$.subscribe(filters => {
        this.updateMapData(filters);
      })
    );
  }
  
  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this.filterSubscription.unsubscribe();
  }

  // Update map data based on filters
  updateMapData(filters: any): void {
    // Simulate data change based on filters
    // In a real implementation, this would fetch new data from an API
    
    if (filters.salesRep || filters.partner || filters.tractionChannel || filters.subProductLine) {
      // Apply filter effects (simplified logic)
      const filteredData = this.originalDealerLocations.filter(location => {
        // Simple filtering logic - in a real app, this would be more sophisticated
        return Math.random() > 0.25; // Randomly filter out some locations
      });
      
      this.dealerLocations = filteredData;
    } else {
      // No filters applied, show all data
      this.dealerLocations = [...this.originalDealerLocations];
    }
  }

  // Get status color based on dealer status
  getStatusColor(status: string): string {
    return (this.statusColors as any)[status] || '#64748b';
  }

  // Get status label based on dealer status
  getStatusLabel(status: string): string {
    return (this.statusLabels as any)[status] || status;
  }

  // Handle dealer hover
  onDealerHover(dealer: DealerLocation): void {
    this.hoveredDealer = dealer;
  }

  // Handle dealer leave
  onDealerLeave(): void {
    this.hoveredDealer = null;
  }
}