import { PopoverCadastroCliente } from "@/components/Kanban/popoverCadastroCliente";
import ModalComponente from "@/components/Modal/ModalComponente";
import {
  cadastrarNovoContato,
  listarOrigemCliente,
} from "@/requests/CRUD/Cliente/cadastroCliente";
import { listarNegociosCliente } from "@/requests/CRUD/Cliente/listarClientes";
import { verificaTelefone } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useGoogleAuth } from "@/hooks/useGoogleAuth";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import {
  TIPOS_STRING_INVERSOR,
  TIPOS_STRING_INVERSOR_KIT_DISTRIBUIDOR,
} from "@/constants/tiposInversores";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarEspessurasCabos } from "@/requests/CRUD/ColetaDados/listarEspessurasCabos";
import { listarPotenciasModulosDistribuidores } from "@/requests/CRUD/ColetaDados/listarPotenciasModulosDistribuidores";
import { listarProductsFromCategory } from "@/requests/CRUD/ColetaDados/listarProductsFromCategory";
import { listarConcessionarias } from "@/requests/CRUD/Concessionaria/listarConcessionarias";
import {
  listarDistribuidoresCredenciais,
  listTelhadosDistribuidor,
  listTelhadosDistribuidorBold,
} from "@/requests/CRUD/Distribuidores/listarDistribuidoresCredenciais";
import { listarInstituicao } from "@/requests/CRUD/InstituicaoFinanceira/listarInstituicao";
import { listarMicroInverosres } from "@/requests/CRUD/Inversor/listarInversores";
import { listarDadosDocsTemplates } from "@/requests/CRUD/Lojas/cadastrarLojas";
import { useAuth } from "@/src/contexts/authContext";
import { useLoja } from "@/src/contexts/lojaContext";
import { IValueLabel } from "@/types/formInterfaces";
import { FormatFields, GetGallery } from "@/utils";
import {
  calcularConsumoBaseUcs,
  calcularConsumoComAumentoFromUcs,
} from "@/utils/calcularConsumoComAumento";
import {
  isModoEspessuraCaboSolarInformar,
  obterEspessuraCaboSolarSelecionada,
  OPCAO_ESPESSURA_CABO_AUTOMATICA,
} from "@/utils/caboSolar";
import { handleGetDocData } from "@/utils/docs";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { Fragment, useEffect, useMemo, useRef, useState } from "react";
import { FieldValues } from "react-hook-form";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";
import Button from "../../components/Forms/Button";
import Container from "../../components/Forms/Container";
import Divider from "../../components/Forms/Divider";
import Input from "../../components/Forms/Input";
import InputGroup from "../../components/Forms/InputGroup";
import InputSelectComponent from "../../components/Forms/InputSelect";
function normalize(s: string) {
  return s
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toUpperCase();
}

