adserver-dashboard 1.0.0

package/client/src/components/line-items/steps/targeting-step.tsx

@@ -0,0 +1,1708 @@
+import { useState, useEffect, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from "@moving-walls/design-system";
+import { Card } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Label } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { MultiSelect } from "@moving-walls/design-system";
+import { Select } from "@moving-walls/design-system";
+import { Checkbox } from "@moving-walls/design-system";
+import {
+  Sheet,
+  SheetContent,
+} from "@moving-walls/design-system";
+import { ScrollArea } from "@moving-walls/design-system";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@moving-walls/design-system";
+import {
+  Users,
+  ChevronLeft,
+  ChevronRight,
+  Sparkles,
+  Search,
+  MapPin,
+  Plus,
+  Trash2,
+  Upload,
+  X,
+  ChevronDown,
+  ChevronUp,
+  Loader2,
+  Map,
+  Check,
+  Monitor,
+} from "lucide-react";
+import { FormInsights } from "../form-insights";
+import { GeofencingMap } from "../geofencing-map";
+import { HierarchicalVenueSelector } from "../../ui/hierarchical-venue-selector";
+import { LocationCsvUploadDrawer } from "../geofencing/LocationCsvUploadDrawer";
+import { getAccessToken } from "@/lib/oauth-service";
+import { API_CONFIG } from "@/lib/api-config";
+import { cn } from "@moving-walls/design-system";
+import type { MapMarkerLocation } from "@/types/geofencing";
+import { 
+  submitRecommendation,
+  pollUntilCompleted,
+  type RecommendationRequest 
+} from "@/lib/recommendation-api";
+import { useAuth } from "@/contexts/auth-context";
+
+interface TargetingStepProps {
+  data?: any;
+  campaignData?: any;
+  lineItemId?: string;
+  lineItemData?: any;
+  onComplete: (data: any) => void;
+  onBack?: () => void;
+  isLoading?: boolean;
+  isPlannerRestricted?: boolean;
+  dealMode?: "DIRECT" | "PROGRAMMATIC";
+}
+
+interface TargetingCriteria {
+  criteria_type: string;
+  criteria_config: any;
+}
+
+const AGE_GROUPS = [
+  { value: "18-24", label: "18-24 years" },
+  { value: "25-34", label: "25-34 years" },
+  { value: "35-44", label: "35-44 years" },
+  { value: "45-54", label: "45-54 years" },
+  { value: "55-64", label: "55-64 years" },
+  { value: "65+", label: "65+ years" },
+];
+
+const GENDERS = [
+  { value: "male", label: "Male" },
+  { value: "female", label: "Female" },
+  { value: "other", label: "Other" },
+];
+
+const INCOME_BRACKETS = [
+  { value: "low", label: "Low Income" },
+  { value: "lower-middle", label: "Lower-Middle" },
+  { value: "middle", label: "Middle" },
+  { value: "upper-middle", label: "Upper-Middle" },
+  { value: "high", label: "High Income" },
+];
+
+const INTERESTS = [
+  { value: "sports", label: "Sports & Fitness" },
+  { value: "travel", label: "Travel" },
+  { value: "technology", label: "Technology" },
+  { value: "food", label: "Food & Dining" },
+  { value: "entertainment", label: "Entertainment" },
+  { value: "fashion", label: "Fashion" },
+  { value: "automotive", label: "Automotive" },
+];
+
+const AUDIENCE_BEHAVIORS = [
+  { value: "daily_commuter", label: "Daily Commuter" },
+  { value: "frequent_shopper", label: "Frequent Shopper" },
+  { value: "weekend_shopper", label: "Weekend Shopper" },
+  { value: "tourist", label: "Tourist" },
+  { value: "student", label: "Student" },
+  { value: "business_professional", label: "Business Professional" },
+];
+
+const SIGNAL_OPTIONS = [
+  {
+    id: "weather",
+    label: "Weather",
+    description: "Trigger ads based on weather conditions and temperature",
+  },
+  {
+    id: "traffic",
+    label: "Traffic",
+    description: "Adjust delivery based on real-time traffic density",
+  },
+  {
+    id: "aqi",
+    label: "Air Quality Index",
+    description: "Target based on air quality levels",
+  },
+  {
+    id: "time_of_day",
+    label: "Time of Day",
+    description: "Daypart targeting (morning, afternoon, evening)",
+  },
+];
+
+const WEATHER_CONDITIONS = [
+  { value: "sunny", label: "Sunny" },
+  { value: "partly_cloudy", label: "Partly Cloudy" },
+  { value: "cloudy", label: "Cloudy" },
+  { value: "clear", label: "Clear" },
+  { value: "rain", label: "Rain" },
+  { value: "drizzle", label: "Drizzle" },
+  { value: "thunderstorm", label: "Thunderstorm" },
+  { value: "snow", label: "Snow" },
+  { value: "fog", label: "Fog" },
+  { value: "haze", label: "Haze" },
+  { value: "windy", label: "Windy" },
+];
+
+const TEMPERATURE_UNITS = [
+  { value: "celsius", label: "Celsius (°C)" },
+  { value: "fahrenheit", label: "Fahrenheit (°F)" },
+];
+
+const TRAFFIC_DENSITY = [
+  { value: "low", label: "Low" },
+  { value: "moderate", label: "Moderate" },
+  { value: "high", label: "High" },
+];
+
+const AQI_THRESHOLDS = [
+  { value: "good", label: "Good" },
+  { value: "moderate", label: "Moderate" },
+  { value: "unhealthy_sensitive", label: "Unhealthy for Sensitive Groups" },
+  { value: "unhealthy", label: "Unhealthy" },
+  { value: "very_unhealthy", label: "Very Unhealthy" },
+  { value: "hazardous", label: "Hazardous" },
+];
+
+const DAYPARTS = [
+  { value: "morning", label: "Morning (6AM-12PM)" },
+  { value: "afternoon", label: "Afternoon (12PM-6PM)" },
+  { value: "evening", label: "Evening (6PM-10PM)" },
+  { value: "night", label: "Night (10PM-6AM)" },
+];
+
+const getSmartSuggestions = (campaignData: any) => {
+  return [
+    { id: "age_24_34", label: "24 - 34 Years", category: "age" },
+    { id: "age_35_44", label: "35 - 44 Years", category: "age" },
+    { id: "male", label: "Male", category: "gender" },
+    { id: "high_income", label: "High Income", category: "income" },
+    { id: "sports_fitness", label: "Sports & Fitness", category: "interest" },
+    { id: "travel", label: "Travel", category: "interest" },
+    { id: "transit", label: "Transit", category: "venue" },
+    { id: "business", label: "Business", category: "venue" },
+  ];
+};
+
+const POI_OPTIONS = [
+  { value: "accounting", label: "Accounting" },
+  { value: "airport", label: "Airport" },
+  { value: "amusement_park", label: "Amusement Park" },
+  { value: "aquarium", label: "Aquarium" },
+  { value: "atm", label: "ATM" },
+  { value: "bank", label: "Bank" },
+  { value: "bar", label: "Bar" },
+  { value: "beauty_salon", label: "Beauty Salon" },
+  { value: "cafe", label: "Cafe" },
+  { value: "hospital", label: "Hospital" },
+  { value: "mall", label: "Shopping Mall" },
+  { value: "restaurant", label: "Restaurant" },
+  { value: "school", label: "School" },
+  { value: "university", label: "University" },
+];
+
+const MAX_POIS_PER_LOCATION = 5;
+
+export function TargetingStep({
+  data,
+  campaignData,
+  lineItemId,
+  lineItemData,
+  onComplete,
+  onBack,
+  isLoading,
+  formId = "targeting-step-form",
+  isPlannerRestricted = false,
+  dealMode = "DIRECT",
+}: TargetingStepProps & { formId?: string }) {
+  const { t } = useTranslation('lineItems');
+  const { user } = useAuth();
+  const [isGeoMapSheetOpen, setIsGeoMapSheetOpen] = useState(false);
+  const [geographyInput, setGeographyInput] = useState("");
+  
+  // Recommendation submission state
+  const [isSubmittingRecommendation, setIsSubmittingRecommendation] = useState(false);
+  const [recommendationError, setRecommendationError] = useState<string | null>(null);
+
+  const [selectedAgeGroups, setSelectedAgeGroups] = useState<string[]>([]);
+  const [selectedGenders, setSelectedGenders] = useState<string[]>([]);
+  const [selectedIncomeBrackets, setSelectedIncomeBrackets] = useState<
+    string[]
+  >([]);
+  const [selectedInterests, setSelectedInterests] = useState<string[]>([]);
+  const [selectedVenueTypes, setSelectedVenueTypes] = useState<string[]>([]);
+  const [selectedBehaviors, setSelectedBehaviors] = useState<string[]>([]);
+
+  const [geoLocations, setGeoLocations] = useState<any[]>([]);
+  const [geoRadius, setGeoRadius] = useState("5");
+  const [locationSearch, setLocationSearch] = useState("");
+  const [includeAllLocations, setIncludeAllLocations] = useState(true);
+  const [selectedPOIs, setSelectedPOIs] = useState<string[]>([]);
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [addPOIMode, setAddPOIMode] = useState(false);
+  const [selectedLocationIndex, setSelectedLocationIndex] = useState<
+    number | null
+  >(null);
+  const [shouldCenterOnLocation, setShouldCenterOnLocation] = useState(false);
+
+  const handleLocationsChange = (newLocations: any[]) => {
+    setGeoLocations((prev) => {
+      return newLocations.map((newLoc) => {
+        const existingLoc = prev.find((p) => p.id === newLoc.id);
+        if (existingLoc) {
+          return {
+            ...newLoc,
+            properties: {
+              ...newLoc.properties,
+              pois: existingLoc.properties?.pois || [],
+              included: existingLoc.properties?.included !== false,
+            },
+          };
+        }
+        return {
+          ...newLoc,
+          properties: {
+            ...newLoc.properties,
+            pois: newLoc.properties?.pois || [],
+            included: newLoc.properties?.included !== false,
+          },
+        };
+      });
+    });
+  };
+
+  const removeLocation = (locationIndex: number) => {
+    setGeoLocations((prev) => prev.filter((_, idx) => idx !== locationIndex));
+  };
+
+  const toggleLocationIncluded = (locationIndex: number) => {
+    setGeoLocations((prev) =>
+      prev.map((loc, idx) => {
+        if (idx === locationIndex) {
+          const currentIncluded = loc.properties?.included !== false;
+          return {
+            ...loc,
+            properties: {
+              ...loc.properties,
+              included: !currentIncluded,
+            },
+          };
+        }
+        return loc;
+      }),
+    );
+  };
+
+  const handleIncludeAllChange = () => {
+    const newValue = !includeAllLocations;
+    setIncludeAllLocations(newValue);
+    setGeoLocations((prev) =>
+      prev.map((loc) => ({
+        ...loc,
+        properties: {
+          ...loc.properties,
+          included: newValue,
+        },
+      })),
+    );
+  };
+
+  const addPoiToLocation = (locationIndex: number, poiValue: string) => {
+    setGeoLocations((prev) =>
+      prev.map((loc, idx) => {
+        if (idx === locationIndex) {
+          const currentPois = loc.properties?.pois || [];
+          if (currentPois.length >= MAX_POIS_PER_LOCATION) {
+            return loc;
+          }
+          if (currentPois.some((p: any) => p.type === poiValue)) {
+            return loc;
+          }
+          const poiOption = POI_OPTIONS.find((p) => p.value === poiValue);
+          return {
+            ...loc,
+            properties: {
+              ...loc.properties,
+              pois: [
+                ...currentPois,
+                { type: poiValue, label: poiOption?.label || poiValue },
+              ],
+            },
+          };
+        }
+        return loc;
+      }),
+    );
+    setAddPOIMode(false);
+    setSelectedLocationIndex(null);
+  };
+
+  const removePoiFromLocation = (locationIndex: number, poiType: string) => {
+    setGeoLocations((prev) =>
+      prev.map((loc, idx) => {
+        if (idx === locationIndex) {
+          const currentPois = loc.properties?.pois || [];
+          return {
+            ...loc,
+            properties: {
+              ...loc.properties,
+              pois: currentPois.filter((p: any) => p.type !== poiType),
+            },
+          };
+        }
+        return loc;
+      }),
+    );
+  };
+
+  const handleCsvLocationsSelected = (locations: MapMarkerLocation[]) => {
+    const newGeoLocations = locations.map((loc, index) => ({
+      id: `csv-${Date.now()}-${index}`,
+      type: 'Feature' as const,
+      geometry: {
+        type: 'Point' as const,
+        coordinates: [loc.longitude, loc.latitude],
+      },
+      properties: {
+        name: loc.name,
+        address: loc.address || '',
+        included: true,
+        pois: [],
+        radius: loc.radius,
+      },
+      poi: [],
+      enabled: true,
+    }));
+    setGeoLocations([...geoLocations, ...newGeoLocations]);
+  };
+
+  const [selectedSignals, setSelectedSignals] = useState<string[]>([]);
+
+  const [weatherConditions, setWeatherConditions] = useState<string[]>([]);
+  const [temperatureMin, setTemperatureMin] = useState<string>("");
+  const [temperatureMax, setTemperatureMax] = useState<string>("");
+  const [temperatureUnit, setTemperatureUnit] = useState<string>("celsius");
+  const [trafficDensity, setTrafficDensity] = useState<string[]>([]);
+  const [aqiThreshold, setAqiThreshold] = useState<string[]>([]);
+  const [dayparts, setDayparts] = useState<string[]>([]);
+
+  const [preservedCriteria, setPreservedCriteria] = useState<
+    TargetingCriteria[]
+  >([]);
+
+  const [selectedSuggestions, setSelectedSuggestions] = useState<string[]>([]);
+
+  interface VenueTaxonomy {
+    taxonomyId: string;
+    version: string;
+    name: string;
+    path: string;
+    parentId?: string;
+    parentName?: string;
+  }
+
+  const { data: venueTypes = [], isLoading: isLoadingVenues } = useQuery<
+    VenueTaxonomy[]
+  >({
+    queryKey: ["venue-taxonomies"],
+    queryFn: async () => {
+      const accessToken = getAccessToken();
+      const headers: Record<string, string> = {};
+
+      if (accessToken) {
+        headers["Authorization"] = `Bearer ${accessToken}`;
+      }
+
+      const response = await fetch(
+        `${API_CONFIG.inventory}/api/v1/venue-taxonomies`,
+        { headers },
+      );
+      if (!response.ok) {
+        throw new Error("Failed to fetch venue taxonomies");
+      }
+      return response.json();
+    },
+  });
+
+  useEffect(() => {
+    if (!data) return;
+
+    if (data.targeting && typeof data.targeting === "object") {
+      const t = data.targeting;
+      if (t.demographics) {
+        if (t.demographics.ageGroups)
+          setSelectedAgeGroups(t.demographics.ageGroups);
+        if (t.demographics.genders) setSelectedGenders(t.demographics.genders);
+        if (t.demographics.incomeGroups)
+          setSelectedIncomeBrackets(t.demographics.incomeGroups);
+        if (t.demographics.interests)
+          setSelectedInterests(t.demographics.interests);
+        if (t.demographics.audienceBehaviour)
+          setSelectedBehaviors(t.demographics.audienceBehaviour);
+      }
+      if (t.venueTypes) setSelectedVenueTypes(t.venueTypes);
+      if (t.geofencing) {
+        const geoFeatures: any[] = [];
+        if (t.geofencing.geometrics) {
+          t.geofencing.geometrics.forEach((geom: any, idx: number) => {
+            geoFeatures.push({
+              id: `geometry-${idx}`,
+              type: "Feature",
+              properties: {
+                included: geom.included !== false,
+                pois: geom.pois || [],
+              },
+              geometry: {
+                type: geom.type,
+                coordinates: geom.coordinates,
+              },
+            });
+          });
+        }
+        if (t.geofencing.locations) {
+          t.geofencing.locations.forEach((loc: any, idx: number) => {
+            geoFeatures.push({
+              id: `location-${idx}`,
+              type: "Feature",
+              properties: {
+                included: loc.included !== false,
+                name: loc.name,
+                address: loc.address,
+                radius: loc.radius,
+                pois: loc.pois || [],
+              },
+              geometry: {
+                type: "Point",
+                coordinates: [loc.lng, loc.lat],
+              },
+            });
+          });
+        }
+        if (geoFeatures.length > 0) {
+          setGeoLocations(geoFeatures);
+        }
+      }
+
+      if (data.deliveryTargeting?.signals) {
+        const signals = data.deliveryTargeting.signals;
+        const signalIds: string[] = [];
+
+        if (signals.weather) {
+          signalIds.push("weather");
+          if (signals.weather.conditions) {
+            setWeatherConditions(signals.weather.conditions);
+          }
+          if (signals.weather.temperature) {
+            if (signals.weather.temperature.min !== undefined) {
+              setTemperatureMin(signals.weather.temperature.min.toString());
+            }
+            if (signals.weather.temperature.max !== undefined) {
+              setTemperatureMax(signals.weather.temperature.max.toString());
+            }
+            if (signals.weather.temperature.unit) {
+              setTemperatureUnit(signals.weather.temperature.unit);
+            }
+          }
+        }
+
+        if (signals.traffic) {
+          signalIds.push("traffic");
+          if (signals.traffic.density) {
+            const densities = Array.isArray(signals.traffic.density)
+              ? signals.traffic.density
+              : [signals.traffic.density];
+            setTrafficDensity(densities);
+          }
+        }
+
+        if (signals.aqi) {
+          signalIds.push("aqi");
+          if (signals.aqi.threshold) {
+            const thresholds = Array.isArray(signals.aqi.threshold)
+              ? signals.aqi.threshold
+              : [signals.aqi.threshold];
+            setAqiThreshold(thresholds);
+          }
+        }
+
+        if (signals.timeOfDay) {
+          signalIds.push("time_of_day");
+          if (signals.timeOfDay.dayparts) {
+            setDayparts(signals.timeOfDay.dayparts);
+          }
+        }
+
+        // Handle legacy standalone temperature signal (merge into weather)
+        if (signals.temperature && !signals.weather) {
+          if (!signalIds.includes("weather")) {
+            signalIds.push("weather");
+          }
+          if (signals.temperature.min !== undefined) {
+            setTemperatureMin(signals.temperature.min.toString());
+          }
+          if (signals.temperature.max !== undefined) {
+            setTemperatureMax(signals.temperature.max.toString());
+          }
+          if (signals.temperature.unit) {
+            setTemperatureUnit(signals.temperature.unit);
+          }
+        }
+
+        if (signalIds.length > 0) {
+          setSelectedSignals(signalIds);
+        }
+      }
+
+      return;
+    }
+
+    if (Array.isArray(data) && data.length > 0) {
+      const unhandledCriteria: TargetingCriteria[] = [];
+
+      data.forEach((item: any) => {
+        if (item.criteria_type === "demographics") {
+          const config = item.criteria_config;
+          if (config.age_groups) setSelectedAgeGroups(config.age_groups);
+          if (config.genders) setSelectedGenders(config.genders);
+          if (config.income_brackets)
+            setSelectedIncomeBrackets(config.income_brackets);
+          if (config.interests) setSelectedInterests(config.interests);
+        } else if (item.criteria_type === "venue") {
+          const config = item.criteria_config;
+          if (config.venue_types) setSelectedVenueTypes(config.venue_types);
+        } else if (item.criteria_type === "geofencing") {
+          const config = item.criteria_config;
+          if (config.locations) setGeoLocations(config.locations);
+          if (config.radius_km) setGeoRadius(config.radius_km.toString());
+        } else if (item.criteria_type === "search_behavior") {
+          const config = item.criteria_config;
+          if (config.behaviors) setSelectedBehaviors(config.behaviors);
+        } else if (item.criteria_type === "weather") {
+          unhandledCriteria.push(item);
+          setSelectedSignals((prev) =>
+            prev.includes("weather") ? prev : [...prev, "weather"],
+          );
+        } else if (item.criteria_type === "traffic") {
+          unhandledCriteria.push(item);
+          setSelectedSignals((prev) =>
+            prev.includes("traffic") ? prev : [...prev, "traffic"],
+          );
+        } else if (item.criteria_type === "aqi") {
+          unhandledCriteria.push(item);
+          setSelectedSignals((prev) =>
+            prev.includes("aqi") ? prev : [...prev, "aqi"],
+          );
+        } else {
+          unhandledCriteria.push(item);
+        }
+      });
+
+      setPreservedCriteria(unhandledCriteria);
+    }
+  }, [data]);
+
+  const addToList = (
+    value: string,
+    list: string[],
+    setter: (list: string[]) => void,
+  ) => {
+    if (value && !list.includes(value)) {
+      setter([...list, value]);
+    }
+  };
+
+  const removeFromList = (
+    value: string,
+    list: string[],
+    setter: (list: string[]) => void,
+  ) => {
+    setter(list.filter((item) => item !== value));
+  };
+
+  const toggleSignal = (signalId: string) => {
+    if (selectedSignals.includes(signalId)) {
+      setSelectedSignals(selectedSignals.filter((s) => s !== signalId));
+    } else {
+      setSelectedSignals([...selectedSignals, signalId]);
+    }
+  };
+
+  const toggleSuggestion = (id: string) => {
+    if (selectedSuggestions.includes(id)) {
+      setSelectedSuggestions(selectedSuggestions.filter((s) => s !== id));
+    } else {
+      setSelectedSuggestions([...selectedSuggestions, id]);
+    }
+  };
+
+  const applySuggestions = () => {
+    const suggestions = getSmartSuggestions(campaignData);
+    selectedSuggestions.forEach((suggestionId) => {
+      const suggestion = suggestions.find((s) => s.id === suggestionId);
+      if (!suggestion) return;
+
+      if (suggestion.category === "age") {
+        const ageLabel = suggestion.label.replace(" Years", " years");
+        if (!selectedAgeGroups.includes(ageLabel)) {
+          setSelectedAgeGroups((prev) => [...prev, ageLabel]);
+        }
+      } else if (suggestion.category === "gender") {
+        if (!selectedGenders.includes(suggestion.label)) {
+          setSelectedGenders((prev) => [...prev, suggestion.label]);
+        }
+      } else if (suggestion.category === "income") {
+        if (!selectedIncomeBrackets.includes(suggestion.label)) {
+          setSelectedIncomeBrackets((prev) => [...prev, suggestion.label]);
+        }
+      } else if (suggestion.category === "interest") {
+        if (!selectedInterests.includes(suggestion.label)) {
+          setSelectedInterests((prev) => [...prev, suggestion.label]);
+        }
+      } else if (suggestion.category === "venue") {
+        const venueLower = suggestion.label.toLowerCase();
+        if (!selectedVenueTypes.includes(venueLower)) {
+          setSelectedVenueTypes((prev) => [...prev, venueLower]);
+        }
+      }
+    });
+    setSelectedSuggestions([]);
+  };
+
+  const handleNext = () => {
+    const targeting: {
+      demographics?: {
+        ageGroups?: string[];
+        genders?: string[];
+        incomeGroups?: string[];
+        interests?: string[];
+        audienceBehaviour?: string[];
+      };
+      venueTypes?: string[];
+      geofencing?: {
+        geometrics?: any[];
+        locations?: any[];
+      };
+    } = {};
+
+    if (
+      selectedAgeGroups.length > 0 ||
+      selectedGenders.length > 0 ||
+      selectedIncomeBrackets.length > 0 ||
+      selectedInterests.length > 0 ||
+      selectedBehaviors.length > 0
+    ) {
+      targeting.demographics = {};
+      if (selectedAgeGroups.length > 0) {
+        targeting.demographics.ageGroups = selectedAgeGroups;
+      }
+      if (selectedGenders.length > 0) {
+        targeting.demographics.genders = selectedGenders.map((g) =>
+          g.toLowerCase(),
+        );
+      }
+      if (selectedIncomeBrackets.length > 0) {
+        targeting.demographics.incomeGroups = selectedIncomeBrackets;
+      }
+      if (selectedInterests.length > 0) {
+        targeting.demographics.interests = selectedInterests;
+      }
+      if (selectedBehaviors.length > 0) {
+        targeting.demographics.audienceBehaviour = selectedBehaviors;
+      }
+    }
+
+    if (selectedVenueTypes.length > 0) {
+      targeting.venueTypes = selectedVenueTypes;
+    }
+
+    if (geoLocations.length > 0) {
+      const geometries: any[] = [];
+      const locations: any[] = [];
+
+      geoLocations.forEach((feature) => {
+        if (feature.type === "Feature" && feature.geometry) {
+          const geom = feature.geometry;
+          const props = feature.properties || {};
+
+          if (geom.type === "Point") {
+            const locationObj: any = {
+              name: props.name || "Location",
+              lat: geom.coordinates[1],
+              lng: geom.coordinates[0],
+              radius: props.radius || parseFloat(geoRadius) * 1000 || 5000,
+              metadata: props.metadata || {},
+              included: props.included !== false,
+            };
+            if (props.address && props.address.trim() !== "") {
+              locationObj.address = props.address;
+            }
+            if (props.pois && props.pois.length > 0) {
+              locationObj.pois = props.pois;
+            }
+            locations.push(locationObj);
+          } else {
+            const geomObj: any = {
+              type: geom.type,
+              coordinates: geom.coordinates,
+              included: props.included !== false,
+            };
+            if (props.pois && props.pois.length > 0) {
+              geomObj.pois = props.pois;
+            }
+            geometries.push(geomObj);
+          }
+        }
+      });
+
+      if (geometries.length > 0 || locations.length > 0) {
+        targeting.geofencing = {};
+        if (geometries.length > 0) {
+          targeting.geofencing.geometrics = geometries;
+        }
+        if (locations.length > 0) {
+          targeting.geofencing.locations = locations;
+        }
+      }
+    }
+
+    const deliveryTargeting: {
+      signals?: {
+        weather?: {
+          conditions?: string[];
+          temperature?: {
+            min?: number;
+            max?: number;
+            unit?: string;
+          };
+        };
+        traffic?: {
+          density?: string[];
+        };
+        aqi?: {
+          threshold?: string[];
+        };
+        timeOfDay?: {
+          dayparts?: string[];
+        };
+      };
+    } = {};
+
+    if (selectedSignals.length > 0) {
+      deliveryTargeting.signals = {};
+
+      selectedSignals.forEach((signal) => {
+        if (signal === "weather") {
+          const weatherSignal: {
+            conditions?: string[];
+            temperature?: { min?: number; max?: number; unit?: string };
+          } = {};
+
+          if (weatherConditions.length > 0) {
+            weatherSignal.conditions = weatherConditions;
+          }
+
+          const hasTemperatureConfig =
+            temperatureMin !== "" || temperatureMax !== "";
+          if (hasTemperatureConfig) {
+            weatherSignal.temperature = {
+              unit: temperatureUnit,
+            };
+            if (temperatureMin !== "") {
+              weatherSignal.temperature.min = parseFloat(temperatureMin);
+            }
+            if (temperatureMax !== "") {
+              weatherSignal.temperature.max = parseFloat(temperatureMax);
+            }
+          }
+
+          // Always include weather signal when selected
+          deliveryTargeting.signals!.weather =
+            Object.keys(weatherSignal).length > 0 ? weatherSignal : {};
+        } else if (signal === "traffic") {
+          deliveryTargeting.signals!.traffic = {
+            density: trafficDensity.length > 0 ? trafficDensity : [],
+          };
+        } else if (signal === "aqi") {
+          deliveryTargeting.signals!.aqi = {
+            threshold: aqiThreshold.length > 0 ? aqiThreshold : [],
+          };
+        } else if (signal === "time_of_day") {
+          deliveryTargeting.signals!.timeOfDay = {
+            dayparts: dayparts.length > 0 ? dayparts : [],
+          };
+        }
+      });
+    }
+
+    // Build targeting data for onComplete
+    const targetingData = {
+      targeting: Object.keys(targeting).length > 0 ? targeting : undefined,
+      deliveryTargeting:
+        Object.keys(deliveryTargeting).length > 0
+          ? deliveryTargeting
+          : undefined,
+    };
+
+    // If we have a lineItemId, submit recommendation and poll until completed
+    if (lineItemId && lineItemData) {
+      setIsSubmittingRecommendation(true);
+      setRecommendationError(null);
+
+      const formatDateForAPI = (dateStr: string): string => {
+        try {
+          const date = new Date(dateStr);
+          if (isNaN(date.getTime())) {
+            return new Date().toISOString().split('T')[0];
+          }
+          return date.toISOString().split('T')[0];
+        } catch {
+          return new Date().toISOString().split('T')[0];
+        }
+      };
+
+      const country = campaignData?.direct?.marketSelection?.country || 'Japan';
+      const startDate = lineItemData?.startDate || lineItemData?.start_date;
+      const endDate = lineItemData?.endDate || lineItemData?.end_date;
+
+      const recommendationRequest: RecommendationRequest = {
+        country,
+        startDate: formatDateForAPI(startDate),
+        endDate: formatDateForAPI(endDate),
+        companyId: user?.company_id || campaignData?.companyId || campaignData?.company_id,
+        brandId: campaignData?.brandId || campaignData?.brand_id,
+        budget: lineItemData?.direct?.budgetSetup?.budgetAmount,
+        goal: lineItemData?.direct?.campaignGoal?.type as 'IMPRESSIONS' | 'REACH' | 'SOV' | undefined,
+        goalValue: lineItemData?.direct?.campaignGoal?.targetValue,
+      };
+
+      // Add audience targeting (demographics + audience segments)
+      const audienceTargeting: { demographics?: Record<string, string[]>; audienceSegments?: string[] } = {};
+      if (targeting.demographics && Object.keys(targeting.demographics).length > 0) {
+        audienceTargeting.demographics = targeting.demographics as Record<string, string[]>;
+      }
+      // Cast to any to check for audienceSegments which may be present in form data
+      const targetingAny = targeting as any;
+      if (targetingAny.audienceSegments && targetingAny.audienceSegments.length > 0) {
+        audienceTargeting.audienceSegments = targetingAny.audienceSegments;
+      }
+      if (Object.keys(audienceTargeting).length > 0) {
+        recommendationRequest.audienceTargeting = audienceTargeting;
+      }
+
+      // Add geography targeting (cities, states, geofences)
+      const geographyTargeting: { cities?: string[]; states?: string[]; geofences?: any[] } = {};
+      const geofencing = targeting.geofencing as any;
+      
+      // Add cities from targeting
+      if (geofencing?.cities && geofencing.cities.length > 0) {
+        geographyTargeting.cities = geofencing.cities;
+      }
+      
+      // Add states from targeting
+      if (geofencing?.states && geofencing.states.length > 0) {
+        geographyTargeting.states = geofencing.states;
+      }
+      
+      // Add geofences from targeting locations
+      if (geofencing?.locations && geofencing.locations.length > 0) {
+        geographyTargeting.geofences = geofencing.locations.map((loc: any) => ({
+          type: loc.type || 'circle',
+          coordinates: loc.coordinates || [[loc.lng, loc.lat]],
+          centerLng: loc.lng,
+          centerLat: loc.lat,
+        }));
+      }
+      
+      // Add geofences from geometrics (polygons, circles drawn on map)
+      if (geofencing?.geometrics && geofencing.geometrics.length > 0) {
+        const geometricGeofences = geofencing.geometrics.map((geom: any) => ({
+          type: geom.type || 'polygon',
+          coordinates: geom.coordinates || [],
+          centerLng: geom.center?.lng || geom.centerLng || 0,
+          centerLat: geom.center?.lat || geom.centerLat || 0,
+        }));
+        geographyTargeting.geofences = [
+          ...(geographyTargeting.geofences || []),
+          ...geometricGeofences,
+        ];
+      }
+      
+      if (Object.keys(geographyTargeting).length > 0) {
+        recommendationRequest.geographyTargeting = geographyTargeting;
+      }
+
+      const pollRecommendation = async () => {
+        try {
+          const response = await submitRecommendation(lineItemId, recommendationRequest);
+          
+          let finalStatus = response;
+          if (response.status === 'IN_PROGRESS') {
+            finalStatus = await pollUntilCompleted(lineItemId, recommendationRequest);
+          }
+          
+          setIsSubmittingRecommendation(false);
+          
+          console.log('[Targeting] Recommendation completed, runId:', finalStatus.runId, 'Full response:', finalStatus);
+          
+          onComplete({
+            ...targetingData,
+            recommendationRunId: finalStatus.runId,
+          });
+        } catch (error) {
+          console.error('Recommendation submission failed:', error);
+          setIsSubmittingRecommendation(false);
+          setRecommendationError(error instanceof Error ? error.message : 'Failed to get recommendations');
+          
+          onComplete(targetingData);
+        }
+      };
+
+      pollRecommendation();
+    } else {
+      // No lineItemId, proceed without recommendations
+      onComplete(targetingData);
+    }
+  };
+
+  const suggestions = getSmartSuggestions(campaignData);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isSubmittingRecommendation) {
+      handleNext();
+    }
+  };
+
+  const dealCountry = campaignData?.direct?.marketSelection?.country;
+
+  return (
+    <form
+      id={formId}
+      onSubmit={handleFormSubmit}
+      className="flex flex-col h-full relative"
+    >
+      {/* Loading overlay for recommendation submission */}
+      {isSubmittingRecommendation && (
+        <div className="absolute inset-0 bg-white/80 dark:bg-gray-900/80 z-50 flex flex-col items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" />
+          <p className="text-lg font-medium">{t('wizard.common.findingBestInventory')}</p>
+          <p className="text-sm text-muted-foreground mt-1">{t('wizard.common.mayTakeMoment')}</p>
+        </div>
+      )}
+      
+      {recommendationError && (
+        <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <p className="text-sm text-yellow-700">{t('wizard.common.note')} {recommendationError}</p>
+          <p className="text-xs text-yellow-600">{t('wizard.common.proceedingWithStandardSearch')}</p>
+        </div>
+      )}
+      
+      {isPlannerRestricted && (
+        <div className="mb-4 p-3 bg-purple-50 border border-purple-200 rounded-lg">
+          <p className="text-sm text-purple-700 font-medium">{t('wizard.common.readOnly')}</p>
+          <p className="text-xs text-purple-600">{t('wizard.targeting.plannerRestrictedDesc')}</p>
+        </div>
+      )}
+      <div className="flex-1 flex gap-6">
+        <div className="min-w-0 space-y-6 flex-1">
+          <div className="space-y-1">
+            <div className="flex items-center justify-between p-3 bg-mw-neutral-50 dark:bg-mw-neutral-800 rounded-lg">
+              <div className="flex items-center gap-2">
+                <Monitor className="h-4 w-4 text-mw-neutral-500" />
+                <span className="text-sm">Media Type</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">DOOH</span>
+                <Check className="h-4 w-4 text-mw-primary-500" />
+              </div>
+            </div>
+
+            <Collapsible>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4 text-mw-neutral-500" />
+                    <span className="text-sm">{t('wizard.targeting.geofencingTab')}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-mw-neutral-500">{geoLocations.length} locations selected</span>
+                    <Check className="h-4 w-4 text-mw-primary-500" />
+                  </div>
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="px-3 pb-3 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs text-mw-neutral-500">Enter locations</Label>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="gap-1 h-7 text-xs"
+                      onClick={() => setIsGeoMapSheetOpen(true)}
+                    >
+                      <Map className="h-3 w-3" />
+                      Advanced Map
+                    </Button>
+                  </div>
+                  <Input
+                    placeholder="Enter locations (comma separated)"
+                    value={geographyInput || geoLocations.filter((loc: any) => loc.properties?.included !== false).map((loc: any) => loc.properties?.name || "Location").filter(Boolean).join(", ")}
+                    onChange={(e) => {
+                      setGeographyInput(e.target.value);
+                    }}
+                    data-testid="input-geography"
+                  />
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-4 w-4 text-mw-neutral-500" />
+                    <span className="text-sm">{t('wizard.targeting.ageGroup')}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-mw-neutral-500">{selectedAgeGroups.length} selected</span>
+                    <Check className="h-4 w-4 text-mw-primary-500" />
+                  </div>
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className={cn("px-3 pb-3", isPlannerRestricted && "opacity-60 pointer-events-none")}>
+                  <div className="grid grid-cols-3 gap-x-6 gap-y-2">
+                    {AGE_GROUPS.map((age) => (
+                      <div key={age.value} className="flex items-center gap-2">
+                        <Checkbox
+                          id={`age-${age.value}`}
+                          checked={selectedAgeGroups.includes(age.value)}
+                          onChange={() => {
+                            if (selectedAgeGroups.includes(age.value)) {
+                              setSelectedAgeGroups(selectedAgeGroups.filter((a) => a !== age.value));
+                            } else {
+                              setSelectedAgeGroups([...selectedAgeGroups, age.value]);
+                            }
+                          }}
+                          disabled={isPlannerRestricted}
+                        />
+                        <Label htmlFor={`age-${age.value}`} className="text-sm font-normal cursor-pointer">
+                          {age.label}
+                        </Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-4 w-4 text-mw-neutral-500" />
+                    <span className="text-sm">{t('wizard.targeting.gender')}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-mw-neutral-500">{selectedGenders.length} selected</span>
+                    <Check className="h-4 w-4 text-mw-primary-500" />
+                  </div>
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className={cn("px-3 pb-3", isPlannerRestricted && "opacity-60 pointer-events-none")}>
+                  <div className="grid grid-cols-3 gap-x-6 gap-y-2">
+                    {GENDERS.map((gender) => (
+                      <div key={gender.value} className="flex items-center gap-2">
+                        <Checkbox
+                          id={`gender-${gender.value}`}
+                          checked={selectedGenders.includes(gender.value)}
+                          onChange={() => {
+                            if (selectedGenders.includes(gender.value)) {
+                              setSelectedGenders(selectedGenders.filter((g) => g !== gender.value));
+                            } else {
+                              setSelectedGenders([...selectedGenders, gender.value]);
+                            }
+                          }}
+                          disabled={isPlannerRestricted}
+                        />
+                        <Label htmlFor={`gender-${gender.value}`} className="text-sm font-normal cursor-pointer">
+                          {gender.label}
+                        </Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-4 w-4 text-mw-neutral-500" />
+                    <span className="text-sm">{t('wizard.targeting.incomeGroup')}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-mw-neutral-500">{selectedIncomeBrackets.length} selected</span>
+                    <Check className="h-4 w-4 text-mw-primary-500" />
+                  </div>
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className={cn("px-3 pb-3", isPlannerRestricted && "opacity-60 pointer-events-none")}>
+                  <div className="grid grid-cols-3 gap-x-6 gap-y-2">
+                    {INCOME_BRACKETS.map((income) => (
+                      <div key={income.value} className="flex items-center gap-2">
+                        <Checkbox
+                          id={`income-${income.value}`}
+                          checked={selectedIncomeBrackets.includes(income.value)}
+                          onChange={() => {
+                            if (selectedIncomeBrackets.includes(income.value)) {
+                              setSelectedIncomeBrackets(selectedIncomeBrackets.filter((i) => i !== income.value));
+                            } else {
+                              setSelectedIncomeBrackets([...selectedIncomeBrackets, income.value]);
+                            }
+                          }}
+                          disabled={isPlannerRestricted}
+                        />
+                        <Label htmlFor={`income-${income.value}`} className="text-sm font-normal cursor-pointer">
+                          {income.label}
+                        </Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-4 w-4 text-mw-neutral-500" />
+                    <span className="text-sm">{t('wizard.targeting.interestActivities')}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-mw-neutral-500">{selectedInterests.length} selected</span>
+                    <Check className="h-4 w-4 text-mw-primary-500" />
+                  </div>
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className={cn("px-3 pb-3", isPlannerRestricted && "opacity-60 pointer-events-none")}>
+                  <div className="grid grid-cols-3 gap-x-6 gap-y-2">
+                    {INTERESTS.map((interest) => (
+                      <div key={interest.value} className="flex items-center gap-2">
+                        <Checkbox
+                          id={`interest-${interest.value}`}
+                          checked={selectedInterests.includes(interest.value)}
+                          onChange={() => {
+                            if (selectedInterests.includes(interest.value)) {
+                              setSelectedInterests(selectedInterests.filter((i) => i !== interest.value));
+                            } else {
+                              setSelectedInterests([...selectedInterests, interest.value]);
+                            }
+                          }}
+                          disabled={isPlannerRestricted}
+                        />
+                        <Label htmlFor={`interest-${interest.value}`} className="text-sm font-normal cursor-pointer">
+                          {interest.label}
+                        </Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-4 w-4 text-mw-neutral-500" />
+                    <span className="text-sm">{t('wizard.targeting.venueType')}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-mw-neutral-500">{selectedVenueTypes.length} selected</span>
+                    <Check className="h-4 w-4 text-mw-primary-500" />
+                  </div>
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className={cn("px-3 pb-3", isPlannerRestricted && "opacity-60 pointer-events-none")}>
+                  <HierarchicalVenueSelector
+                    label={t('wizard.targeting.venueType')}
+                    venues={venueTypes}
+                    selectedIds={selectedVenueTypes}
+                    onChange={setSelectedVenueTypes}
+                    placeholder={t('wizard.targeting.selectVenueType')}
+                    disabled={isLoadingVenues || isPlannerRestricted}
+                  />
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-4 w-4 text-mw-neutral-500" />
+                    <span className="text-sm">{t('wizard.targeting.audienceBehaviour')}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-mw-neutral-500">{selectedBehaviors.length} selected</span>
+                    <Check className="h-4 w-4 text-mw-primary-500" />
+                  </div>
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className={cn("px-3 pb-3", isPlannerRestricted && "opacity-60 pointer-events-none")}>
+                  <div className="grid grid-cols-3 gap-x-6 gap-y-2">
+                    {AUDIENCE_BEHAVIORS.map((behavior) => (
+                      <div key={behavior.value} className="flex items-center gap-2">
+                        <Checkbox
+                          id={`behavior-${behavior.value}`}
+                          checked={selectedBehaviors.includes(behavior.value)}
+                          onChange={() => {
+                            if (selectedBehaviors.includes(behavior.value)) {
+                              setSelectedBehaviors(selectedBehaviors.filter((b) => b !== behavior.value));
+                            } else {
+                              setSelectedBehaviors([...selectedBehaviors, behavior.value]);
+                            }
+                          }}
+                          disabled={isPlannerRestricted}
+                        />
+                        <Label htmlFor={`behavior-${behavior.value}`} className="text-sm font-normal cursor-pointer">
+                          {behavior.label}
+                        </Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {dealMode === "DIRECT" && (
+              <Collapsible>
+                <CollapsibleTrigger asChild>
+                  <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                    <div className="flex items-center gap-2">
+                      <svg className="h-4 w-4 text-mw-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" />
+                      </svg>
+                      <span className="text-sm">Signals & Triggers</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-500">{selectedSignals.length} selected</span>
+                      <Check className="h-4 w-4 text-mw-primary-500" />
+                    </div>
+                  </div>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="px-3 pb-3 space-y-4">
+                    <MultiSelect
+                      label="Select Signal Types"
+                      placeholder="Select signals & triggers..."
+                      options={SIGNAL_OPTIONS.map((s) => ({
+                        value: s.id,
+                        label: s.label,
+                      }))}
+                      value={selectedSignals}
+                      onChange={(values) => setSelectedSignals(values)}
+                      searchable={true}
+                      showSelectAll={true}
+                    />
+
+                    {selectedSignals.includes("weather") && (
+                  <Card className="p-4 bg-mw-neutral-50 dark:bg-mw-neutral-800/50 border-mw-primary-200">
+                    <h4 className="font-medium text-sm text-mw-neutral-900 dark:text-white mb-4 flex items-center gap-2">
+                      <svg className="h-4 w-4 text-yellow-500" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
+                      </svg>
+                      Weather Configuration
+                    </h4>
+                    <div className="space-y-4">
+                      <MultiSelect
+                        label="Weather Conditions"
+                        placeholder="Select weather conditions..."
+                        options={WEATHER_CONDITIONS}
+                        value={weatherConditions}
+                        onChange={setWeatherConditions}
+                        searchable={true}
+                        showSelectAll={true}
+                      />
+                      <div className="border-t border-mw-neutral-200 dark:border-mw-neutral-700 pt-4">
+                        <Label className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300 mb-3 block">
+                          Temperature Range (Optional)
+                        </Label>
+                        <div className="grid grid-cols-3 gap-3">
+                          <div>
+                            <Label className="text-xs text-mw-neutral-500 mb-1 block">Min</Label>
+                            <Input
+                              type="number"
+                              placeholder="Min"
+                              value={temperatureMin}
+                              onChange={(e) => setTemperatureMin(e.target.value)}
+                              className="h-9"
+                            />
+                          </div>
+                          <div>
+                            <Label className="text-xs text-mw-neutral-500 mb-1 block">Max</Label>
+                            <Input
+                              type="number"
+                              placeholder="Max"
+                              value={temperatureMax}
+                              onChange={(e) => setTemperatureMax(e.target.value)}
+                              className="h-9"
+                            />
+                          </div>
+                          <div>
+                            <Label className="text-xs text-mw-neutral-500 mb-1 block">Unit</Label>
+                            <Select
+                              value={temperatureUnit}
+                              onChange={(e) => setTemperatureUnit(e.target.value)}
+                              options={TEMPERATURE_UNITS}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+
+                {selectedSignals.includes("traffic") && (
+                  <Card className="p-4 bg-mw-neutral-50 dark:bg-mw-neutral-800/50 border-mw-primary-200">
+                    <h4 className="font-medium text-sm text-mw-neutral-900 dark:text-white mb-4 flex items-center gap-2">
+                      <svg className="h-4 w-4 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                      </svg>
+                      Traffic Configuration
+                    </h4>
+                    <MultiSelect
+                      label="Traffic Density"
+                      placeholder="Select traffic density levels..."
+                      options={TRAFFIC_DENSITY}
+                      value={trafficDensity}
+                      onChange={setTrafficDensity}
+                    />
+                  </Card>
+                )}
+
+                {selectedSignals.includes("aqi") && (
+                  <Card className="p-4 bg-mw-neutral-50 dark:bg-mw-neutral-800/50 border-mw-primary-200">
+                    <h4 className="font-medium text-sm text-mw-neutral-900 dark:text-white mb-4 flex items-center gap-2">
+                      <svg className="h-4 w-4 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"/>
+                      </svg>
+                      Air Quality Index Configuration
+                    </h4>
+                    <MultiSelect
+                      label="AQI Threshold"
+                      placeholder="Select AQI thresholds..."
+                      options={AQI_THRESHOLDS}
+                      value={aqiThreshold}
+                      onChange={setAqiThreshold}
+                    />
+                  </Card>
+                )}
+
+                {selectedSignals.includes("time_of_day") && (
+                  <Card className="p-4 bg-mw-neutral-50 dark:bg-mw-neutral-800/50 border-mw-primary-200">
+                    <h4 className="font-medium text-sm text-mw-neutral-900 dark:text-white mb-4 flex items-center gap-2">
+                      <svg className="h-4 w-4 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                      </svg>
+                      Time of Day Configuration
+                    </h4>
+                    <MultiSelect
+                      label="Dayparts"
+                      placeholder="Select dayparts..."
+                      options={DAYPARTS}
+                      value={dayparts}
+                      onChange={setDayparts}
+                      showSelectAll={true}
+                    />
+                  </Card>
+                )}
+
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+          </div>
+        </div>
+
+        <FormInsights
+          insights={[
+            {
+              text: "Demographics help reach the right audience segments",
+              color: "green",
+            },
+            {
+              text: "Geofencing allows precise location-based targeting",
+              color: "blue",
+            },
+            {
+              text: "Signals enable dynamic triggering based on conditions",
+              color: "green",
+            },
+          ]}
+          quickTips={[
+            {
+              text: "Use Smart Suggestions for AI-recommended targeting",
+              color: "blue",
+            },
+            {
+              text: "Combine multiple targeting criteria for precision",
+              color: "green",
+            },
+            {
+              text: "Geofencing is UI-only (API support coming soon)",
+              color: "orange",
+            },
+          ]}
+        />
+      </div>
+
+      <LocationCsvUploadDrawer
+        open={showImportModal}
+        onOpenChange={setShowImportModal}
+        onLocationsSelected={handleCsvLocationsSelected}
+      />
+
+      <Sheet open={isGeoMapSheetOpen} onOpenChange={setIsGeoMapSheetOpen}>
+        <SheetContent side="right" className="w-full sm:max-w-[90vw] lg:max-w-[80vw] overflow-hidden flex flex-col p-0">
+          <div className="flex h-full">
+            <div className="flex-1 relative">
+              <GeofencingMap
+                onLocationsChange={handleLocationsChange}
+                initialLocations={geoLocations}
+                radiusKm={parseFloat(geoRadius) || 5}
+                country={dealCountry}
+                addPOI={addPOIMode}
+                selectedLocation={
+                  selectedLocationIndex !== null
+                    ? geoLocations[selectedLocationIndex]
+                    : null
+                }
+                onCenterOnLocation={shouldCenterOnLocation}
+                onAddPOIChange={(mode) => {
+                  setAddPOIMode(mode);
+                  if (!mode) setSelectedLocationIndex(null);
+                }}
+                onUpdateLocationPOIMetadata={(id, metadata, pois) => {
+                  setGeoLocations((prev) =>
+                    prev.map((loc) => {
+                      if (loc.id === id) {
+                        return {
+                          ...loc,
+                          poi: pois,
+                          metadata: { ...loc.metadata, ...metadata },
+                          properties: {
+                            ...loc.properties,
+                            pois: pois.map((p) => ({
+                              type: p,
+                              label: p,
+                            })),
+                          },
+                        };
+                      }
+                      return loc;
+                    }),
+                  );
+                  setAddPOIMode(false);
+                  setSelectedLocationIndex(null);
+                }}
+              />
+            </div>
+
+            <div className="w-80 border-l border-mw-neutral-200 dark:border-mw-neutral-700 bg-white dark:bg-mw-neutral-900 flex flex-col">
+              <div className="p-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+                <h3 className="font-semibold text-lg text-mw-neutral-900 dark:text-white">
+                  {t('wizard.targeting.selectedLocations')}
+                </h3>
+                <p className="text-sm text-mw-neutral-500 mt-1">
+                  {t('wizard.targeting.clickMapToAddLocations')}
+                </p>
+              </div>
+
+              <div className="p-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                  <Input
+                    placeholder={t('wizard.targeting.searchAddedLocations')}
+                    value={locationSearch}
+                    onChange={(e) => setLocationSearch(e.target.value)}
+                    className="pl-9"
+                  />
+                </div>
+                <div className="flex items-center gap-2 mt-3">
+                  <Checkbox
+                    checked={includeAllLocations}
+                    onChange={handleIncludeAllChange}
+                  />
+                  <Label className="text-sm cursor-pointer">{t('wizard.targeting.includeAll')}</Label>
+                </div>
+              </div>
+
+              <ScrollArea className="flex-1">
+                <div className="p-4 space-y-2">
+                  {geoLocations.length === 0 ? (
+                    <div className="text-center py-8 text-mw-neutral-500">
+                      <MapPin className="h-12 w-12 mx-auto mb-3 opacity-50" />
+                      <p>No locations added yet</p>
+                    </div>
+                  ) : (
+                    geoLocations
+                      .filter((loc: any) => {
+                        if (!locationSearch) return true;
+                        const name = loc.properties?.name || "";
+                        return name.toLowerCase().includes(locationSearch.toLowerCase());
+                      })
+                      .map((location: any, index: number) => {
+                        const locationPois = location.properties?.pois || [];
+                        const canAddMorePois = locationPois.length < MAX_POIS_PER_LOCATION;
+                        const isSelected = selectedLocationIndex === index;
+
+                        const handleLocationCardClick = () => {
+                          setSelectedLocationIndex(index);
+                          setShouldCenterOnLocation(true);
+                          setTimeout(() => setShouldCenterOnLocation(false), 100);
+                        };
+
+                        return (
+                          <div
+                            key={location.id || `loc-${index}`}
+                            className={`border rounded-lg p-3 cursor-pointer transition-colors ${
+                              isSelected
+                                ? "border-mw-primary-500 bg-mw-primary-50 dark:bg-mw-primary-900/20"
+                                : "border-mw-neutral-200 dark:border-mw-neutral-700 hover:border-mw-primary-300"
+                            }`}
+                            onClick={handleLocationCardClick}
+                          >
+                            <div className="flex items-start justify-between mb-2">
+                              <div className="flex items-start gap-2">
+                                <Checkbox
+                                  checked={location.properties?.included !== false}
+                                  onChange={(e) => {
+                                    e.stopPropagation();
+                                    toggleLocationIncluded(index);
+                                  }}
+                                  onClick={(e) => e.stopPropagation()}
+                                  className="mt-0.5"
+                                />
+                                <div>
+                                  <span className="text-sm font-medium block text-mw-neutral-900 dark:text-white">
+                                    {location.properties?.name ||
+                                      t('wizard.targeting.locationNumber', { number: index + 1 })}
+                                  </span>
+                                  <span className="text-xs text-mw-neutral-500">
+                                    {t('wizard.targeting.drawnOnMap', { type: location.geometry?.type || "Point" })}
+                                  </span>
+                                </div>
+                              </div>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 w-8 p-0"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  removeLocation(index);
+                                }}
+                              >
+                                <Trash2 className="h-4 w-4 text-mw-neutral-400 hover:text-red-500" />
+                              </Button>
+                            </div>
+
+                            {locationPois.length > 0 && (
+                              <div
+                                className="flex flex-wrap gap-1 mt-2 mb-2"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                {locationPois.map(
+                                  (poi: { type: string; label: string }) => (
+                                    <Badge
+                                      key={poi.type}
+                                      variant="secondary"
+                                      className="text-xs h-5 px-2 pr-1 flex items-center gap-1"
+                                    >
+                                      {poi.label}
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="sm"
+                                        isIconOnly
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          removePoiFromLocation(index, poi.type);
+                                        }}
+                                        className="h-auto w-auto p-0.5"
+                                      >
+                                        <X className="h-3 w-3" />
+                                      </Button>
+                                    </Badge>
+                                  ),
+                                )}
+                              </div>
+                            )}
+
+                            <div
+                              className="flex items-center justify-between border-t border-mw-neutral-100 dark:border-mw-neutral-700 pt-2 mt-2"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <span className="text-xs text-mw-neutral-500">
+                                {locationPois.length >= MAX_POIS_PER_LOCATION
+                                  ? t('wizard.targeting.limitReached')
+                                  : t('wizard.targeting.canAddUpToPois', { max: MAX_POIS_PER_LOCATION })}
+                              </span>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="h-7 text-xs text-mw-primary-500 border-mw-primary-300"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSelectedLocationIndex(index);
+                                  setAddPOIMode(true);
+                                }}
+                                disabled={!canAddMorePois}
+                              >
+                                <Plus className="h-3 w-3 mr-1" />
+                                Add POI
+                              </Button>
+                            </div>
+                          </div>
+                        );
+                      })
+                  )}
+                </div>
+              </ScrollArea>
+
+              <div className="p-3 border-t border-mw-neutral-200 dark:border-mw-neutral-700">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full text-mw-primary-600 border-mw-primary-300 hover:bg-mw-primary-50"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setShowImportModal(true);
+                  }}
+                >
+                  <Upload className="h-4 w-4 mr-2" />
+                  Import Locations
+                </Button>
+              </div>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </form>
+  );
+}