adserver-dashboard 1.0.0

package/client/src/components/line-items/geofencing-map.tsx

@@ -0,0 +1,1270 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useTranslation } from '@/lib/i18n';
+import mapboxgl from 'mapbox-gl';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+import { cn } from '@moving-walls/design-system';
+import { POIDropdown } from './geofencing/POIDropdown';
+import { fetchNearbyPlaces, type PlaceResult } from '@/lib/google-poi-api';
+import { getPOILabel } from '@/lib/poi-types';
+
+let DragCircleMode: any = null;
+let DirectMode: any = null;
+let SimpleSelectMode: any = null;
+let RectangleMode: any = null;
+
+const loadDrawModes = async () => {
+  if (!DragCircleMode) {
+    const circleModule = await import('mapbox-gl-draw-circle');
+    DragCircleMode = circleModule.DragCircleMode;
+    DirectMode = circleModule.DirectMode;
+    SimpleSelectMode = circleModule.SimpleSelectMode;
+  }
+  if (!RectangleMode) {
+    const rectModule = await import('mapbox-gl-draw-rectangle-mode');
+    RectangleMode = rectModule.default;
+  }
+  return { DragCircleMode, DirectMode, SimpleSelectMode, RectangleMode };
+};
+import {
+  MapPin,
+  Layers,
+  Circle,
+  Square,
+  Trash2,
+  Mountain,
+  Sun,
+  Moon,
+  RotateCcw,
+  Maximize2,
+  Pentagon,
+  Search,
+  X,
+  AlertTriangle,
+  Route,
+  Map,
+  Satellite,
+  TreePine,
+} from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '@moving-walls/design-system';
+import { Button } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+
+const COUNTRY_DATA = [
+  { name: "Malaysia", code: "my", center: [101.6869, 3.1390] as [number, number], zoom: 11 },
+  { name: "Singapore", code: "sg", center: [103.8198, 1.3521] as [number, number], zoom: 12 },
+  { name: "Indonesia", code: "id", center: [106.8456, -6.2088] as [number, number], zoom: 11 },
+  { name: "Thailand", code: "th", center: [100.5018, 13.7563] as [number, number], zoom: 11 },
+  { name: "Philippines", code: "ph", center: [121.0244, 14.5995] as [number, number], zoom: 11 },
+  { name: "Vietnam", code: "vn", center: [106.6297, 10.8231] as [number, number], zoom: 11 },
+  { name: "India", code: "in", center: [77.2090, 28.6139] as [number, number], zoom: 11 },
+  { name: "Japan", code: "jp", center: [139.6917, 35.6895] as [number, number], zoom: 11 },
+  { name: "South Korea", code: "kr", center: [126.9780, 37.5665] as [number, number], zoom: 11 },
+  { name: "Australia", code: "au", center: [151.2093, -33.8688] as [number, number], zoom: 10 },
+  { name: "Hong Kong", code: "hk", center: [114.1694, 22.3193] as [number, number], zoom: 12 },
+  { name: "Taiwan", code: "tw", center: [121.5654, 25.0330] as [number, number], zoom: 11 },
+  { name: "United Arab Emirates", code: "ae", center: [55.2708, 25.2048] as [number, number], zoom: 11 },
+  { name: "Saudi Arabia", code: "sa", center: [46.6753, 24.7136] as [number, number], zoom: 10 },
+  { name: "United Kingdom", code: "gb", center: [-0.1276, 51.5074] as [number, number], zoom: 10 },
+];
+
+const DEFAULT_COUNTRY = COUNTRY_DATA[0];
+
+const getCountryData = (country?: string) => {
+  if (!country) return DEFAULT_COUNTRY;
+  const lowerCountry = country.toLowerCase();
+  const found = COUNTRY_DATA.find(c => 
+    c.name.toLowerCase() === lowerCountry || 
+    c.code.toLowerCase() === lowerCountry
+  );
+  return found || DEFAULT_COUNTRY;
+};
+
+interface POIMarker {
+  id: string;
+  name: string;
+  coordinates: [number, number];
+  category: string;
+  locationId: string;
+}
+
+interface SelectedLocationForPOI {
+  id: string;
+  geometry?: {
+    type: string;
+    coordinates: any;
+  };
+  properties?: {
+    name?: string;
+    center?: [number, number];
+  };
+  poi?: string[];
+}
+
+interface GeofencingMapProps {
+  onLocationsChange: (locations: any[]) => void;
+  initialLocations?: any[];
+  radiusKm?: number;
+  country?: string;
+  onSearch?: (query: string) => void;
+  poisToRender?: POIMarker[];
+  onDeleteLocation?: (locationId: string) => void;
+  locationToDelete?: string | null;
+  onPOIsRendered?: (pois: POIMarker[]) => void;
+  hasLocations?: boolean;
+  addPOI?: boolean;
+  selectedLocation?: SelectedLocationForPOI | null;
+  onUpdateLocationPOIMetadata?: (id: string, metadata: Record<string, string>, pois: string[]) => void;
+  onAddPOIChange?: (addPOI: boolean) => void;
+  onCenterOnLocation?: boolean;
+  onLocationSelectFromMap?: (location: any) => void;
+}
+
+const RADIUS_OPTIONS = [
+  { value: 0.5, label: '500m' },
+  { value: 1, label: '1km' },
+  { value: 2, label: '2km' },
+  { value: 5, label: '5km' },
+  { value: 10, label: '10km' },
+  { value: 15, label: '15km' },
+  { value: 20, label: '20km' },
+];
+
+type DrawMode = 'simple_select' | 'draw_point' | 'draw_polygon' | 'draw_circle' | 'draw_rectangle';
+
+export function GeofencingMap({ 
+  onLocationsChange, 
+  initialLocations = [], 
+  radiusKm = 5, 
+  country, 
+  poisToRender = [], 
+  locationToDelete = null,
+  onPOIsRendered,
+  hasLocations = false,
+  addPOI = false,
+  selectedLocation = null,
+  onUpdateLocationPOIMetadata,
+  onAddPOIChange,
+  onCenterOnLocation = false,
+  onLocationSelectFromMap,
+}: GeofencingMapProps) {
+  const { t } = useTranslation('lineItems');
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const map = useRef<mapboxgl.Map | null>(null);
+  const draw = useRef<MapboxDraw | null>(null);
+  const geocoder = useRef<MapboxGeocoder | null>(null);
+  const [isMapLoaded, setIsMapLoaded] = useState(false);
+  const [activeMode, setActiveMode] = useState<DrawMode>('simple_select');
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [mapStyle, setMapStyle] = useState<'streets' | 'satellite' | 'outdoors' | 'light' | 'dark'>('streets');
+  
+  const [selectedPOIs, setSelectedPOIs] = useState<string[]>([]);
+  const [isLoadingPOIs, setIsLoadingPOIs] = useState(false);
+  const [internalPOIs, setInternalPOIs] = useState<POIMarker[]>([]);
+  const [isPOIDropdownOpen, setIsPOIDropdownOpen] = useState(false);
+  const [selectedRadius, setSelectedRadius] = useState(1450);
+  const [showRadiusToolbar, setShowRadiusToolbar] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchSuggestions, setSearchSuggestions] = useState<any[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const searchContainerRef = useRef<HTMLDivElement>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const [locationPopover, setLocationPopover] = useState<{
+    coordinates: [number, number];
+    name: string;
+    address: string;
+    included: boolean;
+  } | null>(null);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [selectedFeatureToDelete, setSelectedFeatureToDelete] = useState<any>(null);
+  const popupRef = useRef<mapboxgl.Popup | null>(null);
+  const shapeCountersRef = useRef<{ circle: number; rectangle: number; polygon: number; point: number }>({
+    circle: 0,
+    rectangle: 0,
+    polygon: 0,
+    point: 0,
+  });
+  const processedFeaturesRef = useRef<Set<string>>(new Set());
+
+  const getMapCenter = useCallback((): { lat: number; lng: number } | null => {
+    if (!draw.current) return null;
+    
+    const features = draw.current.getAll();
+    if (features.features.length === 0) return null;
+
+    const firstFeature = features.features[0];
+    if (firstFeature.geometry.type === 'Point') {
+      const coords = firstFeature.geometry.coordinates as [number, number];
+      return { lng: coords[0], lat: coords[1] };
+    }
+    
+    if (firstFeature.geometry.type === 'Polygon') {
+      const coords = firstFeature.geometry.coordinates[0] as [number, number][];
+      const sumLng = coords.reduce((acc, c) => acc + c[0], 0);
+      const sumLat = coords.reduce((acc, c) => acc + c[1], 0);
+      return { lng: sumLng / coords.length, lat: sumLat / coords.length };
+    }
+
+    return null;
+  }, []);
+
+  const getSelectedLocationCenter = useCallback((): { lat: number; lng: number } | null => {
+    if (!selectedLocation) return null;
+    
+    if (selectedLocation.properties?.center) {
+      const center = selectedLocation.properties.center;
+      return { lng: center[0], lat: center[1] };
+    }
+    
+    if (selectedLocation.geometry?.type === 'Point' && selectedLocation.geometry.coordinates) {
+      const coords = selectedLocation.geometry.coordinates;
+      return { lng: coords[0], lat: coords[1] };
+    }
+    
+    if (selectedLocation.geometry?.type === 'Polygon' && selectedLocation.geometry.coordinates?.[0]) {
+      const coords = selectedLocation.geometry.coordinates[0];
+      if (Array.isArray(coords) && coords.length > 0) {
+        const sumLng = coords.reduce((acc: number, c: any) => acc + (c[0] || 0), 0);
+        const sumLat = coords.reduce((acc: number, c: any) => acc + (c[1] || 0), 0);
+        return { lng: sumLng / coords.length, lat: sumLat / coords.length };
+      }
+    }
+    
+    return getMapCenter();
+  }, [selectedLocation, getMapCenter]);
+
+  const handleRenderPOIs = useCallback(async (pois?: string[], metadata?: Record<string, string>) => {
+    const poiList = pois || selectedPOIs;
+    if (poiList.length === 0) return;
+
+    const center = addPOI && selectedLocation ? getSelectedLocationCenter() : getMapCenter();
+    if (!center) {
+      console.warn('No location selected to render POIs around');
+      return;
+    }
+
+    setIsLoadingPOIs(true);
+    const allPOIMarkers: POIMarker[] = [];
+    const locationId = selectedLocation?.id || 'map-location';
+
+    try {
+      for (const poiType of poiList) {
+        const places = await fetchNearbyPlaces({
+          location: center,
+          searchType: poiType,
+          radius: radiusKm * 1000,
+          maxResults: 10,
+        });
+
+        places.forEach((place, index) => {
+          allPOIMarkers.push({
+            id: `${poiType}-${place.id || index}`,
+            name: place.name || getPOILabel(poiType),
+            coordinates: place.coordinates,
+            category: poiType,
+            locationId: locationId,
+          });
+        });
+      }
+
+      setInternalPOIs(allPOIMarkers);
+      
+      if (onUpdateLocationPOIMetadata && selectedLocation) {
+        onUpdateLocationPOIMetadata(
+          selectedLocation.id,
+          metadata || { poiCount: String(poiList.length), timestamp: new Date().toISOString() },
+          poiList
+        );
+      }
+      
+      if (onPOIsRendered) {
+        onPOIsRendered(allPOIMarkers);
+      }
+    } catch (error) {
+      console.error('Error fetching POIs:', error);
+    } finally {
+      setIsLoadingPOIs(false);
+    }
+  }, [selectedPOIs, getMapCenter, getSelectedLocationCenter, radiusKm, onPOIsRendered, addPOI, selectedLocation, onUpdateLocationPOIMetadata]);
+
+  const effectivePOIs = poisToRender.length > 0 ? poisToRender : internalPOIs;
+  const isPOIDropdownEnabled = addPOI ? (selectedLocation !== null) : (hasLocations || initialLocations.length > 0);
+
+  const initializeMap = useCallback(async () => {
+    if (!mapContainer.current || map.current) return;
+
+    const mapboxToken = "pk.eyJ1IjoibWF4aW5mbyIsImEiOiJjbWV2M2l6ZDMwZ2ZqMmtzaHUyMXc3bGl2In0.ttPa9Es1LK2herlw4ZM0Hw";
+    
+    if (!mapboxToken) {
+      console.error('Mapbox token not found.');
+      return;
+    }
+
+    const modes = await loadDrawModes();
+
+    mapboxgl.accessToken = mapboxToken;
+
+    const countryData = getCountryData(country);
+
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: countryData.center,
+      zoom: countryData.zoom,
+    });
+
+    draw.current = new MapboxDraw({
+      displayControlsDefault: false,
+      controls: {},
+      defaultMode: 'simple_select',
+      modes: {
+        ...MapboxDraw.modes,
+        draw_circle: modes.DragCircleMode,
+        direct_select: modes.DirectMode,
+        simple_select: modes.SimpleSelectMode,
+        draw_rectangle: modes.RectangleMode,
+      },
+      styles: [
+        {
+          'id': 'gl-draw-polygon-fill',
+          'type': 'fill',
+          'filter': ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          'paint': {
+            'fill-color': '#2176cc',
+            'fill-outline-color': '#2176cc',
+            'fill-opacity': 0.2
+          }
+        },
+        {
+          'id': 'gl-draw-polygon-stroke',
+          'type': 'line',
+          'filter': ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          'layout': {
+            'line-cap': 'round',
+            'line-join': 'round'
+          },
+          'paint': {
+            'line-color': '#2176cc',
+            'line-width': 2
+          }
+        },
+        {
+          'id': 'gl-draw-line',
+          'type': 'line',
+          'filter': ['all', ['==', '$type', 'LineString'], ['!=', 'mode', 'static']],
+          'layout': {
+            'line-cap': 'round',
+            'line-join': 'round'
+          },
+          'paint': {
+            'line-color': '#2176cc',
+            'line-width': 2
+          }
+        },
+        {
+          'id': 'gl-draw-point',
+          'type': 'circle',
+          'filter': ['all', ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
+          'paint': {
+            'circle-radius': 6,
+            'circle-color': '#2176cc'
+          }
+        },
+        {
+          'id': 'gl-draw-point-stroke',
+          'type': 'circle',
+          'filter': ['all', ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
+          'paint': {
+            'circle-radius': 8,
+            'circle-color': '#fff'
+          }
+        }
+      ]
+    });
+
+    geocoder.current = new MapboxGeocoder({
+      accessToken: mapboxToken,
+      mapboxgl: mapboxgl as any,
+      marker: false,
+      placeholder: 'Search locations...',
+      countries: countryData.code,
+    });
+
+    map.current.addControl(draw.current);
+    map.current.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
+
+    geocoder.current.on('result', (e: any) => {
+      const { result } = e;
+      if (result && result.center && draw.current) {
+        const feature = {
+          type: 'Feature' as const,
+          properties: {
+            name: result.place_name || result.text || 'Search Result',
+            address: result.place_name || '',
+            included: true,
+            pois: [],
+          },
+          geometry: {
+            type: 'Point' as const,
+            coordinates: result.center,
+          },
+        };
+        draw.current.add(feature);
+        const data = draw.current.getAll();
+        onLocationsChange(data.features);
+      }
+    });
+
+    map.current.on('load', () => {
+      setIsMapLoaded(true);
+    });
+
+    const handleDrawCreate = (e: any) => {
+      if (draw.current && e.features && e.features.length > 0) {
+        const feature = e.features[0];
+        const featureId = feature.id;
+        
+        // Skip if this feature was already processed (prevents infinite loop)
+        if (processedFeaturesRef.current.has(featureId)) {
+          return;
+        }
+        
+        // Skip if feature already has a name (was added programmatically)
+        if (feature.properties?.name) {
+          const data = draw.current.getAll();
+          onLocationsChange(data.features);
+          return;
+        }
+        
+        let shapeName = 'Location';
+        let shapeType = 'point';
+        
+        // Determine shape type based on geometry and properties
+        if (feature.properties?.isCircle || (feature.geometry?.type === 'Polygon' && feature.properties?.center)) {
+          shapeType = 'circle';
+          shapeCountersRef.current.circle += 1;
+          shapeName = `Circle ${shapeCountersRef.current.circle}`;
+        } else if (feature.properties?.isRectangle) {
+          shapeType = 'rectangle';
+          shapeCountersRef.current.rectangle += 1;
+          shapeName = `Rectangle ${shapeCountersRef.current.rectangle}`;
+        } else if (feature.geometry?.type === 'Polygon') {
+          // Check if it's a rectangle by coordinates count
+          const coords = feature.geometry?.coordinates?.[0];
+          if (coords && coords.length === 5) {
+            shapeType = 'rectangle';
+            shapeCountersRef.current.rectangle += 1;
+            shapeName = `Rectangle ${shapeCountersRef.current.rectangle}`;
+          } else {
+            shapeType = 'polygon';
+            shapeCountersRef.current.polygon += 1;
+            shapeName = `Polygon ${shapeCountersRef.current.polygon}`;
+          }
+        } else if (feature.geometry?.type === 'Point') {
+          shapeType = 'point';
+          shapeCountersRef.current.point += 1;
+          shapeName = `Point ${shapeCountersRef.current.point}`;
+        }
+        
+        // Mark as processed before updating
+        processedFeaturesRef.current.add(featureId);
+        
+        // Use setFeatureProperty to update properties without triggering draw.create
+        draw.current.setFeatureProperty(featureId, 'name', shapeName);
+        draw.current.setFeatureProperty(featureId, 'locationType', shapeType);
+        draw.current.setFeatureProperty(featureId, 'included', true);
+        
+        const data = draw.current.getAll();
+        onLocationsChange(data.features);
+      }
+    };
+
+    const handleDrawUpdate = () => {
+      if (draw.current) {
+        const data = draw.current.getAll();
+        onLocationsChange(data.features);
+      }
+    };
+
+    const handleDrawDelete = () => {
+      if (draw.current) {
+        const data = draw.current.getAll();
+        onLocationsChange(data.features);
+      }
+    };
+
+    const handleDrawSelectionChange = () => {
+      if (draw.current && onLocationSelectFromMap) {
+        const selected = draw.current.getSelected();
+        if (selected.features && selected.features.length > 0) {
+          const selectedFeature = selected.features[0];
+          onLocationSelectFromMap(selectedFeature);
+        }
+      }
+    };
+
+    map.current.on('draw.create', handleDrawCreate);
+    map.current.on('draw.update', handleDrawUpdate);
+    map.current.on('draw.delete', handleDrawDelete);
+    map.current.on('draw.selectionchange', handleDrawSelectionChange);
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [onLocationsChange, country, onLocationSelectFromMap]);
+
+  useEffect(() => {
+    initializeMap();
+  }, [initializeMap]);
+
+  useEffect(() => {
+    if (!isMapLoaded || !draw.current) return;
+
+    const existingFeatures = draw.current.getAll();
+    if (existingFeatures.features.length > 0) {
+      const featureIds = existingFeatures.features.map((f: any) => f.id);
+      featureIds.forEach((id: string) => draw.current?.delete(id));
+    }
+
+    // Reset counters and initialize based on initial locations
+    shapeCountersRef.current = { circle: 0, rectangle: 0, polygon: 0, point: 0 };
+    processedFeaturesRef.current.clear();
+
+    if (initialLocations.length > 0) {
+      initialLocations.forEach((location) => {
+        if (location.geometry) {
+          // Count existing shapes to continue numbering
+          const locationType = location.properties?.locationType || '';
+          const name = location.properties?.name || '';
+          
+          if (locationType === 'circle' || name.toLowerCase().startsWith('circle')) {
+            const match = name.match(/Circle (\d+)/i);
+            if (match) {
+              const num = parseInt(match[1], 10);
+              if (num > shapeCountersRef.current.circle) {
+                shapeCountersRef.current.circle = num;
+              }
+            }
+          } else if (locationType === 'rectangle' || name.toLowerCase().startsWith('rectangle')) {
+            const match = name.match(/Rectangle (\d+)/i);
+            if (match) {
+              const num = parseInt(match[1], 10);
+              if (num > shapeCountersRef.current.rectangle) {
+                shapeCountersRef.current.rectangle = num;
+              }
+            }
+          } else if (locationType === 'polygon' || name.toLowerCase().startsWith('polygon')) {
+            const match = name.match(/Polygon (\d+)/i);
+            if (match) {
+              const num = parseInt(match[1], 10);
+              if (num > shapeCountersRef.current.polygon) {
+                shapeCountersRef.current.polygon = num;
+              }
+            }
+          } else if (locationType === 'point' || name.toLowerCase().startsWith('point')) {
+            const match = name.match(/Point (\d+)/i);
+            if (match) {
+              const num = parseInt(match[1], 10);
+              if (num > shapeCountersRef.current.point) {
+                shapeCountersRef.current.point = num;
+              }
+            }
+          }
+          
+          // Mark as processed so we don't rename it
+          if (location.id) {
+            processedFeaturesRef.current.add(location.id);
+          }
+          
+          draw.current?.add(location);
+        }
+      });
+    }
+  }, [isMapLoaded, initialLocations]);
+
+  useEffect(() => {
+    if (!isMapLoaded || !draw.current || !locationToDelete) return;
+    draw.current.delete(locationToDelete);
+    const data = draw.current.getAll();
+    onLocationsChange(data.features);
+  }, [locationToDelete, isMapLoaded, onLocationsChange]);
+
+  useEffect(() => {
+    if (!addPOI || !selectedLocation) {
+      if (isPOIDropdownOpen) {
+        setIsPOIDropdownOpen(false);
+        setSelectedPOIs([]);
+      }
+      return;
+    }
+    if (selectedLocation.poi && selectedLocation.poi.length > 0) {
+      setSelectedPOIs(selectedLocation.poi);
+    } else {
+      setSelectedPOIs([]);
+    }
+    setIsPOIDropdownOpen(true);
+  }, [addPOI, selectedLocation]);
+
+  useEffect(() => {
+    if (!isMapLoaded || !map.current || !selectedLocation || !onCenterOnLocation) return;
+    
+    const center = getSelectedLocationCenter();
+    if (center) {
+      map.current.flyTo({
+        center: [center.lng, center.lat],
+        zoom: 14,
+        duration: 1000,
+      });
+      
+      if (popupRef.current) {
+        popupRef.current.remove();
+      }
+      
+      const name = selectedLocation.properties?.name || 'Location';
+      const address = (selectedLocation as any).properties?.address || '';
+      const included = (selectedLocation as any).properties?.included !== false;
+      
+      setLocationPopover({
+        coordinates: [center.lng, center.lat],
+        name,
+        address,
+        included,
+      });
+    }
+  }, [isMapLoaded, selectedLocation, onCenterOnLocation, getSelectedLocationCenter]);
+
+  useEffect(() => {
+    if (!isMapLoaded || !map.current || !locationPopover) return;
+    
+    if (popupRef.current) {
+      popupRef.current.remove();
+    }
+    
+    const popupContent = document.createElement('div');
+    popupContent.className = 'location-popover-content';
+    popupContent.innerHTML = `
+      <div style="padding: 12px; min-width: 200px; max-width: 280px;">
+        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
+          <h3 style="font-weight: 600; font-size: 14px; color: #1f2937; margin: 0; flex: 1;">${locationPopover.name}</h3>
+          <button class="popover-close-btn" style="background: none; border: none; cursor: pointer; padding: 2px; margin-left: 8px;">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        ${locationPopover.address ? `<p style="font-size: 12px; color: #6b7280; margin: 0 0 8px 0; line-height: 1.4;">${locationPopover.address}</p>` : ''}
+        ${locationPopover.included ? `
+          <span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background-color: #dcfce7; color: #166534; font-size: 11px; font-weight: 500; border-radius: 4px;">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="20,6 9,17 4,12"></polyline>
+            </svg>
+            Included
+          </span>
+        ` : ''}
+      </div>
+    `;
+    
+    popupRef.current = new mapboxgl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      anchor: 'bottom',
+      offset: [0, -10],
+    })
+      .setLngLat(locationPopover.coordinates)
+      .setDOMContent(popupContent)
+      .addTo(map.current);
+    
+    const closeBtn = popupContent.querySelector('.popover-close-btn');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => {
+        if (popupRef.current) {
+          popupRef.current.remove();
+          popupRef.current = null;
+        }
+        setLocationPopover(null);
+      });
+    }
+    
+    return () => {
+      if (popupRef.current) {
+        popupRef.current.remove();
+        popupRef.current = null;
+      }
+    };
+  }, [isMapLoaded, locationPopover]);
+
+  const handleSearchSubmit = useCallback(async () => {
+    if (!map.current || !searchQuery.trim()) return;
+    
+    const mapboxToken = "pk.eyJ1IjoibWF4aW5mbyIsImEiOiJjbWV2M2l6ZDMwZ2ZqMmtzaHUyMXc3bGl2In0.ttPa9Es1LK2herlw4ZM0Hw";
+    
+    // Build URL - only add country filter if country prop is provided
+    let apiUrl = `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(searchQuery)}.json?access_token=${mapboxToken}&limit=1`;
+    if (country) {
+      const countryData = getCountryData(country);
+      apiUrl += `&country=${countryData.code}`;
+    }
+    
+    try {
+      const response = await fetch(apiUrl);
+      const data = await response.json();
+      
+      if (data.features && data.features.length > 0 && draw.current) {
+        const result = data.features[0];
+        const feature = {
+          type: 'Feature' as const,
+          properties: {
+            name: result.place_name || result.text || 'Search Result',
+            address: result.place_name || '',
+            included: true,
+            pois: [],
+            locationType: 'address',
+          },
+          geometry: {
+            type: 'Point' as const,
+            coordinates: result.center,
+          },
+        };
+        draw.current.add(feature);
+        const allFeatures = draw.current.getAll();
+        onLocationsChange(allFeatures.features);
+        
+        map.current.flyTo({
+          center: result.center,
+          zoom: 14,
+          duration: 1000,
+        });
+        
+        setSearchQuery('');
+      }
+    } catch (error) {
+      console.error('Geocoding error:', error);
+    }
+  }, [searchQuery, country, onLocationsChange]);
+
+  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      setShowSuggestions(false);
+      handleSearchSubmit();
+    } else if (e.key === 'Escape') {
+      setShowSuggestions(false);
+    }
+  }, [handleSearchSubmit]);
+
+  const fetchSearchSuggestions = useCallback(async (query: string) => {
+    if (!query.trim() || query.length < 2) {
+      setSearchSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+
+    const mapboxToken = "pk.eyJ1IjoibWF4aW5mbyIsImEiOiJjbWV2M2l6ZDMwZ2ZqMmtzaHUyMXc3bGl2In0.ttPa9Es1LK2herlw4ZM0Hw";
+    
+    let apiUrl = `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${mapboxToken}&limit=5`;
+    if (country) {
+      const countryData = getCountryData(country);
+      apiUrl += `&country=${countryData.code}`;
+    }
+
+    try {
+      const response = await fetch(apiUrl);
+      const data = await response.json();
+      
+      if (data.features && data.features.length > 0) {
+        setSearchSuggestions(data.features);
+        setShowSuggestions(true);
+      } else {
+        setSearchSuggestions([]);
+        setShowSuggestions(false);
+      }
+    } catch (error) {
+      console.error('Geocoding suggestion error:', error);
+      setSearchSuggestions([]);
+      setShowSuggestions(false);
+    }
+  }, [country]);
+
+  const handleSearchInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchQuery(value);
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      fetchSearchSuggestions(value);
+    }, 300);
+  }, [fetchSearchSuggestions]);
+
+  const handleSuggestionClick = useCallback((suggestion: any) => {
+    if (!map.current || !draw.current) return;
+
+    const feature = {
+      type: 'Feature' as const,
+      properties: {
+        name: suggestion.text || suggestion.place_name || 'Search Result',
+        address: suggestion.place_name || '',
+        included: true,
+        pois: [],
+        locationType: 'address',
+      },
+      geometry: {
+        type: 'Point' as const,
+        coordinates: suggestion.center,
+      },
+    };
+    draw.current.add(feature);
+    const allFeatures = draw.current.getAll();
+    onLocationsChange(allFeatures.features);
+
+    map.current.flyTo({
+      center: suggestion.center,
+      zoom: 14,
+      duration: 1000,
+    });
+
+    setSearchQuery('');
+    setSearchSuggestions([]);
+    setShowSuggestions(false);
+  }, [onLocationsChange]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchContainerRef.current && !searchContainerRef.current.contains(event.target as Node)) {
+        setShowSuggestions(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isMapLoaded || !map.current) return;
+
+    const mapInstance = map.current;
+    const sourceId = 'poi-markers-source';
+    const layerId = 'poi-markers-layer';
+    const labelLayerId = 'poi-labels-layer';
+
+    if (mapInstance.getLayer(labelLayerId)) {
+      mapInstance.removeLayer(labelLayerId);
+    }
+    if (mapInstance.getLayer(layerId)) {
+      mapInstance.removeLayer(layerId);
+    }
+    if (mapInstance.getSource(sourceId)) {
+      mapInstance.removeSource(sourceId);
+    }
+
+    if (effectivePOIs.length > 0) {
+      const geojsonData: GeoJSON.FeatureCollection<GeoJSON.Point> = {
+        type: 'FeatureCollection',
+        features: effectivePOIs.map((poi) => ({
+          type: 'Feature',
+          properties: {
+            id: poi.id,
+            name: poi.name,
+            category: poi.category,
+            locationId: poi.locationId,
+          },
+          geometry: {
+            type: 'Point',
+            coordinates: poi.coordinates,
+          },
+        })),
+      };
+
+      mapInstance.addSource(sourceId, {
+        type: 'geojson',
+        data: geojsonData,
+      });
+
+      mapInstance.addLayer({
+        id: layerId,
+        type: 'circle',
+        source: sourceId,
+        paint: {
+          'circle-radius': 8,
+          'circle-color': '#22c55e',
+          'circle-stroke-width': 2,
+          'circle-stroke-color': '#ffffff',
+        },
+      });
+
+      mapInstance.addLayer({
+        id: labelLayerId,
+        type: 'symbol',
+        source: sourceId,
+        layout: {
+          'text-field': ['get', 'name'],
+          'text-size': 11,
+          'text-offset': [0, 1.5],
+          'text-anchor': 'top',
+        },
+        paint: {
+          'text-color': '#374151',
+          'text-halo-color': '#ffffff',
+          'text-halo-width': 1,
+        },
+      });
+    }
+  }, [isMapLoaded, effectivePOIs]);
+
+  const handleSetMode = (mode: DrawMode) => {
+    if (!draw.current) return;
+    
+    setActiveMode(mode);
+    setShowRadiusToolbar(mode === 'draw_circle');
+    
+    switch (mode) {
+      case 'draw_point':
+        draw.current.changeMode('draw_point');
+        break;
+      case 'draw_polygon':
+        draw.current.changeMode('draw_polygon');
+        break;
+      case 'draw_circle':
+        draw.current.changeMode('draw_circle');
+        break;
+      case 'draw_rectangle':
+        draw.current.changeMode('draw_rectangle');
+        break;
+      default:
+        draw.current.changeMode('simple_select');
+    }
+  };
+
+  const handleDeleteClick = () => {
+    if (!draw.current) return;
+    const selectedFeatures = draw.current.getSelected();
+    if (selectedFeatures.features && selectedFeatures.features.length > 0) {
+      setSelectedFeatureToDelete(selectedFeatures.features);
+      setDeleteConfirmOpen(true);
+    }
+  };
+
+  const handleConfirmDelete = () => {
+    if (!draw.current || !selectedFeatureToDelete || selectedFeatureToDelete.length === 0) return;
+    const idsToDelete = selectedFeatureToDelete.map((f: any) => f.id);
+    draw.current.delete(idsToDelete);
+    const data = draw.current.getAll();
+    onLocationsChange(data.features);
+    setDeleteConfirmOpen(false);
+    setSelectedFeatureToDelete(null);
+  };
+
+  const handleClearAll = () => {
+    if (!draw.current) return;
+    draw.current.deleteAll();
+    onLocationsChange([]);
+  };
+
+  const handleFullscreen = () => {
+    if (!mapContainer.current) return;
+    
+    if (!isFullscreen) {
+      if (mapContainer.current.requestFullscreen) {
+        mapContainer.current.requestFullscreen();
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+    setIsFullscreen(!isFullscreen);
+  };
+
+  const handleMapStyleChange = (style: 'streets' | 'satellite' | 'outdoors' | 'light' | 'dark') => {
+    if (!map.current || !draw.current) return;
+    const styleUrls: Record<string, string> = {
+      streets: 'mapbox://styles/mapbox/streets-v12',
+      satellite: 'mapbox://styles/mapbox/satellite-streets-v12',
+      outdoors: 'mapbox://styles/mapbox/outdoors-v12',
+      light: 'mapbox://styles/mapbox/light-v11',
+      dark: 'mapbox://styles/mapbox/dark-v11',
+    };
+    
+    const currentFeatures = draw.current.getAll();
+    
+    map.current.setStyle(styleUrls[style]);
+    setMapStyle(style);
+    
+    map.current.once('style.load', () => {
+      if (draw.current && currentFeatures.features.length > 0) {
+        draw.current.set(currentFeatures);
+      }
+    });
+  };
+
+  const toolbarButtons = [
+    { id: 'draw_point', icon: MapPin, tooltip: t('geofencing.map.tools.drawPoint'), mode: 'draw_point' as DrawMode },
+    { id: 'draw_rectangle', icon: Square, tooltip: t('geofencing.map.tools.drawRectangle'), mode: 'draw_rectangle' as DrawMode },
+    { id: 'draw_circle', icon: Circle, tooltip: t('geofencing.map.tools.drawCircle'), mode: 'draw_circle' as DrawMode },
+    { id: 'draw_line', icon: Route, tooltip: t('geofencing.map.tools.drawLine'), mode: 'draw_polygon' as DrawMode },
+    { id: 'delete', icon: Trash2, tooltip: t('geofencing.map.tools.deleteSelected'), action: handleDeleteClick },
+    { id: 'divider1', divider: true },
+    { id: 'terrain', icon: Mountain, tooltip: t('geofencing.map.tools.toggleTerrain') },
+    { id: 'layers', icon: Layers, tooltip: t('geofencing.map.tools.toggleLayers'), mode: 'simple_select' as DrawMode },
+    { id: 'divider2', divider: true },
+    { id: 'streets', icon: Map, tooltip: t('geofencing.map.tools.streets'), styleAction: () => handleMapStyleChange('streets') },
+    { id: 'satellite', icon: Satellite, tooltip: t('geofencing.map.tools.satellite'), styleAction: () => handleMapStyleChange('satellite') },
+    { id: 'outdoors', icon: TreePine, tooltip: t('geofencing.map.tools.outdoors'), styleAction: () => handleMapStyleChange('outdoors') },
+    { id: 'light', icon: Sun, tooltip: t('geofencing.map.tools.light'), styleAction: () => handleMapStyleChange('light') },
+    { id: 'dark', icon: Moon, tooltip: t('geofencing.map.tools.dark'), styleAction: () => handleMapStyleChange('dark') },
+  ];
+
+  return (
+    <div className="relative w-full h-full">
+      <div 
+        ref={mapContainer} 
+        className="w-full h-full rounded-lg"
+        data-testid="map-geofencing"
+      />
+      
+      {!isMapLoaded && (
+        <div className="absolute inset-0 flex items-center justify-center bg-mw-neutral-100/80 dark:bg-mw-neutral-800/80 rounded-lg">
+          <div className="flex flex-col items-center gap-2">
+            <div className="w-8 h-8 border-2 border-mw-primary-500 border-t-transparent rounded-full animate-spin" />
+            <p className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400">{t('geofencing.map.loading')}</p>
+          </div>
+        </div>
+      )}
+
+      <div className="absolute top-3 left-3 right-3 z-20">
+        <div className="flex items-stretch gap-3">
+          <div className="flex-1 relative" ref={searchContainerRef}>
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400 z-10" />
+            <input
+              type="text"
+              placeholder={t('geofencing.map.searchLocations')}
+              value={searchQuery}
+              onChange={handleSearchInputChange}
+              onKeyDown={handleSearchKeyDown}
+              onFocus={() => {
+                if (searchSuggestions.length > 0) {
+                  setShowSuggestions(true);
+                }
+              }}
+              className={cn(
+                'w-full h-10 pl-10 pr-10 text-sm',
+                'bg-white',
+                'border border-mw-neutral-200',
+                'rounded-md shadow-sm outline-none',
+                'focus:ring-2 focus:ring-mw-primary-500 focus:border-transparent',
+                'placeholder:text-mw-neutral-400'
+              )}
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => {
+                  setSearchQuery('');
+                  setSearchSuggestions([]);
+                  setShowSuggestions(false);
+                }}
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-1 hover:bg-mw-neutral-100 rounded-full z-10"
+              >
+                <X className="h-3 w-3 text-mw-neutral-400" />
+              </button>
+            )}
+            {showSuggestions && searchSuggestions.length > 0 && (
+              <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-mw-neutral-200 rounded-md shadow-lg overflow-hidden z-30">
+                {searchSuggestions.map((suggestion, index) => {
+                  const placeName = suggestion.text || suggestion.place_name?.split(',')[0] || 'Location';
+                  const address = suggestion.place_name || '';
+                  const briefAddress = address.split(',').slice(1, 3).join(',').trim();
+                  
+                  return (
+                    <button
+                      key={suggestion.id || index}
+                      type="button"
+                      onClick={() => handleSuggestionClick(suggestion)}
+                      className={cn(
+                        'w-full px-3 py-2 text-left hover:bg-mw-neutral-50 transition-colors',
+                        'flex flex-col gap-0.5',
+                        index !== searchSuggestions.length - 1 && 'border-b border-mw-neutral-100'
+                      )}
+                    >
+                      <span className="text-sm font-medium text-mw-neutral-800 truncate">
+                        {placeName}
+                      </span>
+                      {briefAddress && (
+                        <span className="text-xs text-mw-neutral-500 truncate">
+                          {briefAddress}
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+          <div className="flex-1">
+            <POIDropdown
+              selectedPOIs={selectedPOIs}
+              onPOIsChange={setSelectedPOIs}
+              onRenderPOIs={handleRenderPOIs}
+              disabled={!isPOIDropdownEnabled}
+              isLoading={isLoadingPOIs}
+              maxSelections={5}
+              selectedLocation={addPOI ? selectedLocation : null}
+              useDynamicCategories={addPOI}
+              isOpen={isPOIDropdownOpen}
+              onOpenChange={(open) => {
+                setIsPOIDropdownOpen(open);
+                if (!open && onAddPOIChange) {
+                  onAddPOIChange(false);
+                }
+              }}
+              showChipsInTrigger={true}
+            />
+          </div>
+        </div>
+      </div>
+
+      {showRadiusToolbar && (
+        <div className="absolute bottom-20 left-1/2 -translate-x-1/2 z-20" style={{ width: '300px' }}>
+          <div className="flex flex-col gap-2 px-4 py-3 bg-white dark:bg-mw-neutral-800 rounded-lg shadow-lg border border-mw-neutral-200 dark:border-mw-neutral-700">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">{t('geofencing.map.targetRadius')}</span>
+              <span className="text-sm font-semibold text-mw-primary-600 dark:text-mw-primary-400">
+                {selectedRadius >= 1000 ? `${(selectedRadius / 1000).toFixed(1)}km` : `${selectedRadius}m`}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-mw-neutral-500">200m</span>
+              <input
+                type="range"
+                min={200}
+                max={5000}
+                step={50}
+                value={selectedRadius}
+                onChange={(e) => setSelectedRadius(Number(e.target.value))}
+                className="flex-1 h-2 bg-mw-neutral-200 dark:bg-mw-neutral-600 rounded-lg appearance-none cursor-pointer accent-mw-primary-500"
+              />
+              <span className="text-xs text-mw-neutral-500">5km</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Expand icon above zoom controls (bottom-right) - matches Mapbox zoom control styling */}
+      <button
+        type="button"
+        onClick={handleFullscreen}
+        className="absolute bottom-[120px] right-[10px] z-10 w-[29px] h-[29px] flex items-center justify-center bg-white rounded shadow hover:bg-mw-neutral-100 transition-colors border-0"
+        title={t('geofencing.map.toggleFullscreen')}
+      >
+        <Maximize2 className="h-[18px] w-[18px] text-[#333]" />
+      </button>
+
+      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10">
+        <div className="flex items-center gap-1 px-2 py-1.5 bg-white dark:bg-mw-neutral-800 rounded-lg shadow-lg border border-mw-neutral-200 dark:border-mw-neutral-700">
+          {toolbarButtons.map((button) => {
+            if (button.divider) {
+              return (
+                <div
+                  key={button.id}
+                  className="w-px h-6 bg-mw-neutral-200 dark:bg-mw-neutral-600 mx-1"
+                />
+              );
+            }
+
+            const Icon = button.icon!;
+            const isActive = button.mode && activeMode === button.mode;
+            const isStyleActive = button.styleAction && mapStyle === button.id;
+
+            return (
+              <button
+                type="button"
+                key={button.id}
+                onClick={() => {
+                  if (button.action) {
+                    button.action();
+                  } else if (button.styleAction) {
+                    button.styleAction();
+                  } else if (button.mode) {
+                    handleSetMode(button.mode);
+                  }
+                }}
+                className={cn(
+                  'p-2 rounded-md transition-all duration-200',
+                  isActive || isStyleActive
+                    ? 'bg-mw-primary-500 text-white shadow-sm'
+                    : 'text-mw-neutral-600 dark:text-mw-neutral-400 hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-700 hover:text-mw-neutral-900 dark:hover:text-white'
+                )}
+                title={button.tooltip}
+              >
+                <Icon className="h-4 w-4" />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-mw-error-500" />
+              {t('geofencing.map.deleteLocation')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('geofencing.map.deleteConfirmation')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            {selectedFeatureToDelete && selectedFeatureToDelete.length > 0 && (
+              <div className="p-3 bg-mw-neutral-50 dark:bg-mw-neutral-800 rounded-md">
+                <p className="font-medium text-sm">
+                  {selectedFeatureToDelete.length === 1
+                    ? selectedFeatureToDelete[0].properties?.name || t('geofencing.map.selectedLocation')
+                    : `${selectedFeatureToDelete.length} ${t('geofencing.map.locationsSelected')}`}
+                </p>
+              </div>
+            )}
+          </div>
+          <DialogFooter className="flex gap-2 sm:gap-0">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setDeleteConfirmOpen(false)}
+            >
+              {t('geofencing.locations.cancel')}
+            </Button>
+            <Button
+              type="button"
+              variant="primary"
+              className="bg-mw-error-500 hover:bg-mw-error-600 text-white"
+              onClick={handleConfirmDelete}
+            >
+              {t('geofencing.locations.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}