type TelhadoFlags = {
  ceramico: "0" | "1";
  fcca: "0" | "1";
  garagem: "0" | "1";
  laje: "0" | "1";
  metalico: "0" | "1";
  solo: "0" | "1";
};
const DadosGerais = ({
  // form: formProposta,
  form,
  updateDadosGerados = false,
  inCard,
  cidades,
  defaultValues,
  isLoaded,
  ucs,
  dadosCard,
  inversoresBD,
  distribuidores,
  distribuidoresNativos,
  fabricantes,
  camposPersonalizados,
  setDadosCard,
  setFabricantesDistribuidor,
}: {
  ucs: any[];
  distribuidores: any[];
  distribuidoresNativos: any[];
  fabricantes: any[];
  camposPersonalizados?: any;
  [x: string]: any;
}) => {
  const { lojaAtual } = useLoja();
  const { connected, refreshStatus, profile, ...restAuthInfo } = useGoogleAuth(
    dadosCard?.id_loja_coleta
  );
  const [isLoadedDadosGerais, setIsLoadedDadosGerais] = useState(false);
  const [isLoadingTelhados, setIsLoadingTelhados] = useState(false);
  const [distribuidoresCredenciais, setDistribuidoresCredenciais] =
    useState(false);
  const [docProposta, setDocProposta] = useState<any>();

  const [nenhumIdDocs, setNenhumIdDocs] = useState(false);
  useEffect(() => {
    if (profile) {
      listarDadosDocsTemplates(dadosCard?.id_loja_coleta, profile?.id).then(
        async (res) => {
          const docData = await handleGetDocData(res);

          const newDocProposta = docData.find(
            (a: any) =>
              a.tipo === "1" && a.tipoNegocio == dadosCard.tipoNegocio_coleta
          );

          if (
            !docData.some(
              (a: any) =>
                a.tipo === "1" && a.tipoNegocio == dadosCard.tipoNegocio_coleta
            )
          ) {
            setNenhumIdDocs(true);
            // isLoadedDadosGerais()
          } else {
            setDocProposta(newDocProposta);
            setNenhumIdDocs(false);
          }
        }
      );
    }
  }, [profile]);

  const [distribuidorValues, setDistribuidorValues] = useState(
    form.getValues("distribuidores") ?? defaultValues.distribuidor_parametro
  );
  const [distribuidoresFiltrados, setDistribuidoresFiltrados] = useState<any>(
    []
  );

  const [moduloSelecionado, setModuloSelecionado] = useState(
    form.control._formValues?.modulo?.value !== undefined
      ? form.control._formValues?.modulo?.value
      : defaultValues?.modulo_padrao_parametro
  );
  const [isMicroInversor, setIsMicroInversor] = useState(false);
  const [microInversores, setMicroInversores] = useState<any[]>([]);
  const [espessurasCabo, setEspessurasCabo] = useState<any[]>([]);

  const [mapImage, setMapImage] = useState<any>(dadosCard?.mapImage);
  const [isLoadingMapImage, setIsLoadingMapImage] = useState(
    dadosCard?.mapImage ? false : true
  );

  const modoEspessuraCaboSolarParametro =
    defaultValues?.modo_espessura_cabo_solar_parametro;

  // function getNameType(type: string) {
  //   switch (type) {
  //     case "1":
  //       return "Proposta";
  //     case "2":
  //       return "ContratoPF";
  //     case "3":
  //       return "ContratoPJ";
  //     case "4":
  //       return "OS";
  //     default:
  //       return "";
  //   }
  // }
  // const handleGetDocData = async (dados: any) => {
  //   if (!dados) return;
  //   dados
  //     .filter((d: any) => d.loja_documentos_google === defaultValues.id_loja)
  //     .map((res: any) => {
  //       const tipo = getNameType(res.tipo_documentos_google);
  //       const doc = {
  //         name: res.nome_documentos_google,
  //         id: res.idDoc_documentos_google,
  //         webViewLink: res.linkView_documentos_google,
  //       };

  //       // setDocsPorTipo((prev: any) => ({
  //       //   ...prev,
  //       //   [res.tipoNegocio_documentos_google]: {
  //       //     ...prev[res.tipoNegocio_documentos_google],
  //       //     [tipo]: {
  //       //       docSelecionado: doc,
  //       //       modalAberto: false,
  //       //     },
  //       //   },
  //       // }));
  //     });
  // };
  // const [nenhumIdDocs, setNenhumIdDocs] = useState(false);
  // useEffect(() => {
  //   if (!isReady && !authData) return;
  //   listarDadosDocsTemplates(lojaAtual?.id_loja, authData?.profile.id).then(
  //     async (res) => {
  //       const docData = await handleGetDocData(res);

  //       if (!docData.some((a: any) => a.tipo === "1")) {
  //         setNenhumIdDocs(true);
  //       } else {
  //         setNenhumIdDocs(false);
  //       }
  //     },
  //   );
  // }, [isReady, authData]);
  useEffect(() => {
    listarDistribuidoresCredenciais().then((credenciais) => {
      setDistribuidoresCredenciais(credenciais);
      form.setValue("dadosDistribuidoresCredenciais", credenciais);
      const distribuidoresFiltrados = credenciais
        .filter((credencial: any) => credencial.status_credencial === "1")
        .map((credencial: any) => {
          // Procurando o distribuidor correspondente
          return distribuidoresNativos.find(
            (distribuidor) =>
              distribuidor.sigla_distribuidor === credencial.sigla_distribuidor
          );
        })
        .filter(Boolean); // Removendo distribuidores não encontrados
      setDistribuidoresFiltrados(distribuidoresFiltrados);
    });
    listarEspessurasCabos().then((res) => {
      setEspessurasCabo(res);
    });
  }, [distribuidoresNativos]);

  useEffect(() => {
    if (!isLoadedDadosGerais) return;
    form.setValue(
      "porcent_calculo_capacidade_modulos_parametro",
      percentualCalculoCapacidadeModulos
    );
    form.setYupSchema((prev: any) => {
      const fields: any = prev.fields;
      Object.keys(form.control._formValues)?.map((keyForm) => {
        delete fields[keyForm];
      });
      prev.fields = fields;
      return prev;
    });

    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);
    }
  }, [isLoadedDadosGerais]);

  const { handleSubmit } = form.control;
  const [concessionariaAtual, setConcessionariaAtual] = useState<any>(null);
  const {
    mediaConsumo,
    valor_simultaneidade_proposta,
    nome_tipoLigacao_proposta,
    concessionaria_proposta,
    id_concessionaria_proposta,
    disjuntor_proposta,
    preco_tarifa,
    fiob_tarifa,
    grupo_proposta,
    preco_aplicacao_tarifa,
    subgrupo_proposta,
    porcentagemGeracao,
    precoTotal_tarifa,
  } = form.control._formValues;
  const fasesInversorOptions = [
    { value: "1", label: "Monofásico" },
    { value: "2", label: "Bifásico" },
    { value: "3", label: "Trifásico" },
  ];

  const meses = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ];
  const [isFocusedArray, setIsFocusedArray] = useState(
    Array(meses.length).fill(false)
  );
  const [isLoading, setIsLoading] = useState(false);

  const [isFilled, setIsFilled] = useState(Array(meses.length).fill(false));
  const [mediaConsumoCampo, setMediaConsumoCampo] = useState(false);
  const [clienteNovo, setClienteNovo] = useState(false);
  const [openPopoverCadastro, setOpenPopoverCadastro] = useState(false);
  const [openPopoverCidade, setOpenPopoverCidade] = useState(false);
  const [nomeKeyUp, setNomeKeyUp] = useState("");
  const [cidadeSelecionada, setCidadeSelecionada] = useState("");
  const [telefone, setTelefone] = useState("");
  const [mouseOn, setMouseOn] = useState(false);
  const { valuesSession, usuario } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const [clienteSelecionado, setClienteSelecionado] = useState({} as any);
  const [haErros, setHaErros] = useState(false);
  const [showOptions, setShowOptions] = useState(false);
  const [tipoInversor, setTipoInversor] = useState(
    form.control._formValues["tipo_string_inversor"]?.value ||
    defaultValues?.tipo_string_inversor_parametro
  );

  // const [ucBeneficiariaAtual, setUcBeneficiariaAtual] = useState(0);
  const [ucAtual, setUcAtual] = useState(0);
  const [contatoCadastrado, setContatoCadastrado] = useState<any[]>([]);
  const [selectedMedia, setSelectedMedia] = useState("Média");
  const [openSelectNegocio, setOpenSelectNegocio] = useState(false);
  const [negocios, setNegocios] = useState<IValueLabel[]>([]);
  const [selectedBusinessState, setSelectedBusinessState] = useState(false);
  const [newBusinessState, setNewBusinessState] = useState(false);
  const [cidadesFiltered, setCidadesFiltered] = useState<IValueLabel[]>([]);
  const [origem, setOrigem] = useState<IValueLabel[]>([]);
  const [instituicoesFinanceiras, setInstituicoesFinanceiras] = useState<any[]>(
    []
  );
  const [calculoCapacidadeModulos, setCalculoCapacidadeModulos] = useState(
    form.control._formValues["calculo_capacidade_modulos_parametro"] || "0"
  );
  const percentualCalculoCapacidadeModulos = String(
    form.control._formValues["porcent_calculo_capacidade_modulos_parametro"] ||
    defaultValues?.porcent_calculo_capacidade_modulos_parametro ||
    "0"
  ).replace("%", "");
  const [distribuidor, setDistribuidor] = useState<any>(
    form?.control?._formValues?.distribuidor ||
    defaultValues?.distribuidor_parametro
  );
  const [modulos, setModulos] = useState<any[]>([]);
  const [modulosTemp, setModulosTemp] = useState<any[]>([]);
  const moduloPadraoAplicadoRef = useRef(false);

  const [distribuidoresSelecionados, setDistribuidoresSelecionados] = useState<
    any[]
  >(form?.control?._formValues?.distribuidores || []);
  const [potenciasModulosDistribuidores, setPoteciasModulosDistribuidores] =
    useState<any[]>([]);

  const [openModalBeneficiaria, setOpenModalBeneficiaria] = useState(false);

  const [simultaneidade, setSimultaneidade] = useState<IValueLabel[]>([]);
  const [showErros, setShowErros] = useState<[boolean, string]>([false, ""]);

  const recalcularConsumoComAumento = () => {
    const consumoBase = calcularConsumoBaseUcs(ucs);
    const consumoComAumento = calcularConsumoComAumentoFromUcs(
      ucs,
      form.control._formValues.porcentagemGeracao,
      defaultValues?.margem_geracao_parametro,
    );

    form.setValue("consumoBase", consumoBase.toFixed(2));
    form.setValue("consumoTotal", consumoComAumento.toFixed(2));

    return { consumoBase, consumoComAumento };
  };
  const [canEditTarifa, setCanEditTarifa] = useState(
    form.control._formValues.canEditTarifa
      ? form.control._formValues.canEditTarifa
      : false
  );

  const [kitProprio, setKitProrio] = useState(
    Object.keys(form?.control?._formValues)?.includes("kitProprio")
      ? form?.control?._formValues?.kitProprio?.value == "1"
      : defaultValues?.tipo_kit_parametro == "1"
  );

  const { perfil } = useAuth();

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    updateDadosGerados(false);

    // if (form.control._formValues?.distribuidor) {
    //   setDistribuidor(form.control._formValues?.distribuidor);
    // }

    listarOrigemCliente().then((res) =>
      setOrigem(
        res
          .filter((e: any) => e.status_origem_cliente == 1)
          .map((origem: any) => ({
            label: `${origem.nome_origem_cliente}`,
            value: `${origem.id_origem_cliente}`,
          }))
      )
    );
    listarInstituicao().then((res) => {
      setInstituicoesFinanceiras(res);
    });
    listarClassificacoes().then((res) =>
      setSimultaneidade(
        res
          .filter((e: any) => e.status_classificacao == 1)
          .map((simultaneidade: any) => ({
            label: `${simultaneidade.nome_classificacao}`,
            value: `${simultaneidade.id_classificacao}`,
          }))
      )
    );
    if (inCard) {
      // form.setValue("escolha_negocio", "");
      form.clearErrors("cidade");
    }

    if (mediaConsumo != "") {
      setMediaConsumoCampo(true);
    }
  }, []);

  useEffect(() => {
    if (isLoaded) {
      // if (defaultValues?.tipo_kit_parametro == 1) {
      //   setKitProrio(true);
      //   const distribuidorInfo = distribuidores.find(
      //     (distribuidor) =>
      //       distribuidor.id_distribuidor ==
      //       defaultValues?.distribuidor_parametro,
      //   );
      //   setDistribuidor(distribuidorInfo);
      // } else if (defaultValues?.tipo_kit_parametro == 0) {
      //   setKitProrio(false);
      // }
      // if (form.control._formValues?.kitProprio) {
      //   setKitProrio(form.control._formValues?.kitProprio.value == "1");
      // }
      if (concessionaria_proposta !== "") {
        Promise.all([
          listarConcessionarias().then((res: any) => {
            const findConcessionaria = res.find(
              (concessionaria: any) =>
                concessionaria.id_concessionaria === id_concessionaria_proposta
            );
            setConcessionariaAtual(findConcessionaria || null);
            if (findConcessionaria) {
              const precoTarifaAplicacaoFormatado: any =
                FormatFields.desformatarNumeros(+preco_aplicacao_tarifa);

              const tarifaComImposto = precoTarifaAplicacaoFormatado;
              // precoTarifaAplicacaoFormatado  *
              // (1 + defaultValues.reajuste_rsi_parametro / 100);

              if (isNaN(tarifaComImposto)) {
                form.setValue("canEditTarifa", true);
                setCanEditTarifa(true);
                form.setValue(
                  "precoPadrao_tarifa",
                  Number(0).toFixed(7).toString()
                );
                form.setValue(
                  "precoTotal_tarifa",
                  Number(0).toFixed(7).toString().replace(".", ",")
                );
              } else {
                form.setValue(
                  "precoPadrao_tarifa",
                  tarifaComImposto.toFixed(7).toString()
                );
                form.setValue(
                  "precoTotal_tarifa",
                  tarifaComImposto.toFixed(7).toString().replace(".", ",")
                );
              }
            } else {
              form.setValue("canEditTarifa", true);
              setCanEditTarifa(true);
              form.setValue(
                "precoPadrao_tarifa",
                Number(0).toFixed(7).toString()
              );
              form.setValue(
                "precoTotal_tarifa",
                Number(0).toFixed(7).toString().replace(".", ",")
              );
            }
          }),
          atualizarFormularioRelDistribuidor(),
        ]).finally(() => {
          setIsLoadedDadosGerais(true);
        });
      }
    } else if (isLoaded) {
      setIsLoadedDadosGerais(true);
    }

    listarMicroInverosres().then((res) => {
      setMicroInversores(res);
    });

    form.setValue(
      "potencia_modulo",
      form.control?._formValues?.potencia_modulo ||
      (defaultValues && defaultValues.potencia_modulos_parametro)
    );

    const tipoStringInversor = form.getValues("tipo_string_inversor")?.value;

    if (tipoStringInversor == "microinversor") {
      setIsMicroInversor(true);
    }

    if (tipoStringInversor && !form.getValues("tipo_inversor")) {
      setTipoInversor(tipoStringInversor);
      form.setValue(
        "tipo_inversor",
        tipoStringInversor == "microinversor"
          ? { value: "micro_inversor", label: "Microinversor" }
          : { value: "inversor_parede", label: "Inversor de Parede" }
      );
    }
    // form.setValue("")
  }, [isLoaded]);
  useEffect(() => {
    form.setYupSchema((prev: any) => {
      const fields: any = prev.fields;

      (tipoInversor === "inversor_off_grid" ||
        tipoInversor === "inversor_hibrido"
        ? []
        : ["tipo_bateria"]
      )?.map((keyForm) => {
        delete fields[keyForm];
      });
      prev.fields = fields;
      return prev;
    });
  }, [tipoInversor]);
  useEffect(() => {
    const kitProprioF = form.getValues("kitProprio")?.value === "1";

    form.setYupSchema((prev: any) => {
      const fields: any = prev.fields;
      (kitProprioF
        ? ["distribuidores", "potencia_modulo", "potencia_modulos"]
        : ["distribuidor", "modulo"]
      )?.map((keyForm) => {
        delete fields[keyForm];
      });
      prev.fields = fields;
      return prev;
    });
    form.setValue("kitManual", kitProprio);
  }, [kitProprio]);

  useEffect(() => {
    if ((distribuidor || distribuidoresSelecionados) && isLoadedDadosGerais) {
      atualizarFormularioRelDistribuidor();
    }
  }, [
    distribuidor,
    fabricantes,
    tipoInversor,
    distribuidoresSelecionados,
    kitProprio,
  ]);

  async function atualizarFormularioRelDistribuidor() {
    const distribuidoresSelecionadosIds = (
      kitProprio
        ? [distribuidor?.id_distribuidor ?? distribuidor?.value ?? distribuidor]
        : (distribuidoresSelecionados || []).map(
          (d: any) => d?.value ?? d?.id_distribuidor
        )
    )
      .filter(Boolean)
      .map((id: any) => String(id))
      ?.join(",");

    return Promise.all([
      listarProductsFromCategory({
        id: "9",
        distribuidor: distribuidoresSelecionadosIds,
      }).then((modulos) => {
        setModulos(modulos);
        setModulosTemp(modulos);

        if (defaultValues.modulo_padrao_parametro && modulos) {
          const modulo = modulos.find(
            (modulo: any) =>
              modulo.id_item == defaultValues.modulo_padrao_parametro
          );
          if (modulo) {
            form.setValue("potencia_modulo", modulo?.potencia_item);
            const moduloAtual = form.getValues("modulo")?.value;
            if (
              !moduloPadraoAplicadoRef.current &&
              (moduloAtual === undefined || moduloAtual === "")
            ) {
              form.setValue("modulo", mapModuloOption(modulo));
              moduloPadraoAplicadoRef.current = true;
            }
          }
        }
      }),
      listarProductsFromCategory({
        id: "8",
        distribuidor: distribuidoresSelecionadosIds,
        tipoOrigem_item: kitProprio ? "0" : "1",
        ...(kitProprio
          ? {
            tipoStringInversor_item:
              form.control._formValues?.tipo_string_inversor?.value ||
              tipoInversor,
          }
          : {}),
      }).then((res) => {
        const codigosFabricantesInversor = new Set(
          (res || [])
            .map((item: any) => String(item?.codFabricante_item || "").trim())
            .filter(Boolean)
        );

        const novosFabricantes = fabricantes.filter((fabricante: any) => {
          // const codigoInterno = String(
          //   fabricante?.codInterno_fabricante || "",
          // ).trim();
          const codigoId = String(fabricante?.id_fabricante || "").trim();
          return (
            // codigosFabricantesInversor.has(codigoInterno) ||
            codigosFabricantesInversor.has(codigoId)
          );
        });
        setFabricantesDistribuidor(novosFabricantes);
        setFabricantesFilter(novosFabricantes);
      }),
    ]);
  }

  const [telhadosDistribuidor, setTelhadosDistribuidor] = useState<any>([]);
  function buildTelhadosFlagsFromDescriptions(
    descriptions: string[]
  ): TelhadoFlags {
    const flags: TelhadoFlags = {
      ceramico: "0",
      fcca: "0",
      garagem: "0",
      laje: "0",
      metalico: "0",
      solo: "0",
    };

    for (const raw of descriptions) {
      const s = normalize(String(raw || ""));

      if (s.includes("SOLO")) flags.solo = "1";
      if (s.includes("FIBROCIMENTO") || s.includes("FIBRO CIMENTO"))
        flags.fcca = "1";
      if (s.includes("METALICO")) flags.metalico = "1";
      if (s.includes("MINITRILHO") || s.includes("COLONIAL"))
        flags.ceramico = "1";
      if (s.includes("LAJE")) flags.laje = "1";
      if (s.includes("GARAGEM") || s.includes("CARPORT")) flags.garagem = "1";
    }

    return flags;
  }
  useEffect(() => {
    async function obterTelhadosDistribuidor() {
      setIsLoadingTelhados(true);
      if (distribuidoresNativos && distribuidoresSelecionados.length != 0) {
        const distribuidoresJoin = distribuidoresSelecionados
          .map((distribuidor: any) => distribuidor?.id_distribuidor)
          .join(",");
        await Promise.all([
          listTelhadosDistribuidor(distribuidoresJoin).then((e: any) =>
            form.setValue("telhadosDistribuidor", e)
          ),
          ...(distribuidoresJoin.includes("1")
            ? [
              listTelhadosDistribuidorBold().then((res) => {
                const listaTelhados = res.map((a: any) => a.descricao_item);

                const boldFlags =
                  buildTelhadosFlagsFromDescriptions(listaTelhados);

                setTelhadosDistribuidor(boldFlags);
                form.setValue("telhadosDistribuidor", boldFlags);
              }),
            ]
            : []),
          listarPotenciasModulosDistribuidores({
            distribuidores: distribuidoresJoin,
          }).then(setPoteciasModulosDistribuidores),
        ]);
      }
      setIsLoadingTelhados(false);
    }

    obterTelhadosDistribuidor();
  }, [distribuidoresSelecionados]);

  useEffect(() => {
    if (
      isLoadedDadosGerais &&
      distribuidoresSelecionados.length == 0 &&
      distribuidoresFiltrados.length > 0
    ) {
      setDistribuidoresSelecionados(
        form.getValues("distribuidores")?.map((d: any) => d?.value) ??
        distribuidoresFiltrados
          ?.filter(
            (d: any) =>
              d?.id_distribuidor == defaultValues.distribuidor_parametro
          )
          .map((distribuidor: any) => ({
            ...distribuidor,
            label: distribuidor.nome_distribuidor,
            value: distribuidor.id_distribuidor,
          }))
      );
    }
  }, [distribuidoresNativos, isLoadedDadosGerais]);

  const handleCalcular = async (data: FieldValues) => {
    setIsLoading(true);

    if (kitProprio) {
      // validar tipo de inversor
      if (!data["tipo_string_inversor"]) {
        setIsLoading(false);
        return toast.error("Selecione um tipo de inversor para prosseguir!");
      }
      if (isMicroInversor && !data["id_microInversor"]) {
        setIsLoading(false);
        return toast.error("Selecione um microinversor para prosseguir!");
      } else if (!isMicroInversor && !data["marca_inversor"]) {
        setIsLoading(false);
        return toast.error("Selecione uma fabricante para prosseguir!");
      }
    }

    const { porcentagemGeracao, potencia_modulo } = form.control._formValues;

    const { consumoBase, consumoComAumento } = recalcularConsumoComAumento();

    const potenciAn =
      consumoBase *
      (+FormatFields.desformatarNumeros(porcentagemGeracao) / 100);
    const potenciBn = parseFloat(String(consumoBase)) + Number(potenciAn);
    const potenciaSistemaB = potenciBn / 100;

    const potenciaKwp = potenciaSistemaB.toFixed(2);

    const setValue = form.setValue;
    setValue("consumoTotal", consumoComAumento.toFixed(2));
    // setValue("primeira_renderizacao", undefined);

    setValue("potenciaKwp", potenciaKwp);
    setValue("idUsuario", id_usuario);
    if (clienteNovo) {
      handleValidaTelefone(telefone);
    }

    setIsLoading(false);
    if (!haErros) {
      // Object.keys(form.control._formValues)?.map((keyForm) => {
      //   formProposta.setValue(keyForm, form.control._formValues[keyForm]);
      // });
      prosseguirEtapa();
    }
  };

  const prosseguirEtapa = () => {
    const haErrosForm = Object.keys(form.errors).length > 0;

    if (!haErrosForm) {
      if (clienteNovo) {
        handleSaveNovoCliente();
      }
      updateDadosGerados(true);
    }
  };

  const handleValidaTelefone = (e: any) => {
    if (e != "") {
      verificaTelefone(e).then((res: any) => {
        if (res.body) {
          setContatoCadastrado(res.body);

          if (clienteNovo) {
            setHaErros(true);
          }

          form.control.setError("telefone" as `root.${string}`, {
            type: "required",
            message: "Telefone já cadastrado",
          });
        } else {
          setHaErros(false);
          setContatoCadastrado([]);
          form.clearErrors("telefone");
        }
      });
    }
  };
  const listarNegocioCliente = (id_cliente: number) => {
    listarNegociosCliente({ cliente_coleta: id_cliente }).then((res) => {
      // Criar um array com a opção fixa e os negócios retornados
      if (res.length == 0) {
        setSelectedBusinessState(true);
      }

      const opcaoEscolha = { label: "Escolha uma opção", value: "" };
      const negocios = res
        .filter(
          (e: any) =>
            e.nome_negocio_coleta != null &&
            +e.status_coleta < 8 &&
            e.status_coleta != "100"
        )
        .map((negocio: any) => ({
          label: `${negocio.nome_negocio_coleta}`,
          value: `${negocio.id_coleta}`,
        }));

      // Adicionar a opção fixa ao início do array
      const options = [opcaoEscolha, ...negocios];

      // Definir as opções no estado
      setNegocios(options);
    });
  };

  const handleSaveNovoCliente = () => {
    const { nome, telefone, cidade } = form.control._formValues;
    const exp = cidade.label.split(" - ");
    const data = {
      nome_cliente: nome,
      telefone1_cliente: telefone,
      cidade_cliente: exp[0],
      estado_cliente: exp[1],
      responsavel_cliente: id_usuario,
    };
    cadastrarNovoContato(data).then((res) => {
      if (res.status) {
        const idCliente = res.body;
        const setValue = form.setValue;
        setValue("idCliente", idCliente);
        setClienteNovo(false);
      }
    });
  };
  const handlePopoverCliente = (value: any) => {
    setClienteSelecionado(value);

    setOpenSelectNegocio(true);
    setOpenPopoverCadastro(!openPopoverCadastro);
    if (value != undefined) {
      if (
        value.nome_cliente != undefined ||
        value.cidade_cliente != undefined ||
        value.telefone1_cliente != undefined
      ) {
        const nome_cliente = value.nome_cliente;
        const id_cliente = value.id_cliente;
        const cidade_cliente = value.cidade_cliente;
        const estado_cliente = value.estado_cliente;
        const telefone1_cliente = value.telefone1_cliente;
        listarNegocioCliente(id_cliente);
        form.setValue("nome", nome_cliente);
        form.setValue("idCliente", id_cliente);

        form.setValue("uc_cliente", "");

        form.setValue("telefone", telefone1_cliente);
        cidades.map((cidade: any) => {
          if (cidade.label == `${cidade_cliente} - ${estado_cliente}`) {
            setCidadeSelecionada(cidade.value);
            form.setValue("cidade", cidade);
          }
        });
      }
    }
  };

  const handleCadastroCliente = () => {
    setOpenPopoverCadastro(!openPopoverCadastro);
  };
  const handleCadastroNovoCliente = () => {
    setClienteNovo(true);
    form.setValue("escolha_negocio", "");
    setOpenPopoverCadastro(!openPopoverCadastro);
  };
  const [fabricantesFilter, setFabricantesFilter] = useState<any>([]);

  const parseCodDistribuidorFabricante = (value: any) => {
    if (!value) return [];
    return String(value)
      .split(",")
      .map((item) => item.trim())
      .filter(Boolean);
  };

  const fabricanteAtendeDistribuidoresSelecionados = (
    fabricante: any,
    distribuidoresIds: string[]
  ) => {
    if (!distribuidoresIds.length) return true;
    const distribuidoresFabricante = parseCodDistribuidorFabricante(
      fabricante?.codDistribuidor_fabricante
    );

    if (!distribuidoresFabricante.length) return false;
    if (distribuidoresFabricante.includes("*")) return true;

    return distribuidoresIds.some((id) =>
      distribuidoresFabricante.includes(id)
    );
  };

  useEffect(() => {
    // const distribuidoresSelecionadosIds = (
    //   kitProprio
    //     ? [distribuidor?.value ?? distribuidor?.id_distribuidor]
    //     : (distribuidoresSelecionados || []).map(
    //         (d: any) => d?.value ?? d?.id_distribuidor,
    //       )
    // )
    //   .filter(Boolean)
    //   .map((id: any) => String(id));
    // const fabricantesFiltrados = (fabricantes || []).filter((fabricante: any) =>
    //   fabricanteAtendeDistribuidoresSelecionados(
    //     fabricante,
    //     distribuidoresSelecionadosIds,
    //   ),
    // );
    // setFabricantesFilter(fabricantesFiltrados);
  }, [fabricantes, kitProprio, distribuidor, distribuidoresSelecionados]);

  const selectedBusiness = () => {
    const { escolha_negocio } = form.control._formValues;

    if (escolha_negocio == "" || escolha_negocio.value == "") {
      form.control.setError("escolha_negocio" as `root.${string}`, {
        type: "required",
        message: "Selecione um negócio!",
      });
      setTimeout(() => {
        form.clearErrors("escolha_negocio");
      }, 3000);
    } else {
      form.clearErrors("escolha_negocio");
      setOpenSelectNegocio(false);
    }
  };

  const createNewBusiness = () => {
    const { nome_negocio } = form.control._formValues;
    const validaNome = negocios.some((e) => e.label === nome_negocio);
    form.setValue("escolha_negocio", "");
    if (validaNome) {
      form.control.setError("nome_negocio" as `root.${string}`, {
        type: "required",
        message: "Já existe um negócio com mesmo nome!",
      });
      setTimeout(() => {
        form.clearErrors("nome_negocio");
      }, 3000);
      return false;
    }

    if (nome_negocio == "") {
      form.control.setError("nome_negocio" as `root.${string}`, {
        type: "required",
        message: "Digite nome do negócio!",
      });
      setTimeout(() => {
        form.clearErrors("nome_negocio");
      }, 3000);
    } else {
      form.clearErrors("nome_negocio");
      setOpenSelectNegocio(false);
    }
  };
  const calcTotalConsumo = () => {
    let mediaConsumoMedioBeneficiariaLet = 0;
    let mediaConsumoMensalBeneficiariaLet = 0;

    ucs.map((ucBeneficiaria) => {
      if (ucBeneficiaria.tipoValor === "Média") {
        mediaConsumoMedioBeneficiariaLet += Number(ucBeneficiaria.valor) || 0;
      } else if (Array.isArray(ucBeneficiaria.valor)) {
        const valoresNumericos = ucBeneficiaria.valor
          .map((mes: any) => parseFloat(mes))
          .filter((val: any) => !isNaN(val)); // remove valores inválidos

        const media =
          valoresNumericos.reduce((acc: any, cur: any) => acc + cur, 0) /
          (valoresNumericos.length || 1);

        mediaConsumoMensalBeneficiariaLet += media;
      }
    });

    const consumoTotal =
      mediaConsumoMedioBeneficiariaLet + mediaConsumoMensalBeneficiariaLet;
    return String(Math.round(consumoTotal));
  };
  const [marcaInvValue, setMarcaInvValue] = useState(
    defaultValues?.fabricante_parametro
  );

  const getFabricantesDistribuidorOptions = () => {
    const opcoesBase =
      fabricantesFilter.length > 0
        ? [
          { label: "Todos", value: "*" },
          ...fabricantesFilter
            .filter(
              (e: any) =>
                (e.tipos_itens_fabricante?.split(",").includes("8") ||
                  e.tipos_itens_fabricante?.split(",").includes("*") ||
                  e.tipos_itens_fabricante == "8" ||
                  e.tipos_itens_fabricante == null) &&
                // e.tipo_fabricante == "1" &&
                e.status_fabricante == "1"
            )
            .filter(
              (item: any, index: any, self: any) =>
                index ===
                self.findIndex(
                  (t: any) => t.id_fabricante === item.id_fabricante
                )
            )
            .map((fabricante: any) => ({
              label: fabricante.nome_fabricante,
              value: fabricante.id_fabricante,
              id_fabricante: fabricante.id_fabricante,
              codInterno_fabricante: fabricante.codInterno_fabricante,
            })),
        ]
        : [];
    return opcoesBase;
  };

  useEffect(() => {
    if (kitProprio) return;

    const opcoesFabricantes = getFabricantesDistribuidorOptions();
    if (!opcoesFabricantes.length) return;

    const marcaAtual = form.getValues("marca_inversor");
    const valorAtual =
      marcaAtual && typeof marcaAtual === "object"
        ? marcaAtual.value
        : marcaAtual || defaultValues?.fabricante_parametro;

    if (!valorAtual) return;

    const opcaoSelecionada = opcoesFabricantes.find(
      (opt: any) => String(opt.id_fabricante || "") === String(valorAtual)
      // String(opt.value) === String(valorAtual) ||
      // String(opt.id_fabricante || "") === String(valorAtual) ||
      // String(opt.codInterno_fabricante || "") === String(valorAtual),
    );

    if (opcaoSelecionada) {
      form.setValue("marca_inversor", opcaoSelecionada);
    }
  }, [kitProprio, fabricantesFilter, defaultValues?.fabricante_parametro]);

  const mapModuloOption = (modulo: any) => ({
    ...modulo,
    label: `${modulo.descricao_item} - ${+modulo.potencia_item}W`,
    value: modulo.id_item,
  });

  const FilterOptions = (e: string) => {
    if (e.length >= 3) {
      const filteredCities = cidades.filter((y: any) =>
        y.label.toLowerCase().includes(e.toLowerCase())
      );

      setCidadesFiltered(filteredCities);

      setShowOptions(true);
    } else {
      setShowOptions(false);
    }
  };

  // useEffect(() => {
  //   const { marca_inversor } = form.control._formValues;

  //   if (!marca_inversor || !marca_inversor?.value) {
  //     form.setValue("marca_inversor", defaultValues?.fabricante_parametro);
  //   }
  //   // ????????
  // }, [fabricantesFilter]);

  // useEffect(() => {
  //   const { distribuidor, tipo_string_inversor, marca_inversor } =
  //     form.control._formValues;

  //   let filter = fabricantes.filter(
  //     (a: any) => a.codDistribuidor_item === distribuidor?.value
  //   );
  //   if (tipo_string_inversor?.value != "inversor_string_microinversor") {
  //     filter = filter.filter(
  //       (a: any) => a.tipoStringInversor_item === tipo_string_inversor?.value
  //     );
  //   }

  //   setFabricantesFilter(filter);
  // }, []);
  useEffect(() => {
    if (
      modulos.length > 0 &&
      (tipoInversor === "inversor_off_grid" ||
        tipoInversor === "inversor_hibrido")
    ) {
      const modulosFiltered = modulos.filter(
        (a: any) => a.suportaOffGrid_item === "1"
      );
      const moduloAtual =
        form.control._formValues.modulo?.value ||
        (defaultValues && defaultValues.modulo_padrao_parametro);

      setModulosTemp(modulosFiltered);
      if (modulosFiltered.length === 0) {
        toast.error("Sem módulos que suportam OFF GRID");
        form.setValue("modulo", "");
      } else if (!modulosFiltered.some((a: any) => a.id_item === moduloAtual)) {
        form.setValue("modulo", "");
      }
    } else {
      setModulosTemp(modulos);
    }
  }, [tipoInversor, modulos]);

  const faseInversorSelecionada = form.watch(
    "tipoLigacao_digitado_proposta" as never
  );

  const getOptionsTensoes = useMemo(() => {
    const faseSelecionada =
      faseInversorSelecionada?.value ??
      faseInversorSelecionada ??
      dadosCard?.tipoLigacao_coleta;

    const resultado = [
      ...new Set(
        (inversoresBD || [])
          .filter((a: any) => {
            if (a.tensoes_item === null) return false;

            const faseItem = String(a.fases_item ?? "");
            const faseSelecionadaStr = String(faseSelecionada ?? "");

            return faseItem === faseSelecionadaStr || faseItem === "*";
          })
          .flatMap((i: any) => String(i.tensoes_item || "").split(","))
          .map((v: string) => v.trim())
          .filter(Boolean)
      ),
    ];

    return resultado;
  }, [faseInversorSelecionada, inversoresBD, dadosCard?.tipoLigacao_coleta]);
  function formatarDataBR(data: any) {
    if (!data) return "??/??/????";
    const d = new Date(data);
    if (isNaN(d.getTime())) return "??/??/????";
    return d.toLocaleDateString("pt-BR");
  }

  function isForaDoPeriodoVigencia(inicio: any, fim: any) {
    if (!inicio || !fim) return false;
    const hoje = new Date();
    const dataInicio = new Date(inicio);
    const dataFim = new Date(fim);
    hoje.setHours(0, 0, 0, 0);
    dataInicio.setHours(0, 0, 0, 0);
    dataFim.setHours(0, 0, 0, 0);
    return hoje < dataInicio || hoje > dataFim;
  }

  const vigenciaInicio = concessionariaAtual?.dataInicioVigencia_concessionaria;
  const vigenciaFim = concessionariaAtual?.dataFimVigencia_concessionaria;
  const ultimaAtualizacaoTarifa = concessionariaAtual?.dataAtualizacao_concessionaria;

  const foraDoPeriodoVigencia = isForaDoPeriodoVigencia(
    vigenciaInicio,
    vigenciaFim
  );
  return (
    <Container className="max-sm:h-auto shadow-none overflow-auto rounded-none">
      {isLoadedDadosGerais ? (
        <div className="text-boxdark dark:text-white" key={form.key}>
          <div className="overflow-auto">
            {/* Botão "Próximo" no topo, igual às demais abas */}
            <div className="pb-2 flex w-full justify-end">
              <Button
                className="flex border-[1px] max-sm:text-xs border-[#cbced4] bg-primary hover:brightness-90 px-9 h-9 items-center rounded-lg"
                onClick={(e: any) => {
                  handleSubmit(handleCalcular)(e);
                }}
                type="button"
                disabled={
                  !isLoadedDadosGerais ||
                  nenhumIdDocs ||
                  !profile?.name ||
                  isLoadingTelhados
                }
                loading={isLoading}
              >
                Próximo
              </Button>
            </div>
            {!inCard && (
              <>
                <p className="text-lg  mb-5">Dados do Cliente</p>
                <Divider />
                <InputGroup>
                  <div className="grid w-full">
                    <Input
                      onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) =>
                        setNomeKeyUp(e.currentTarget.value)
                      }
                      onFocus={handleCadastroCliente}
                      autoComplete="off"
                      formulario={form}
                      required
                      error="Digite o nome"
                      name="nome"
                      label="Nome do Cliente"
                      onMouseLeave={() => setMouseOn(false)}
                      onMouseEnter={() => setMouseOn(true)}
                    />
                    <PopoverCadastroCliente
                      nomeDigitado={nomeKeyUp}
                      clienteNovo={handleCadastroNovoCliente}
                      clienteSelecionado={(e: any) => {
                        setHaErros(false);
                        form.clearErrors("telefone");
                        setContatoCadastrado([]);
                        setClienteNovo(false);
                        handlePopoverCliente(e);
                      }}
                      open={openPopoverCadastro}
                    />
                  </div>

                  <InputSelectComponent
                    defaultValue={cidadeSelecionada}
                    options={showOptions ? cidadesFiltered : []}
                    formulario={form}
                    required
                    minimumCharacter
                    captureInputChange={FilterOptions}
                    onFocus={() => setOpenPopoverCidade(!openPopoverCidade)}
                    error="Selecione a cidade"
                    name="cidade"
                    label="Cidade - Estado"
                  />
                  <div className="flex flex-col w-full">
                    <Input
                      autoComplete="off"
                      formulario={form}
                      mascara="telefone"
                      defaultValue={clienteSelecionado.telefone1_cliente}
                      required
                      onChange={(e: any) => {
                        setTelefone(e.target.value);
                        handleValidaTelefone(e.target.value);
                      }}
                      error="Digite o telefone"
                      label="Telefone do Cliente"
                      name="telefone"
                      disabled={!clienteNovo}
                    />
                    <DropdownMenu>
                      {contatoCadastrado.length > 0 && (
                        <DropdownMenuTrigger title="Colunas" className="w-fit">
                          <span className="text-sm underline cursor-pointer flex items-center gap-2">
                            Ver cadastro
                          </span>
                        </DropdownMenuTrigger>
                      )}
                      <DropdownMenuContent>
                        <div className="grid text-sm w-44">
                          <span className="p-1">Cliente cadastrado:</span>
                          <div className="border-b border-stroke mb-1"></div>
                          {contatoCadastrado.map((res: any, index: number) => (
                            <>
                              <span>{res.nome_cliente}</span>
                              <span className="text-xs text-opacity-80">
                                {res.cidade_cliente} - {res.estado_cliente}
                              </span>
                            </>
                          ))}
                        </div>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                  {clienteNovo && (
                    <InputSelectComponent
                      formulario={form}
                      required
                      error="Selecione a origem"
                      name="origem"
                      label="Origem"
                      options={origem}
                    />
                  )}
                </InputGroup>
                {clienteNovo && (
                  <InputGroup>
                    <Input
                      formulario={form}
                      label="Nome do negócio"
                      required
                      name="nome_negocio"
                      type="text"
                    />
                    <InputSelectComponent
                      formulario={form}
                      name="tipoFatura"
                      label="Perfil de Consumo"
                      options={simultaneidade}
                    />
                    <Input
                      formulario={form}
                      label="UC"
                      name="uc_cliente"
                      type="text"
                      mascara="numerico"
                    />
                  </InputGroup>
                )}
              </>
            )}
            <ModalComponente
              opened={openSelectNegocio}
              onClose={() => setOpenSelectNegocio(false)}
              hasSaveButton={false}
              className=" "
              hasCloseBtn={false}
            >
              <div className="w-full text-black dark:text-white">
                <p className="text-center mb-9 ">
                  Este cliente já possui um negócio, o que deseja fazer?
                </p>
                <div className="md:flex grid  justify-center md:gap-13 md:divide-x ">
                  <div className="md:pl-8">
                    <span className="pb-3 flex  items-center gap-2">
                      Selecionar um existente
                      <Tooltip
                        title={
                          "Irá gerar uma proposta encima do negócio selecionado"
                        }
                      >
                        <Info size={14} className="text-bodydark" />
                      </Tooltip>
                    </span>
                    <InputSelectComponent
                      name="escolha_negocio"
                      formulario={form}
                      defaultValue={""}
                      options={negocios}
                      onChange={(e: any) => {
                        form.setValue("nome_negocio", "");
                        setNewBusinessState(e.value == "" ? false : true);
                      }}
                    />
                    <Button
                      onClick={selectedBusiness}
                      disabled={selectedBusinessState}
                      type="button"
                      className="self-center mt-3 w-full flex  text-sm"
                    >
                      Selecionar
                    </Button>
                  </div>
                  <div className="md:pl-8 justify-center flex flex-col ">
                    <span className="pb-3 ">Criar novo negócio</span>
                    <Input
                      onKeyUp={(e) => {
                        const selectedValue = (e.target as HTMLSelectElement)
                          .value;
                        setSelectedBusinessState(
                          selectedValue === "" ? false : true
                        );
                      }}
                      name="nome_negocio"
                      placeholder="Dê um nome ao negócio"
                      formulario={form}
                    />
                    <Button
                      disabled={newBusinessState}
                      onClick={createNewBusiness}
                      type="button"
                      className="self-center mt-3 flex w-full text-sm"
                    >
                      Criar
                    </Button>
                  </div>
                  `
                </div>
              </div>
            </ModalComponente>
            {!connected && (
              <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-2 rounded-md border-[#fcdcaa] shadow-sm">
                <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                  <RiErrorWarningFill size={20} color="#ffb747" />
                </div>
                <p className="text-black text-sm">
                  Atenção!! Não foi conectado nenhuma &quot;Conta Google&quot;
                  para que possamos identificar as Templates existentes. Favor
                  avisar o ADM do Sistema.
                </p>
              </div>
            )}
            {foraDoPeriodoVigencia && (
              <div className="mb-5 w-full flex border items-center bg-[#fff5ea] gap-2 px-4 p-2 rounded-md border-[#fcdcaa] shadow-sm">
                <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                  <RiErrorWarningFill size={20} color="#ffb747" />
                </div>
                <p className="text-black text-sm">
                  ATENÇÃO!! A última atualização dos valores das tarifas da
                  Concessionária &quot;{concessionaria_proposta}&quot; foi no dia{" "}
                  {formatarDataBR(ultimaAtualizacaoTarifa)}, e está fora do período de
                  vigência que é de: {formatarDataBR(vigenciaInicio)} até{" "}
                  {formatarDataBR(vigenciaFim)}, favor providenciar uma nova
                  atualização, pois o valor impacta no RSI.
                </p>
              </div>
            )}
            {nenhumIdDocs && (
              <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-2 rounded-md border-[#fcdcaa] shadow-sm">
                <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                  <RiErrorWarningFill size={20} color="#ffb747" />
                </div>
                <p className="text-black text-sm">
                  Atenção!! Não foi informado nenhum ID de documento com o
                  Modelo para a Geração das Propostas, e isso irá gerar um erro
                  na geração final do .PDF. Favor avisar o ADM do Sistema.
                </p>
              </div>
            )}
            <p
              className={`text-lg max-sm:text-sm pb-2 ${inCard ? "" : "pt-17"}`}
            >
              Dados do Negócio
            </p>
            <div className="flex flex-col max-sm:text-xs bg-gray-2 border-gray dark:bg-graydark border-2 rounded p-2">
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-2 items-start">
                <div className="flex flex-col min-w-0">
                  <div className="bg-coolGray-100 px-3 py-1 rounded-md">
                    <div className="font-bold">
                      Informações do documento Google
                    </div>
                    <div className="flex items-center gap-1 text-gray-700 text-center">
                      <span className="font-bold">Conta:</span>{" "}
                      <span className={`${profile?.name ? "" : "text-error"}`}>
                        {profile?.name || "Não conectada"}
                      </span>
                    </div>
                    <div className="flex items-center gap-1 text-gray-700 text-center">
                      <span className="font-bold">Nome:</span>{" "}
                      <span className={`${nenhumIdDocs ? "text-error" : ""}`}>
                        {docProposta?.name || "Não encontrado"}
                      </span>
                    </div>
                    <div
                      className="flex items-center gap-1 text-gray-700 text-center cursor-pointer"
                      onClick={() => {
                        if (docProposta?.id) {
                          navigator.clipboard
                            .writeText(docProposta?.id)
                            .then(() => {
                              toast.success("ID copiado!");
                            })
                            .catch(() => {
                              toast.error("Falha ao copiar");
                            });
                        }
                      }}
                    >
                      <span className="font-bold">ID:</span>{" "}
                      <span
                        className={`overflow-hidden text-ellipsis ${nenhumIdDocs ? "text-error" : ""}`}
                      >
                        {docProposta?.id || "Não encontrado"}
                      </span>
                    </div>
                  </div>
                  <div>
                    <span className="font-bold">Simultaneidade:</span>{" "}
                    {valor_simultaneidade_proposta} %
                  </div>
                  <div>
                    <span className="font-bold">Tipo de Ligação:</span>{" "}
                    {nome_tipoLigacao_proposta}
                  </div>
                  <div>
                    <span className="font-bold">Disjuntor:</span>{" "}
                    {disjuntor_proposta}
                  </div>
                  <div className="flex gap-3">
                    <div className="w-full">

                      <span className="font-bold">Concessionária:</span>{" "}
                      {concessionaria_proposta}
                    </div>
                    <div className="w-full">
                      <span className="font-bold">Período de Vigência:</span>{" "}
                      de {formatarDataBR(vigenciaInicio)} até {formatarDataBR(vigenciaFim)}
                    </div>
                  </div>
                  <div>
                    <span className="font-bold">Grupo:</span> {grupo_proposta}
                  </div>
                  <div>
                    <span className="font-bold">Subgrupo:</span>{" "}
                    {subgrupo_proposta}
                  </div>
                  <div>
                    <span className="font-bold">Qtde de UCs:</span>{" "}
                    {ucs?.length}
                  </div>
                  <div>
                    <span className="font-bold">Média de consumo:</span>{" "}
                    {calcTotalConsumo()}
                  </div>
                </div>
                <div className="flex flex-col gap-2 h-44 overflow-auto min-w-0 w-full">
                  {ucs.map((uc, index) => (
                    <div
                      key={index}
                      className="bg-white dark:bg-black border-gray border-2 px-2 rounded-xl"
                    >
                      <div>
                        <span className="font-bold">
                          Número da UC{" "}
                          {index == 0 ? "Geradora" : "Beneficiária"}:{" "}
                        </span>
                        {uc.uc}
                      </div>
                      <div>
                        <span className="font-bold">
                          Média de Consumo da UC:{" "}
                        </span>
                        {uc.tipoValor == "Mensal"
                          ? (
                            uc.valor.reduce(
                              (acc: number, curr: number | string) =>
                                acc + +curr,
                              0
                            ) /
                            uc.valor.filter(
                              (val: number | string) => val !== ""
                            ).length
                          )?.toFixed(0)
                          : uc.valor}
                      </div>
                    </div>
                  ))}
                </div>
                <div className="flex flex-col gap-2 h-44 overflow-auto min-w-0 w-full items-center">
                  <div className="font-semibold text-error">
                    Confira abaixo se a imagem do endereço de instalação está
                    correta, 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 bg-white dark:bg-black-2">
                        <LoaderSun height={60} />
                      </div>
                    ) : (
                      <figure
                        className="max-w-40 max-h-[100%] overflow-hidden 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>
                </div>
              </div>
            </div>
            <Divider />
            {canEditTarifa && (
              <div className="border border-warning w-fit p-1 rounded text-[rgb(145,108,45)] dark:text-[rgb(255,219,156)] bg-warning/10">
                Tarifa não foi encontrada, informe a tarifa!
              </div>
            )}
            <InputGroup>
              {defaultValues && (
                <>
                  <InputSelectComponent
                    name="instituicao_financeira"
                    label="Instituição Financeira"
                    formulario={form}
                    isMulti
                    skipEffect
                    options={[
                      {
                        value: "0",
                        label: "NENHUMA",
                      },
                      ...instituicoesFinanceiras.map((e: any) => ({
                        ...e,
                        value: e.id_inst,
                        label: e.nome_inst,
                      })),
                    ]}
                    onChange={(e: any) => {
                      if (e.some((a: any) => a.value == 0)) {
                        form.setValue("instituicao_financeira", [
                          {
                            value: "0",
                            label: "NENHUMA",
                          },
                        ]);
                      }

                      if (e.length > 2) {
                        form.setValue("instituicao_financeira", e.slice(0, 2));
                      }
                    }}
                    defaultValue={
                      defaultValues && defaultValues["instituicao_financeira"]
                    }
                    disabled={
                      defaultValues && defaultValues["instituicao_financeira"]
                    }
                    required
                    error="Informe uma Instituição Financeira"
                  />
                  <Input
                    name="precoTotal_tarifa"
                    label="Valor Tarifa Aplicação (R$)"
                    formulario={form}
                    mascara="numeroPreciso"
                    required
                    error="Informe a tarifa"
                  // disabled={
                  //   (perfil.permite_alterar_valorTarifa == 0 &&
                  //     perfil.cargo_perfil != 4) ||
                  //   !canEditTarifa
                  // }
                  />
                  <Input
                    name="sombreamentos_coleta"
                    label="Sombreamento (%)"
                    formulario={form}
                    mascara="numero"
                    required
                    error="Informe um Sombreamento"
                    disabled={perfil.edita_sombreamento_perfil == "0"}
                    defaultValue={
                      defaultValues &&
                      String(defaultValues.sombreamento_parametro)
                    }
                    onChange={(e) => {
                      if (e.target.value) {
                        if (
                          +FormatFields.desformatarNumeros(e.target.value) >
                          99.99
                        ) {
                          form.setValue("sombreamentos_coleta", "99,99");
                        }
                      }
                    }}
                  />
                  <InputSelectComponent
                    name="performance_ratio_parametro"
                    label="Performance Ratio"
                    formulario={form}
                    options={Array.from({ length: 11 }).map((_, index) => ({
                      value: index + 75,
                      label: index + 75 + "%",
                    }))}
                    skipEffect
                    defaultValue={
                      defaultValues && defaultValues.performance_ratio_parametro
                    }
                    disabled={perfil.edita_performance_ratio_perfil == "0"}
                  />
                  <Input
                    name="porcentagemGeracao"
                    label="Aumento de Consumo (%)"
                    formulario={form}
                    defaultValue={
                      porcentagemGeracao ||
                      (defaultValues && defaultValues.margem_geracao_parametro)
                    }
                    required
                    placeholder="Digite a Geração"
                    mascara="numero"
                    onChange={() => recalcularConsumoComAumento()}
                  />
                  <div className="w-full relative">
                    <Button
                      className={`absolute right-0 bg-primary flex flex-row gap-2 rounded-full p-0`}
                      type="button"
                      onClick={(e: any) => {
                        e.stopPropagation();
                        handleSweetAlert({
                          icon: "info",
                          title: "Porcentagem Seguro",
                          showDenyButton: false,
                          confirmButtonText: "Ok",
                          html: "Este campo serve apenas para fins de calculo do RSI, e caso não queira considerar no RSI deve zerar este campo, pois o mesmo não altera o valor da proposta, pois entendemos que o SEGURO é um produto a parte e tem a questão da apólice e o valor a ser pago pelo seguro e as condições.",
                        });
                      }}
                    >
                      <Info />
                    </Button>
                    <Input
                      name="seguro_rsi_coleta"
                      formulario={form}
                      label="Seguro %"
                      mascara="numero"
                      // width={"w-fit"}
                      error="Informe o Valor do seguro"
                      required
                      defaultValue={defaultValues?.seguro_rsi_parametro}
                      onChange={(e) => {
                        if (e.target.value) {
                          if (
                            +FormatFields.desformatarNumeros(e.target.value) >
                            100
                          ) {
                            form.setValue(
                              "seguro_rsi_coleta" as never,
                              "100,00" as never
                            );
                          }
                        }
                      }}
                    />
                  </div>
                </>
              )}
            </InputGroup>
            <InputGroup align="center">
              <InputSelectComponent
                name="kitProprio"
                label="Tipo de Kit"
                formulario={form}
                options={[
                  { label: "Kit de Distribuidores", value: "0" },
                  { label: "Kits Próprios", value: "1" },
                ]}
                onChange={(e: any) => {
                  setKitProrio(e?.value == "1");
                  if (e?.value == "0") {
                    // Limpar campos quando muda para Kit de Distribuidores
                    form.setValue("espessura_cabo", null);
                    form.setValue("tipo_string_inversor", "");
                    form.setValue("id_microInversor", "");
                    form.setValue("marca_inversor", "");
                    form.setValue("tipo_bateria", "");
                    form.clearErrors([
                      "espessura_cabo",
                      "tipo_string_inversor",
                      "id_microInversor",
                      "marca_inversor",
                      "tipo_bateria",
                    ]);
                    setIsMicroInversor(false);
                    // setFabricantesFilter([]);
                  } else if (
                    e?.value == "0" &&
                    !["microinversor", "inversor_on_grid"].includes(
                      form.control._formValues.tipo_string_inversor?.value
                    )
                  ) {
                    form.setValue("tipo_string_inversor", "");
                  }
                }}
                required
                error="Selecione o tipo do kit"
                // defaultValue={defaultValues.tipo_kit_parametro}
                defaultValue={
                  Object.keys(form?.control?._formValues)?.includes(
                    "kitProprio"
                  )
                    ? form?.control?._formValues?.kitProprio?.value
                    : defaultValues?.tipo_kit_parametro
                }
                skipEffect
              />
              {kitProprio && (
                <>
                  <InputSelectComponent
                    name="calculo_capacidade_modulos_parametro"
                    label="Cálculo da Capacidade de Módulos"
                    formulario={form}
                    options={[
                      { label: "Overload do Inversor", value: "0" },
                      { label: "Potência Nominal do Inversor", value: "1" },
                      {
                        label: `Potência Nominal do Inversor + % Configurado (${percentualCalculoCapacidadeModulos}%)`,
                        value: "2",
                      },
                    ].map((e) => ({
                      label: e.label,
                      value: e.value,
                    }))}
                    onChange={(e: any) => {
                      setCalculoCapacidadeModulos(e);
                    }}
                    disabled={
                      usuario?.permite_informar_calculo_capacidade_usuario !==
                      "1"
                    }
                    defaultValue={
                      defaultValues.calculo_capacidade_modulos_parametro
                    }
                    skipEffect
                  />
                  {/* {calculoCapacidadeModulos?.value == "2" && (
                    <Input
                      name="porcent_calculo_capacidade_modulos_parametro"
                      label="Porcentagem Cálculo da Capacidade de Módulos"
                      formulario={form}
                      prefix={"%"}
                      mascara="numero"
                      disabled={true}
                      defaultValue={
                        defaultValues &&
                        defaultValues[
                          "porcent_calculo_capacidade_modulos_parametro"
                        ]
                      }
                      skipEffect
                    />
                  )} */}
                </>
              )}
              <InputSelectComponent
                name="tipoLigacao_digitado_proposta"
                label="Fase do Inversor"
                width="w-full"
                formulario={form}
                options={[
                  { value: "1", label: "Monofásico" },
                  { value: "3", label: "Trifásico" },
                ]}
                required
                error="Selecione a Fase do Inversor"
                skipEffect
                defaultValue={
                  dadosCard?.tipoLigacao_coleta == "1"
                    ? "1"
                    : dadosCard?.tipoLigacao_coleta == "2"
                      ? "1"
                      : "3"
                }
              />
              <InputSelectComponent
                name="tensoes"
                label="Tensões"
                width="w-full"
                formulario={form}
                options={getOptionsTensoes.map((t) => ({ value: t, label: t }))}
                isMulti
                required
                error="Selecione a Tensão"
                skipEffect
                defaultValue={defaultValues && defaultValues.tensoes_parametro}
              />
              {kitProprio ? (
                <Fragment>
                  <InputSelectComponent
                    key={1}
                    className="w-full"
                    name="distribuidor"
                    label="Distribuidor"
                    formulario={form}
                    options={distribuidores
                      .filter(
                        (distribuidor) =>
                          distribuidor.isFornecedor_distribuidor != "1" &&
                          distribuidor.status_distribuidor == "1"
                      )
                      .map((distribuidor) => ({
                        ...distribuidor,
                        label: distribuidor.nome_distribuidor,
                        value: distribuidor.id_distribuidor,
                      }))}
                    required
                    error="Selecione ao menos um Distribuidor"
                    onChange={(e: any) => {
                      setDistribuidor(e);
                      form.setValue("marca_inversor", "");
                      // let filter = fabricantes.filter(
                      //   (a: any) => a.codDistribuidor_item === e.value
                      // );
                      // if (tipoInversor != "inversor_string_microinversor") {
                      //   filter = filter.filter(
                      //     (a: any) => a.tipoStringInversor_item === tipoInversor
                      //   );
                      // }
                      // const existsParameter = filter.some(
                      //   (a: any) =>
                      //     a.id_fabricante == defaultValues?.fabricante_parametro
                      // );

                      // if (!existsParameter) {
                      //   form.setValue("marca_inversor", { value: "" });
                      //   setMarcaInvValue("");
                      // }

                      // setFabricantesFilter(filter);
                      form.setValue("modulo", "");
                    }}
                    defaultValue={
                      form?.control?._formValues?.distribuidor?.value ||
                      defaultValues.distribuidor_parametro
                    }
                    skipEffect
                  />
                  {defaultValues && modulosTemp.length > 0 ? (
                    <InputSelectComponent
                      key={2}
                      name="modulo"
                      label="Módulo"
                      formulario={form}
                      options={modulosTemp.map(mapModuloOption)}
                      required
                      error="Selecione o Módulo"
                      onChange={(e: any) => {
                        // setModuloSelecionado(e.value);
                        form.setValue("potencia_modulo", e?.potencia_item);
                      }}
                      defaultValue={
                        form.getValues("modulo") ||
                        defaultValues?.modulo_padrao_parametro
                      }
                      skipEffect
                    />
                  ) : (
                    <InputSelectComponent
                      key={2}
                      name="modulo"
                      label="Módulo"
                      placeholder="Sem Módulos Para esse Distribuidor"
                      disabled
                      formulario={form}
                      options={modulosTemp.map(mapModuloOption)}
                      required
                      error="Selecione o Módulo"
                      onChange={(e: any) => {
                        // setModuloSelecionado(e.value);
                        form.setValue("potencia_modulo", e?.potencia_item);
                      }}
                      defaultValue={
                        form.getValues("modulo") ||
                        defaultValues?.modulo_padrao_parametro
                      }
                      skipEffect
                    />
                  )}
                </Fragment>
              ) : (
                <Fragment>
                  <InputSelectComponent
                    name="distribuidores"
                    key={3}
                    label="Distribuidores"
                    formulario={form}
                    options={distribuidoresFiltrados
                      .filter((dist: any) => dist.status_distribuidor == "1")
                      .map((distribuidor: any) => ({
                        ...distribuidor,
                        label: distribuidor.nome_distribuidor,
                        value: distribuidor.id_distribuidor,
                      }))}
                    isMulti
                    required
                    error="Selecione ao menos um Distribuidor"
                    onChange={(e: any) => {
                      setDistribuidoresSelecionados(e);
                      form.setValue("marca_inversor", "");
                      form.clearErrors("marca_inversor");
                    }}
                    defaultValue={
                      form
                        .getValues("distribuidores")
                        ?.map((d: any) => d?.value)
                        ?.join(",") ?? defaultValues.distribuidor_parametro
                    }
                  />
                  <div className="w-full flex gap-5">
                    <InputSelectComponent
                      name="potencia_modulos"
                      key={4}
                      label="Potência do Módulo (Wp)"
                      formulario={form}
                      options={potenciasModulosDistribuidores.map(
                        (potencia) => ({
                          value: (+potencia).toFixed(0),
                          label: (+potencia).toFixed(0),
                        })
                      )}
                      onChange={(e: any) => {
                        form.setValue("potencia_modulo", e?.value);
                      }}
                      required
                      error="Informe a potência do módulo"
                      defaultValue={
                        Object.keys(form?.control._formValues).includes(
                          "potencia_modulos"
                        )
                          ? form?.control._formValues?.potencia_modulos
                            ?.value || ""
                          : (defaultValues &&
                            defaultValues.potencia_modulos_parametro) ||
                          ""
                        // ? {
                        //     value: defaultValues.potencia_modulos_parametro,
                        //     label: defaultValues.potencia_modulos_parametro,
                        //   }
                        // : undefined
                      }
                      skipEffect
                    />

                    <InputSelectComponent
                      key={5}
                      name="marca_inversor"
                      label={
                        <div className="flex items-center gap-2">
                          <span>Fabricante Inversor</span>
                          <Button
                            className={`bg-primary flex flex-row gap-2 rounded-full p-0 h-6 w-6 min-w-6`}
                            type="button"
                            onClick={(e: any) => {
                              e.stopPropagation();
                              handleSweetAlert({
                                icon: "info",
                                title: "Fabricantes de Inversores",
                                showDenyButton: false,
                                confirmButtonText: "Ok",
                                html: `
                                <div style="text-align: left; max-width: 450px; margin: 0 auto;">
                                  <p style="font-size: 15px; color: #64748b; margin-bottom: 20px; font-weight: 500;">Os fabricantes são filtrados pelos seguintes critérios:</p>
                                  
                                  <div style="display: grid; gap: 12px;">
                                    <div style="display: flex; gap: 12px; padding: 12px; background: #f0f9ff; border-left: 3px solid #3b82f6; border-radius: 6px;">
                                      <span style="color: #3b82f6; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Tipo de Item</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">Deve ser tipo inversor ou todos</p>
                                      </div>
                                    </div>
                                    
                                    <div style="display: flex; gap: 12px; padding: 12px; background: #f0fdf4; border-left: 3px solid #10b981; border-radius: 6px;">
                                      <span style="color: #10b981; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Fabricante Distribuidor</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">Fornecido pelos distribuidores</p>
                                      </div>
                                    </div>
                                    
                                    <div style="display: flex; gap: 12px; padding: 12px; background: #fef3c7; border-left: 3px solid #f59e0b; border-radius: 6px;">
                                      <span style="color: #f59e0b; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Tipo de Inversor</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">Compatível com o tipo de inversor informado</p>
                                      </div>
                                    </div>

                                    <div style="display: flex; gap: 12px; padding: 12px; background: #fef3c7; border-left: 3px solid #f59e0b; border-radius: 6px;">
                                      <span style="color: #f59e0b; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Status Ativo</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">O fabricante deve estar habilitado no sistema</p>
                                      </div>
                                    </div>
                                  </div>
                                  
                                  <div style="margin-top: 20px; padding: 12px; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0;">
                                    <p style="margin: 0; color: #475569; font-size: 13px; line-height: 1.5;">
                                      💡 <strong>Dica:</strong> Se um fabricante não aparecer na lista, verifique se ele atende a todos os critérios acima.
                                    </p>
                                  </div>
                                </div>
                              `,
                              });
                            }}
                          >
                            <Info size={16} className="text-white" />
                          </Button>
                        </div>
                      }
                      formulario={form}
                      options={getFabricantesDistribuidorOptions()}
                      error="Selecione o Fabricante"
                      defaultValue={
                        // Preserva o objeto selecionado para não limpar o campo
                        // ao retornar de outra etapa (ex.: Distribuição)
                        form.control._formValues.marca_inversor ||
                        (defaultValues && defaultValues.fabricante_parametro)
                      }
                    // skipEffect
                    />
                  </div>
                </Fragment>
              )}
            </InputGroup>
            {/* A Espessura do Cabo Solar (configurada em Parâmetros) se aplica
                tanto a Kit Próprio quanto a Kit de Distribuidor — o cabeamento
                não faz parte do kit em nenhum dos dois casos. Por isso este
                campo fica fora do bloco "kitProprio", diferente dos campos de
                inversor/bateria abaixo, que são específicos de Kit Próprio.
                Sem isso, o campo nunca era exibido (nem preenchido) para
                Kit de Distribuidor, mesmo sendo usado depois em
                KitsProposta para calcular o cabo solar do kit. */}
            <InputGroup>
              <InputSelectComponent
                name="espessura_cabo"
                options={[
                  OPCAO_ESPESSURA_CABO_AUTOMATICA,
                  ...espessurasCabo.map((espessura) => ({
                    value: espessura.espessura_item,
                    label: `${espessura.espessura_item} mm²`,
                  })),
                ]}
                label="Espessura do Cabo (mm²)"
                formulario={form}
                // Item (b): campo sozinho dentro do InputGroup (flex row)
                // esticava e ocupava a linha toda. Mesmo breakpoint (xl) já
                // usado pelo InputGroup para virar row, só que aqui limitando
                // a largura do campo em telas grandes.
                width="w-full xl:w-1/4"
                disabled={
                  !isModoEspessuraCaboSolarInformar(
                    modoEspessuraCaboSolarParametro
                  )
                }
                skipEffect
                defaultValue={
                  (isModoEspessuraCaboSolarInformar(
                    modoEspessuraCaboSolarParametro
                  )
                    ? form?.control?._formValues?.espessura_cabo?.value !==
                      undefined
                      ? form.control._formValues.espessura_cabo.value
                      : (defaultValues?.espessura_cabo ?? null)
                    : obterEspessuraCaboSolarSelecionada(
                        modoEspessuraCaboSolarParametro,
                        defaultValues?.espessura_cabo_solar_parametro
                      )) ?? OPCAO_ESPESSURA_CABO_AUTOMATICA
                }
              />
            {kitProprio && (
              <>
                <InputSelectComponent
                  name="tipo_string_inversor"
                  key={1}
                  label="Tipo de Inversor"
                  formulario={form}
                  options={TIPOS_STRING_INVERSOR.filter((tipoString: any) =>
                    kitProprio  
                      ? true
                      : TIPOS_STRING_INVERSOR_KIT_DISTRIBUIDOR.includes(
                        tipoString.value
                      )
                  )}
                  // required
                  error="Selecione o Tipo de Inversor"
                  // Sugestão vinda de Parâmetros → Dados Padrão 02. Em branco,
                  // o vendedor escolhe aqui mesmo.
                  defaultValue={
                    defaultValues &&
                    defaultValues["tipo_string_inversor_parametro"]
                  }
                  onChange={(e: any) => {
                    setTipoInversor(e?.value);
                    if (e?.value == "microinversor") {
                      form.setValue("tipo_inversor", {
                        value: "micro_inversor",
                        label: "Microinversor",
                      });
                      setIsMicroInversor(true);
                    } else {
                      // if (e?.value == "inversor_on_grid") {
                      // let filter = fabricantes.filter(
                      //   (a: any) =>
                      //     a.codDistribuidor_item ===
                      //     form.control._formValues?.distribuidor
                      //       ?.id_distribuidor
                      // );
                      // if (e?.value != "inversor_string_microinversor") {
                      //   filter = filter.filter(
                      //     (a: any) => a.tipoStringInversor_item === e.value
                      //   );
                      // }

                      // const existsParameter = filter.some(
                      //   (a: any) =>
                      //     a.id_fabricante == defaultValues?.fabricante_parametro
                      // );
                      // if (!existsParameter) {
                      //   setMarcaInvValue("");
                      // }

                      // setFabricantesFilter(filter);

                      form.setValue("tipo_inversor", {
                        value: "inversor_parede",
                        label: "Inversor de Parede",
                      });
                      setIsMicroInversor(false);
                    }
                  }}
                  // defaultValue={"inversor_parede"}
                  skipEffect
                />
                {isMicroInversor ? (
                  <InputSelectComponent
                    name="id_microInversor"
                    key={2}
                    label="Micro Inversor"
                    formulario={form}
                    options={microInversores
                      .filter((a: any) => {
                        const distribuidor = form.watch("distribuidor");
                        const kitProprioM = form.watch("kitManual");
                        const ehProprio = kitProprioM ? "0" : "1";

                        return (
                          a.codDistribuidor_item === distribuidor?.value &&
                          a.status_item == "1" &&
                          a.tipoOrigem_item == ehProprio
                        );
                      })
                      .map((microInversor) => ({
                        label: microInversor.descricao_item,
                        value: microInversor.id_item,
                      }))}
                    error="Informe a potência do inversor"
                  />
                ) : (
                  <>
                    {distribuidor && (
                      <div className="w-full relative">
                        <Button
                          className={`absolute right-0 top-0 bg-primary flex flex-row gap-2 rounded-full p-0 z-99`}
                          type="button"
                          onClick={(e: any) => {
                            e.stopPropagation();
                            handleSweetAlert({
                              icon: "info",
                              title: "Fabricantes de Inversores",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `
                                <div style="text-align: left; max-width: 450px; margin: 0 auto;">
                                  <p style="font-size: 15px; color: #64748b; margin-bottom: 20px; font-weight: 500;">Os fabricantes são filtrados pelos seguintes critérios:</p>
                                  
                                  <div style="display: grid; gap: 12px;">
                                    <div style="display: flex; gap: 12px; padding: 12px; background: #f0f9ff; border-left: 3px solid #3b82f6; border-radius: 6px;">
                                      <span style="color: #3b82f6; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Tipo de Item</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">Deve ser tipo inversor ou todos</p>
                                      </div>
                                    </div>
                                    
                                    <div style="display: flex; gap: 12px; padding: 12px; background: #f0fdf4; border-left: 3px solid #10b981; border-radius: 6px;">
                                      <span style="color: #10b981; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Fabricante Próprio</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">Cadastrado manualmente no sistema</p>
                                      </div>
                                    </div>


                                    <div style="display: flex; gap: 12px; padding: 12px; background: #fef3c7; border-left: 3px solid #f59e0b; border-radius: 6px;">
                                      <span style="color: #f59e0b; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Distribuidor Selecionado</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">O fabricante deve ter algum inversor associado ao distribuidor</p>
                                      </div>
                                    </div>

                                    <div style="display: flex; gap: 12px; padding: 12px; background: #fef3c7; border-left: 3px solid #f59e0b; border-radius: 6px;">
                                      <span style="color: #f59e0b; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Tipo de Inversor</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">Compatível com o tipo de inversor informado</p>
                                      </div>
                                    </div>

                                    <div style="display: flex; gap: 12px; padding: 12px; background: #fef3c7; border-left: 3px solid #f59e0b; border-radius: 6px;">
                                      <span style="color: #f59e0b; font-size: 18px; flex-shrink: 0;">✓</span>
                                      <div>
                                        <p style="margin: 0; color: #1e293b; font-weight: 600; font-size: 14px;">Status Ativo</p>
                                        <p style="margin: 4px 0 0 0; color: #64748b; font-size: 13px;">O fabricante deve estar habilitado no sistema</p>
                                      </div>
                                    </div>

                                  </div>
                                  
                                  <div style="margin-top: 20px; padding: 12px; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0;">
                                    <p style="margin: 0; color: #475569; font-size: 13px; line-height: 1.5;">
                                      💡 <strong>Dica:</strong> Se um fabricante não aparecer na lista, verifique se ele atende a todos os critérios acima.
                                    </p>
                                  </div>
                                </div>
                              `,
                            });
                          }}
                        >
                          <Info size={24} className="text-white" />
                        </Button>

                        <InputSelectComponent
                          key={6}
                          name="marca_inversor"
                          label="Fabricante Inversor"
                          formulario={form}
                          options={getFabricantesDistribuidorOptions()}
                          error="Selecione o Fabricante"
                          defaultValue={
                            // Preserva o objeto selecionado para não limpar o campo
                            // ao retornar de outra etapa (ex.: Distribuição)
                            form.control._formValues.marca_inversor ||
                            (defaultValues &&
                              defaultValues.fabricante_parametro)
                          }
                        // skipEffect
                        />
                      </div>
                    )}

                    {(tipoInversor === "inversor_off_grid" ||
                      tipoInversor === "inversor_hibrido") && (
                        <InputSelectComponent
                          name="tipo_bateria"
                          label="Tipo Bateria"
                          formulario={form}
                          required
                          defaultValue={
                            form.control._formValues.tipo_bateria?.value ||
                            (defaultValues &&
                              defaultValues.tipo_bateria_parametro)
                          }
                          options={[
                            { value: "3", label: "Nenhuma" },
                            { value: "0", label: "Lítio" },
                            { value: "1", label: "Chumbo Ácido" },
                          ]}
                        />
                      )}
                  </>
                )}
              </>
            )}
            </InputGroup>
            {camposPersonalizados}
          </div>
        </div>
      ) : (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      )}
    </Container>
  );
};

export default DadosGerais;