adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/advanced-map-drawer.tsx

@@ -0,0 +1,1131 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Search, Globe, X, Upload, Download, Check, Ban, Minus, Layers, Box, Circle, Pentagon, MapPin, Clock, ChevronDown } from "lucide-react";
+import mapboxgl from "mapbox-gl";
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Slider } from "@/components/ui/slider";
+import "mapbox-gl/dist/mapbox-gl.css";
+import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
+
+const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_TOKEN || "";
+
+type GeoType = "country" | "region" | "city" | "town" | "poi" | "circle" | "polygon" | "line";
+
+interface GeoSelection {
+  id: string;
+  name: string;
+  type: GeoType;
+  coordinates?: [number, number];
+  geometry?: GeoJSON.Geometry;
+  radius?: number;
+  included: boolean;
+}
+
+interface POI {
+  id: string;
+  name: string;
+  category: string;
+  latitude: number;
+  longitude: number;
+}
+
+const MOCK_POIS: POI[] = [
+  { id: "poi-1", name: "KLCC Mall", category: "Shopping", latitude: 3.1588, longitude: 101.7118 },
+  { id: "poi-2", name: "Pavilion KL", category: "Shopping", latitude: 3.1488, longitude: 101.7131 },
+  { id: "poi-3", name: "Changi Airport", category: "Transit", latitude: 1.3644, longitude: 103.9915 },
+  { id: "poi-4", name: "Marina Bay Sands", category: "Entertainment", latitude: 1.2834, longitude: 103.8607 },
+  { id: "poi-5", name: "Central World", category: "Shopping", latitude: 13.7466, longitude: 100.5392 },
+  { id: "poi-6", name: "Suvarnabhumi Airport", category: "Transit", latitude: 13.6900, longitude: 100.7501 },
+];
+
+const MOCK_HEATMAP_DATA = [
+  { lat: 3.139, lng: 101.6869, weight: 0.8 },
+  { lat: 3.1588, lng: 101.7118, weight: 0.9 },
+  { lat: 3.1488, lng: 101.7131, weight: 0.7 },
+  { lat: 3.12, lng: 101.68, weight: 0.5 },
+  { lat: 3.16, lng: 101.72, weight: 0.6 },
+  { lat: 3.14, lng: 101.65, weight: 0.4 },
+  { lat: 3.17, lng: 101.69, weight: 0.75 },
+  { lat: 3.13, lng: 101.73, weight: 0.55 },
+];
+
+interface AdvancedMapDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedLocations: string[];
+  onSelectionChange: (locations: string[]) => void;
+  selectedCountry?: string;
+}
+
+const TYPE_COLORS: Record<GeoType, string> = {
+  country: "bg-blue-500",
+  region: "bg-purple-500",
+  city: "bg-green-500",
+  town: "bg-teal-500",
+  poi: "bg-orange-500",
+  circle: "bg-pink-500",
+  polygon: "bg-indigo-500",
+  line: "bg-amber-500",
+};
+
+const TYPE_LABELS: Record<GeoType, string> = {
+  country: "Country",
+  region: "Region",
+  city: "City",
+  town: "Town",
+  poi: "POI",
+  circle: "Circle",
+  polygon: "Polygon",
+  line: "Line",
+};
+
+export function AdvancedMapDrawer({
+  open,
+  onOpenChange,
+  selectedLocations,
+  onSelectionChange,
+  selectedCountry,
+}: AdvancedMapDrawerProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<GeoSelection[]>([]);
+  const [selections, setSelections] = useState<GeoSelection[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [circleCount, setCircleCount] = useState(0);
+  const [polygonCount, setPolygonCount] = useState(0);
+  const [lineCount, setLineCount] = useState(0);
+  const [is3DMode, setIs3DMode] = useState(false);
+  const [showHeatmap, setShowHeatmap] = useState(false);
+  const [heatmapHour, setHeatmapHour] = useState(12);
+  const [activeTool, setActiveTool] = useState<"select" | "circle" | "polygon" | "line">("select");
+  const [drawingCircle, setDrawingCircle] = useState<{center: [number, number], radius: number} | null>(null);
+
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+  const drawRef = useRef<MapboxDraw | null>(null);
+  const markersRef = useRef<mapboxgl.Marker[]>([]);
+  const circleLayersRef = useRef<string[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const activeToolRef = useRef(activeTool);
+  const circleCountRef = useRef(circleCount);
+  const drawingCircleRef = useRef(drawingCircle);
+
+  useEffect(() => { activeToolRef.current = activeTool; }, [activeTool]);
+  useEffect(() => { circleCountRef.current = circleCount; }, [circleCount]);
+  useEffect(() => { drawingCircleRef.current = drawingCircle; }, [drawingCircle]);
+
+  useEffect(() => {
+    if (open) {
+      const initialSelections: GeoSelection[] = selectedLocations.map((loc, idx) => {
+        if (loc.startsWith("circle-")) {
+          return { id: loc, name: `Circle ${idx + 1}`, type: "circle" as GeoType, included: true };
+        } else if (loc.startsWith("polygon-")) {
+          return { id: loc, name: `Polygon ${idx + 1}`, type: "polygon" as GeoType, included: true };
+        } else if (loc.startsWith("line-")) {
+          return { id: loc, name: `Line ${idx + 1}`, type: "line" as GeoType, included: true };
+        } else if (loc.startsWith("poi-")) {
+          const poi = MOCK_POIS.find(p => p.id === loc);
+          return { id: loc, name: poi?.name || loc, type: "poi" as GeoType, included: true };
+        }
+        return { id: loc, name: loc, type: "city" as GeoType, included: true };
+      });
+      setSelections(initialSelections);
+    }
+  }, [open, selectedLocations]);
+
+  const addHeatmapLayer = useCallback((map: mapboxgl.Map) => {
+    if (map.getSource("heatmap-data")) return;
+    
+    const hourMultiplier = Math.sin((heatmapHour / 24) * Math.PI) * 0.5 + 0.5;
+    
+    map.addSource("heatmap-data", {
+      type: "geojson",
+      data: {
+        type: "FeatureCollection",
+        features: MOCK_HEATMAP_DATA.map(point => ({
+          type: "Feature" as const,
+          properties: { weight: point.weight * hourMultiplier },
+          geometry: {
+            type: "Point" as const,
+            coordinates: [point.lng, point.lat],
+          },
+        })),
+      },
+    });
+
+    map.addLayer({
+      id: "heatmap-layer",
+      type: "heatmap",
+      source: "heatmap-data",
+      paint: {
+        "heatmap-weight": ["get", "weight"],
+        "heatmap-intensity": 1,
+        "heatmap-color": [
+          "interpolate",
+          ["linear"],
+          ["heatmap-density"],
+          0, "rgba(0, 0, 255, 0)",
+          0.2, "rgb(0, 255, 255)",
+          0.4, "rgb(0, 255, 0)",
+          0.6, "rgb(255, 255, 0)",
+          0.8, "rgb(255, 128, 0)",
+          1, "rgb(255, 0, 0)",
+        ],
+        "heatmap-radius": 50,
+        "heatmap-opacity": 0.7,
+      },
+    });
+  }, [heatmapHour]);
+
+  const removeHeatmapLayer = useCallback((map: mapboxgl.Map) => {
+    if (map.getLayer("heatmap-layer")) {
+      map.removeLayer("heatmap-layer");
+    }
+    if (map.getSource("heatmap-data")) {
+      map.removeSource("heatmap-data");
+    }
+  }, []);
+
+  const updateHeatmapHour = useCallback(() => {
+    if (!mapRef.current || !showHeatmap) return;
+    const map = mapRef.current;
+    removeHeatmapLayer(map);
+    addHeatmapLayer(map);
+  }, [showHeatmap, addHeatmapLayer, removeHeatmapLayer]);
+
+  useEffect(() => {
+    updateHeatmapHour();
+  }, [heatmapHour, updateHeatmapHour]);
+
+  const toggle3DMode = useCallback(() => {
+    if (!mapRef.current) return;
+    const map = mapRef.current;
+    
+    if (!is3DMode) {
+      map.easeTo({ pitch: 60, bearing: -20 });
+      if (!map.getLayer("3d-buildings")) {
+        map.addLayer({
+          id: "3d-buildings",
+          source: "composite",
+          "source-layer": "building",
+          filter: ["==", "extrude", "true"],
+          type: "fill-extrusion",
+          minzoom: 15,
+          paint: {
+            "fill-extrusion-color": "#aaa",
+            "fill-extrusion-height": ["get", "height"],
+            "fill-extrusion-base": ["get", "min_height"],
+            "fill-extrusion-opacity": 0.6,
+          },
+        });
+      }
+    } else {
+      map.easeTo({ pitch: 0, bearing: 0 });
+      if (map.getLayer("3d-buildings")) {
+        map.removeLayer("3d-buildings");
+      }
+    }
+    setIs3DMode(!is3DMode);
+  }, [is3DMode]);
+
+  const toggleHeatmap = useCallback(() => {
+    if (!mapRef.current) return;
+    const map = mapRef.current;
+    
+    if (!showHeatmap) {
+      addHeatmapLayer(map);
+    } else {
+      removeHeatmapLayer(map);
+    }
+    setShowHeatmap(!showHeatmap);
+  }, [showHeatmap, addHeatmapLayer, removeHeatmapLayer]);
+
+  const addCircleToMap = useCallback((lng: number, lat: number, radiusMeters: number, id: string, name: string) => {
+    if (!mapRef.current) return;
+    const map = mapRef.current;
+
+    const sourceId = `circle-source-${id}`;
+    const layerId = `circle-layer-${id}`;
+    const outlineId = `circle-outline-${id}`;
+    const labelId = `circle-label-${id}`;
+
+    if (map.getSource(sourceId)) {
+      map.removeLayer(labelId);
+      map.removeLayer(outlineId);
+      map.removeLayer(layerId);
+      map.removeSource(sourceId);
+    }
+
+    const circleGeoJson = createCircleGeoJSON(lng, lat, radiusMeters / 1000);
+    
+    map.addSource(sourceId, {
+      type: "geojson",
+      data: circleGeoJson,
+    });
+
+    map.addLayer({
+      id: layerId,
+      type: "fill",
+      source: sourceId,
+      paint: {
+        "fill-color": "#ec4899",
+        "fill-opacity": 0.2,
+      },
+    });
+
+    map.addLayer({
+      id: outlineId,
+      type: "line",
+      source: sourceId,
+      paint: {
+        "line-color": "#ec4899",
+        "line-width": 2,
+      },
+    });
+
+    const center = circleGeoJson.geometry.coordinates[0][Math.floor(circleGeoJson.geometry.coordinates[0].length / 4)];
+    
+    map.addSource(`${sourceId}-label`, {
+      type: "geojson",
+      data: {
+        type: "Feature",
+        properties: { label: `${name}\n${radiusMeters >= 1000 ? `${(radiusMeters/1000).toFixed(1)}km` : `${radiusMeters}m`}` },
+        geometry: { type: "Point", coordinates: [lng, lat] },
+      },
+    });
+
+    map.addLayer({
+      id: labelId,
+      type: "symbol",
+      source: `${sourceId}-label`,
+      layout: {
+        "text-field": ["get", "label"],
+        "text-size": 12,
+        "text-anchor": "center",
+      },
+      paint: {
+        "text-color": "#ec4899",
+        "text-halo-color": "#fff",
+        "text-halo-width": 1,
+      },
+    });
+
+    circleLayersRef.current.push(sourceId, layerId, outlineId, labelId, `${sourceId}-label`);
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      if (mapRef.current) {
+        mapRef.current.remove();
+        mapRef.current = null;
+        drawRef.current = null;
+      }
+      return;
+    }
+    
+    if (!mapContainerRef.current || !MAPBOX_TOKEN) return;
+
+    if (mapRef.current) {
+      setTimeout(() => mapRef.current?.resize(), 100);
+      return;
+    }
+
+    const initMap = () => {
+      if (!mapContainerRef.current || mapRef.current) return;
+      
+      mapboxgl.accessToken = MAPBOX_TOKEN;
+      const map = new mapboxgl.Map({
+        container: mapContainerRef.current,
+        style: "mapbox://styles/mapbox/light-v11",
+        center: [101.6869, 3.139],
+        zoom: 10,
+      });
+      mapRef.current = map;
+
+      map.on("load", () => {
+        map.resize();
+        
+        const draw = new MapboxDraw({
+          displayControlsDefault: false,
+          controls: {},
+          defaultMode: "simple_select",
+        });
+        map.addControl(draw, "top-left");
+        drawRef.current = draw;
+
+        map.on("draw.create", (e: any) => {
+          const feature = e.features[0];
+          if (feature && feature.geometry.type === "Polygon") {
+            setPolygonCount(prev => {
+              const newCount = prev + 1;
+              const newSelection: GeoSelection = {
+                id: `polygon-${Date.now()}`,
+                name: `Polygon ${newCount}`,
+                type: "polygon",
+                geometry: feature.geometry,
+                included: true,
+              };
+              setSelections(prevSel => [...prevSel, newSelection]);
+              return newCount;
+            });
+            setActiveTool("select");
+          } else if (feature && feature.geometry.type === "LineString") {
+            setLineCount(prev => {
+              const newCount = prev + 1;
+              const newSelection: GeoSelection = {
+                id: `line-${Date.now()}`,
+                name: `Line ${newCount}`,
+                type: "line",
+                geometry: feature.geometry,
+                included: true,
+              };
+              setSelections(prevSel => [...prevSel, newSelection]);
+              return newCount;
+            });
+            setActiveTool("select");
+          }
+        });
+
+        map.on("draw.delete", (e: any) => {
+          const deletedIds = e.features.map((f: any) => f.id);
+          setSelections(prev => prev.filter(s => !deletedIds.includes(s.id)));
+        });
+      });
+
+      map.addControl(new mapboxgl.NavigationControl(), "top-right");
+
+      let circleStart: [number, number] | null = null;
+      
+      map.on("mousedown", (e) => {
+        if (activeToolRef.current === "circle") {
+          circleStart = [e.lngLat.lng, e.lngLat.lat];
+          setDrawingCircle({ center: circleStart, radius: 0 });
+        }
+      });
+
+      map.on("mousemove", (e) => {
+        if (activeToolRef.current === "circle" && circleStart) {
+          const distance = getDistanceFromLatLonInM(
+            circleStart[1], circleStart[0],
+            e.lngLat.lat, e.lngLat.lng
+          );
+          setDrawingCircle({ center: circleStart, radius: distance });
+        }
+      });
+
+      map.on("mouseup", (e) => {
+        if (activeToolRef.current === "circle" && circleStart) {
+          const distance = getDistanceFromLatLonInM(
+            circleStart[1], circleStart[0],
+            e.lngLat.lat, e.lngLat.lng
+          );
+          
+          if (distance > 10) {
+            const id = `circle-${Date.now()}`;
+            setCircleCount(prev => {
+              const newCount = prev + 1;
+              addCircleToMap(circleStart![0], circleStart![1], distance, id, `Circle ${newCount}`);
+              setSelections(prevSel => [...prevSel, {
+                id,
+                name: `Circle ${newCount}`,
+                type: "circle",
+                coordinates: circleStart!,
+                radius: distance,
+                included: true,
+              }]);
+              return newCount;
+            });
+          }
+          
+          circleStart = null;
+          setDrawingCircle(null);
+          setActiveTool("select");
+        }
+      });
+    };
+
+    setTimeout(initMap, 100);
+
+    return () => {
+      markersRef.current.forEach((m) => m.remove());
+      markersRef.current = [];
+    };
+  }, [open, addCircleToMap]);
+
+  useEffect(() => {
+    if (!mapRef.current || !open) return;
+
+    markersRef.current.forEach((m) => m.remove());
+    markersRef.current = [];
+
+    selections.forEach((sel) => {
+      if (sel.coordinates && sel.type !== "circle") {
+        const el = document.createElement("div");
+        el.className = `w-6 h-6 rounded-full flex items-center justify-center cursor-pointer ${TYPE_COLORS[sel.type]} text-white text-xs font-bold shadow-md`;
+        el.innerHTML = sel.type === "poi" ? "P" : sel.name.charAt(0).toUpperCase();
+
+        const marker = new mapboxgl.Marker({ element: el })
+          .setLngLat(sel.coordinates)
+          .setPopup(new mapboxgl.Popup().setHTML(`<strong>${sel.name}</strong><br/><span class="text-xs">${TYPE_LABELS[sel.type]}</span>`))
+          .addTo(mapRef.current!);
+
+        markersRef.current.push(marker);
+      }
+    });
+  }, [selections, open]);
+
+  const handleSearch = useCallback(async () => {
+    if (!searchQuery.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    setIsSearching(true);
+    
+    try {
+      const response = await fetch(
+        `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(searchQuery)}.json?access_token=${MAPBOX_TOKEN}&types=country,region,place,locality&limit=10`
+      );
+      const data = await response.json();
+      
+      const results: GeoSelection[] = data.features?.map((feature: any) => {
+        let type: GeoType = "city";
+        if (feature.place_type?.includes("country")) type = "country";
+        else if (feature.place_type?.includes("region")) type = "region";
+        else if (feature.place_type?.includes("locality")) type = "town";
+        else if (feature.place_type?.includes("place")) type = "city";
+
+        return {
+          id: feature.id,
+          name: feature.place_name,
+          type,
+          coordinates: feature.center as [number, number],
+          included: true,
+        };
+      }) || [];
+
+      const matchingPOIs = MOCK_POIS.filter(poi => 
+        poi.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        poi.category.toLowerCase().includes(searchQuery.toLowerCase())
+      ).map(poi => ({
+        id: poi.id,
+        name: `${poi.name} (${poi.category})`,
+        type: "poi" as GeoType,
+        coordinates: [poi.longitude, poi.latitude] as [number, number],
+        included: true,
+      }));
+
+      setSearchResults([...results, ...matchingPOIs]);
+    } catch (error) {
+      console.error("Search failed:", error);
+      setSearchResults([]);
+    } finally {
+      setIsSearching(false);
+    }
+  }, [searchQuery]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (searchQuery.trim()) {
+        handleSearch();
+      } else {
+        setSearchResults([]);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery, handleSearch]);
+
+  const handleAddSelection = (item: GeoSelection) => {
+    if (!selections.find(s => s.id === item.id)) {
+      setSelections(prev => [...prev, item]);
+      
+      if (item.coordinates && mapRef.current) {
+        mapRef.current.flyTo({
+          center: item.coordinates,
+          zoom: item.type === "country" ? 5 : item.type === "region" ? 7 : 10,
+        });
+      }
+    }
+    setSearchQuery("");
+    setSearchResults([]);
+  };
+
+  const handleRemoveSelection = (id: string) => {
+    setSelections(prev => prev.filter(s => s.id !== id));
+    
+    if (mapRef.current) {
+      const map = mapRef.current;
+      const sourceId = `circle-source-${id}`;
+      if (map.getSource(sourceId)) {
+        [`circle-label-${id}`, `circle-outline-${id}`, `circle-layer-${id}`].forEach(layerId => {
+          if (map.getLayer(layerId)) map.removeLayer(layerId);
+        });
+        if (map.getSource(`${sourceId}-label`)) map.removeSource(`${sourceId}-label`);
+        map.removeSource(sourceId);
+      }
+    }
+    
+    if (drawRef.current) {
+      try {
+        drawRef.current.delete(id);
+      } catch (e) {}
+    }
+  };
+
+  const toggleIncludeExclude = (id: string) => {
+    setSelections(prev => prev.map(s => 
+      s.id === id ? { ...s, included: !s.included } : s
+    ));
+  };
+
+  const handleApply = () => {
+    onSelectionChange(selections.map(s => s.id));
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  const handleClearAll = () => {
+    setSelections([]);
+    if (drawRef.current) {
+      drawRef.current.deleteAll();
+    }
+    if (mapRef.current) {
+      const map = mapRef.current;
+      circleLayersRef.current.forEach(id => {
+        if (map.getLayer(id)) map.removeLayer(id);
+        if (map.getSource(id)) map.removeSource(id);
+      });
+      circleLayersRef.current = [];
+    }
+    setCircleCount(0);
+    setPolygonCount(0);
+    setLineCount(0);
+  };
+
+  const handleStartCircle = () => {
+    setActiveTool("circle");
+  };
+
+  const handleStartPolygon = () => {
+    setActiveTool("polygon");
+    if (drawRef.current) {
+      drawRef.current.changeMode("draw_polygon");
+    }
+  };
+
+  const handleStartLine = () => {
+    setActiveTool("line");
+    if (drawRef.current) {
+      drawRef.current.changeMode("draw_line_string");
+    }
+  };
+
+  const handleDownloadTemplate = () => {
+    const template = "name,latitude,longitude,radius\nLocation 1,3.139,101.6869,500\nLocation 2,3.1588,101.7118,\n";
+    const blob = new Blob([template], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "coordinate-template.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const text = e.target?.result as string;
+      const lines = text.split("\n").filter(line => line.trim());
+      
+      if (lines.length < 2) return;
+
+      const newSelections: GeoSelection[] = [];
+      let count = circleCount;
+
+      for (let i = 1; i < lines.length; i++) {
+        const parts = lines[i].split(",").map(p => p.trim());
+        if (parts.length < 3) continue;
+
+        const name = parts[0] || `CSV Circle ${i}`;
+        const lat = parseFloat(parts[1]);
+        const lng = parseFloat(parts[2]);
+        const radius = parts[3] ? parseFloat(parts[3]) : 250;
+
+        if (isNaN(lat) || isNaN(lng)) continue;
+
+        count++;
+        const id = `circle-csv-${Date.now()}-${i}`;
+        
+        addCircleToMap(lng, lat, radius, id, name);
+        
+        newSelections.push({
+          id,
+          name,
+          type: "circle",
+          coordinates: [lng, lat],
+          radius,
+          included: true,
+        });
+      }
+
+      setCircleCount(count);
+      setSelections(prev => [...prev, ...newSelections]);
+
+      if (newSelections.length > 0 && mapRef.current) {
+        const firstCoord = newSelections[0].coordinates;
+        if (firstCoord) {
+          mapRef.current.flyTo({ center: firstCoord, zoom: 12 });
+        }
+      }
+    };
+    reader.readAsText(file);
+    
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const includedCount = selections.filter(s => s.included).length;
+  const excludedCount = selections.filter(s => !s.included).length;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent 
+        side="right" 
+        className="w-full sm:max-w-[75vw] flex flex-col p-0"
+        data-testid="geography-drawer"
+      >
+        <div className="p-4 pb-3 border-b">
+          <SheetHeader>
+            <SheetTitle className="flex items-center gap-2">
+              <Globe className="h-5 w-5" />
+              Geography Selection
+            </SheetTitle>
+            <SheetDescription>
+              Search for locations, upload coordinates, or draw custom areas on the map
+            </SheetDescription>
+          </SheetHeader>
+        </div>
+
+        <div className="flex-1 flex overflow-hidden">
+          <div className="w-1/4 flex flex-col border-r bg-muted/20">
+            <div className="p-3 border-b space-y-2">
+              <div className="flex gap-2">
+                <div className="relative flex-1">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="Search locations, POIs..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-9"
+                    data-testid="input-search-geography"
+                  />
+                </div>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={handleDownloadTemplate}
+                      data-testid="button-download-template"
+                    >
+                      <Download className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Download CSV Template</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={() => fileInputRef.current?.click()}
+                      data-testid="button-upload-csv"
+                    >
+                      <Upload className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Upload CSV Coordinates</TooltipContent>
+                </Tooltip>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".csv"
+                  onChange={handleFileUpload}
+                  className="hidden"
+                />
+              </div>
+              
+              {searchResults.length > 0 && (
+                <div className="absolute z-50 mt-1 w-[calc(25%-3rem)] bg-background border rounded-md shadow-lg max-h-64 overflow-auto">
+                  {searchResults.map((result) => (
+                    <button
+                      key={result.id}
+                      type="button"
+                      className="w-full text-left px-3 py-2 hover:bg-muted flex items-center gap-2"
+                      onClick={() => handleAddSelection(result)}
+                      data-testid={`search-result-${result.id}`}
+                    >
+                      <Badge variant="secondary" className={`text-xs text-white ${TYPE_COLORS[result.type]}`}>
+                        {TYPE_LABELS[result.type]}
+                      </Badge>
+                      <span className="text-sm truncate flex-1">{result.name}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className="p-3 border-b flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">Selected</span>
+                <Badge variant="secondary" className="text-xs">{selections.length}</Badge>
+                {includedCount > 0 && (
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Badge variant="secondary" className="text-xs bg-green-100 text-green-700">
+                        <Check className="h-3 w-3 mr-0.5" />{includedCount}
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent>Included</TooltipContent>
+                  </Tooltip>
+                )}
+                {excludedCount > 0 && (
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Badge variant="secondary" className="text-xs bg-red-100 text-red-700">
+                        <Ban className="h-3 w-3 mr-0.5" />{excludedCount}
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent>Excluded</TooltipContent>
+                  </Tooltip>
+                )}
+              </div>
+              {selections.length > 0 && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleClearAll}
+                  className="text-xs h-7"
+                  data-testid="button-clear-all-geography"
+                >
+                  Clear
+                </Button>
+              )}
+            </div>
+
+            <ScrollArea className="flex-1">
+              <div className="p-2 space-y-1">
+                {selections.length === 0 ? (
+                  <p className="text-sm text-muted-foreground text-center py-4">
+                    No locations selected. Search, upload CSV, or draw on the map.
+                  </p>
+                ) : (
+                  selections.map((sel) => (
+                    <div
+                      key={sel.id}
+                      className={`flex items-center gap-2 p-2 rounded-md border ${
+                        sel.included ? "bg-background" : "bg-red-50 border-red-200"
+                      }`}
+                      data-testid={`selected-geography-${sel.id}`}
+                    >
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button
+                            type="button"
+                            onClick={() => toggleIncludeExclude(sel.id)}
+                            className={`shrink-0 p-1 rounded ${
+                              sel.included 
+                                ? "text-green-600 hover:bg-green-100" 
+                                : "text-red-600 hover:bg-red-100"
+                            }`}
+                            data-testid={`toggle-include-${sel.id}`}
+                          >
+                            {sel.included ? <Check className="h-4 w-4" /> : <Ban className="h-4 w-4" />}
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {sel.included ? "Click to exclude" : "Click to include"}
+                        </TooltipContent>
+                      </Tooltip>
+                      <Badge 
+                        variant="secondary" 
+                        className={`text-xs text-white shrink-0 ${TYPE_COLORS[sel.type]}`}
+                      >
+                        {TYPE_LABELS[sel.type]}
+                      </Badge>
+                      <div className="flex-1 min-w-0">
+                        <span className="text-sm truncate block">{sel.name}</span>
+                        {sel.radius && (
+                          <span className="text-xs text-muted-foreground">
+                            {sel.radius >= 1000 ? `${(sel.radius/1000).toFixed(1)}km` : `${Math.round(sel.radius)}m`}
+                          </span>
+                        )}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveSelection(sel.id)}
+                        className="text-muted-foreground hover:text-destructive shrink-0"
+                        data-testid={`button-remove-${sel.id}`}
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ))
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+
+          <div className="w-3/4 h-full relative">
+            <div 
+              ref={mapContainerRef} 
+              className="absolute inset-0 w-full h-full"
+              style={{ minHeight: "400px" }}
+              data-testid="geography-map"
+            />
+
+            <div className="absolute top-3 left-3 z-10 flex flex-col gap-1 bg-white rounded-lg shadow-lg p-1">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant={activeTool === "circle" ? "default" : "ghost"}
+                    size="icon"
+                    onClick={handleStartCircle}
+                    className="h-8 w-8"
+                    data-testid="tool-circle"
+                  >
+                    <Circle className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">Draw Circle</TooltipContent>
+              </Tooltip>
+              
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant={activeTool === "polygon" ? "default" : "ghost"}
+                    size="icon"
+                    onClick={handleStartPolygon}
+                    className="h-8 w-8"
+                    data-testid="tool-polygon"
+                  >
+                    <Pentagon className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">Draw Polygon</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant={activeTool === "line" ? "default" : "ghost"}
+                    size="icon"
+                    onClick={handleStartLine}
+                    className="h-8 w-8"
+                    data-testid="tool-line"
+                  >
+                    <Minus className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">Draw Line</TooltipContent>
+              </Tooltip>
+
+              <div className="w-full h-px bg-border my-1" />
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant={is3DMode ? "default" : "ghost"}
+                    size="icon"
+                    onClick={toggle3DMode}
+                    className="h-8 w-8"
+                    data-testid="tool-3d"
+                  >
+                    <Box className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">3D View</TooltipContent>
+              </Tooltip>
+
+              <Popover>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <Button
+                        type="button"
+                        variant={showHeatmap ? "default" : "ghost"}
+                        size="icon"
+                        className="h-8 w-8"
+                        data-testid="tool-heatmap"
+                      >
+                        <Layers className="h-4 w-4" />
+                      </Button>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">Audience Heatmap</TooltipContent>
+                </Tooltip>
+                <PopoverContent side="right" className="w-64">
+                  <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium">Audience Density</span>
+                      <Button
+                        type="button"
+                        variant={showHeatmap ? "default" : "outline"}
+                        size="sm"
+                        onClick={toggleHeatmap}
+                      >
+                        {showHeatmap ? "Hide" : "Show"}
+                      </Button>
+                    </div>
+                    {showHeatmap && (
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                          <Clock className="h-4 w-4 text-muted-foreground" />
+                          <span className="text-sm">Hour: {heatmapHour}:00</span>
+                        </div>
+                        <Slider
+                          value={[heatmapHour]}
+                          onValueChange={([val]) => setHeatmapHour(val)}
+                          min={0}
+                          max={23}
+                          step={1}
+                        />
+                        <div className="flex justify-between text-xs text-muted-foreground">
+                          <span>12 AM</span>
+                          <span>12 PM</span>
+                          <span>11 PM</span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {activeTool === "circle" && (
+              <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2 z-10 bg-white/90 backdrop-blur-sm px-4 py-2 rounded-lg shadow-lg">
+                <p className="text-sm font-medium">Click and drag to draw a circle</p>
+                {drawingCircle && drawingCircle.radius > 0 && (
+                  <p className="text-xs text-muted-foreground text-center mt-1">
+                    Radius: {drawingCircle.radius >= 1000 ? `${(drawingCircle.radius/1000).toFixed(2)}km` : `${Math.round(drawingCircle.radius)}m`}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {!MAPBOX_TOKEN && (
+              <div className="absolute inset-0 flex items-center justify-center bg-muted/50">
+                <p className="text-muted-foreground">Map token not configured</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center p-4 border-t bg-background">
+          <span className="text-sm text-muted-foreground">
+            {selections.length} location{selections.length !== 1 ? "s" : ""} selected
+            {excludedCount > 0 && ` (${excludedCount} excluded)`}
+          </span>
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              data-testid="button-cancel-geography"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleApply}
+              data-testid="button-apply-geography"
+            >
+              Apply Selection
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function createCircleGeoJSON(lng: number, lat: number, radiusKm: number): GeoJSON.Feature<GeoJSON.Polygon> {
+  const points = 64;
+  const coords: [number, number][] = [];
+  
+  for (let i = 0; i < points; i++) {
+    const angle = (i / points) * 2 * Math.PI;
+    const dx = radiusKm * Math.cos(angle);
+    const dy = radiusKm * Math.sin(angle);
+    
+    const dlng = dx / (111.32 * Math.cos(lat * Math.PI / 180));
+    const dlat = dy / 110.574;
+    
+    coords.push([lng + dlng, lat + dlat]);
+  }
+  coords.push(coords[0]);
+
+  return {
+    type: "Feature",
+    properties: {},
+    geometry: {
+      type: "Polygon",
+      coordinates: [coords],
+    },
+  };
+}
+
+function getDistanceFromLatLonInM(lat1: number, lon1: number, lat2: number, lon2: number): number {
+  const R = 6371000;
+  const dLat = deg2rad(lat2 - lat1);
+  const dLon = deg2rad(lon2 - lon1);
+  const a = 
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
+    Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+
+function deg2rad(deg: number): number {
+  return deg * (Math.PI / 180);
+}