xertica-ui 2.2.1 → 2.3.0

package/components/examples/DrawingMapExample.tsx

@@ -1,565 +1,565 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Map } from '../ui/map';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
-import { Button } from '../ui/button';
-import { Badge } from '../ui/badge';
-import { Separator } from '../ui/separator';
-import {
-  MousePointer2,
-  MapPin,
-  Circle,
-  Square,
-  Hexagon,
-  Trash2,
-  Save,
-  Undo,
-  Check,
-  X,
-} from 'lucide-react';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../ui/dialog';
-import { ScrollArea } from '../ui/scroll-area';
-
-// Tipos para os modos de desenho
-type DrawingMode = 'marker' | 'circle' | 'rectangle' | 'polygon' | null;
-
-// Tipo para objetos desenhados
-type DrawnShape = {
-  type: DrawingMode;
-  overlay:
-    | google.maps.marker.AdvancedMarkerElement
-    | google.maps.Circle
-    | google.maps.Rectangle
-    | google.maps.Polygon;
-  data?: any;
-};
-
-export interface DrawingMapExampleProps {
-  apiKey?: string;
-}
-
-export function DrawingMapExample({ apiKey }: DrawingMapExampleProps) {
-  const [mapInstance, setMapInstance] = useState<google.maps.Map | null>(null);
-  const [selectedMode, setSelectedMode] = useState<DrawingMode>(null);
-  const [shapes, setShapes] = useState<DrawnShape[]>([]);
-  const [showSaveDialog, setShowSaveDialog] = useState(false);
-  const [savedData, setSavedData] = useState('');
-
-  // Estado para desenho de polígono em andamento
-  const [isDrawingPolygon, setIsDrawingPolygon] = useState(false);
-  const tempPolylineRef = useRef<google.maps.Polyline | null>(null);
-  const polygonPathRef = useRef<google.maps.LatLng[]>([]);
-
-  // Refs para listeners do mapa para limpeza adequada
-  const mapListenersRef = useRef<google.maps.MapsEventListener[]>([]);
-
-  // Cores do Design System (Xertica Primary)
-  const colors = {
-    fill: '#2C275B', // Primary do CSS
-    stroke: '#2C275B',
-    fillOpacity: 0.2,
-    strokeWeight: 2,
-    editable: true,
-    draggable: true,
-  };
-
-  // --- Funções de Desenho (definidas com useCallback para dependências) ---
-
-  const addMarker = useCallback(
-    (position: google.maps.LatLng) => {
-      if (!mapInstance) return;
-
-      // Utilizando AdvancedMarkerElement conforme recomendação (Marker depreciado)
-      const marker = new google.maps.marker.AdvancedMarkerElement({
-        position,
-        map: mapInstance,
-        gmpDraggable: true, // Propriedade correta para AdvancedMarkerElement
-        title: 'Marcador',
-      });
-
-      marker.addListener('dragend', () => {
-        toast.info('Posição do marcador atualizada');
-      });
-
-      const newShape: DrawnShape = { type: 'marker', overlay: marker };
-      setShapes(prev => [...prev, newShape]);
-      toast.success('Marcador adicionado');
-    },
-    [mapInstance]
-  );
-
-  const addCircle = useCallback(
-    (center: google.maps.LatLng) => {
-      if (!mapInstance) return;
-
-      const circle = new google.maps.Circle({
-        map: mapInstance,
-        center: center,
-        radius: 500,
-        fillColor: colors.fill,
-        fillOpacity: colors.fillOpacity,
-        strokeColor: colors.stroke,
-        strokeWeight: colors.strokeWeight,
-        editable: true,
-        draggable: true,
-      });
-
-      const newShape: DrawnShape = { type: 'circle', overlay: circle };
-      setShapes(prev => [...prev, newShape]);
-      toast.success('Círculo adicionado');
-    },
-    [mapInstance, colors]
-  );
-
-  const addRectangle = useCallback(
-    (center: google.maps.LatLng) => {
-      if (!mapInstance) return;
-
-      const offset = 0.005;
-      const bounds = {
-        north: center.lat() + offset,
-        south: center.lat() - offset,
-        east: center.lng() + offset,
-        west: center.lng() - offset,
-      };
-
-      const rectangle = new google.maps.Rectangle({
-        map: mapInstance,
-        bounds: bounds,
-        fillColor: colors.fill,
-        fillOpacity: colors.fillOpacity,
-        strokeColor: colors.stroke,
-        strokeWeight: colors.strokeWeight,
-        editable: true,
-        draggable: true,
-      });
-
-      const newShape: DrawnShape = { type: 'rectangle', overlay: rectangle };
-      setShapes(prev => [...prev, newShape]);
-      toast.success('Retângulo adicionado');
-    },
-    [mapInstance, colors]
-  );
-
-  const cancelPolygonDrawing = useCallback(() => {
-    if (tempPolylineRef.current) {
-      tempPolylineRef.current.setMap(null);
-      tempPolylineRef.current = null;
-    }
-    polygonPathRef.current = [];
-    setIsDrawingPolygon(false);
-  }, []);
-
-  const finishPolygon = useCallback(() => {
-    if (!mapInstance || polygonPathRef.current.length < 3) {
-      if (polygonPathRef.current.length < 3 && polygonPathRef.current.length > 0) {
-        toast.error('Polígono precisa de pelo menos 3 pontos.');
-      }
-      return;
-    }
-
-    const polygon = new google.maps.Polygon({
-      map: mapInstance,
-      paths: polygonPathRef.current,
-      fillColor: colors.fill,
-      fillOpacity: colors.fillOpacity,
-      strokeColor: colors.stroke,
-      strokeWeight: colors.strokeWeight,
-      editable: true,
-      draggable: true,
-    });
-
-    const newShape: DrawnShape = { type: 'polygon', overlay: polygon };
-    setShapes(prev => [...prev, newShape]);
-
-    cancelPolygonDrawing();
-    toast.success('Polígono criado com sucesso!');
-  }, [mapInstance, colors, cancelPolygonDrawing]);
-
-  const addPolygonPoint = useCallback(
-    (point: google.maps.LatLng) => {
-      if (!mapInstance) return;
-
-      if (!isDrawingPolygon) {
-        setIsDrawingPolygon(true);
-        polygonPathRef.current = [point];
-
-        tempPolylineRef.current = new google.maps.Polyline({
-          map: mapInstance,
-          path: polygonPathRef.current,
-          strokeColor: colors.stroke,
-          strokeOpacity: 0.8,
-          strokeWeight: 2,
-          geodesic: true,
-          clickable: false, // Importante: não capturar cliques para não atrapalhar o mapa
-        });
-
-        toast.info('Clique para adicionar pontos. Duplo clique ou botão check para fechar.', {
-          duration: 4000,
-        });
-      } else {
-        polygonPathRef.current.push(point);
-        tempPolylineRef.current?.setPath(polygonPathRef.current);
-      }
-    },
-    [mapInstance, isDrawingPolygon, colors]
-  );
-
-  // --- Setup dos Listeners ---
-
-  // Limpar listeners antigos
-  const clearListeners = () => {
-    mapListenersRef.current.forEach(listener => google.maps.event.removeListener(listener));
-    mapListenersRef.current = [];
-  };
-
-  useEffect(() => {
-    if (!mapInstance) return;
-
-    clearListeners();
-
-    if (!selectedMode) {
-      mapInstance.setOptions({ draggableCursor: 'grab', clickableIcons: true });
-      return;
-    }
-
-    mapInstance.setOptions({
-      draggableCursor: 'crosshair',
-      clickableIcons: false,
-    });
-
-    const clickListener = mapInstance.addListener('click', (e: google.maps.MapMouseEvent) => {
-      if (!e.latLng) return;
-
-      switch (selectedMode) {
-        case 'marker':
-          addMarker(e.latLng);
-          break;
-        case 'circle':
-          addCircle(e.latLng);
-          break;
-        case 'rectangle':
-          addRectangle(e.latLng);
-          break;
-        case 'polygon':
-          addPolygonPoint(e.latLng);
-          break;
-      }
-    });
-
-    mapListenersRef.current.push(clickListener);
-
-    // Listener especial para fechar polígono com duplo clique
-    if (selectedMode === 'polygon') {
-      const dblClickListener = mapInstance.addListener('dblclick', (e: any) => {
-        if (e.domEvent) e.domEvent.stopPropagation();
-        finishPolygon();
-      });
-      mapListenersRef.current.push(dblClickListener);
-    }
-
-    return () => {
-      clearListeners();
-    };
-  }, [
-    mapInstance,
-    selectedMode,
-    addMarker,
-    addCircle,
-    addRectangle,
-    addPolygonPoint,
-    finishPolygon,
-  ]);
-
-  // --- Ações Gerais ---
-
-  const handleModeChange = (mode: DrawingMode) => {
-    if (isDrawingPolygon) {
-      cancelPolygonDrawing();
-    }
-    setSelectedMode(mode);
-  };
-
-  const clearAll = () => {
-    shapes.forEach(shape => {
-      if ('setMap' in shape.overlay) (shape.overlay as any).setMap(null);
-      else (shape.overlay as any).map = null;
-    });
-    setShapes([]);
-    if (isDrawingPolygon) cancelPolygonDrawing();
-    toast.info('Mapa limpo');
-  };
-
-  const undoLast = () => {
-    if (isDrawingPolygon) {
-      if (polygonPathRef.current.length > 0) {
-        polygonPathRef.current.pop();
-        tempPolylineRef.current?.setPath(polygonPathRef.current);
-        if (polygonPathRef.current.length === 0) {
-          cancelPolygonDrawing();
-        }
-      }
-      return;
-    }
-
-    if (shapes.length === 0) return;
-
-    const lastShape = shapes[shapes.length - 1];
-    if ('setMap' in lastShape.overlay) (lastShape.overlay as any).setMap(null);
-    else (lastShape.overlay as any).map = null;
-    setShapes(prev => prev.slice(0, prev.length - 1));
-  };
-
-  const handleSave = () => {
-    if (shapes.length === 0) {
-      toast.error('Adicione desenhos ao mapa antes de salvar.');
-      return;
-    }
-
-    const exportData = shapes.map(s => {
-      let data: any = {};
-
-      if (s.type === 'marker') {
-        const marker = s.overlay as google.maps.marker.AdvancedMarkerElement;
-        const pos = marker.position;
-        // Tratamento seguro para lat/lng que pode ser LatLng object ou LatLngLiteral
-        if (pos) {
-          const lat =
-            typeof (pos as any).lat === 'function' ? (pos as any).lat() : (pos as any).lat;
-          const lng =
-            typeof (pos as any).lng === 'function' ? (pos as any).lng() : (pos as any).lng;
-          data = { lat, lng };
-        }
-      } else if (s.type === 'circle') {
-        const circle = s.overlay as google.maps.Circle;
-        data = {
-          center: { lat: circle.getCenter()?.lat(), lng: circle.getCenter()?.lng() },
-          radius: circle.getRadius(),
-        };
-      } else if (s.type === 'rectangle') {
-        const rect = s.overlay as google.maps.Rectangle;
-        const bounds = rect.getBounds();
-        data = {
-          north: bounds?.getNorthEast().lat(),
-          south: bounds?.getSouthWest().lat(),
-          east: bounds?.getNorthEast().lng(),
-          west: bounds?.getSouthWest().lng(),
-        };
-      } else if (s.type === 'polygon') {
-        const poly = s.overlay as google.maps.Polygon;
-        const path = poly.getPath();
-        data = path.getArray().map(coord => ({ lat: coord.lat(), lng: coord.lng() }));
-      }
-
-      return { type: s.type, data };
-    });
-
-    setSavedData(JSON.stringify(exportData, null, 2));
-    setShowSaveDialog(true);
-  };
-
-  // Botão auxiliar para renderizar itens da toolbar
-  const ToolButton = ({
-    active,
-    onClick,
-    icon: Icon,
-    label,
-  }: {
-    active?: boolean;
-    onClick: () => void;
-    icon: any;
-    label: string;
-  }) => (
-    <Button
-      variant={active ? 'default' : 'ghost'}
-      className={`w-full justify-start gap-3 ${active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
-      onClick={onClick}
-    >
-      <Icon className="h-4 w-4" />
-      <span className="text-sm font-medium">{label}</span>
-    </Button>
-  );
-
-  return (
-    <Card className="h-full border-0 shadow-none md:border md:shadow-sm">
-      <CardHeader className="border-b bg-muted/20 pb-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle>Ferramentas de Desenho</CardTitle>
-            <CardDescription className="mt-1">
-              Crie geometrias personalizadas no mapa
-            </CardDescription>
-          </div>
-          <Badge variant="outline" className="h-6">
-            {shapes.length} {shapes.length === 1 ? 'elemento' : 'elementos'}
-          </Badge>
-        </div>
-      </CardHeader>
-
-      <CardContent className="p-0 flex flex-col md:flex-row h-[600px] bg-background">
-        {/* Sidebar de Ferramentas */}
-        <div className="w-full md:w-64 border-b md:border-b-0 md:border-r bg-muted/10 flex flex-col">
-          <ScrollArea className="flex-1">
-            <div className="p-4 space-y-6">
-              {/* Seção Modos */}
-              <div className="space-y-3">
-                <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">
-                  Ferramentas
-                </h4>
-                <div className="space-y-1">
-                  <ToolButton
-                    active={selectedMode === null}
-                    onClick={() => handleModeChange(null)}
-                    icon={MousePointer2}
-                    label="Navegar"
-                  />
-                  <ToolButton
-                    active={selectedMode === 'marker'}
-                    onClick={() => handleModeChange('marker')}
-                    icon={MapPin}
-                    label="Marcador"
-                  />
-                  <ToolButton
-                    active={selectedMode === 'circle'}
-                    onClick={() => handleModeChange('circle')}
-                    icon={Circle}
-                    label="Círculo"
-                  />
-                  <ToolButton
-                    active={selectedMode === 'rectangle'}
-                    onClick={() => handleModeChange('rectangle')}
-                    icon={Square}
-                    label="Retângulo"
-                  />
-                  <ToolButton
-                    active={selectedMode === 'polygon'}
-                    onClick={() => handleModeChange('polygon')}
-                    icon={Hexagon}
-                    label="Polígono"
-                  />
-                </div>
-              </div>
-
-              <Separator />
-
-              {/* Seção Ações */}
-              <div className="space-y-3">
-                <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">
-                  Ações
-                </h4>
-                <div className="grid grid-cols-2 gap-2">
-                  <Button
-                    variant="outline"
-                    onClick={undoLast}
-                    disabled={shapes.length === 0 && !isDrawingPolygon}
-                    className="w-full"
-                    title="Desfazer último"
-                    aria-label="Desfazer último"
-                  >
-                    <Undo className="h-4 w-4 mr-2" />
-                    Desfazer
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    onClick={clearAll}
-                    disabled={shapes.length === 0 && !isDrawingPolygon}
-                    className="w-full bg-destructive/10 text-destructive hover:bg-destructive hover:text-destructive-foreground border-0 shadow-none"
-                  >
-                    <Trash2 className="h-4 w-4 mr-2" />
-                    Limpar
-                  </Button>
-                </div>
-
-                <Button
-                  variant="default"
-                  onClick={handleSave}
-                  disabled={shapes.length === 0}
-                  className="w-full mt-2"
-                >
-                  <Save className="h-4 w-4 mr-2" />
-                  Salvar GeoJSON
-                </Button>
-              </div>
-            </div>
-          </ScrollArea>
-
-          {/* Status do Polígono (Floating Action na Sidebar em mobile, ou fixo embaixo em desktop) */}
-          {isDrawingPolygon && (
-            <div className="p-4 bg-primary/5 border-t border-primary/10">
-              <div className="flex items-center gap-2 mb-2 text-primary text-xs font-medium">
-                <span className="relative flex h-2 w-2">
-                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
-                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
-                </span>
-                Desenhando Polígono...
-              </div>
-              <div className="flex gap-2">
-                <Button
-                  size="sm"
-                  className="w-full bg-green-600 hover:bg-green-700 text-white"
-                  onClick={finishPolygon}
-                >
-                  <Check className="h-3 w-3 mr-1" /> Concluir
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="w-full"
-                  onClick={cancelPolygonDrawing}
-                >
-                  <X className="h-3 w-3 mr-1" /> Cancelar
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Área do Mapa */}
-        <div className="flex-1 relative bg-muted/5 min-h-[400px]">
-          <Map
-            className="h-full w-full rounded-none md:rounded-br-lg"
-            center={{ lat: -23.5505, lng: -46.6333 }}
-            zoom={13}
-            height="100%"
-            mapContainerClassName="h-full w-full rounded-none md:rounded-br-lg"
-            disableDefaultUI={true}
-            zoomControl={true}
-            onMapLoad={setMapInstance}
-            apiKey={apiKey}
-          />
-
-          {/* Instruções Flutuantes */}
-          {selectedMode && !isDrawingPolygon && (
-            <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-background/90 backdrop-blur border px-4 py-2 rounded-full shadow-sm text-xs font-medium text-muted-foreground pointer-events-none z-10">
-              {selectedMode === 'marker' && 'Clique no mapa para adicionar um marcador'}
-              {selectedMode === 'circle' && 'Clique no mapa para definir o centro do círculo'}
-              {selectedMode === 'rectangle' && 'Clique no mapa para criar um retângulo'}
-              {selectedMode === 'polygon' && 'Clique sequencialmente para desenhar a área'}
-            </div>
-          )}
-        </div>
-
-        {/* Dialog de Salvamento */}
-        <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
-          <DialogContent className="max-w-md">
-            <DialogHeader>
-              <DialogTitle>Dados Geográficos (GeoJSON)</DialogTitle>
-              <DialogDescription>Copie os dados das formas desenhadas abaixo.</DialogDescription>
-            </DialogHeader>
-            <div className="relative mt-2">
-              <pre
-                className="p-4 rounded-lg bg-muted overflow-auto max-h-[300px] text-xs font-mono"
-                data-custom-scrollbar
-              >
-                {savedData}
-              </pre>
-            </div>
-            <div className="flex justify-end mt-4">
-              <Button onClick={() => setShowSaveDialog(false)}>Fechar</Button>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </CardContent>
-    </Card>
-  );
-}
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { Separator } from '../ui/separator';
+import {
+  MousePointer2,
+  MapPin,
+  Circle,
+  Square,
+  Hexagon,
+  Trash2,
+  Save,
+  Undo,
+  Check,
+  X,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../ui/dialog';
+import { ScrollArea } from '../ui/scroll-area';
+
+// Tipos para os modos de desenho
+type DrawingMode = 'marker' | 'circle' | 'rectangle' | 'polygon' | null;
+
+// Tipo para objetos desenhados
+type DrawnShape = {
+  type: DrawingMode;
+  overlay:
+    | google.maps.marker.AdvancedMarkerElement
+    | google.maps.Circle
+    | google.maps.Rectangle
+    | google.maps.Polygon;
+  data?: any;
+};
+
+export interface DrawingMapExampleProps {
+  apiKey?: string;
+}
+
+export function DrawingMapExample({ apiKey }: DrawingMapExampleProps) {
+  const [mapInstance, setMapInstance] = useState<google.maps.Map | null>(null);
+  const [selectedMode, setSelectedMode] = useState<DrawingMode>(null);
+  const [shapes, setShapes] = useState<DrawnShape[]>([]);
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [savedData, setSavedData] = useState('');
+
+  // Estado para desenho de polígono em andamento
+  const [isDrawingPolygon, setIsDrawingPolygon] = useState(false);
+  const tempPolylineRef = useRef<google.maps.Polyline | null>(null);
+  const polygonPathRef = useRef<google.maps.LatLng[]>([]);
+
+  // Refs para listeners do mapa para limpeza adequada
+  const mapListenersRef = useRef<google.maps.MapsEventListener[]>([]);
+
+  // Cores do Design System (Xertica Primary)
+  const colors = {
+    fill: '#2C275B', // Primary do CSS
+    stroke: '#2C275B',
+    fillOpacity: 0.2,
+    strokeWeight: 2,
+    editable: true,
+    draggable: true,
+  };
+
+  // --- Funções de Desenho (definidas com useCallback para dependências) ---
+
+  const addMarker = useCallback(
+    (position: google.maps.LatLng) => {
+      if (!mapInstance) return;
+
+      // Utilizando AdvancedMarkerElement conforme recomendação (Marker depreciado)
+      const marker = new google.maps.marker.AdvancedMarkerElement({
+        position,
+        map: mapInstance,
+        gmpDraggable: true, // Propriedade correta para AdvancedMarkerElement
+        title: 'Marcador',
+      });
+
+      marker.addListener('dragend', () => {
+        toast.info('Posição do marcador atualizada');
+      });
+
+      const newShape: DrawnShape = { type: 'marker', overlay: marker };
+      setShapes(prev => [...prev, newShape]);
+      toast.success('Marcador adicionado');
+    },
+    [mapInstance]
+  );
+
+  const addCircle = useCallback(
+    (center: google.maps.LatLng) => {
+      if (!mapInstance) return;
+
+      const circle = new google.maps.Circle({
+        map: mapInstance,
+        center: center,
+        radius: 500,
+        fillColor: colors.fill,
+        fillOpacity: colors.fillOpacity,
+        strokeColor: colors.stroke,
+        strokeWeight: colors.strokeWeight,
+        editable: true,
+        draggable: true,
+      });
+
+      const newShape: DrawnShape = { type: 'circle', overlay: circle };
+      setShapes(prev => [...prev, newShape]);
+      toast.success('Círculo adicionado');
+    },
+    [mapInstance, colors]
+  );
+
+  const addRectangle = useCallback(
+    (center: google.maps.LatLng) => {
+      if (!mapInstance) return;
+
+      const offset = 0.005;
+      const bounds = {
+        north: center.lat() + offset,
+        south: center.lat() - offset,
+        east: center.lng() + offset,
+        west: center.lng() - offset,
+      };
+
+      const rectangle = new google.maps.Rectangle({
+        map: mapInstance,
+        bounds: bounds,
+        fillColor: colors.fill,
+        fillOpacity: colors.fillOpacity,
+        strokeColor: colors.stroke,
+        strokeWeight: colors.strokeWeight,
+        editable: true,
+        draggable: true,
+      });
+
+      const newShape: DrawnShape = { type: 'rectangle', overlay: rectangle };
+      setShapes(prev => [...prev, newShape]);
+      toast.success('Retângulo adicionado');
+    },
+    [mapInstance, colors]
+  );
+
+  const cancelPolygonDrawing = useCallback(() => {
+    if (tempPolylineRef.current) {
+      tempPolylineRef.current.setMap(null);
+      tempPolylineRef.current = null;
+    }
+    polygonPathRef.current = [];
+    setIsDrawingPolygon(false);
+  }, []);
+
+  const finishPolygon = useCallback(() => {
+    if (!mapInstance || polygonPathRef.current.length < 3) {
+      if (polygonPathRef.current.length < 3 && polygonPathRef.current.length > 0) {
+        toast.error('Polígono precisa de pelo menos 3 pontos.');
+      }
+      return;
+    }
+
+    const polygon = new google.maps.Polygon({
+      map: mapInstance,
+      paths: polygonPathRef.current,
+      fillColor: colors.fill,
+      fillOpacity: colors.fillOpacity,
+      strokeColor: colors.stroke,
+      strokeWeight: colors.strokeWeight,
+      editable: true,
+      draggable: true,
+    });
+
+    const newShape: DrawnShape = { type: 'polygon', overlay: polygon };
+    setShapes(prev => [...prev, newShape]);
+
+    cancelPolygonDrawing();
+    toast.success('Polígono criado com sucesso!');
+  }, [mapInstance, colors, cancelPolygonDrawing]);
+
+  const addPolygonPoint = useCallback(
+    (point: google.maps.LatLng) => {
+      if (!mapInstance) return;
+
+      if (!isDrawingPolygon) {
+        setIsDrawingPolygon(true);
+        polygonPathRef.current = [point];
+
+        tempPolylineRef.current = new google.maps.Polyline({
+          map: mapInstance,
+          path: polygonPathRef.current,
+          strokeColor: colors.stroke,
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          geodesic: true,
+          clickable: false, // Importante: não capturar cliques para não atrapalhar o mapa
+        });
+
+        toast.info('Clique para adicionar pontos. Duplo clique ou botão check para fechar.', {
+          duration: 4000,
+        });
+      } else {
+        polygonPathRef.current.push(point);
+        tempPolylineRef.current?.setPath(polygonPathRef.current);
+      }
+    },
+    [mapInstance, isDrawingPolygon, colors]
+  );
+
+  // --- Setup dos Listeners ---
+
+  // Limpar listeners antigos
+  const clearListeners = () => {
+    mapListenersRef.current.forEach(listener => google.maps.event.removeListener(listener));
+    mapListenersRef.current = [];
+  };
+
+  useEffect(() => {
+    if (!mapInstance) return;
+
+    clearListeners();
+
+    if (!selectedMode) {
+      mapInstance.setOptions({ draggableCursor: 'grab', clickableIcons: true });
+      return;
+    }
+
+    mapInstance.setOptions({
+      draggableCursor: 'crosshair',
+      clickableIcons: false,
+    });
+
+    const clickListener = mapInstance.addListener('click', (e: google.maps.MapMouseEvent) => {
+      if (!e.latLng) return;
+
+      switch (selectedMode) {
+        case 'marker':
+          addMarker(e.latLng);
+          break;
+        case 'circle':
+          addCircle(e.latLng);
+          break;
+        case 'rectangle':
+          addRectangle(e.latLng);
+          break;
+        case 'polygon':
+          addPolygonPoint(e.latLng);
+          break;
+      }
+    });
+
+    mapListenersRef.current.push(clickListener);
+
+    // Listener especial para fechar polígono com duplo clique
+    if (selectedMode === 'polygon') {
+      const dblClickListener = mapInstance.addListener('dblclick', (e: any) => {
+        if (e.domEvent) e.domEvent.stopPropagation();
+        finishPolygon();
+      });
+      mapListenersRef.current.push(dblClickListener);
+    }
+
+    return () => {
+      clearListeners();
+    };
+  }, [
+    mapInstance,
+    selectedMode,
+    addMarker,
+    addCircle,
+    addRectangle,
+    addPolygonPoint,
+    finishPolygon,
+  ]);
+
+  // --- Ações Gerais ---
+
+  const handleModeChange = (mode: DrawingMode) => {
+    if (isDrawingPolygon) {
+      cancelPolygonDrawing();
+    }
+    setSelectedMode(mode);
+  };
+
+  const clearAll = () => {
+    shapes.forEach(shape => {
+      if ('setMap' in shape.overlay) (shape.overlay as any).setMap(null);
+      else (shape.overlay as any).map = null;
+    });
+    setShapes([]);
+    if (isDrawingPolygon) cancelPolygonDrawing();
+    toast.info('Mapa limpo');
+  };
+
+  const undoLast = () => {
+    if (isDrawingPolygon) {
+      if (polygonPathRef.current.length > 0) {
+        polygonPathRef.current.pop();
+        tempPolylineRef.current?.setPath(polygonPathRef.current);
+        if (polygonPathRef.current.length === 0) {
+          cancelPolygonDrawing();
+        }
+      }
+      return;
+    }
+
+    if (shapes.length === 0) return;
+
+    const lastShape = shapes[shapes.length - 1];
+    if ('setMap' in lastShape.overlay) (lastShape.overlay as any).setMap(null);
+    else (lastShape.overlay as any).map = null;
+    setShapes(prev => prev.slice(0, prev.length - 1));
+  };
+
+  const handleSave = () => {
+    if (shapes.length === 0) {
+      toast.error('Adicione desenhos ao mapa antes de salvar.');
+      return;
+    }
+
+    const exportData = shapes.map(s => {
+      let data: any = {};
+
+      if (s.type === 'marker') {
+        const marker = s.overlay as google.maps.marker.AdvancedMarkerElement;
+        const pos = marker.position;
+        // Tratamento seguro para lat/lng que pode ser LatLng object ou LatLngLiteral
+        if (pos) {
+          const lat =
+            typeof (pos as any).lat === 'function' ? (pos as any).lat() : (pos as any).lat;
+          const lng =
+            typeof (pos as any).lng === 'function' ? (pos as any).lng() : (pos as any).lng;
+          data = { lat, lng };
+        }
+      } else if (s.type === 'circle') {
+        const circle = s.overlay as google.maps.Circle;
+        data = {
+          center: { lat: circle.getCenter()?.lat(), lng: circle.getCenter()?.lng() },
+          radius: circle.getRadius(),
+        };
+      } else if (s.type === 'rectangle') {
+        const rect = s.overlay as google.maps.Rectangle;
+        const bounds = rect.getBounds();
+        data = {
+          north: bounds?.getNorthEast().lat(),
+          south: bounds?.getSouthWest().lat(),
+          east: bounds?.getNorthEast().lng(),
+          west: bounds?.getSouthWest().lng(),
+        };
+      } else if (s.type === 'polygon') {
+        const poly = s.overlay as google.maps.Polygon;
+        const path = poly.getPath();
+        data = path.getArray().map(coord => ({ lat: coord.lat(), lng: coord.lng() }));
+      }
+
+      return { type: s.type, data };
+    });
+
+    setSavedData(JSON.stringify(exportData, null, 2));
+    setShowSaveDialog(true);
+  };
+
+  // Botão auxiliar para renderizar itens da toolbar
+  const ToolButton = ({
+    active,
+    onClick,
+    icon: Icon,
+    label,
+  }: {
+    active?: boolean;
+    onClick: () => void;
+    icon: any;
+    label: string;
+  }) => (
+    <Button
+      variant={active ? 'default' : 'ghost'}
+      className={`w-full justify-start gap-3 ${active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
+      onClick={onClick}
+    >
+      <Icon className="h-4 w-4" />
+      <span className="text-sm font-medium">{label}</span>
+    </Button>
+  );
+
+  return (
+    <Card className="h-full border-0 shadow-none md:border md:shadow-sm">
+      <CardHeader className="border-b bg-muted/20 pb-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Ferramentas de Desenho</CardTitle>
+            <CardDescription className="mt-1">
+              Crie geometrias personalizadas no mapa
+            </CardDescription>
+          </div>
+          <Badge variant="outline" className="h-6">
+            {shapes.length} {shapes.length === 1 ? 'elemento' : 'elementos'}
+          </Badge>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-0 flex flex-col md:flex-row h-[600px] bg-background">
+        {/* Sidebar de Ferramentas */}
+        <div className="w-full md:w-64 border-b md:border-b-0 md:border-r bg-muted/10 flex flex-col">
+          <ScrollArea className="flex-1">
+            <div className="p-4 space-y-6">
+              {/* Seção Modos */}
+              <div className="space-y-3">
+                <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">
+                  Ferramentas
+                </h4>
+                <div className="space-y-1">
+                  <ToolButton
+                    active={selectedMode === null}
+                    onClick={() => handleModeChange(null)}
+                    icon={MousePointer2}
+                    label="Navegar"
+                  />
+                  <ToolButton
+                    active={selectedMode === 'marker'}
+                    onClick={() => handleModeChange('marker')}
+                    icon={MapPin}
+                    label="Marcador"
+                  />
+                  <ToolButton
+                    active={selectedMode === 'circle'}
+                    onClick={() => handleModeChange('circle')}
+                    icon={Circle}
+                    label="Círculo"
+                  />
+                  <ToolButton
+                    active={selectedMode === 'rectangle'}
+                    onClick={() => handleModeChange('rectangle')}
+                    icon={Square}
+                    label="Retângulo"
+                  />
+                  <ToolButton
+                    active={selectedMode === 'polygon'}
+                    onClick={() => handleModeChange('polygon')}
+                    icon={Hexagon}
+                    label="Polígono"
+                  />
+                </div>
+              </div>
+
+              <Separator />
+
+              {/* Seção Ações */}
+              <div className="space-y-3">
+                <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2">
+                  Ações
+                </h4>
+                <div className="grid grid-cols-2 gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={undoLast}
+                    disabled={shapes.length === 0 && !isDrawingPolygon}
+                    className="w-full"
+                    title="Desfazer último"
+                    aria-label="Desfazer último"
+                  >
+                    <Undo className="h-4 w-4 mr-2" />
+                    Desfazer
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={clearAll}
+                    disabled={shapes.length === 0 && !isDrawingPolygon}
+                    className="w-full bg-destructive/10 text-destructive hover:bg-destructive hover:text-destructive-foreground border-0 shadow-none"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Limpar
+                  </Button>
+                </div>
+
+                <Button
+                  variant="default"
+                  onClick={handleSave}
+                  disabled={shapes.length === 0}
+                  className="w-full mt-2"
+                >
+                  <Save className="h-4 w-4 mr-2" />
+                  Salvar GeoJSON
+                </Button>
+              </div>
+            </div>
+          </ScrollArea>
+
+          {/* Status do Polígono (Floating Action na Sidebar em mobile, ou fixo embaixo em desktop) */}
+          {isDrawingPolygon && (
+            <div className="p-4 bg-primary/5 border-t border-primary/10">
+              <div className="flex items-center gap-2 mb-2 text-primary text-xs font-medium">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                </span>
+                Desenhando Polígono...
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  className="w-full bg-green-600 hover:bg-green-700 text-white"
+                  onClick={finishPolygon}
+                >
+                  <Check className="h-3 w-3 mr-1" /> Concluir
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="w-full"
+                  onClick={cancelPolygonDrawing}
+                >
+                  <X className="h-3 w-3 mr-1" /> Cancelar
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Área do Mapa */}
+        <div className="flex-1 relative bg-muted/5 min-h-[400px]">
+          <Map
+            className="h-full w-full rounded-none md:rounded-br-lg"
+            center={{ lat: -23.5505, lng: -46.6333 }}
+            zoom={13}
+            height="100%"
+            mapContainerClassName="h-full w-full rounded-none md:rounded-br-lg"
+            disableDefaultUI={true}
+            zoomControl={true}
+            onMapLoad={setMapInstance}
+            apiKey={apiKey}
+          />
+
+          {/* Instruções Flutuantes */}
+          {selectedMode && !isDrawingPolygon && (
+            <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-background/90 backdrop-blur border px-4 py-2 rounded-full shadow-sm text-xs font-medium text-muted-foreground pointer-events-none z-10">
+              {selectedMode === 'marker' && 'Clique no mapa para adicionar um marcador'}
+              {selectedMode === 'circle' && 'Clique no mapa para definir o centro do círculo'}
+              {selectedMode === 'rectangle' && 'Clique no mapa para criar um retângulo'}
+              {selectedMode === 'polygon' && 'Clique sequencialmente para desenhar a área'}
+            </div>
+          )}
+        </div>
+
+        {/* Dialog de Salvamento */}
+        <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>Dados Geográficos (GeoJSON)</DialogTitle>
+              <DialogDescription>Copie os dados das formas desenhadas abaixo.</DialogDescription>
+            </DialogHeader>
+            <div className="relative mt-2">
+              <pre
+                className="p-4 rounded-lg bg-muted overflow-auto max-h-[300px] text-xs font-mono"
+                data-custom-scrollbar
+              >
+                {savedData}
+              </pre>
+            </div>
+            <div className="flex justify-end mt-4">
+              <Button onClick={() => setShowSaveDialog(false)}>Fechar</Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}