import { editarLocalizacao } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { addConclusaoPendencia } from "@/requests/CRUD/ConclusaoPendencia/conclusaoPendencia";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import {
  ICidade,
  IEstado,
  listarCidades,
  listarEstados,
} from "@/requests/common/EstadosCidades/estadosCidades";
import { obterDadosDasCordenadas } from "@/requests/common/Globalsolaratlas/obterDadosDasCordenadas";
import { buscaCep } from "@/services/buscaCep";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { FormatFields, GetForm, GetGallery } from "@/utils";
import {
  calcularDistanciaKm,
  montarEnderecoLoja,
  obterCoordenadasLoja,
} from "@/utils/deslocamento";
import {
  Autocomplete,
  GoogleMap,
  Marker,
  useLoadScript,
} from "@react-google-maps/api";
import html2canvas from "html2canvas";
import { Info, LucideUserSearch, Search } from "lucide-react";
import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { FieldValues } from "react-hook-form";
import { BiRadioCircleMarked } from "react-icons/bi";
import { FaMapLocationDot, FaPlusMinus } from "react-icons/fa6";
import { useReactToPrint } from "react-to-print";
import Button from "../Forms/Button";
import Input from "../Forms/Input";
import InputSelectComponent from "../Forms/InputSelect";
import ModalComponente from "../Modal/ModalComponente";
import { handleSweetAlert } from "../Modal/SweetAlertConfirm";
import LoaderSun from "../common/Loader/LoaderSun";
import { useCamposPersonalizados } from "@/hooks/useCamposPersonalizados";

const libraries: "places"[] = ["places"];

const Map = ({
  idColeta,
  perfil,
  // valorPadrao,
  dadosCard,
  idPendencia,
  setDadosCard,
  setActiveStep,
  // adressViewDefault,
  dadosCliente,
  disabledMap = false,
}: any) => {
  const { valuesSession, usuario } = useAuth();
  const [selectedPlace, setSelectedPlace] = useState<any>(null);
  const [searchLngLat, setSearchLngLat] = useState<any>(null);
  const [currentLocation, setCurrentLocation] = useState<any>(null);
  const [adressView, setAdressView] = useState<any>(
    dadosCard["endereco_instalacao_coleta"],
  );

  const [center, setCenter] = useState<any>({
    lat: 0,
    lng: 0,
    // lat: valorPadrao?.lat || 0,
    // lng: valorPadrao?.lng || 0,
  });
  const [zoom, setZoom] = useState<number>(+dadosCard["zoom_coleta"] || 0);
  const autocompleteRef = useRef<any>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [address, setAddress] = useState<any>();
  const [cep, setCep] = useState<string>(dadosCard?.["cep_coleta"]);
  const [logradouro, setLogradouro] = useState<string>(
    dadosCard?.["logradouro_coleta"],
  );
  const [bairro, setBairro] = useState<string>(dadosCard?.["bairro_coleta"]);
  const { isMobile } = useScreenContext();

  // const [estados, setEstados] = useState<any[]>([]);
  // const [cidades, setCidades] = useState<ICidade[]>([]);

  const [estadoSelecionado, setEstadoSelecionado] = useState<string>(
    dadosCard?.["uf_coleta"],
  );
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>(
    dadosCard?.["cidade_coleta"],
  );
  const [bairroSelecionado, setBairroSelecionado] = useState<string>();
  const [mapKey, setMapkey] = useState(1);
  // const [showControls, setShowControls] = useState(true);
  const [addressData, setAddressData] = useState<any>({});
  const [isOpenModalLatLng, setIsOpenModalLatLng] = useState(false);

  const [mapImage, setMapImage] = useState<any>(dadosCard?.mapImage);

  const [isLoadingMapImage, setIsLoadingMapImage] = useState(
    !dadosCard?.mapImage,
  );

  const { openGallery, setGallery } = GetGallery();
  const { renderCamposPersonalizados, filterCamposPersonalizados } =
    useCamposPersonalizados(idColeta, dadosCard.id);
  const [ghi, setGHI] = useState(
    dadosCard.ghi_diaria_coleta
      ? FormatFields.formatarNumero(dadosCard.ghi_diaria_coleta)
      : "",
  );
  const [ghiMeses, setGhiMeses] = useState<any[]>(
    dadosCard.ghi_mensal_coleta
      ? dadosCard?.ghi_mensal_coleta?.map((e: string) => +e) || []
      : [],
  );

  useEffect(() => {
    setDadosCard((prev: any) => ({
      ...prev,
      ghi_diaria_coleta: FormatFields.desformatarNumeros(ghi),
    }));
  }, [ghi]);

  useEffect(() => {
    setDadosCard((prev: any) => ({
      ...prev,
      ghi_mensal_coleta: ghiMeses.map((e: any) => String(e)),
    }));
  }, [ghiMeses]);

  const [latLng, setLatLng] = useState<any>({});

  // ── Distância Aproximada da Loja (Km, somente IDA) ────────────────────────
  // Calculada automaticamente (linha reta) entre a loja do projeto e o
  // endereço de instalação, e editável pelo usuário.
  const [distanciaLoja, setDistanciaLoja] = useState<string>(
    dadosCard?.distanciaLoja_coleta !== null &&
      dadosCard?.distanciaLoja_coleta !== undefined &&
      dadosCard?.distanciaLoja_coleta !== ""
      ? FormatFields.formatarNumero(dadosCard.distanciaLoja_coleta)
      : "",
  );
  // Enquanto false, o campo é recalculado sempre que as coordenadas mudam.
  const [distanciaLojaEditada, setDistanciaLojaEditada] = useState(
    dadosCard?.distanciaLoja_coleta !== null &&
      dadosCard?.distanciaLoja_coleta !== undefined &&
      dadosCard?.distanciaLoja_coleta !== "",
  );
  const [coordenadasLoja, setCoordenadasLoja] = useState<any>(
    obterCoordenadasLoja(dadosCard),
  );
  const [erroDistanciaLoja, setErroDistanciaLoja] = useState<string>("");

  // Mantém a distância disponível para as demais telas (Custos Extras) sem
  // depender de um novo carregamento do card.
  useEffect(() => {
    setDadosCard((prev: any) => ({
      ...prev,
      distanciaLoja_coleta: FormatFields.desformatarNumeros(distanciaLoja),
    }));
  }, [distanciaLoja]);

  const mapRef = useRef<google.maps.Map | null>(null);
  const [mapTypeId, setMapTypeId] = useState<
    "roadmap" | "satellite" | "hybrid" | "terrain" | string
  >(dadosCard["mapTypeId_coleta"] || "roadmap");

  const { reListarDadosKanban, cidades, setCidades, estados, setEstados } =
    useKanbanContext();
  const { handleSubmit, ...form } = GetForm();
  const { ...formLatLng } = GetForm();
  const isDisabledMap =
    disabledMap || perfil.permite_editar_localizacao_perfil == "0";

  const [inputLatitude, setInputLatitude] = useState("");
  const [inputLongitude, setInputLongitude] = useState("");

  // const zoomInputRef = useRef<any>(null);
  // const [mapRef, setMapRef] = useState<any>();

  const googleMapsApiKey = "AIzaSyDGmjm0xgXvIWV8ZO6tCvTDiN3-AvGzmVc";

  const getAddressLatLng = async (address: string, lat: any, lng: any) => {
    try {
      let response: any = [];
      if (lat && lng) {
        response = await fetch(
          `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${googleMapsApiKey}`,
        );
      } else {
        response = await fetch(
          `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
            address,
          )}&key=${googleMapsApiKey}`,
        );
      }
      const data = await response.json();
      if (data.results && data.results.length > 0) {
        const { lat, lng } = data.results[0].geometry.location;
        setCenter({ lat, lng });
        // setLongLatitude({ lat, lng });
        setAdressView(data.results[0].formatted_address);

        getAddressFromLatLng(lat || 0, lng || 0);
        //   "Endereço de instalação:",
        //   data.results[0].formatted_address
        // );
        return { lat, lng };
      } else {
        throw new Error(
          "Coordenadas não encontradas para o endereço fornecido",
        );
      }
    } catch (error) {
      console.error("Erro ao obter coordenadas:", error);
    }
  };

  const { isLoaded } = useLoadScript({
    googleMapsApiKey,
    libraries,
  });

  const blueMarkerIcon = {
    url: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png",
  };

  // ── Coordenadas da LOJA do projeto ────────────────────────────────────────
  // O cadastro da loja já grava latitude_loja/longitude_loja. Para lojas
  // antigas (sem coordenadas), geocodifica o endereço uma única vez.
  useEffect(() => {
    if (coordenadasLoja) return;

    const enderecoLoja = montarEnderecoLoja({
      endereco_loja: dadosCard?.endereco_loja_coleta,
      numero_loja: dadosCard?.numero_loja_coleta,
      bairro_loja: dadosCard?.bairro_loja_coleta,
      cidade_loja: dadosCard?.cidade_loja_coleta,
      estado_loja: dadosCard?.estado_loja_coleta,
      cep_loja: dadosCard?.cep_loja_coleta,
    });

    if (!enderecoLoja || enderecoLoja === "BR") {
      setErroDistanciaLoja(
        "Não foi possível calcular: a loja do projeto está sem endereço cadastrado.",
      );
      return;
    }

    let cancelado = false;

    fetch(
      `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
        enderecoLoja,
      )}&key=${googleMapsApiKey}`,
    )
      .then((response) => response.json())
      .then((data) => {
        if (cancelado) return;
        const localizacao = data?.results?.[0]?.geometry?.location;
        if (!localizacao) {
          setErroDistanciaLoja(
            "Não foi possível localizar o endereço da loja para calcular a distância.",
          );
          return;
        }
        setErroDistanciaLoja("");
        setCoordenadasLoja({ lat: localizacao.lat, lng: localizacao.lng });
      })
      .catch(() => {
        if (cancelado) return;
        setErroDistanciaLoja(
          "Não foi possível localizar o endereço da loja para calcular a distância.",
        );
      });

    return () => {
      cancelado = true;
    };
  }, [
    coordenadasLoja,
    dadosCard?.endereco_loja_coleta,
    dadosCard?.numero_loja_coleta,
    dadosCard?.bairro_loja_coleta,
    dadosCard?.cidade_loja_coleta,
    dadosCard?.estado_loja_coleta,
    dadosCard?.cep_loja_coleta,
  ]);

  const calcularDistanciaAproximadaLoja = (destino?: {
    lat: any;
    lng: any;
  }) => {
    const coordenadasDestino = destino ||
      (latLng?.lat && latLng?.lng ? latLng : null) || {
        lat: center?.lat,
        lng: center?.lng,
      };

    if (!coordenadasLoja || !coordenadasDestino) return null;

    return calcularDistanciaKm(coordenadasLoja, coordenadasDestino);
  };

  // Recalcula automaticamente enquanto o usuário não tiver alterado o campo.
  useEffect(() => {
    if (distanciaLojaEditada) return;

    const distancia = calcularDistanciaAproximadaLoja();
    if (distancia === null) return;

    setDistanciaLoja(FormatFields.formatarNumero(distancia));
    form.setValue(
      "distanciaLoja_coleta",
      FormatFields.formatarNumero(distancia),
    );
  }, [coordenadasLoja, latLng?.lat, latLng?.lng, center?.lat, center?.lng]);

  useEffect(() => {
    if (dadosCard.latitude != null && dadosCard.longitude != null) {
      const lat = +dadosCard["latitude"];
      const lng = +dadosCard["longitude"];
      setCenter({
        lat,
        lng,
      });
      setLatLng({
        lat,
        lng,
      });

      // getAddressLatLng("", lat, lng);
      return;
    } else {
      const address = `${dadosCard.logradouro_coleta}, ${dadosCard.numero_endereco_coleta} - ${dadosCard.bairro_coleta}, ${dadosCard.cidade_coleta}, ${dadosCard.uf_coleta}, ${dadosCard.cep_coleta}, BR`;

      getAddressLatLng(address, "", "");
    }
  }, []);

  useEffect(() => {
    if (cidades.length === 0) {
      listarCidades().then((res) => {
        setCidades(res);
      });
    }
    if (estados.length === 0) {
      listarEstados().then((res) => {
        setEstados(res);
      });
    }

    if (dadosCard?.caminho_imagem_endereco_coleta && !dadosCard?.mapImage) {
      baixarAwsBase64(dadosCard?.caminho_imagem_endereco_coleta).then(
        (result) => {
          const resultObject =
            typeof result === "string" ? JSON.parse(result) : result;
          const base64Content = resultObject.base64;
          setMapImage(`data:image/png;base64,${base64Content}`);
          setIsLoadingMapImage(false);
          setDadosCard((prev: any) => ({
            ...prev,
            mapImage: `data:image/png;base64,${base64Content}`,
          }));
        },
      );
    } else {
      setIsLoadingMapImage(false);
    }
  }, []);

  useEffect(() => {
    form.setValue("zoom_coleta" as never, zoom as never);
  }, [zoom]);

  // handle place change on search
  const handlePlaceChanged = () => {
    const place = autocompleteRef.current.getPlace();
    setSelectedPlace(place);
    setSearchLngLat({
      lat: place?.geometry?.location.lat(),
      lng: place?.geometry?.location.lng(),
    });
    setCurrentLocation(null);
    getAddressFromLatLng(
      place?.geometry?.location.lat(),
      place?.geometry?.location.lng(),
    );
    setZoom(15);
  };

  // get current location
  const handleGetLocationClick = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords;
          setSelectedPlace(null);
          setSearchLngLat(null);
          setCurrentLocation({ lat: latitude, lng: longitude });
          getAddressFromLatLng(latitude, longitude);

          setZoom(15);
        },
        (error) => {
          console.error(error);
        },
      );
    } else {
      console.error("Geolocation não é suportada nesse navegador!.");
    }
  };

  // on map load
  const onMapLoad = (map: any) => {
    // const controlDiv = document.createElement("div");
    // const controlUI = document.createElement("div");
    // controlUI.innerHTML = "Localização Atual";
    // controlUI.style.backgroundColor = "white";
    // controlUI.style.color = "black";
    // controlUI.style.borderRadius = "3px";
    // controlUI.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
    // controlUI.style.cursor = "pointer";
    // controlUI.style.textAlign = "center";
    // controlUI.style.width = "100px";
    // controlUI.style.height = "50%";
    // controlUI.style.padding = "5px 0";
    // controlUI.addEventListener("click", handleGetLocationClick);
    // if (!isDisabledMap) {
    //   controlDiv.appendChild(controlUI);
    // }

    map.addListener("zoom_changed", () => {
      setZoom(map.zoom);
    });
    setZoom(map.zoom);

    mapRef.current = map;

    // setMapRef(map);

    // map.controls[window.google.maps.ControlPosition.TOP_CENTER].push(
    //   controlDiv
    // );
  };

  const handleMapClick = (event: any) => {
    const { latLng } = event; // Obter as coordenadas do local clicado
    const lat = latLng.lat();
    const lng = latLng.lng();
    setSearchLngLat({ lat, lng }); // Atualizar as coordenadas do local de pesquisa
    setSelectedPlace(null); // Limpar o lugar selecionado (se houver)
    setCurrentLocation(null); // Limpar a localização atual (se houver)
    getAddressFromLatLng(lat, lng);
  };

  async function getAddressFromLatLng(lat: any, lng: any) {
    try {
      const response = await fetch(
        `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${googleMapsApiKey}`,
      );
      const data = await response.json();
      if (data.results && data.results.length > 0) {
        for (let i = 0; i < data.results.length; i++) {
          if (
            !data.plus_code.global_code.includes(
              data.results[i].formatted_address,
            )
          ) {
            const address_components = data.results[i].address_components;
            let numero = "";
            let rua = "";
            let bairro = "";
            let cidade = "";
            let estado = "";
            let cep = "";
            address_components?.map((component: any) => {
              if (component?.types?.includes("street_number")) {
                numero = component.long_name;
              }

              form.setValue("numero_endereco_coleta" as never, numero as never);
              if (component?.types?.includes("route")) {
                rua = component.long_name;
              }
              form.setValue("logradouro_coleta" as never, rua as never);
              if (component?.types?.includes("sublocality_level_1")) {
                bairro = component.long_name;
              }
              setBairroSelecionado(bairro);
              form.setValue("bairro_coleta" as never, bairro as never);
              if (component?.types?.includes("administrative_area_level_2")) {
                cidade = component.long_name;
                // let cidade_coleta = cidades.find((cidade) => cidade.nome_cidade == cidade);
                form.setValue(
                  "cidade_coleta" as never,
                  { value: cidade, label: cidade } as never,
                );
              }
              setCidadeSelecionada(cidade);
              if (component?.types?.includes("administrative_area_level_1")) {
                estado = component.short_name;
                const uf_coleta = estados.find((e) => e.uf_estado == estado);
                form.setValue(
                  "uf_coleta" as never,
                  {
                    label: `${uf_coleta.uf_estado} - ${uf_coleta.nome_estado}`,
                    value: `${uf_coleta.uf_estado}`,
                  } as never,
                );
              }
              setEstadoSelecionado(estado);
              if (component?.types?.includes("postal_code")) {
                cep = component.short_name;
                form.setValue("cep_coleta" as never, cep as never);
              }
            });
            setAddress({
              cidade,
              estado,
              formatted_address: data.results[i].formatted_address,
            });
            setAdressView(data.results[i].formatted_address);
            return {
              cidade,
              estado,
              formatted_address: data.results[i].formatted_address,
            };
          }
        }
        setAddress({
          cidade: "",
          estado: "",
          formatted_address: data.results[0].formatted_address,
        });
        setAdressView(data.results[0].formatted_address);
        return {
          cidade: "",
          estado: "",
          formatted_address: data.results[0].formatted_address,
        };
      } else {
        throw new Error("Endereço não encontrado");
      }
    } catch (error) {
      console.error("Erro ao obter endereço:", error);
      return null;
    }
  }

  const { session } = valuesSession();
  const id_usuario = session.id_usuario;

  const [mapFrame, setMapFrame] = useState<any>();

  // Função para verificar se o mapa está completamente carregado
  const isMapLoaded = () => {
    if (!mapRef.current) {
      // ("❌ Referência do mapa não encontrada");
      return false;
    }

    // Verifica se há tiles carregados
    const mapDiv = mapRef.current.getDiv();
    const images = mapDiv.querySelectorAll("img");
    const tilesLoaded = Array.from(images).every((img) => img.complete);

    return tilesLoaded;
  };

  // Função para aguardar o carregamento completo do mapa
  const waitForMapLoad = async (maxAttempts = 10, interval = 500) => {
    // ("⏳ Aguardando carregamento completo do mapa...");

    for (let i = 0; i < maxAttempts; i++) {
      if (isMapLoaded()) {
        // ("✅ Mapa carregado completamente!");
        return true;
      }
      // (`⌛ Tentativa ${i + 1}/${maxAttempts} - aguardando...`);
      await new Promise((resolve) => setTimeout(resolve, interval));
    }

    // ("⚠️ Timeout: Mapa pode não estar completamente carregado");
    return false;
  };

  // Função para gerar imagem via Google Maps Static API como fallback
  const generateStaticMapImage = async () => {
    const { lat, lng } = searchLngLat || currentLocation || center;

    if (!lat || !lng) {
      console.error("❌ Coordenadas não disponíveis para Static API");
      return null;
    }

    // ("🗺️ Gerando imagem via Google Maps Static API...");

    const staticMapUrl =
      `https://maps.googleapis.com/maps/api/staticmap?` +
      `center=${lat},${lng}` +
      `&zoom=${zoom || 15}` +
      `&size=800x600` +
      `&maptype=${mapTypeId}` +
      `&markers=color:red%7C${lat},${lng}` +
      `&key=${googleMapsApiKey}`;

    try {
      const response = await fetch(staticMapUrl);
      const blob = await response.blob();

      return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.readAsDataURL(blob);
      });
    } catch (error) {
      console.error("❌ Erro ao gerar Static Map:", error);
      return null;
    }
  };

  // Função para capturar screenshot direto do mapa
  const captureMapScreenshot = async () => {
    if (!mapRef.current) {
      console.error("❌ Referência do mapa não encontrada");
      return null;
    }

    // ("🚀 Iniciando captura direta do mapa...");

    // Aguarda o carregamento completo do mapa
    await waitForMapLoad();

    // Aguarda um tempo extra para garantir renderização
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const mapDiv = mapRef.current.getDiv();
    // ("📍 MapDiv encontrado:", !!mapDiv);

    try {
      const canvas = await html2canvas(mapDiv, {
        useCORS: true,
        allowTaint: true,
        scale: 1,
        width: mapDiv.offsetWidth || 800,
        height: mapDiv.offsetHeight || 600,
        logging: true,
        backgroundColor: null, // Mantém transparência
        removeContainer: false,
        foreignObjectRendering: false, // Importante para Google Maps
        onclone: (clonedDoc) => {
          // ("📋 Documento clonado para captura direta");
          // Remove elementos que podem interferir
          const clonedMapDiv = clonedDoc.querySelector(
            "[data-html2canvas-ignore]",
          );
          if (clonedMapDiv) {
            clonedMapDiv.removeAttribute("data-html2canvas-ignore");
          }
        },
      });

      // ("🎨 Canvas criado diretamente do mapa!");
      // ("📏 Dimensões do canvas:", {
      //     width: canvas.width,
      //   height: canvas.height,
      // });

      // Verifica se tem conteúdo
      const ctx = canvas.getContext("2d");
      const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height);
      const hasContent = imageData?.data.some(
        (pixel, index) => index % 4 !== 3 && pixel !== 255,
      );
      // ("🖼️ Canvas tem conteúdo:", hasContent);

      if (!hasContent) {
        // ("⚠️ Canvas sem conteúdo detectado, tentando Static API...");
        return await generateStaticMapImage();
      }

      const image = canvas.toDataURL("image/png");
      // ("📸 Imagem capturada, tamanho:", image.length);

      // Debug: Download automático para verificação
      if (typeof window !== "undefined") {
        const link = document.createElement("a");
        link.download = "debug-direct-map.png";
        link.href = image;
        // ("💾 Link de debug criado");
        // Descomente para download automático:
        // link.click();
      }

      return image;
    } catch (error) {
      console.error("❌ Erro na captura direta:", error);
      // ("🔄 Tentando Static API como fallback...");
      return await generateStaticMapImage();
    }
  };

  const handlePrint = useReactToPrint({
    content: () => mapContainerRef.current,
    copyStyles: true,
    print: async (printIframe: HTMLIFrameElement) => {
      // ("🚀 Iniciando processo de captura...");

      // Tenta captura direta primeiro
      let image = await captureMapScreenshot();

      if (!image) {
        // ("⚠️ Captura direta falhou, tentando método fallback...");

        const document = printIframe.contentDocument;
        if (document) {
          // Aguarda o carregamento completo do mapa antes de capturar
          await waitForMapLoad();

          const html = document.getElementsByTagName("html")[0];
          // ("📍 HTML elemento encontrado:", !!html);

          // Aguarda um pouco extra para garantir que o mapa esteja totalmente renderizado
          await new Promise((resolve) => setTimeout(resolve, 2000));

          try {
            const canvas = await html2canvas(html, {
              useCORS: true,
              allowTaint: true,
              scale: 1,
              width: html.scrollWidth || 800,
              height: html.scrollHeight || 600,
              logging: true,
              backgroundColor: "#ffffff", // Força fundo branco
              onclone: (clonedDoc) => {
                // ("📋 Documento clonado criado (fallback)");
                const clonedHtml = clonedDoc.getElementsByTagName("html")[0];
                if (clonedHtml) {
                  clonedHtml.style.width = "800px";
                  clonedHtml.style.height = "600px";
                  clonedHtml.style.overflow = "visible";
                  clonedHtml.style.backgroundColor = "#ffffff";
                }
              },
            });

            image = canvas.toDataURL("image/png");
            // ("📸 Imagem capturada via fallback");
          } catch (error) {
            console.error("❌ Erro no fallback:", error);
            return;
          }
        } else {
          console.error("❌ Documento do iframe não encontrado");
          return;
        }
      }

      if (image) {
        // ("✅ Imagem capturada com sucesso!");

        setMapImage(image);
        setGallery([
          {
            src: typeof image === "string" ? image : "",
            name: "imagem_endereco.png",
          },
        ]);

        const { lat, lng } = searchLngLat || currentLocation || center;
        // ("🌍 Coordenadas utilizadas:", { lat, lng });

        let data = addressData;

        const base64String =
          typeof image === "string" && image.includes(",")
            ? image.split(",")[1]
            : image;

        if (typeof base64String === "string") {
          const byteCharacters = atob(base64String);
          const byteNumbers = new Array(byteCharacters.length);
          for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);

          const blob = new Blob([byteArray], {
            type: "image/png",
          });
          const file = new File([blob], "imagem_endereco.png", {
            type: "image/png",
          });

          // ("📄 Arquivo criado:", {
          //   name: file.name,
          //   size: file.size,
          //   type: file.type,
          // });

          data["imagem_endereco"] = file;
          data["caminho_imagem_endereco_coleta"] =
            `clientes/${dadosCliente.pasta_cliente}/EnderecoColeta/${dadosCard.id_coleta_cliente}/${file.name}`;

          data["endereco_instalacao_coleta"] = [
            data.logradouro_coleta,
            data.numero_endereco_coleta,
            data.complemento_endereco_coleta,
            data.bairro_coleta,
            data.cidade_coleta,
            data.uf_coleta,
            data.cep_coleta,
            "BR",
          ]
            .filter(Boolean)
            .join(", ");

          const newStatusColeta =
            +dadosCard.status_coleta > 0 ? dadosCard.status_coleta : "1";

          // Distância Aproximada da Loja (Km, somente IDA).
          // Se o usuário não alterou manualmente, recalcula com a coordenada
          // que está efetivamente sendo salva.
          const distanciaLojaSalvar = distanciaLojaEditada
            ? Number(FormatFields.desformatarNumeros(distanciaLoja)) || 0
            : (calcularDistanciaAproximadaLoja({ lat, lng }) ??
              Number(FormatFields.desformatarNumeros(distanciaLoja)) ??
              0);

          data = {
            ...data,
            id_coleta: idColeta,
            status_coleta: newStatusColeta,
            latitude_coleta: lat,
            longitude_coleta: lng,
            distanciaLoja_coleta: Number(distanciaLojaSalvar) || 0,
            id_usuario,
            id_card: dadosCard.id,
          };

          return obterDadosDasCordenadas({
            lat: lat,
            long: lng,
          })
            .then((res) => {
              const ghiRes = res?.annual?.data?.GHI;
              if (ghiRes) {
                setGHI(FormatFields.formatarNumero(+ghiRes / 365));
              }
              setGhiMeses(res?.monthly?.data?.GHI);
              setLatLng({ lat, lng });
              return res?.monthly?.data?.GHI?.join(",");
            })
            .then(async (ghi_mensal_coleta) => {
              data = {
                ...data,
                ghi_mensal_coleta,
                mapTypeId_coleta: mapTypeId,
              };
              const formData = new FormData();
              Object.keys(data).forEach((key) => {
                formData.append(key, data[key]);
              });
              // ("📤 Enviando dados para o servidor...");
              return editarLocalizacao(formData)
                .then(() => {
                  // ("✅ Localização salva com sucesso!");
                  reListarDadosKanban();
                  setCenter({ lat: lat, lng: lng });
                  addConclusaoPendencia({
                    id_coleta: dadosCard.id_coleta_cliente,
                    id_etapa: dadosCard.id_lista,
                    id_pendencia: "1",
                    id_card: dadosCard.id,
                  }).then((res) => {
                    if (setActiveStep) {
                      setActiveStep((prev: any) => prev + 1);
                    }
                  });
                })
                .then(() => {
                  setDadosCard((prev: any) => ({
                    ...prev,
                    ...data,
                    latitude: lat,
                    longitude: lng,
                    ghi_mensal_coleta: ghi_mensal_coleta
                      .split(",")
                      .map((ghi: string) => +ghi),
                    endereco_instalacao_coleta: adressView,
                    mapTypeId_coleta: mapTypeId,
                    mapImage: image,
                  }));
                });
            })
            .catch((error) => {
              console.error("❌ Erro ao processar dados:", error);
            })
            .finally(() => {
              setIsLoading(false);
            });
        } else {
          console.error("❌ base64String não é uma string válida");
          setIsLoading(false);
        }
      } else {
        console.error("❌ Não foi possível capturar a imagem");
        setIsLoading(false);
      }
    },
  });

  useEffect(() => {
    if (Object.keys(addressData).length > 0) {
      setIsLoading(true);

      handlePrint();
    }
  }, [addressData]);

  const handleSaveLocation = async (data: FieldValues) => {
    filterCamposPersonalizados(data, 1);
    if (searchLngLat || currentLocation || center) {
      if (mapContainerRef.current) {
        // ("🎯 Iniciando processo de salvamento da localização...");

        // Verifica se o mapa está carregado antes de capturar
        const mapLoaded = await waitForMapLoad();
        if (!mapLoaded) {
          console.warn(
            "⚠️ Prosseguindo mesmo com mapa possivelmente não carregado",
          );
        }

        setAddressData({ ...data });
      } else {
        console.error("❌ Referência do container do mapa não encontrada");
      }
    } else {
      ("❌ Nenhuma localização selecionada.");
    }
  };
  const [loadingCep, setLoadingCep] = useState(false);
  const handleCEPChange = async (cep: any) => {
    setCep(cep);
    if (cep && cep.length === 9) {
      setLoadingCep(true);

      const formataCep = cep.replace("-", "");
      buscaCep(formataCep)
        .then(async (enderecoInfo: any) => {
          form.setValue(
            "bairro_coleta" as never,
            enderecoInfo!.bairro as never,
          );
          form.setValue(
            "logradouro_coleta" as never,
            enderecoInfo!.rua as never,
          );

          const estado = estados.find((e) =>
            e.uf_estado.includes(enderecoInfo!.estado),
          );
          form.setValue("uf_coleta", {
            label: estado.nome_estado,
            value: estado.uf_estado,
          });

          const cidade = cidades
            .filter((cf) => cf.estado_cidade == estado.id_estado)
            .find((c) => c.nome_cidade.includes(enderecoInfo!.cidade));

          form.setValue("cidade_coleta", {
            label: cidade.nome_cidade,
            value: cidade.id_cidade,
          });
          setLoadingCep(false);
          setBairro(enderecoInfo.bairro || "");
          setLogradouro(enderecoInfo.rua || "");
          setCidadeSelecionada(enderecoInfo!.cidade);

          // Formata o endereço completo
          const enderecoCompleto = `${enderecoInfo!.rua}, ${enderecoInfo!.bairro}, ${enderecoInfo!.cidade} - ${enderecoInfo!.estado}, ${cep}`;
          const inputPesquisa = document.querySelector(
            "input[placeholder='Pesquisar endereço...']",
          ) as HTMLInputElement;

          if (inputPesquisa) {
            inputPesquisa.value = enderecoCompleto;

            // Dispara um evento de input para acionar o Autocomplete
            const event = new Event("input", { bubbles: true });
            inputPesquisa.dispatchEvent(event);

            // Aguarda um curto período para garantir que as sugestões carreguem
            await new Promise((resolve) => setTimeout(resolve, 500));

            // Força um clique no input para abrir a lista de sugestões
            inputPesquisa.focus();
            inputPesquisa.click();

            // Aguarda um pouco para garantir que o Google Places carregue as sugestões
            await new Promise((resolve) => setTimeout(resolve, 500));

            // Seleciona automaticamente o primeiro item sugerido
            if (autocompleteRef.current) {
              const place = autocompleteRef.current.getPlace();
              if (place) {
                handlePlaceChanged(); // Aciona a função que já lida com a seleção do local
              }
            }
          }
        })
        .catch((err) => {
          console.error(err);
          setLoadingCep(false);
        });
    }
  };

  // function searchFormAddress(data: FieldValues) {
  //   const address = `${data.logradouro_coleta}, ${data.numero_endereco_coleta} - ${data.bairro_coleta}, ${data.cidade_coleta}, ${data.uf_coleta}, ${data.cep_coleta}, BR`;

  //   getAddressLatLng(address, "", "");
  // }

  const mapContainerRef = useRef(null);

  function onSubmitFormLatLng(data: any) {
    formLatLng.reset({
      latitude: "",
      longitude: "",
    });
    const lat = +data.latitude;
    const lng = +data.longitude;
    setSearchLngLat({ lat, lng }); // Atualizar as coordenadas do local de pesquisa
    setSelectedPlace(null); // Limpar o lugar selecionado (se houver)
    setCurrentLocation(null); // Limpar a localização atual (se houver)
    getAddressFromLatLng(lat, lng);
    setIsOpenModalLatLng(false);
    setZoom(15);
  }

  function formatNumberValue(value: string, lastValue?: string) {
    // Remove todos os caracteres inválidos (mantém apenas + - . e dígitos)
    value = value.replace(/[^+\-.\d]/g, "");

    // Mantém apenas o primeiro sinal (+ ou -) se existir
    const signMatch = value.match(/^[+\-]/);
    const sign = signMatch ? signMatch[0] : "";

    // Remove todos os sinais + ou - do resto da string
    value = value.replace(/[+\-]/g, "");

    // Divide pelo primeiro ponto encontrado
    const [intPart, ...decimalParts] = value.split(".");

    value =
      sign +
      intPart.replace(/\D/g, "") + // garante que só tenha números na parte inteira
      (decimalParts.length > 0
        ? "." + decimalParts.join("").replace(/\D/g, "")
        : "");

    if (value[0] != "+" && value[0] != "-") {
      if (lastValue && lastValue[0] == "-") {
        value = `+${value}`;
      } else {
        value = `-${value}`;
      }
    }
    return value;
  }

  return isLoaded ? (
    <>
      {isMobile ? (
        <div className="container mx-auto p-4 bg-white rounded-lg shadow-lg">
          <div
            style={{
              display: "grid",
              gridTemplateColumns: isMobile ? "1fr" : "1.5fr 1fr", // Alinha o formulário abaixo no mobile
              gridTemplateRows: isMobile ? "auto auto" : "1fr", // Ajusta a estrutura do grid
              gap: "20px",
              width: "100%",
              backgroundColor: "white",
            }}
          >
            {/* Container para o Mapa */}
            <div style={{ width: "100%" }}>
              {!isDisabledMap && (
                <div className="flex flex-col items-center gap-2">
                  <Button
                    className="flex flex-row items-center gap-1 text-sm py-1 px-2 bg-primary"
                    type="button"
                    onClick={handleGetLocationClick}
                  >
                    <div>Usar Localização Atual</div>
                    <BiRadioCircleMarked size={17} />
                  </Button>
                  <Button
                    className="flex flex-row items-center gap-1 text-sm py-1 px-2 bg-primary"
                    type="button"
                    onClick={() => {
                      const address = `${dadosCliente.rua_cliente}, ${dadosCliente.nro_cliente} - ${dadosCliente.bairro_cliente}, ${dadosCliente.cidade_cliente}, ${dadosCliente.estado_cliente}, ${dadosCliente.cep_cliente}, BR`;

                      getAddressLatLng(address, "", "").then((res) => {
                        if (res) {
                          const { lat, lng } = res;

                          // setSelectedPlace(null);
                          // setSearchLngLat(null);
                          setCurrentLocation({ lat, lng });
                          // getAddressFromLatLng(latitude, longitude);
                          setZoom(15);
                        }
                      });
                    }}
                  >
                    <div>Usar Endereço do Contato</div>
                    <LucideUserSearch size={17} />
                  </Button>

                  <Button
                    className="flex flex-row items-center gap-1 text-sm py-1 px-2 bg-primary"
                    type="button"
                    onClick={() => {
                      setIsOpenModalLatLng(true);
                    }}
                  >
                    <div>Informar Coordenadas (lat e lng)</div>
                    <FaMapLocationDot size={17} />
                  </Button>

                  <ModalComponente
                    hasForm={false}
                    opened={isOpenModalLatLng}
                    onClose={() => setIsOpenModalLatLng(false)}
                    header={"Informar Localização"}
                    hasSaveButton={false}
                  >
                    <div className="flex flex-col items-center">
                      <div className="flex flex-col gap-2 w-fit">
                        <div className="flex flex-col justify-center items-center gap-2">
                          <Input
                            name="latitude"
                            label="Latitude"
                            formulario={formLatLng}
                            prefixWidth="35px"
                            prefix={
                              <div
                                title="Alternar sinal"
                                className="cursor-pointer bg-primary text-white p-1 rounded"
                                onClick={() => {
                                  setInputLatitude((prev) => {
                                    if (prev) {
                                      let value = prev.split("");
                                      value.splice(
                                        0,
                                        1,
                                        value[0] == "+" ? "-" : "+",
                                      );
                                      prev = value.join("");
                                      formLatLng.setValue("latitude", prev);
                                      return prev;
                                    } else {
                                      return prev;
                                    }
                                  });
                                }}
                              >
                                <FaPlusMinus size={15} />
                              </div>
                            }
                            onChange={(e) => {
                              let value = e.target.value;
                              if (value) {
                                value = formatNumberValue(value, inputLatitude);
                              }
                              formLatLng.setValue("latitude", value);
                              setInputLatitude(value);
                            }}
                          />
                          <Input
                            name="longitude"
                            label="Longitude"
                            formulario={formLatLng}
                            prefixWidth="35px"
                            prefix={
                              <div
                                title="Alternar sinal"
                                className="cursor-pointer bg-primary text-white p-1 rounded"
                                onClick={() => {
                                  setInputLongitude((prev) => {
                                    if (prev) {
                                      let value = prev.split("");
                                      value.splice(
                                        0,
                                        1,
                                        value[0] == "+" ? "-" : "+",
                                      );
                                      prev = value.join("");
                                      formLatLng.setValue("longitude", prev);
                                      return prev;
                                    } else {
                                      return prev;
                                    }
                                  });
                                }}
                              >
                                <FaPlusMinus size={15} />
                              </div>
                            }
                            onChange={(e) => {
                              let value = e.target.value;
                              if (value) {
                                value = formatNumberValue(
                                  value,
                                  inputLongitude,
                                );
                              }
                              formLatLng.setValue("longitude", value);
                              setInputLongitude(value);
                            }}
                          />
                        </div>
                        <div className="flex flex-row justify-end gap-2">
                          <Button
                            type="button"
                            onClick={formLatLng.handleSubmit(
                              onSubmitFormLatLng,
                            )}
                          >
                            Obter
                          </Button>
                          <Button
                            type="button"
                            className="bg-error"
                            onClick={() => {
                              formLatLng.reset({
                                latitude: "",
                                longitude: "",
                              });
                              setInputLatitude("");
                              setInputLongitude("");
                              setIsOpenModalLatLng(false);
                            }}
                          >
                            Cancelar
                          </Button>
                        </div>
                      </div>
                    </div>
                  </ModalComponente>
                </div>
              )}
              <div className="w-full mb-4 md:shadow-md max-sm:bg-gray max-sm:rounded-full md:shadow-t-lg p-4">
                <Autocomplete
                  onLoad={(autocomplete) => {
                    autocompleteRef.current = autocomplete;
                  }}
                  onPlaceChanged={handlePlaceChanged}
                  options={{
                    fields: ["address_components", "geometry", "name"],
                  }}
                >
                  <div
                    className={`flex items-center ${isDisabledMap && "hidden"}`}
                  >
                    <Search size={15} />
                    <input
                      type="text"
                      placeholder="Pesquisar endereço..."
                      className="w-full dark:bg-form-input max-sm:bg-gray max-sm:text-xs rounded-sm px-2"
                      onInput={(e: any) => {
                        const inputEl = e.target; // Acesso ao input real
                        const originalValue = inputEl.value;

                        // Se for um CEP sem hífen, insere o hífen temporariamente
                        if (/^\d{5,8}/.test(originalValue)) {
                          inputEl.value = originalValue.replace(
                            /^(\d{5})(\d)/,
                            "$1-$2",
                          );

                          const event = new Event("input", { bubbles: true });
                          inputEl.dispatchEvent(event);

                          inputEl.value = originalValue;
                        }
                      }}
                    />
                  </div>
                </Autocomplete>
              </div>
              <div className="relative overflow-hidden">
                <GoogleMap
                  zoom={zoom || +dadosCard["zoom_coleta"]}
                  center={currentLocation || searchLngLat || center}
                  mapContainerClassName="map"
                  mapContainerStyle={{
                    width: "100%",
                    height: isMobile ? "50vh" : "70vh", // Reduz o tamanho no mobile
                    borderRadius: isMobile ? "8px" : "",
                    // position: "unset",
                  }}
                  onLoad={onMapLoad}
                  onClick={(e) => {
                    if (!isDisabledMap) {
                      handleMapClick(e);
                    }
                  }}
                  options={{
                    mapTypeId,
                  }}
                  onMapTypeIdChanged={() => {
                    const currentMapTypeId = mapRef?.current?.getMapTypeId();
                    if (currentMapTypeId) {
                      setMapTypeId(currentMapTypeId);
                    }
                  }}
                >
                  {searchLngLat && <Marker position={searchLngLat} />}
                  {selectedPlace && <Marker position={searchLngLat} />}
                  {currentLocation && <Marker position={currentLocation} />}
                  {dadosCard.latitude && dadosCard.longitude && (
                    <Marker position={center} icon={blueMarkerIcon} />
                  )}
                </GoogleMap>
              </div>
              <div className="dark:text-white text-sm mt-2">
                Localização Atual: {adressView}
              </div>
              <Image
                src={mapImage}
                width={500}
                height={500}
                alt="Map Address Image"
              />
            </div>

            {/* Container para o Formulário */}
            <div className="mt-2 ">
              <form
                onSubmit={handleSubmit(handleSaveLocation)}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: "2px",
                  width: "100%",
                }}
              >
                <div className="max-sm:px-2 h-100 overflow-y-auto mt-4">
                  {adressView && (
                    <>
                      {loadingCep && (
                        <span className="text-xs text-gray-500 mt-1 block">
                          Buscando endereço...
                        </span>
                      )}

                      <Input
                        name="cep_coleta"
                        label="CEP"
                        formulario={form}
                        required
                        mascara="cep"
                        error="Informe o CEP"
                        onChange={(e: any) => {
                          handleCEPChange(e.target.value);
                        }}
                        defaultValue={dadosCard?.["cep_coleta"]}
                        disabled={isDisabledMap || loadingCep}
                      />
                      <Input
                        name="logradouro_coleta"
                        label="Logradouro"
                        formulario={form}
                        required
                        error="Informe o Logradouro"
                        defaultValue={dadosCard?.["logradouro_coleta"]}
                        disabled={
                          isDisabledMap
                          // ||
                          // (cep != "" && cep != "0" && logradouro != "")
                        }
                      />
                      <Input
                        name="numero_endereco_coleta"
                        label="Número"
                        formulario={form}
                        required
                        error="Informe o Número"
                        defaultValue={dadosCard?.["numero_endereco_coleta"]}
                        disabled={isDisabledMap}
                      />
                      <Input
                        name="complemento_endereco_coleta"
                        label="Complemento"
                        formulario={form}
                        defaultValue={
                          dadosCard?.["complemento_endereco_coleta"]
                        }
                        disabled={isDisabledMap}
                      />
                      <Input
                        name="bairro_coleta"
                        label="Bairro"
                        formulario={form}
                        required
                        error="Informe o Bairro"
                        defaultValue={dadosCard?.["bairro_coleta"]}
                        disabled={
                          isDisabledMap
                          // ||
                          // (cep != "" && cep != "0" && bairro != "")
                        }
                      />
                      <InputSelectComponent
                        name="cidade_coleta"
                        label="Cidade"
                        options={cidades
                          .filter(
                            (cidade) =>
                              cidade.estado_cidade ===
                              estados.find(
                                (estado) =>
                                  estado.uf_estado === estadoSelecionado,
                              )?.id_estado,
                          )
                          .map((cidade: ICidade) => ({
                            label: cidade.nome_cidade,
                            value: cidade.nome_cidade,
                          }))}
                        formulario={form}
                        required
                        error="Selecione a Cidade"
                        defaultValue={dadosCard?.["cidade_coleta"]}
                        disabled={
                          isDisabledMap
                          // ||
                          // (cep != "" && cep != "0" && cidadeSelecionada != "")
                        }
                        onChange={(e: any) => {
                          setCidadeSelecionada(e?.value);
                        }}
                      />
                      <InputSelectComponent
                        name="uf_coleta"
                        label="UF"
                        options={estados.map((estado: IEstado) => ({
                          label: `${estado.uf_estado} - ${estado.nome_estado}`,
                          value: `${estado.uf_estado}`,
                        }))}
                        formulario={form}
                        required
                        error="Selecione o estado"
                        defaultValue={dadosCard?.["uf_coleta"]}
                        disabled={
                          isDisabledMap
                          // ||
                          // (cep != "" && cep != "0" && estadoSelecionado != "")
                        }
                        onChange={(e: any) => {
                          setEstadoSelecionado(e?.value);
                        }}
                      />
                      <Input
                        name="zoom_coleta"
                        label="Zoom"
                        formulario={form}
                        required
                        error="Informe o Zoom"
                        onChange={(e) => setZoom(+e.target.value)}
                        onKeyUp={(e: any) => {
                          if (e.key === "ArrowUp" && e.target.value) {
                            setZoom(+e.target.value + 1);
                          }
                          if (e.key === "ArrowDown" && e.target.value) {
                            setZoom(+e.target.value - 1);
                          }
                        }}
                        defaultValue={dadosCard?.["zoom_coleta"]}
                        disabled={isDisabledMap}
                      />
                    </>
                  )}
                </div>

                {!isDisabledMap && adressView && (
                  <Button
                    loading={isLoading}
                    className="mt-4  max-sm:w-full max-sm:h-11 text-sm px-9"
                  >
                    Salvar Endereço de Instalação
                  </Button>
                )}
              </form>
            </div>
          </div>
        </div>
      ) : (
        <div className="container mx-auto p-4 bg-white rounded-lg shadow-lg">
          <div
            style={{
              display: "grid",
              gridTemplateColumns: isMobile ? "1fr" : "1.5fr 0.5fr", // Ajuste de proporção para mobile/desktop
              gap: "20px",
              alignItems: "start", // Alinhamento ao topo
              width: "100%",
              backgroundColor: "white",
            }}
          >
            {/* Container para o Mapa */}
            <div style={{ width: "100%" }}>
              {!isDisabledMap && (
                <div className="flex flex-row items-center gap-2">
                  <Button
                    className="flex flex-row items-center gap-1 text-sm py-1 px-2 bg-primary"
                    type="button"
                    onClick={handleGetLocationClick}
                  >
                    <div>Usar Localização Atual</div>
                    <BiRadioCircleMarked size={17} />
                  </Button>
                  <Button
                    className="flex flex-row items-center gap-1 text-sm py-1 px-2 bg-primary"
                    type="button"
                    onClick={() => {
                      const address = `${dadosCliente.rua_cliente}, ${dadosCliente.nro_cliente} - ${dadosCliente.bairro_cliente}, ${dadosCliente.cidade_cliente}, ${dadosCliente.estado_cliente}, ${dadosCliente.cep_cliente}, BR`;

                      getAddressLatLng(address, "", "").then((res) => {
                        if (res) {
                          const { lat, lng } = res;

                          // setSelectedPlace(null);
                          // setSearchLngLat(null);
                          setCurrentLocation({ lat, lng });
                          // getAddressFromLatLng(latitude, longitude);
                          setZoom(15);
                        }
                      });
                    }}
                  >
                    <div>Usar Endereço do Contato</div>
                    <LucideUserSearch size={17} />
                  </Button>

                  <Button
                    className="flex flex-row items-center gap-1 text-sm py-1 px-2 bg-primary"
                    type="button"
                    onClick={() => {
                      setIsOpenModalLatLng(true);
                    }}
                  >
                    <div>Informar Coordenadas (lat e lng)</div>
                    <FaMapLocationDot size={17} />
                  </Button>

                  <ModalComponente
                    hasForm={false}
                    opened={isOpenModalLatLng}
                    onClose={() => setIsOpenModalLatLng(false)}
                    header={"Informar Localização"}
                    hasSaveButton={false}
                  >
                    <div className="flex flex-col items-center">
                      <div className="flex flex-col gap-2 w-fit">
                        <div className="flex flex-col justify-center items-center gap-2">
                          <Input
                            name="latitude"
                            label="Latitude"
                            formulario={formLatLng}
                            prefixWidth="35px"
                            prefix={
                              <div
                                title="Alternar sinal"
                                className="cursor-pointer bg-primary text-white p-1 rounded"
                                onClick={() => {
                                  setInputLatitude((prev) => {
                                    if (prev) {
                                      let value = prev.split("");
                                      value.splice(
                                        0,
                                        1,
                                        value[0] == "+" ? "-" : "+",
                                      );
                                      prev = value.join("");
                                      formLatLng.setValue("latitude", prev);
                                      return prev;
                                    } else {
                                      return prev;
                                    }
                                  });
                                }}
                              >
                                <FaPlusMinus size={15} />
                              </div>
                            }
                            onChange={(e) => {
                              let value = e.target.value;
                              if (value) {
                                value = formatNumberValue(value, inputLatitude);
                              }
                              formLatLng.setValue("latitude", value);
                              setInputLatitude(value);
                            }}
                          />
                          <Input
                            name="longitude"
                            label="Longitude"
                            formulario={formLatLng}
                            prefixWidth="35px"
                            prefix={
                              <div
                                title="Alternar sinal"
                                className="cursor-pointer bg-primary text-white p-1 rounded"
                                onClick={() => {
                                  setInputLongitude((prev) => {
                                    if (prev) {
                                      let value = prev.split("");
                                      value.splice(
                                        0,
                                        1,
                                        value[0] == "+" ? "-" : "+",
                                      );
                                      prev = value.join("");
                                      formLatLng.setValue("longitude", prev);
                                      return prev;
                                    } else {
                                      return prev;
                                    }
                                  });
                                }}
                              >
                                <FaPlusMinus size={15} />
                              </div>
                            }
                            onChange={(e) => {
                              let value = e.target.value;
                              if (value) {
                                value = formatNumberValue(
                                  value,
                                  inputLongitude,
                                );
                              }
                              formLatLng.setValue("longitude", value);
                              setInputLongitude(value);
                            }}
                          />
                        </div>
                        <div className="flex flex-row justify-end gap-2">
                          <Button
                            type="button"
                            onClick={formLatLng.handleSubmit(
                              onSubmitFormLatLng,
                            )}
                          >
                            Obter
                          </Button>
                          <Button
                            type="button"
                            className="bg-error"
                            onClick={() => {
                              formLatLng.reset({
                                latitude: "",
                                longitude: "",
                              });
                              setInputLatitude("");
                              setInputLongitude("");
                              setIsOpenModalLatLng(false);
                            }}
                          >
                            Cancelar
                          </Button>
                        </div>
                      </div>
                    </div>
                  </ModalComponente>
                </div>
              )}
              <div className="w-full mb-4 shadow-md shadow-t-lg p-4">
                <Autocomplete
                  onLoad={(autocomplete) => {
                    autocompleteRef.current = autocomplete;
                  }}
                  onPlaceChanged={handlePlaceChanged}
                  options={{
                    fields: ["address_components", "geometry", "name"],
                  }}
                >
                  <div
                    className={`flex items-center ${isDisabledMap && "hidden"}`}
                  >
                    <Search size={15} />
                    <input
                      type="text"
                      placeholder="Pesquisar endereço..."
                      className="w-full dark:bg-form-input rounded-sm px-2"
                      onInput={(e: any) => {
                        const inputEl = e.target; // Acesso ao input real
                        const originalValue = inputEl.value;

                        // Se for um CEP sem hífen, insere o hífen temporariamente
                        if (/^\d{5,8}/.test(originalValue)) {
                          inputEl.value = originalValue.replace(
                            /^(\d{5})(\d)/,
                            "$1-$2",
                          );

                          const event = new Event("input", { bubbles: true });
                          inputEl.dispatchEvent(event);

                          inputEl.value = originalValue;
                        }
                      }}
                    />
                  </div>
                </Autocomplete>
              </div>
              <div className="relative overflow-hidden">
                <GoogleMap
                  zoom={zoom || +dadosCard["zoom_coleta"]}
                  center={currentLocation || searchLngLat || center}
                  mapContainerStyle={{
                    width: "100%",
                    // height: showControls ? "70vh" : "100vh",
                    height: "70vh",
                  }}
                  onLoad={onMapLoad}
                  onClick={(e) => {
                    if (!isDisabledMap) {
                      handleMapClick(e);
                    }
                  }}
                  options={{
                    mapTypeId,
                  }}
                  onMapTypeIdChanged={() => {
                    const currentMapTypeId = mapRef?.current?.getMapTypeId();
                    if (currentMapTypeId) {
                      setMapTypeId(currentMapTypeId);
                    }
                  }}
                  // options={{
                  //   zoomControl: showControls,
                  //   fullscreenControl: showControls,
                  //   mapTypeControl: showControls,
                  //   streetViewControl: showControls,
                  //   disableDefaultUI: true,
                  // }}
                  // key={mapKey}
                >
                  {searchLngLat && <Marker position={searchLngLat} />}
                  {selectedPlace && <Marker position={searchLngLat} />}
                  {currentLocation && <Marker position={currentLocation} />}
                  {dadosCard.latitude && dadosCard.longitude && (
                    <Marker position={center} icon={blueMarkerIcon} />
                  )}
                </GoogleMap>
              </div>

              <div className="dark:text-white text-sm mt-2">
                Localização Atual: {adressView}
              </div>
              {ghi &&
                (!isLoading ? (
                  <div>
                    <div>
                      <div>
                        Latitude:{" "}
                        <span className="font-bold">{latLng?.lat}</span>
                      </div>
                      <div>
                        Longitude:{" "}
                        <span className="font-bold">{latLng?.lng}</span>
                      </div>
                    </div>
                    <div className="flex flex-row gap-1">
                      Irradiação Global Horizontal:{" "}
                      <span className="font-bold">{ghi} kWh/m² por dia</span>
                      <Button
                        type="button"
                        className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                        onClick={(e: any) => {
                          e.stopPropagation();
                          handleSweetAlert({
                            icon: "info",
                            // title: "Cálculo Markup",
                            showDenyButton: false,
                            confirmButtonText: "Ok",
                            html: `
                                  <div class="flex flex-col gap-2">
                                    <div>
                                      <div class="font-bold">
                                        Irradiação Global Horizontal
                                      </div>
                                      <div class="italic text-meta-1 flex flex-col gap-2 items-center">
                                        <div>
                                          ${FormatFields.formatarNumero(ghiMeses.reduce((acc, curr) => (acc += curr), 0))} kWh/m² por ano
                                        </div>
                                        <div class="flex flex-col items-end w-fit leading-none">
                                          <div>
                                            ${FormatFields.formatarNumero(ghiMeses.reduce((acc, curr) => (acc += curr), 0))} / 12 meses = ${FormatFields.formatarNumero(ghiMeses.reduce((acc, curr) => (acc += curr), 0) / 12)} kWh/m² por mês
                                          </div>
                                          <div class="text-sm">
                                            (usado na proposta)
                                          </div>
                                        </div>
                                        <div>
                                          ${FormatFields.formatarNumero(ghiMeses.reduce((acc, curr) => (acc += curr), 0))} / 365 dias = ${FormatFields.formatarNumero(ghiMeses.reduce((acc, curr) => (acc += curr), 0) / 365)} kWh/m² por dia
                                        </div>
                                      </div>
                                    </div>
                                  </div>`,
                          });
                        }}
                      >
                        <Info />
                      </Button>
                    </div>

                    {/* Distância Aproximada da Loja (Km, somente IDA) */}
                    <div className="flex flex-col gap-1 mt-2">
                      <div className="flex flex-row gap-2 items-center flex-wrap">
                        <div className="whitespace-nowrap">
                          Distância Aproximada da Loja:
                        </div>
                        <Input
                          name="distanciaLoja_coleta"
                          formulario={form}
                          mascara="numero"
                          suffix="Km"
                          width={"w-fit"}
                          disabled={isDisabledMap}
                          defaultValue={distanciaLoja}
                          onChange={(e: any) => {
                            setDistanciaLojaEditada(true);
                            setDistanciaLoja(e.target.value);
                          }}
                        />
                        <Button
                          type="button"
                          className="bg-primary flex flex-row gap-2 rounded-full p-0"
                          onClick={(e: any) => {
                            e.stopPropagation();
                            handleSweetAlert({
                              icon: "info",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `
                                  <div class="flex flex-col gap-2">
                                    <div class="font-bold">
                                      Distância Aproximada da Loja
                                    </div>
                                    <div class="italic text-meta-1">
                                      Distância em linha reta entre o endereço da loja do projeto e o endereço de instalação, considerando apenas a IDA.
                                      <br/><br/>
                                      O valor é calculado automaticamente ao salvar o endereço e pode ser alterado manualmente.
                                      Zerar este campo faz o sistema desconsiderar a exigência de cobrança de DESLOCAMENTO na proposta.
                                    </div>
                                  </div>`,
                            });
                          }}
                        >
                          <Info />
                        </Button>
                        {!isDisabledMap && distanciaLojaEditada && (
                          <button
                            type="button"
                            className="text-primary underline text-sm"
                            onClick={() => {
                              const distancia =
                                calcularDistanciaAproximadaLoja();
                              if (distancia === null) return;
                              setDistanciaLojaEditada(false);
                              setDistanciaLoja(
                                FormatFields.formatarNumero(distancia),
                              );
                              form.setValue(
                                "distanciaLoja_coleta",
                                FormatFields.formatarNumero(distancia),
                              );
                            }}
                          >
                            Recalcular
                          </button>
                        )}
                      </div>
                      {erroDistanciaLoja && (
                        <div className="text-error text-sm">
                          {erroDistanciaLoja}
                        </div>
                      )}
                    </div>

                    <fieldset className="border border-gray-300 p-2 rounded-lg col-span-2">
                      <div className="font-semibold text-error">
                        Confira abaixo se a imagem do endereço de instalação
                        salvou corretamente, se não salve novamente!
                      </div>
                      <div className="flex relative overflow-hidden items-center p-2 bg-black-2/10 w-fit rounded-md">
                        {/* <div className="w-[100%] h-[100%] absolute top-0 left-0 flex flex-col items-center justify-center z-0">
                          <div className="bg-white w-[80%] h-[100%]"></div>
                          <div className="w-[100%] h-[100%] absolute top-0 left-0 flex flex-col items-center justify-center">
                            <div className="bg-white w-[100%] h-[80%]"></div>
                          </div>
                        </div> */}
                        {isLoadingMapImage ? (
                          <div className="flex relative overflow-hidden items-center justify-center z-1">
                            <LoaderSun height={60} />
                          </div>
                        ) : (
                          <figure
                            className="w-40 h-40 bg-error/5 z-1 cursor-pointer"
                            onClick={() => {
                              setGallery([
                                {
                                  src: mapImage,
                                  name: "imagem_endereco.png",
                                },
                              ]);
                              openGallery(0, false);
                            }}
                          >
                            {mapImage ? (
                              <img
                                src={mapImage}
                                alt="Map Address Image"
                                style={{
                                  width: "100%",
                                  height: "100%",
                                  objectFit: "cover",
                                }}
                              />
                            ) : (
                              <div>Sem Imagem de Endereço</div>
                            )}
                          </figure>
                        )}
                      </div>
                    </fieldset>
                  </div>
                ) : (
                  <div className="flex relative overflow-hidden items-center justify-center">
                    <LoaderSun height={60} />
                  </div>
                ))}
            </div>

            {/* Container para o Formulário */}
            <div className="mt-2">
              <form
                onSubmit={handleSubmit(handleSaveLocation)}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: "2px",
                  width: "100%",
                }}
              >
                <div className="OverflowTabListEditCard h-full overflow-y-auto mt-4">
                  {adressView && (
                    <>
                      {loadingCep && (
                        <span className="text-xs text-gray-500 mt-1 block">
                          Buscando endereço...
                        </span>
                      )}

                      <Input
                        name="cep_coleta"
                        label="CEP"
                        formulario={form}
                        required
                        error="Informe o CEP"
                        mascara="cep"
                        onChange={(e: any) => handleCEPChange(e.target.value)}
                        defaultValue={dadosCard?.["cep_coleta"]}
                        disabled={isDisabledMap || loadingCep}
                      />
                      <Input
                        name="logradouro_coleta"
                        label="Logradouro"
                        formulario={form}
                        required
                        error="Informe o Logradouro"
                        defaultValue={dadosCard?.["logradouro_coleta"]}
                        disabled={
                          isDisabledMap
                          // ||
                          // (cep != "" && cep != "0" && logradouro != "")
                        }
                      />
                      <Input
                        name="numero_endereco_coleta"
                        label="Número"
                        formulario={form}
                        required
                        error="Informe o Número"
                        defaultValue={dadosCard?.["numero_endereco_coleta"]}
                        disabled={isDisabledMap}
                      />
                      <Input
                        name="complemento_endereco_coleta"
                        label="Complemento"
                        formulario={form}
                        defaultValue={
                          dadosCard?.["complemento_endereco_coleta"]
                        }
                        disabled={isDisabledMap}
                      />
                      <Input
                        name="bairro_coleta"
                        label="Bairro"
                        formulario={form}
                        required
                        error="Informe o Bairro"
                        defaultValue={dadosCard?.["bairro_coleta"]}
                        disabled={
                          isDisabledMap
                          // ||
                          // (cep != "" && cep != "0" && bairro != "")
                        }
                      />

                      <InputSelectComponent
                        name="cidade_coleta"
                        label="Cidade"
                        options={cidades
                          .filter(
                            (cidade) =>
                              cidade.estado_cidade ===
                              estados.find(
                                (estado) =>
                                  estado.uf_estado === estadoSelecionado,
                              )?.id_estado,
                          )
                          .map((cidade: ICidade) => ({
                            label: cidade.nome_cidade,
                            value: cidade.nome_cidade,
                          }))}
                        formulario={form}
                        required
                        error="Selecione a Cidade"
                        defaultValue={
                          dadosCard?.["cidade_coleta"] ?? cidadeSelecionada
                        }
                        disabled={
                          isDisabledMap
                          // ||
                          // (cep != "" && cep != "0" && cidadeSelecionada != "")
                        }
                      />
                      <InputSelectComponent
                        name="uf_coleta"
                        label="UF"
                        options={estados.map((estado: IEstado) => ({
                          label: `${estado.uf_estado} - ${estado.nome_estado}`,
                          value: `${estado.uf_estado}`,
                        }))}
                        formulario={form}
                        required
                        error="Selecione o estado"
                        defaultValue={
                          dadosCard?.["uf_coleta"] ?? estadoSelecionado
                        }
                        disabled={
                          isDisabledMap
                          // ||
                          // (cep != "" && cep != "0" && estadoSelecionado != "")
                        }
                      />
                      <Input
                        name="zoom_coleta"
                        label="Zoom"
                        formulario={form}
                        required
                        error="Informe o Zoom"
                        onChange={(e) => setZoom(+e.target.value)}
                        onKeyUp={(e: any) => {
                          if (e.key === "ArrowUp" && e.target.value) {
                            setZoom(+e.target.value + 1);
                          }
                          if (e.key === "ArrowDown" && e.target.value) {
                            setZoom(+e.target.value - 1);
                          }
                        }}
                        defaultValue={dadosCard?.["zoom_coleta"]}
                        disabled={isDisabledMap}
                      />
                    </>
                  )}
                </div>

                {!isDisabledMap && adressView && (
                  <div className="w-full flex justify-end mt-4">
                    <Button loading={isLoading} className="text-sm px-9">
                      Salvar Endereço de Instalação
                    </Button>
                  </div>
                )}
              </form>
            </div>
          </div>
          <div className="mt-5">
            {renderCamposPersonalizados("5", form, "1", dadosCard)}
          </div>
        </div>
      )}

      <div className={`${isLoaded && "opacity-0 h-1 overflow-hidden"}`}>
        <div className="relative overflow-hidden" ref={mapContainerRef}>
          <GoogleMap
            zoom={zoom || +dadosCard["zoom_coleta"]}
            center={currentLocation || searchLngLat || center}
            mapContainerStyle={{
              width: "100%",
              height: "100vh",
            }}
            // onLoad={onMapLoad}
            onClick={(e) => {
              if (!isDisabledMap) {
                handleMapClick(e);
              }
            }}
            options={{
              zoomControl: false,
              fullscreenControl: false,
              mapTypeControl: false,
              streetViewControl: false,
              // mapTypeId: "hybrid",
              mapTypeId,
            }}
            // key={mapKey}
          >
            {searchLngLat && <Marker position={searchLngLat} />}
            {selectedPlace && <Marker position={searchLngLat} />}
            {currentLocation && <Marker position={currentLocation} />}
            {dadosCard.latitude && dadosCard.longitude && (
              <Marker position={center} icon={blueMarkerIcon} />
            )}
          </GoogleMap>
        </div>
      </div>
    </>
  ) : (
    <div className="flex relative mt-[10%] overflow-hidden items-center justify-center">
      <LoaderSun />
    </div>
  );
};

export default Map;