import { useEffect, useState } from "react";

import LoaderBar from "@/components/Loader/loaderBar";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { useGoogleAuth } from "@/hooks/useGoogleAuth";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { salvarAwsRetornaLink } from "@/requests/common/Aws/salvarAwsRetornaLink";
import { listarRelacionamenosRapidos } from "@/requests/common/RelacionamentosRapidos/listarRelacionamenosRapidos";
import { obterAgendamentoInstalacaoNegocio } from "@/requests/CRM/AgendamentosInstalacoes/obterAgendamentoInstalacaoNegocio";
import {
  listarAnexosCard,
  listarComplementosColeta,
  listarConfiguracoesAnexos,
} from "@/requests/CRM/kanban";
import { listarUcsColeta } from "@/requests/CRM/UCs/listarUcsColeta";
import { listarOrigemCliente } from "@/requests/CRUD/Cliente/cadastroCliente";
import { obterFinanciadorNegocio } from "@/requests/CRUD/Cliente/obterFinanciadorNegocio";
import {
  listarComponentesKitByKitId,
  obterItem,
} from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarConcessionarias } from "@/requests/CRUD/Concessionaria/listarConcessionarias";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import imageCompression from "browser-image-compression";

import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarEmpresasTerceirizadas } from "@/requests/CRUD/EmpresasTerceirizadas/listarEmpresasTerceirizadas";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { listarChecklistNegocio } from "@/requests/CRUD/PendenciaEngenharia/listarChecklistNegocio";
import { obterDistribuicaoModulos } from "@/requests/CRUD/Propostas/obterDistribuicaoModulos";
import { listarTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/listarTiposEdificacao";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarTiposTelhados } from "@/requests/CRUD/TiposTelhados/listarTiposTelhados";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { formatLabelTipoEdificacao } from "@/utils/formatTipoEdificacao";
import { deleteDoc } from "@/requests/deleteDoc";
import { generatePdf } from "@/requests/generatePdf";
import { useAuth } from "@/src/contexts/authContext";
import { useContractContext } from "@/src/contexts/ContractProvider";
import { useLoja } from "@/src/contexts/lojaContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import {
  calcularAnosEMeses,
  capitalizeMonth,
  formatarValor,
  FormatFields,
  getDateBrasil,
  getDateTimeBrasil,
} from "@/utils";
import {
  carregarDadosExpansaoItensCompostos,
  formatarComponentesTabelaKitExpandido,
} from "@/utils/formatarComponentesTabelaKit";
import { resolverProfissaoContratante } from "@/utils/resolverProfissaoContratante";
import extenso from "extenso";
import Image from "next/image";
import { FaFileUpload } from "react-icons/fa";
import { toast } from "react-toastify";
import LoaderGif from "../../../../public/images/loaders/loader2.gif";

/**
 * Extrai todas as tags {{tagName}} do template e retorna apenas os dados necessários
 * Reduz o payload removendo dados desnecessários
 */
const filtrarDadosNecessarios = (
  nomesRelacionamentos: Set<string>,
  dadosCompletos: any
) => {
  const tagsUsadas = new Set<string>(nomesRelacionamentos);

  // Criar novo objeto com apenas os dados necessários
  const dadosOtimizados: any = {};
  tagsUsadas.forEach((tag) => {
    if (dadosCompletos.hasOwnProperty(tag)) {
      const valor = dadosCompletos[tag];
      if (tag.startsWith("img_")) {
        if (typeof valor === "string" && /^https?:\/\//i.test(valor)) {
          dadosOtimizados[tag] = valor;
        }
        return;
      }
      dadosOtimizados[tag] = valor;
    }
  });

  return dadosOtimizados;
};

/**
 * Converte uma string dataURL (Base64) em um objeto File.
 */
async function dataURLtoFile(dataurl: any, filename: any) {
  const arr = dataurl.split(",");
  if (arr.length < 2) {
    console.error("String Base64 inválida");
    return null;
  }

  const mimeMatch = arr[0].match(/:(.*?);/);
  if (!mimeMatch || mimeMatch.length < 2) {
    console.error("MIME type não encontrado no Base64");
    return null;
  }
  const mime = mimeMatch[1];

  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], filename, { type: mime });
}

// Função para comprimir imagens em base64
// ============================================================
// FUNÇÕES AUXILIARES PARA PROCESSAMENTO DE TAGS
// ============================================================

/**
 * Processa dados do financiador
 */
const processarFinanciador = async (dados: any) => {
  const tags: any = {};
  let financiador: any = null;

  try {
    financiador = await obterFinanciadorNegocio({
      id_coleta: dados.id_coleta_cliente,
    });

    if (financiador) {
      tags["nomeResponsavelFisico_financiador"] =
        financiador?.nomeResponsavelFisico_financiador || "Sem Financiador";
      tags["cpfResponsavel_financiador"] =
        financiador?.cpfResponsavel_financiador || "Sem Financiador";
      tags["tipoPessoa_financiador"] =
        financiador?.tipoPessoa_financiador == "J"
          ? "Jurídica"
          : financiador?.tipoPessoa_financiador == "F"
            ? "Física"
            : "Sem Financiador";
      tags["email_financiador"] =
        financiador?.email_financiador || "Sem Financiador";
      tags["dataNasc_financiador"] = financiador?.dataNasc_financiador
        ? FormatFields.formatarDataHora(
            financiador.dataNasc_financiador,
            "dd/mm/AAAA"
          )
        : "Sem Financiador";
      tags["telefone1_financiador"] =
        financiador?.telefone1_financiador || "Sem Financiador";
      tags["telefone2_financiador"] =
        financiador?.telefone2_financiador || "Sem Financiador";
      tags["cep_financiador"] =
        financiador?.cep_financiador || "Sem Financiador";
      tags["rua_financiador"] =
        financiador?.rua_financiador || "Sem Financiador";
      tags["numero_financiador"] =
        financiador?.nro_financiador || "Sem Financiador";
      tags["bairro_financiador"] =
        financiador?.bairro_financiador || "Sem Financiador";
      tags["complemento_financiador"] =
        financiador?.comp_financiador || "Sem Financiador";
      tags["cidade_financiador"] =
        financiador?.cidade_financiador || "Sem Financiador";
      tags["uf_financiador"] =
        financiador?.estado_financiador || "Sem Financiador";
    }
  } catch {
    // Erro ao buscar financiador
  }

  Object.assign(tags, resolverProfissaoContratante(dados, financiador));
  return tags;
};

/**
 * Processa dados de um usuário com sua role
 */
const processarUsuario = (
  usuario: any,
  role: string,
  { formatarDataHora }: any
) => {
  const roleKey = role.toLowerCase().replace(/\s+/g, "_");
  const tags: any = {};

  tags[`nome_${roleKey}`] = usuario?.nome_usuario;
  tags[`telefone_${roleKey}`] = usuario?.telefone1_usuario;
  tags[`email_${roleKey}`] = usuario?.email_usuario;
  tags[`img_${roleKey}`] = usuario?.caminho_foto_proposta_usuario;

  return tags;
};

/**
 * Processa dados de empresa terceirizada
 */
const processarEmpresaTerceirizada = (empresa: any, rolePrefix: string) => {
  const tags: any = {};
  const defaultValue = " ";

  tags[`${rolePrefix}_nome_empresa_terceirizada`] =
    empresa?.nome_empresa_terceirizada || defaultValue;
  tags[`${rolePrefix}_cnpj_empresa_terceirizada`] =
    empresa?.cnpj_empresa_terceirizada || defaultValue;
  tags[`${rolePrefix}_rua_empresa_terceirizada`] =
    empresa?.rua_empresa_terceirizada || defaultValue;
  tags[`${rolePrefix}_numero_empresa_terceirizada`] =
    empresa?.numero_empresa_terceirizada || defaultValue;
  tags[`${rolePrefix}_bairro_empresa_terceirizada`] =
    empresa?.bairro_empresa_terceirizada || defaultValue;
  tags[`${rolePrefix}_cidade_empresa_terceirizada`] =
    empresa?.cidade_empresa_terceirizada || defaultValue;
  tags[`${rolePrefix}_estado_empresa_terceirizada`] =
    empresa?.estado_empresa_terceirizada || defaultValue;
  tags[`${rolePrefix}_cep_empresa_terceirizada`] =
    empresa?.cep_empresa_terceirizada || defaultValue;

  return tags;
};

/**
 * Processa dados de loja
 */
const processarLoja = (loja: any) => {
  const tags: any = {};
  const defaultValue = " ";

  tags["razao_social_loja"] = loja?.razaosocial_loja;
  tags["cnpj_loja"] = loja?.cnpj_loja;
  tags["rua_loja"] = loja?.endereco_loja;
  tags["endereco_loja"] =
    `${loja.endereco_loja}, ${loja.numero_loja}, ${loja.complemento_loja}, Bairro ${loja.bairro_loja}, CEP ${loja.cep_loja}`;
  tags["numero_loja"] = loja?.numero_loja;
  tags["bairro_loja"] = loja?.bairro_loja;
  tags["cidade_loja"] = loja?.cidade_loja;
  tags["cep_loja"] = loja?.cep_loja;
  tags["telefone_loja"] = loja?.telefone_loja;
  tags["agencia_loja"] = loja?.nrAgencia_conta_loja;
  tags["conta_loja"] = loja?.conta_loja;
  tags["pix_loja"] = loja?.pix_loja;
  tags["banco_loja"] = loja?.nome_inst_bancaria;
  tags["complementos_bancarios_loja"] = loja?.complementos_bancarios_loja;
  tags["email_loja"] = loja?.email_loja;
  tags["proprietario_loja"] = loja?.proprietario_loja;
  tags["id_loja_negocio"] = loja?.id_loja;
  tags["nome_loja"] = loja?.nome_loja;
  tags["nomeRepresentanteLegal_loja"] = loja?.nomeRepresentanteLegal_loja;
  tags["cpfRepresentanteLegal_loja"] = loja?.cpfRepresentanteLegal_loja;
  tags["complemento_loja"] = loja?.complemento_loja;
  tags["estado_loja"] = loja?.estado_loja;
  tags["instagram_loja"] = loja?.instagram_loja;
  tags["facebook_loja"] = loja?.facebook_loja;
  tags["site_loja"] = loja?.site_loja;

  return tags;
};

/**
 * Processa dados de loja padrão
 */
const processarLojaPadrao = (lojaAtual: any) => {
  const tags: any = {};
  const defaultValue = " ";

  if (!lojaAtual) return tags;

  tags["cep_loja_padrao"] = lojaAtual?.cep_loja || defaultValue;
  tags["rua_loja_padrao"] = lojaAtual?.endereco_loja || defaultValue;
  tags["numero_loja_padrao"] = lojaAtual?.numero_loja || defaultValue;
  tags["bairro_loja_padrao"] = lojaAtual?.bairro_loja || defaultValue;
  tags["complemento_loja_padrao"] = lojaAtual?.complemento_loja || defaultValue;
  tags["cidade_loja_padrao"] = lojaAtual?.cidade_loja || defaultValue;
  tags["estado_loja_padrao"] = lojaAtual?.estado_loja || defaultValue;
  tags["endereco_loja_padrao"] =
    `${lojaAtual?.endereco_loja || ""}, ${lojaAtual?.numero_loja || ""}, ${lojaAtual?.complemento_loja || ""}, Bairro ${lojaAtual?.bairro_loja || ""}, CEP ${lojaAtual?.cep_loja || ""}`;
  tags["nome_responsavel_loja_padrao"] =
    lojaAtual?.nomeRepresentanteLegal_loja || defaultValue;
  tags["cpf_responsavel_loja_padrao"] =
    lojaAtual?.cpfRepresentanteLegal_loja || defaultValue;

  return tags;
};

/**
 * Processa tags de garantia e eficiência
 * Prefere o valor em `garantia_item` do componente quando existir;
 * caso contrário, usa o parâmetro padrão.
 */
const processarGarantias = (parametros: any, componentesKit?: any[]) => {
  const tags: any = {};

  const obterGarantiaComponente = (
    matchFn: (comp: any) => boolean
  ): number | undefined => {
    if (!componentesKit || !Array.isArray(componentesKit)) return undefined;
    const comp = componentesKit.find(
      (c: any) => matchFn(c) && (c.garantia_item || c.garantia)
    );
    const garantiaVal = comp?.garantia_item ?? comp?.garantia;
    if (garantiaVal === undefined || garantiaVal === null || garantiaVal === "")
      return undefined;
    const n = Number(String(garantiaVal).replace(",", "."));
    return isNaN(n) ? undefined : n;
  };

  const garantiaModulo = obterGarantiaComponente(
    (c) => String(c?.id_tipo_item) === "9" || String(c?.tipo_item) === "9"
  );
  const garantiaInversor = obterGarantiaComponente(
    (c) => String(c?.id_tipo_item) === "8" || String(c?.tipo_item) === "8"
  );
  const garantiaEstrutura = obterGarantiaComponente((c) => {
    const cat = String(c?.categoria || c?.category || "").toLowerCase();
    return cat.includes("estrutura") || String(c?.id_tipo_item) === "7";
  });
  const garantiaBateria = obterGarantiaComponente((c) => {
    const cat = String(c?.categoria || c?.category || "").toLowerCase();
    return cat.includes("bateria") || String(c?.id_tipo_item) === "16";
  });

  tags["garantia_modulos"] = calcularAnosEMeses(
    garantiaModulo ?? +parametros.garantia_modulos_parametro
  );
  tags["garantia_inversores"] = calcularAnosEMeses(
    garantiaInversor ?? +parametros.garantia_inversores_parametro
  );
  tags["garantia_servicos"] = calcularAnosEMeses(
    +parametros.garantia_servicos_parametro
  );
  tags["garantia_estruturas"] = calcularAnosEMeses(
    garantiaEstrutura ?? +parametros.garantia_estruturas_parametro
  );
  tags["garantia_baterias"] = calcularAnosEMeses(
    garantiaBateria ?? +parametros.garantia_baterias_parametro
  );
  tags["periodoEficiencia_modulos_anos"] =
    parametros.anos_eficiencia_modulo_parametro || " ";
  tags["percEficiencia_nodulos_periodo"] =
    parametros.eficiencia_25anos_modulo_parametro || " ";

  return tags;
};

/**
 * Processa datas no formato extenso
 */
const processarDatas = () => {
  const tags: any = {};
  const dataAtualObj = new Date();
  const mesesExtenso = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ];

  tags["dia_numero"] = dataAtualObj.getDate().toString();
  tags["mes_numero"] = (dataAtualObj.getMonth() + 1).toString();
  tags["ano_numero"] = dataAtualObj.getFullYear().toString();
  tags["mes_extenso"] = mesesExtenso[dataAtualObj.getMonth()];

  return tags;
};

/**
 * Processa tags de valores (moeda e extenso)
 */
const processarValores = (dados: any) => {
  const tags: any = {};

  tags["valorTotal_proposta"] = formatarValor(+dados["valorTotal_proposta"]);
  tags["valor_extenso_proposta"] = dados["valorTotal_proposta"]
    ? extenso(+dados["valorTotal_proposta"], { mode: "currency" })
    : "";
  tags["preco_kit"] = dados["preco_kit"]
    ? formatarValor(+dados["preco_kit"])
    : "";
  tags["preco_extenso_kit"] = dados["preco_kit"]
    ? extenso(+dados["preco_kit"], { mode: "currency" })
    : "";
  tags["valor_sem_kit"] =
    dados["valorTotal_proposta"] && dados["preco_kit"]
      ? formatarValor(+dados["valorTotal_proposta"] - +dados["preco_kit"])
      : "";
  tags["valor_extenso_sem_kit"] =
    dados["valorTotal_proposta"] && dados["preco_kit"]
      ? extenso(+dados["valorTotal_proposta"] - +dados["preco_kit"], {
          mode: "currency",
        })
      : "";

  return tags;
};

/**
 * Normaliza string removendo acentos, substituindo espaços por underscores e convertendo para minúsculas
 * Utilizado para fazer matching entre relacionamentos rápidos e categorias de anexos
 */
const normalizarStringParaMatching = (str: string): string => {
  return String(str || "")
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .trim()
    .replace(/\s+/g, "_")
    .replace(/[^a-z0-9_]/g, "");
};

/**
 * Processa anexos marcados como tag baseado nos relacionamentos rápidos do template
 * Faz o matching entre nome_relacionamento_rapido e identificacao_cfg_anexo
 */
const processarAnexosTags = async (
  documento: any,
  anexosCard: any[],
  configAnnexos: any[]
) => {
  const tags: any = {};

  try {
    // Buscar relacionamentos rápidos (todos)
    const relacionamentosRapidos = await listarRelacionamenosRapidos();

    // Para cada relacionamento rápido, tentar encontrar o anexo marcado como tag
    relacionamentosRapidos.forEach((relacao: any) => {
      const nomeRelacaoNormalizado = normalizarStringParaMatching(
        relacao.nome_relacionamento_rapido
      );

      // Encontrar a categoria de anexo que corresponde ao relacionamento
      const categoriaAnexo = configAnnexos.find((cfg: any) => {
        const idCfgNormalizado = normalizarStringParaMatching(
          cfg.identificacao_cfg_anexo
        );
        return idCfgNormalizado === nomeRelacaoNormalizado;
      });
      if (categoriaAnexo) {
        // Encontrar o anexo marcado como tag dessa categoria
        const anexoTag = anexosCard.find(
          (anexo: any) =>
            anexo.categoria_arquivo_card === categoriaAnexo.id_anexo_crm &&
            String(anexo.arquivo_tag_card) === "1"
        );

        if (anexoTag) {
          // Adicionar o caminho do arquivo aos dados
          tags[relacao.nome_relacionamento_rapido] =
            anexoTag.preview || anexoTag.caminho_arquivo_card;
        } else {
          tags[relacao.nome_relacionamento_rapido] =
            "https://t3.ftcdn.net/jpg/10/22/24/80/360_F_1022248039_7LDxHRi3Mlt9BK3wzLBUGZp9XAO1gt2s.jpg";
        }
      }
    });
  } catch (error) {
    console.warn("Erro ao processar anexos tags:", error);
  }

  return tags;
};

// type Mode = "form" | "viewer";
// let contratoIdTemporario = 0;
// let contratoSalvo = false;

const GeracaoDocumentoPersonalizado = ({
  dadosCard,
  dadosCliente,
  dadosProposta,
  template,
  onSubmitFunction,
  camposPersonalizados,
  parametros,
  titulo,
  documento,
  setView,
}: any) => {
  // const uiRef = useRef<HTMLDivElement | null>(null);
  // const ui = useRef<Form | Viewer | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isSavingDocument, setIsSavingDocument] = useState(false);
  const [isGeneratingPdf, setIsGeneratingPdf] = useState(false);
  const { formatarNumero, formatarDataHora } = FormatFields;
  const { lojaAtual } = useLoja();
  const [pdf, setPdf] = useState<any>();
  const [pdfBlob, setPdfBlob] = useState<any>();
  const [loaderStep, setLoaderStep] = useState(0);

  const steps = [
    "Salvando contrato...",
    "Relacionando dados...",
    "Comprimindo imagens...",
    "Gerando PDF...",
    "Finalizando...",
  ];

  const { relacionar, relacionamentos, relacionamentosContrato } =
    useContractContext();

  const { isMobile } = useScreenContext();

  const { valuesSession } = useAuth();
  const { connected, profile, isStatusVerifyed } = useGoogleAuth(
    dadosCard?.id_loja_coleta
  );

  useEffect(() => {
    // if (!connected) return;
    if (isStatusVerifyed) {
      if (!connected) {
        handleSweetAlert({
          icon: "error",
          title: `Não foi possível conectar-se a conta google`,
          html: `<span>Não foi possível conectar-se a conta google para a geração do documento</span>`,
          showDenyButton: false,
          confirmButtonText: "Ok",
        });

        setView("DocumentosPersonalizados");
        return;
      }

      if (isMobile) {
        toast.info("Para melhor visualização gire o seu celular");
      }
      gerarDocumento();
    }
  }, [connected]);

  const gerarDocumento = async () => {
    // let template: Template = getTemplate();
    try {
      setLoaderStep(1);
      // const templateString = localStorage.getItem("template");

      // const templateString = await obterTemplateContrato().then(
      //     (res) => res.template_contrato
      // );

      const templateString = template;

      // const contratoId = Number(await listarUltimoIdContrato());
      const camposPersonalizadosSearch = Object.fromEntries(
        Object.entries(camposPersonalizados).filter(
          ([key, value]) =>
            key.endsWith("_campo_personalizado") || key.endsWith("_cp")
        )
      );

      const camposPersonalizadosFormat = Object.fromEntries(
        Object.entries(camposPersonalizadosSearch).map(([key, value]) => [
          key,
          value,
        ])
      );

      // setContratoIdTemporario(contratoId);
      // contratoIdTemporario = contratoId;

      const dados = {
        ...dadosCliente,
        ...dadosCard,
        ...dadosProposta,
      };
      const dadosAdicionais: any = {};

      // ============================================================
      // SEÇÃO: POTÊNCIA E INVERSORES
      // ============================================================
      dadosAdicionais["potencia_modulos"] = formatarNumero(
        dados["potencia_modulo_proposta"]
      );
      dadosAdicionais["potencia_inversores"] =
        formatarNumero(dados["potencia_inversores_proposta"]) + "kW";

      // ============================================================
      // SEÇÃO: FINANCIADOR
      // ============================================================
      const financiadorTags = await processarFinanciador(dados);
      Object.assign(dadosAdicionais, financiadorTags);

      // ============================================================
      // SEÇÃO: CLASSIFICAÇÕES E TIPOS
      // ============================================================

      await Promise.all([
        listarClassificacoes().then((res) => {
          dadosAdicionais["classificacao_negocio"] = res.find(
            (classificacao: any) =>
              classificacao.id_classificacao == dados.classificacao_coleta
          )?.nome_classificacao;
        }),
        listarTiposNegocios().then((res) => {
          dadosAdicionais["tipoNegocio"] = res.find(
            (tipoNegocio: any) =>
              tipoNegocio.id_tipo_negocio == dados.tipoNegocio_coleta
          )?.nome_tipo_negocio;
        }),
        listarTiposTelhados().then((res) => {
          dadosAdicionais["telhado_proposta"] = res.find(
            (telhado: any) => telhado.id_telhado == dados.telhado_proposta
          )?.nome_telhado;
        }),
        obterDistribuicaoModulos(dados.id_proposta)
          .then((res) => {
            dadosAdicionais["orientacoes_proposta"] = res
              .map(
                (dadosDistribuicao: any) => dadosDistribuicao.sigla_orientacao
              )
              .join(", ");
          })
          .catch(() => {}),
        listarComponentesKitByKitId(dados.kit_proposta).then(async (res) => {
          const componentesKit = res["componentesKit"] || [];
          const tabelaProdutosParametro = parametros?.tabela_produtos_parametro;

          const isItemComposto = (componente: any) => {
            const nomeTipo = String(
              componente?.nome_tipo_item || ""
            ).toLowerCase();
            const categoria = String(componente?.categoria || "").toLowerCase();
            const descricao = String(componente?.descricao || "").toLowerCase();
            const idTipo = String(componente?.id_tipo_item || "");

            return (
              nomeTipo.includes("item composto") ||
              categoria.includes("item composto") ||
              descricao.startsWith("item composto") ||
              idTipo === "99"
            );
          };

          const isModuloOuInversorOuBateria = (componente: any) => {
            const categoria = String(
              componente?.categoria || componente?.category || ""
            ).toLowerCase();
            const tipoItem = String(
              componente?.id_tipo_item || componente?.tipo_item || ""
            );

            return (
              tipoItem === "9" ||
              tipoItem === "8" ||
              tipoItem === "16" ||
              categoria.includes("bateria") ||
              categoria.includes("inversor") ||
              categoria.includes("modulo") ||
              categoria.includes("módulo")
            );
          };

          const formatarComponenteTabelaKit = (componente: any) => {
            const isPrioritario = isModuloOuInversorOuBateria(componente);
            const qtdReal = componente?.qtd ?? componente?.qtd_item;
            const qtd =
              tabelaProdutosParametro === "incluso" && !isPrioritario
                ? "INCLUSO"
                : qtdReal;

            return {
              name: componente?.descricao || componente?.name,
              category: componente?.categoria || componente?.category,
              qtd,
              _isPrioritario: isPrioritario,
            };
          };

          dadosAdicionais["componentes_tabela_kit_val"] = componentesKit
            ?.filter((componente: any) => componente.descricao)
            .map(formatarComponenteTabelaKit)
            .sort((a: any, b: any) => {
              if (a._isPrioritario && !b._isPrioritario) return -1;
              if (!a._isPrioritario && b._isPrioritario) return 1;
              return 0;
            })
            .map((componente: any) => {
              const { _isPrioritario, ...resto } = componente;
              return resto;
            });

          dadosAdicionais["componentes_sem_itens_compostos_tabela_kit_val"] =
            componentesKit
              ?.filter(
                (componente: any) =>
                  componente?.descricao && !isItemComposto(componente)
              )
              .map(formatarComponenteTabelaKit)
              .sort((a: any, b: any) => {
                if (a._isPrioritario && !b._isPrioritario) return -1;
                if (!a._isPrioritario && b._isPrioritario) return 1;
                return 0;
              })
              .map((componente: any) => {
                const { _isPrioritario, ...resto } = componente;
                return resto;
              });

          await Promise.all([
            listarFabricantes(),
            listarDistribuidores(),
            listarDistribuidoresNativos(),
          ])
            .then(
              async ([fabricantes, distribuidores, distribuidoresNativos]) => {
                const modulo = res["componentesKit"]?.find(
                  (e: any) => e.codModulo_kit == e.id_item
                );
                dadosAdicionais["descricao_modulos"] = modulo?.descricao;

                if (!modulo.modelo_item && modulo.cod_item) {
                  await obterItem(modulo.cod_item).then((novoModulo) => {
                    dadosAdicionais["modelo_modulo"] = novoModulo.modelo_item;
                  });
                } else {
                  dadosAdicionais["modelo_modulo"] = modulo.modelo_item;
                }

                if (modulo.tipoOrigem_item == "0") {
                  dadosAdicionais["distribuidor_modulos"] = distribuidores.find(
                    (distribuidor: any) =>
                      distribuidor.id_distribuidor ==
                      modulo.codDistribuidor_item
                  )?.nome_distribuidor;
                } else {
                  dadosAdicionais["distribuidor_modulos"] =
                    distribuidoresNativos.find(
                      (distribuidor: any) =>
                        distribuidor.id_distribuidor ==
                        modulo.codDistribuidor_item
                    )?.nome_distribuidor;
                }

                dadosAdicionais["fabricante_modulos"] = fabricantes.find(
                  (fabricante: any) =>
                    fabricante.id_fabricante == modulo.codFabricante_item
                )?.nome_fabricante;

                const inversores = res["componentesKit"]?.filter(
                  (item: any) => {
                    return (
                      item.codInversor1_kit == item.id_item ||
                      item.codInversor2_kit == item.id_item
                    );
                  }
                );
                dadosAdicionais["tensao_rede_proposta"] = inversores
                  .map((inversor: any) => inversor.tensoes_item + "kW")
                  .join(", ");

                const [qtd_min_modulos, qtd_max_modulos] = inversores.reduce(
                  (acc: [number, number], inversor: any) => {
                    const potenciaInversorW =
                      parseFloat(inversor.potencia_item) * 1000; // Converte kW para W
                    const underload = +inversor.underload_item / 100; // 70% -> 0.7
                    const overload = +inversor.overload_item / 100; // 150% -> 1.5
                    const potenciaModulo = +dados?.potencia_modulo_proposta;
                    const qtdItem = parseInt(inversor.qtd_item) || 1;

                    let minModulos =
                      (potenciaInversorW * qtdItem * underload) /
                      potenciaModulo;
                    minModulos = Math.floor(minModulos);

                    let maxModulos =
                      (potenciaInversorW * qtdItem * overload) / potenciaModulo;

                    if (inversor.tipoInversor_item == "micro_inversor") {
                      maxModulos = Math.floor(
                        (potenciaInversorW * overload) / potenciaModulo
                      );

                      maxModulos =
                        maxModulos > +inversor.qtdModulos_max_item
                          ? +inversor.qtdModulos_max_item
                          : maxModulos;

                      maxModulos = maxModulos * qtdItem;
                    }

                    maxModulos = Math.floor(maxModulos);

                    return [acc[0] + minModulos, acc[1] + maxModulos];
                  },
                  [0, 0]
                );
                dadosAdicionais["min_modulos"] = String(qtd_min_modulos);
                dadosAdicionais["max_modulos"] = String(qtd_max_modulos);
                // [
                //   res["componentesKit"]?.find(
                //     (e: any) => e.codInversor1_kit == e.id_item
                //   ),
                //   res["componentesKit"]?.find(
                //     (e: any) => e.codInversor2_kit == e.id_item
                //   ),
                // ];

                dadosAdicionais["descricao_inversores"] = inversores
                  .map((inversor: any) => inversor.descricao)
                  .join(", ");
                dadosAdicionais["modelos_inversores"] = inversores
                  .map((inversor: any) => inversor.modelo_item)
                  .join(", ");
                dadosAdicionais["fabricantes_inversores"] = inversores
                  .map(
                    (inversor: any) =>
                      fabricantes.find(
                        (fabricante: any) =>
                          fabricante.id_fabricante ==
                          inversor.codFabricante_item
                      )?.nome_fabricante
                  )
                  ?.filter((nome: any) => !!nome)
                  .join(", ");
                dadosAdicionais["distribuidores_inversores"] = inversores
                  .map((inversor: any) => {
                    if (inversor.tipoOrigem_item == "0") {
                      return distribuidores.find(
                        (distribuidor: any) =>
                          distribuidor.id_distribuidor ==
                          inversor.codDistribuidor_item
                      )?.nome_distribuidor;
                    } else {
                      return distribuidoresNativos.find(
                        (distribuidor: any) =>
                          distribuidor.id_distribuidor ==
                          inversor.codDistribuidor_item
                      )?.nome_distribuidor;
                    }
                  })
                  .filter((nome: any) => !!nome)
                  .join(", ");
                dadosAdicionais["quantidade_inversores"] = String(
                  res["componentesKit"]?.reduce(
                    (acc: number, item: any) =>
                      (acc =
                        item.categoria == "Inversores" ? acc + +item.qtd : acc),
                    0
                  )
                );
              }
            )
            .then(async () => {
              await listarComplementosColeta({
                id_coleta: dados.id_coleta_cliente,
                tipo_complemento_card: "Troca de Kit",
              }).then((res) => {
                const trocaDeKit = !!res[0];
                const novoKit = res[0];

                dadosAdicionais["marca_inversor_complemento"] =
                  novoKit?.inversores?.length > 0
                    ? novoKit?.inversores
                        .map((dadosInversor: any) => dadosInversor?.fabricante)
                        .join(", ")
                    : dadosAdicionais["fabricantes_inversores"];
                dadosAdicionais["qtd_inversor_complemento"] =
                  novoKit?.inversores?.length > 0
                    ? String(
                        novoKit?.inversores?.reduce(
                          (acc: number, item: any) => {
                            acc =
                              acc +
                              (+item.quantidade_inversor_complemento_card || 0);
                            return acc;
                          },
                          0
                        )
                      )
                    : dadosAdicionais["quantidade_inversores"];

                dadosAdicionais["potencia_inversor_complemento"] =
                  novoKit?.inversores?.length > 0
                    ? [...novoKit?.inversores]
                        .map(
                          (dadosInversor: any) =>
                            dadosInversor?.potencia_inversor_complemento_card +
                            "kW"
                        )
                        .join(", ")
                    : dadosAdicionais["potencia_inversores"];
                dadosAdicionais["descricao_inversor_complemento"] =
                  novoKit?.inversores.length > 0
                    ? novoKit?.inversores
                        .map(
                          (dadosInversor: any) =>
                            dadosInversor?.descricao_inversor_complemento_card
                        )
                        .filter((e: any) => !!e)
                        .join(", ")
                    : dadosAdicionais["descricao_inversores"];
                dadosAdicionais["modelo_inversor_complemento"] =
                  novoKit?.inversores.length > 0
                    ? novoKit?.inversores
                        .map(
                          (dadosInversor: any) =>
                            dadosInversor?.modelo_inversor_complemento_card
                        )
                        .filter((e: any) => !!e)
                        .join(", ")
                    : dadosAdicionais["modelos_inversores"];

                dadosAdicionais["fornecedor_inversor_complemento"] =
                  novoKit?.inversores?.length > 0
                    ? [...novoKit?.inversores]
                        .map(
                          (dadosInversor: any) => dadosInversor?.distribuidor
                        )
                        .join(", ")
                    : dadosAdicionais["distribuidores_inversores"];

                dadosAdicionais["marca_modulo_complemento"] =
                  novoKit?.fabricante_modulo ||
                  dadosAdicionais["fabricante_modulos"];
                dadosAdicionais["quantidade_modulos"] =
                  novoKit?.qtd_modulo_complemento_card ||
                  dados["modulosDigitado_proposta"] ||
                  0;
                dadosAdicionais["potencia_modulo_complemento"] =
                  novoKit?.potencia_modulo_complemento_card
                    ? formatarNumero(novoKit?.potencia_modulo_complemento_card)
                    : dadosAdicionais["potencia_modulos"];
                dadosAdicionais["descricao_modulo_complemento"] =
                  novoKit?.descricao_modulo_complemento_card ||
                  dadosAdicionais["descricao_modulos"];
                dadosAdicionais["modelo_modulo_complemento"] =
                  novoKit?.modelo_modulo_complemento_card ||
                  dadosAdicionais["modelo_modulo"];
                dadosAdicionais["fornecedor_modulo_complemento"] =
                  novoKit?.distribuidor_modulo ||
                  dadosAdicionais["distribuidor_modulos"];
              });
            });
          // Após termos os componentes do kit, buscar parâmetros e processar garantias
          try {
            const parametros = await listarParametros();
            const garantiasTags = processarGarantias(
              parametros,
              componentesKit
            );
            Object.assign(dadosAdicionais, garantiasTags);
          } catch (e) {
            // ignorar erro ao buscar parâmetros de garantia
          }
        }),
        listarUcsColeta(dados.id_coleta_cliente).then((ucs) => {
          const ug = ucs.find((uc: any) => uc.isGeradora_uc_coleta == "1");

          // Dados da UG (geradora)
          dadosAdicionais["consumo_ug"] = formatarNumero(
            +ug?.valor == +ug?.valor
              ? +ug?.valor
              : ug?.valor.reduce(
                  (acc: number, curr: string) => acc + +curr,
                  0
                ) / 12
          );
          dadosAdicionais["valor_consumo_ug"] = dados[
            "precoDigitadoTarifa_proposta"
          ]
            ? formatarValor(
                (+ug?.valor == +ug?.valor
                  ? +ug?.valor
                  : ug?.valor.reduce(
                      (acc: number, curr: string) => acc + +curr,
                      0
                    ) / 12) * +dados["precoDigitadoTarifa_proposta"]
              )
            : " ";
          dadosAdicionais["numero_uc_geradora"] =
            dadosCard.uc_coleta_numero || ug?.numero_uc_coleta || "";
          dadosAdicionais["media_consumo_uc_geradora"] = formatarNumero(
            +ug?.valor == +ug?.valor
              ? +ug?.valor
              : ug?.valor.reduce(
                  (acc: number, curr: string) => acc + +curr,
                  0
                ) / 12
          );
          dadosAdicionais["valor_conta_energia_geradora"] = dados[
            "precoTarifa_proposta"
          ]
            ? formatarValor(
                (+ug?.valor == +ug?.valor
                  ? +ug?.valor
                  : ug?.valor.reduce(
                      (acc: number, curr: string) => acc + +curr,
                      0
                    ) / 12) * +dados["precoTarifa_proposta"]
              )
            : " ";

          // Dados das UCs e UBs
          dadosAdicionais["ucs_beneficiarias"] = ucs
            ?.filter((_: any, index: number) => index != 0)
            .map((uc: any) => uc.numero_uc_coleta)
            .join(`, `);
          dadosAdicionais["concessionaria"] = dadosCard.nome_concessionaria;
          dadosAdicionais["tabela_ucs"] = ucs.map((uc: any, index: number) => {
            const valor =
              +uc.valor == +uc.valor
                ? +uc.valor
                : uc.valor.reduce(
                    (acc: number, curr: string) => acc + +curr,
                    0
                  ) /
                  uc.valor.filter((val: number | string) => val !== "").length;
            return {
              id_uc_coleta: uc.id_uc_coleta,
              uc: !uc.numero_uc_coleta ? "" : uc.numero_uc_coleta,
              nome:
                uc.isGeradora_uc_coleta == "1"
                  ? "UG " + (!uc.numero_uc_coleta ? "" : uc.numero_uc_coleta)
                  : "UB " + (!uc.numero_uc_coleta ? "" : uc.numero_uc_coleta),
              key: index,
              tipoValor: +uc.valor == +uc.valor ? "Média" : "Mensal",
              concessionaria: dadosCard.nome_concessionaria,
              valor: formatarNumero(valor) + "kWh",
              conta: formatarValor(valor * +dados.precoDigitadoTarifa_proposta),
            };
          });

          dadosAdicionais["tabela_ubs"] = ucs
            ?.filter((uc: any) => uc.isGeradora_uc_coleta == "0")
            .map((uc: any, index: number) => ({
              id_uc_coleta: uc.id_uc_coleta,
              uc: !uc.numero_uc_coleta ? "" : uc.numero_uc_coleta,
              nome:
                uc.isGeradora_uc_coleta == "1"
                  ? "UG " + (!uc.numero_uc_coleta ? "" : uc.numero_uc_coleta)
                  : "UB " + (!uc.numero_uc_coleta ? "" : uc.numero_uc_coleta),
              key: index,
              tipoValor: +uc.valor == +uc.valor ? "Média" : "Mensal",
              concessionaria: dadosCard.nome_concessionaria,
              valor:
                formatarNumero(
                  +uc.valor == +uc.valor
                    ? +uc.valor
                    : uc.valor.reduce(
                        (acc: number, curr: string) => acc + +curr,
                        0
                      ) / 12
                ) + "kWh",
              conta: formatarValor(
                (+uc.valor == +uc.valor
                  ? +uc.valor
                  : uc.valor.reduce(
                      (acc: number, curr: string) => acc + +curr,
                      0
                    ) / 12) * +dados.precoDigitadoTarifa_proposta
              ),
            }));
        }),
        listarConcessionarias().then((concessionarias: any) => {
          dadosAdicionais["concessionaria"] = concessionarias.find(
            (concessionaria: any) =>
              concessionaria.id_concessionaria == dados["concessionaria_coleta"]
          )?.nome_concessionaria;
        }),
        listarLojas().then((lojas: any) => {
          // ============================================================
          // PROCESSAMENTO DE LOJAS
          // ============================================================
          const loja = lojas.find(
            (loja: any) => loja.id_loja == dados["id_loja_coleta"]
          );

          if (loja) {
            const lojaTags = processarLoja(loja);
            Object.assign(dadosAdicionais, lojaTags);
          }

          // Loja padrão do usuário
          if (lojaAtual) {
            const lojaPadraoTags = processarLojaPadrao(lojaAtual);
            Object.assign(dadosAdicionais, lojaPadraoTags);
          }
        }),
        Promise.all([listarUsuarios(), listarEmpresasTerceirizadas()]).then(
          ([usuarios, empresasTerceirizadas]) => {
            // ============================================================
            // PROCESSAMENTO DE USUÁRIOS E SUAS EMPRESAS TERCEIRIZADAS
            // ============================================================
            const rolesMap = {
              Instalador: "instalador",
              Vendedor: "vendedor",
              Administrativo: "adm",
              "Pré-Vendedor": "pre_vendedor",
              Técnico: "tecnico",
              Gerente: "gerente",
              Supervisor: "supervisor",
            };

            Object.entries(rolesMap).forEach(([role, prefix]) => {
              const usuario = usuarios.find(
                (u: any) => u.id_usuario == dados["responsaveis"]?.[role]
              );

              if (usuario) {
                const usuarioTags = processarUsuario(usuario, prefix, {
                  formatarDataHora,
                });
                Object.assign(dadosAdicionais, usuarioTags);

                // Processar empresa terceirizada do usuário
                const empresa = empresasTerceirizadas.find(
                  (e: any) =>
                    e.id_empresa_terceirizada ==
                    usuario?.empresa_terceirizada_usuario
                );

                if (empresa) {
                  const empresaTags = processarEmpresaTerceirizada(
                    empresa,
                    prefix
                  );
                  Object.assign(dadosAdicionais, empresaTags);
                }
              }
            });
          }
        ),
        obterAgendamentoInstalacaoNegocio(dados.id_coleta_cliente).then(
          (res) => {
            dadosAdicionais["observacoes_instalacao"] =
              res?.observacoes_instalacao;
          }
        ),
        listarChecklistNegocio({
          id_loja: dados.id_loja_coleta,
          id_negocio: dados.id_coleta_cliente,
        }).then((res) => {
          dadosAdicionais["observacoes_engenharia"] = res
            .map(
              (checkData: any) =>
                `${checkData.nome_item_checklist_engenharia}: ${checkData.observacao_item_checklist_engenharia}`
            )
            .join(`\\n`);
        }),
        dados.caminho_resultadoPrecificacao_proposta
          ? baixarAwsContent(dados.caminho_resultadoPrecificacao_proposta).then(
              (resultadoPrecificacao_proposta) => {
                const resPrecificacao = JSON.parse(
                  resultadoPrecificacao_proposta
                );
                if (resPrecificacao) {
                  dadosAdicionais["preco_venda"] = formatarValor(
                    +resPrecificacao.preco_venda
                  );
                  dadosAdicionais["valor_desconto"] =
                    formatarNumero(
                      (
                        ((+dados["valorTotal_proposta"] -
                          +resPrecificacao.preco_venda) /
                          dados["valorTotal_proposta"]) *
                        100
                      ).toFixed(2)
                    ) + " %";
                }
              }
            )
          : () => {},
        listarOrigemCliente().then((res) => {
          const origemCliente = res.find(
            (origem: any) => origem.id_origem_cliente == dados.origem_cliente
          );

          dadosAdicionais["origem_cliente"] =
            origemCliente?.nome_origem_cliente || "";
        }),
        listarTiposNegocios().then((res) => {
          dadosAdicionais["tipoNegocio_coleta"] = res.find(
            (tipoNegocio: any) =>
              tipoNegocio.id_tipo_negocio == dados.tipoNegocio_coleta
          )?.nome_tipo_negocio;
        }),
        listarTiposEdificacao().then((res) => {
          const tipoEdificacao = res.find(
            (tipo: any) =>
              tipo.id_tipo_edificacao == dados.tipo_edificacao_coleta
          );
          dadosAdicionais["tipo_edificacao_coleta"] = tipoEdificacao
            ? formatLabelTipoEdificacao(tipoEdificacao)
            : " ";
        }),
        Promise.all([
          listarConfiguracoesAnexos(),
          listarAnexosCard(dados.id_coleta_cliente),
        ]).then(async ([configAnnexos, anexosCard]) => {
          // ============================================================
          // PROCESSAMENTO DE ANEXOS MARCADOS COMO TAG
          // ============================================================
          const anexosTags = await processarAnexosTags(
            documento,
            anexosCard,
            configAnnexos
          );
          Object.assign(dadosAdicionais, anexosTags);
        }),
      ]);

      if (dados["telefone2_cliente"] == "") {
        dadosAdicionais["telefone2_cliente"] = " ";
      }

      // ============================================================
      // SEÇÃO: TIPO DE FASE
      // ============================================================
      const arrayTipo = [
        { value: "1", label: "Monofásico" },
        { value: "2", label: "Bifásico" },
        { value: "3", label: "Trifásico" },
      ];

      dadosAdicionais["tipo_fase"] = arrayTipo.find(
        (ligacao) => ligacao.value == dados["tipoLigacao_proposta"]
      )?.label;

      dadosAdicionais["area_modulos"] = dados["area_modulos_ocupada_proposta"]
        ? formatarNumero(dados["area_modulos_ocupada_proposta"])
        : " ";

      dadosAdicionais["potencia_kit"] = dados["potenciaSistema_proposta"]
        ? formatarNumero(dados["potenciaSistema_proposta"])
        : " ";

      // ============================================================
      // SEÇÃO: TAGS ADICIONAIS PARA TEMPLATES (1-12)
      // ============================================================

      dadosAdicionais["disjuntor_coleta"] = dados["disjuntor_coleta"] || " ";

      dadosAdicionais["tipoNegocio_coleta"] =
        dados["tipoNegocio_coleta"] || " ";

      // ============================================================
      // SEÇÃO: DATAS
      // ============================================================
      const datasTags = processarDatas();
      Object.assign(dadosAdicionais, datasTags);

      // ============================================================
      // SEÇÃO: VALORES E EXTENSO
      // ============================================================
      const valoresTags = processarValores(dados);
      Object.assign(dadosAdicionais, valoresTags);
      dadosAdicionais["localizacao_instalacao"] =
        dadosCard.endereco_instalacao_coleta;
      dadosAdicionais["numero_proposta"] = dados.id_proposta;
      dadosAdicionais["numero_negocio"] = dados.id_coleta_cliente;
      dadosAdicionais["valor_total_pagamento"] = formatarValor(
        +dados["valorTotal_proposta"]
      );
      dadosAdicionais["media_consumoTotal"] = formatarNumero(
        +dados["consumoTotal_proposta"] || 0
      );
      dadosAdicionais["consumoTotal_anual"] = formatarNumero(
        ((+dados["consumoTotal_proposta"] || 0) * 12).toFixed(2)
      );
      dadosAdicionais["estimativa_geracao"] = formatarNumero(
        +(+dados["estimativa_proposta"] || 0).toFixed(2)
      );
      dadosAdicionais["geracao_anual"] = (
        (+dados["estimativa_proposta"] || 0) * 12
      ).toFixed(2);

      dadosAdicionais["valor_proposta"] = formatarValor(
        +dados["valorTotal_proposta"]
      );

      dadosAdicionais["condicao_pagamento_proposta"] = dados[
        "condicao_pagamento_proposta"
      ]
        ? JSON.stringify(dados["condicao_pagamento_proposta"]).slice(1, -1)
        : "";

      dadosAdicionais["data_instalacao"] = dados["data_instalacao"]
        ? formatarDataHora(dados["data_instalacao"], "dd/mm/AAAA")
        : "";

      dadosAdicionais["ie_cliente"] =
        dados["ie_cliente"] || dados["rg_cliente"];

      // ============================================================
      // SEÇÃO: LÓGICA CLIENTE OU FINANCIADOR
      // ============================================================
      const clienteOuFinanciador = {
        ...dadosCliente,
        dataNascimento_cliente: getDateBrasil(
          undefined,
          dadosCliente.dataNascimento_cliente
        ),
        tipoPessoa_cliente:
          dadosCliente.tipoPessoa_cliente == "J" ? "Jurídica" : "Física",
        nomeEmpresa_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.nomeEmpresa_cliente
            : "Pessoa Física",
        logradouroEmpresa_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.logradouroEmpresa_cliente
            : " ",
        complementoEmpresa_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.complementoEmpresa_cliente
            : " ",
        bairroEmpresa_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.bairroEmpresa_cliente
            : " ",
        cepEmpresa_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.cepEmpresa_cliente
            : " ",
        cidadeEmpresa_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.cidadeEmpresa_cliente
            : " ",
        ufEmpresa_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.ufEmpresa_cliente
            : " ",
        nomeResponsavelFisico_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.nomeResponsavelFisico_cliente
            : dadosCliente.nome_cliente,
        cpfResponsavel_cliente:
          dadosCliente.tipoPessoa_cliente == "J"
            ? dadosCliente.cpfResponsavel_cliente
            : dadosCliente.cpfcnpj_cliente,
      };
      console.log(
        "Dados do cliente ou financiador processados:",
        clienteOuFinanciador
      );

      // ============================================================
      // SEÇÃO: AMPLIAÇÃO (tipo_negocio == 3 ou 1)
      // ============================================================
      const isAmpliacao =
        dados.tipoNegocio_coleta == "3" || dados.tipoNegocio_coleta == "1";
      if (isAmpliacao) {
        const consumoOrigemRaw = dados["consumoOrigem_cliente"];
        const consumoOrigemValor = Array.isArray(consumoOrigemRaw)
          ? consumoOrigemRaw.reduce(
              (acc: number, curr: number | string) => acc + +curr,
              0
            ) / (consumoOrigemRaw.length || 1)
          : consumoOrigemRaw;

        // Consumo de Origem
        dadosAdicionais["consumoOrigem_cliente"] = formatarNumero(
          +consumoOrigemValor || 0
        );

        // Dados da Ampliação (novos módulos/inversores)
        dadosAdicionais["geracao_mensal_total_ampliacao"] = formatarNumero(
          dados["geracao_mensal_total_ampliacao"] || 0
        );
        dadosAdicionais["geracao_anual_total_ampliacao"] = formatarNumero(
          dados["geracao_anual_total_ampliacao"] || 0
        );
        dadosAdicionais["quantidade_modulos_total_ampliacao"] =
          dados["quantidade_modulos_total_ampliacao"] ||
          dados["modulosDigitado_proposta"] ||
          "0";
        dadosAdicionais["potencia_sistema_total_ampliacao"] = formatarNumero(
          dados["potencia_sistema_total_ampliacao"] ||
            dados["potenciaSistema_proposta"] ||
            0
        );

        // Dados de Origem (sistema existente)
        dadosAdicionais["qtd_modulos_origem"] =
          dados["qtd_modulos_origem"] || "0";
        dadosAdicionais["potencia_sistema_origem"] = formatarNumero(
          dados["potencia_sistema_origem"] || 0
        );
        dadosAdicionais["qtd_inversores_origem"] =
          dados["qtd_inversores_origem"] || "0";
        dadosAdicionais["potencia_modulos_origem"] = formatarNumero(
          dados["potencia_modulos_origem"] || 0
        );
        dadosAdicionais["potencia_inversores_origem"] = formatarNumero(
          dados["potencia_inversores_origem"] || 0
        );
      }

      const potencia_kit = dadosProposta.potenciaSistema_proposta;

      // ============================================================
      // SEÇÃO: CONSTRUÇÃO DO OBJETO FINAL DE RELACIONAMENTO
      // ============================================================
      const dadosParaRelacionamento = {
        // Dados básicos
        ...dados,
        ...dadosAdicionais,
        ...clienteOuFinanciador,
        ...camposPersonalizadosFormat,

        // Componentes e Kit
        tabela_inversores: (() => {
          const inversoresValidos = dadosProposta.componentesKit?.filter(
            (e: any) => e.id_tipo_item == "8" && e.qtd_item != 0
          );

          if (inversoresValidos?.length === 0) {
            const teste = [
              {
                qtd_item: "0",
                descricao_item: "Proposta sem Inversores",
              },
            ];
            return teste;
          }
          return inversoresValidos || [];
        })(),
        valorKwp_proposta: formatarValor(
          +dados.valorTotal_proposta / potencia_kit
        ),

        // Localização de Instalação
        cep_instalacao: dadosCard.cep_coleta,
        cidade_instalacao: dadosCard.cidade_coleta,
        bairro_instalacao: dadosCard.bairro_coleta,
        endereco_instalacao: dadosCard.endereco_coleta,
        numero_instalacao: dadosCard.numero_endereco_coleta,
        complemento_instalacao: dadosCard.complemento_endereco_coleta,
        rua_instalacao: dadosCard.logradouro_coleta,
        estado_instalacao: dadosCard.uf_coleta,
        nome_negocio: dadosCard.nome_negocio_coleta,

        // Prazos
        dias_prazo_entrega:
          parametros.tabelaPrazos.find(
            (prazo: any) =>
              +prazo.potencia_inicial_prazo <= potencia_kit &&
              +prazo.potencia_final_prazo >= potencia_kit
          )?.dias_prazo || "0",

        // Endereço de Moradia do Cliente
        cep_moradia_cliente: clienteOuFinanciador.cep_cliente || clienteOuFinanciador.cepEmpresa_cliente,
        rua_moradia_cliente: clienteOuFinanciador.rua_cliente || clienteOuFinanciador.logradouroEmpresa_cliente,
        numero_moradia_cliente: clienteOuFinanciador.nro_cliente || clienteOuFinanciador.numeroEmpresa,
        complemento_moradia_cliente: clienteOuFinanciador.comp_cliente || clienteOuFinanciador.complementoEmpresa_cliente,
        bairro_moradia_cliente: clienteOuFinanciador.bairro_cliente || clienteOuFinanciador.bairroEmpresa_cliente,
        cidade_moradia_cliente: clienteOuFinanciador.cidade_cliente || clienteOuFinanciador.cidadeEmpresa_cliente,
        estado_moradia_cliente: clienteOuFinanciador.estado_cliente || clienteOuFinanciador.estadoEmpresa_cliente,
        razao_social_cliente: clienteOuFinanciador.nomeEmpresa_cliente,
        endereco_moradia_cliente: `${clienteOuFinanciador.rua_cliente}, ${clienteOuFinanciador.nro_cliente}, ${clienteOuFinanciador.comp_cliente}, Bairro ${clienteOuFinanciador.bairro_cliente}, ${clienteOuFinanciador.cidade_cliente}, ${clienteOuFinanciador.estado_cliente}, CEP ${clienteOuFinanciador.cep_cliente}`,

        // Observações e Informações Gerais
        observacoes: dados.obs_proposta || "N/A",
        data_atual: capitalizeMonth(
          getDateTimeBrasil({
            day: "2-digit",
            month: "long",
            year: "numeric",
            hour: undefined,
            minute: undefined,
            second: undefined,
          })
        ),
        condicao_pagamento_proposta:
          dados["informacoes_pagamento_proposta"] || "Sem condições definidas",
        concessionaria: dadosCard.nome_concessionaria || " ",
        origem_cliente: dadosAdicionais["origem_cliente"] || "",
        condicoes_pagamento_disponveis: dados["condicao_pagamento_proposta"]
          ? JSON.stringify(dados["condicao_pagamento_proposta"]).slice(1, -1)
          : "",
        mensagem_contratante: dados["observacoes_contratante"] || "",
        numero_contrato:
          dados["id_contrato"] ||
          dados["numero_contrato"] ||
          documento?.id_contrato ||
          "",
        revisao_contrato:
          dados["revisao_contrato"] || documento?.revisao_contrato || "",
        cliente_cpf: clienteOuFinanciador.cpfcnpj_cliente,
        observacao_pagamento: dados["observacao_pagamento_proposta"] || "",
        forma_pagamento: dados["nome_forma"] || dados["forma_pagamento"] || "",
        conta_bancaria_pagamento:
          dados["conta_bancaria_pagamento"] ||
          `Banco ${dados["codCompensacao_inst_bancaria"] || ""} - ${
            dados["nome_inst_bancaria"] || ""
          } AG:${dados["nrAgencia_conta_loja"] || ""} CONTA: ${
            dados["numero_conta_loja"] || ""
          } ${
            dados["tipo_conta_loja"] == "J"
              ? `CNPJ: ${dados["cpf_cnjp_conta_loja"] || ""}`
              : dados["tipo_conta_loja"] == "F"
                ? `CPF: ${dados["cpf_cnjp_conta_loja"] || ""}`
                : ""
          } PIX: ${dados["chavePix_conta_loja"] || ""}`,
        banco_proposta: dados["nome_inst_bancaria"] || "",
        informacoes_pagamento: dados["informacoes_pagamento_proposta"] || "",
        condicao_pagamento:
          dadosAdicionais["condicao_pagamento_proposta"] || "",

        // Informações de Negócio
        grupo_negocio: dados["grupo_coleta"] || " ",
        subgrupo_negocio: dados["subgrupo_coleta"] || " ",
        media_irradiacao_diaria: dados["media_consumo_coleta"] || " ",
        img_endereco_instalacao: dados["caminho_imagem_endereco_coleta"] || " ",
        observacoes_negocio: dados["obs_coleta"] || " ",
        revisao_proposta: dados["revisao_proposta"] || " ",
        area_ocupada: dados["area_modulos_ocupada_proposta"]
          ? formatarNumero(dados["area_modulos_ocupada_proposta"])
          : " ",
        face_telhado: dados["telhado_proposta"] || " ",
        periodoEficiencia: dados["periodo_eficiencia_proposta"] || " ",

        // Tags Loja Padrão
        cep_loja_padrao: dadosAdicionais["cep_loja_padrao"] || " ",
        rua_loja_padrao: dadosAdicionais["rua_loja_padrao"] || " ",
        numero_loja_padrao: dadosAdicionais["numero_loja_padrao"] || " ",
        bairro_loja_padrao: dadosAdicionais["bairro_loja_padrao"] || " ",
        complemento_loja_padrao:
          dadosAdicionais["complemento_loja_padrao"] || " ",
        cidade_loja_padrao: dadosAdicionais["cidade_loja_padrao"] || " ",
        estado_loja_padrao: dadosAdicionais["estado_loja_padrao"] || " ",
        endereco_loja_padrao: dadosAdicionais["endereco_loja_padrao"] || " ",
        nome_responsavel_loja_padrao:
          dadosAdicionais["nome_responsavel_loja_padrao"] || " ",
        cpf_responsavel_loja_padrao:
          dadosAdicionais["cpf_responsavel_loja_padrao"] || " ",
      };
      console.log(
        "Dados para relacionamento antes do processamento final:",
        dadosParaRelacionamento
      );

      const nomesRelacionamentos = new Set([
        ...relacionamentos.map((r) => r.name),
        ...relacionamentosContrato.map((r: any) => r.name),
      ]);
      Object.keys(dadosParaRelacionamento).forEach((key) => {
        // Mantém qualquer chave que esteja definida nos relacionamentos de Docs ou Contrato
        if (!nomesRelacionamentos.has(key)) {
          // Não apagar chaves desconhecidas: alguns templates personalizados podem precisar
          // Comentado para permitir maior flexibilidade
          // delete dadosParaRelacionar[key];
        }
      });

      Object.keys(dadosParaRelacionamento).map((chave) => {
        if (chave.includes("img_") && !dadosParaRelacionamento[chave]) {
          delete dadosParaRelacionamento[chave];
        }
      });

      // Função auxiliar para verificar se é uma data inválida
      const isDataInvalida = (valor: any): boolean => {
        if (typeof valor !== "string") return false;
        return (
          valor === "00/00/0000" ||
          valor === "0000-00-00" ||
          valor === "00-00-0000" ||
          valor.includes("00/00/0000") ||
          valor.includes("0000-00-00")
        );
      };

      // Validação: Se a tag existe em nomesRelacionamentos mas não tem valor, atribui "Não informado"
      // Exceção: Complementos de endereço ficam vazios para não ficar estranho no endereço
      // Datas inválidas (00/00/0000) também recebem "Não informado"
      nomesRelacionamentos.forEach((tag) => {
        const valor = dadosParaRelacionamento[tag];
        if (
          !tag.includes("img_") &&
          (valor === undefined ||
            valor === null ||
            valor === "" ||
            (typeof valor === "string" && valor.trim() === "") ||
            isDataInvalida(valor))
        ) {
          // Campos de complemento de endereço recebem string vazia
          if (tag.includes("complemento")) {
            dadosParaRelacionamento[tag] = "";
          } else {
            dadosParaRelacionamento[tag] = "Não informado";
          }
        }
      });

      // Reduzir tamanho de arrays muito grandes (limitar a 100 itens)
      Object.keys(dadosParaRelacionamento).forEach((key) => {
        const valor = dadosParaRelacionamento[key];
        if (Array.isArray(valor) && valor.length > 100) {
          console.warn(
            `⚠️ Array "${key}" muito grande (${valor.length} itens), limitando a 100`
          );
          dadosParaRelacionamento[key] = valor.slice(0, 100);
        }
      });

      const images = Object.keys(dadosParaRelacionamento).reduce(
        (acc: any[], key) => {
          if (
            typeof dadosParaRelacionamento[key] == "string" &&
            dadosParaRelacionamento[key].includes("data:image/")
          ) {
            acc = [...acc, key];
          }
          return acc;
        },
        []
      );

      const { session } = valuesSession();
      if (images.length > 0) {
        setLoaderStep(2);
        await Promise.all(
          images.map(async (key) => {
            const base64String = dadosParaRelacionamento[key];

            const originalFile = await dataURLtoFile(
              base64String,
              `original_${key}.tmp`
            );

            if (!originalFile) {
              console.error(`Falha ao processar imagem ${key}. Pulando.`);
              return; // Pula esta iteração
            }

            // 2. Definir opções de compressão mais agressivas para evitar PayloadTooLarge
            const options = {
              maxSizeMB: 0.5, // Reduzido de 1MB para 500KB
              maxWidthOrHeight: 1200, // Reduzido de 1680 para 1200px
              useWebWorker: true, // Usa Web Worker para não travar a UI
              initialQuality: 0.6, // Reduzido de 0.7 para 0.6
            };

            try {
              const compressedFile = await imageCompression(
                originalFile,
                options
              );

              const compressedBuffer = Buffer.from(
                await compressedFile.arrayBuffer()
              );

              const novoTipoImagem =
                compressedFile.type.split("/")[1] || "jpeg";

              return salvarAwsRetornaLink({
                [`${titulo}_${session["sigla"]}/${key}__dot__${novoTipoImagem}`]:
                  compressedBuffer,
              }).then((linkImg) => {
                const { link } = linkImg;
                dadosParaRelacionamento[key] = link;
              });
            } catch (error) {
              console.error(`Erro ao comprimir a imagem ${key}:`, error);
            }
          })
        );
      }

      // relacionamentos.map((relacionamento) => {
      //   if (!relacionamento.name.includes("img_")) {
      //     dadosParaRelacionamento[relacionamento.name] = Object.keys(
      //       dadosParaRelacionamento
      //     ).includes(relacionamento.relacionamento)
      //       ? dadosParaRelacionamento[relacionamento.relacionamento] || ""
      //       : relacionamento.relacionamento;
      //   }
      // // });

      // Log do tamanho do payload
      const payloadSize = JSON.stringify(dadosParaRelacionamento).length;
      const payloadSizeMB = (payloadSize / 1024 / 1024).toFixed(2);

      // Filtrar apenas os dados necessários baseado nas tags do template
      const dadosFiltrados = filtrarDadosNecessarios(
        nomesRelacionamentos,
        dadosParaRelacionamento
      );

      setLoaderStep(3);
      generatePdf(
        dadosFiltrados,
        documento.documentId_template_documento_personalizado,
        lojaAtual?.id_loja as any,
        session.sigla
      )
        .then((resPdfDoc) => {
          setLoaderStep(4);
          const base64 = resPdfDoc.data.base64;
          const byteCharacters = atob(base64); // Decodifica a string Base64
          const byteArrays = [];

          for (let offset = 0; offset < byteCharacters.length; offset += 512) {
            const slice = byteCharacters.slice(offset, offset + 512);
            const byteNumbers = new Array(slice.length);

            for (let i = 0; i < slice.length; i++) {
              byteNumbers[i] = slice.charCodeAt(i);
            }

            byteArrays.push(new Uint8Array(byteNumbers));
          }

          const pdfBlob = new Blob(byteArrays, { type: "application/pdf" });
          //   // const pdfBlob = new Blob([resPdfProposta.data], {
          //   //   type: "application/pdf",
          //   // });
          //   // window.open(URL.createObjectURL(pdfBlob));

          //   formulario.append("pdfBlob", pdfBlob);
          //   // const dados = JSON.stringify(dadosFormProposta);
          //   formulario.append("caminho_proposta", res.caminho_proposta);
          //   //
          //   // const dados: any = {
          //   //   ...dadosFormProposta,
          //   // };
          //   // for (const key in dados) {
          //   //   formulario.append(key, dados[key]);
          //   // }
          //   )

          const blobToDataURL = async (blob: Blob) => {
            return new Promise((resolve, reject) => {
              const reader = new FileReader();
              reader.onload = () => resolve(reader.result);
              reader.onerror = reject;
              reader.readAsDataURL(blob);
            });
          };
          blobToDataURL(pdfBlob)
            .then(async (pdfUrl) => {
              setPdf(pdfUrl);
              setPdfBlob(pdfBlob);
            })
            .finally(() => {
              deleteDoc(
                resPdfDoc.data.documentId,
                lojaAtual?.id_loja as any,
                session.sigla
              );
            });
          //   // const url = window.URL.createObjectURL(
          //   //   new Blob([resPdfProposta.data], { type: "application/pdf" })
          //   // );
          //   // const link = document.createElement("a");
          //   // link.href = url;
          //   // link.setAttribute("download", "generated.pdf");
          //   // link.click();
          //
        })
        .catch((err) => {
          toast.error(
            `Erro ao gerar o PDF do Documento ${err.response.data.erro}`
          );
          console.error(err);
        })
        .finally(() => {
          // setMostrarPdf(false);
          //   deletarTmpFiles(`proposta${res.id_proposta}_${session["sigla"]}/`);
          setIsLoaded(true);
        });
    } catch (err) {
      // localStorage.removeItem("template");
      console.error(err);
    }
    return template;
  };

  // const [mode, setMode] = useState<Mode>(
  //     (localStorage.getItem("mode") as Mode) ?? "form"
  // );

  // useEffect(() => {
  //     return () => {
  //         if (!contratoSalvo) {
  //             deletarContrato({ id_contrato: contratoIdTemporario });
  //         }
  //     };
  // }, []);

  // useEffect(() => {
  //   async function loadTemplate() {
  //     const template = await initTemplate();

  //     let inputs = getInputFromTemplate(template) ?? [{}];
  //     try {
  //       const inputsString = localStorage.getItem("inputs");
  //       const inputsJson = inputsString
  //         ? JSON.parse(inputsString)
  //         : (getInputFromTemplate(template) ?? [{}]);
  //       inputs = inputsJson;
  //     } catch {
  //       localStorage.removeItem("inputs");
  //     }

  //     getFontsData().then((font) => {
  //       if (uiRef.current) {
  //         ui.current = new Form({
  //           domContainer: uiRef.current,
  //           template,
  //           inputs,
  //           options: {
  //             font,
  //             // labels: { clear: "消去" },
  //             theme: {
  //               token: {
  //                 colorPrimary: "#25c2a0",
  //               },
  //             },
  //           },
  //           plugins: getPlugins(),
  //         });
  //       }
  //     });
  //   }

  //   loadTemplate();

  //   // return () => {
  //   //     if (ui.current) {
  //   //         ui.current.destroy();
  //   //     }
  //   // };
  // }, [uiRef]);

  // const onChangeMode = (e: React.ChangeEvent<HTMLInputElement>) => {
  //     const value = e.target.value as Mode;
  //     setMode(value);
  //     localStorage.setItem("mode", value);
  // };

  // const onSaveInputs = () => {
  //     if (ui.current) {
  //         const inputs = ui.current.getInputs();
  //         localStorage.setItem("inputs", JSON.stringify(inputs));
  //         toast.success("Salvo");
  //     }
  // };

  // const onResetInputs = async () => {
  //   localStorage.removeItem("inputs");
  //   if (ui.current) {
  //     const template = await initTemplate();
  //     ui.current.setInputs(getInputFromTemplate(template) ?? [{}]);
  //   }
  // };

  const onSaveFormDocumentoPersonalizado = () => {
    // generatePDF(ui.current, titulo).then(async (pdfBlob) => {
    if (pdfBlob) {
      setIsSavingDocument(true);
      onSubmitFunction({ pdfBlob }).finally(() => setIsSavingDocument(false));
    }
    // });
  };

  return (
    <div>
      {isLoaded ? (
        <div>
          <button
            type="button"
            onClick={() => onSaveFormDocumentoPersonalizado()}
            className={`flex flex-row flex-nowrap items-center bg-success rounded px-2 py-1 text-white ${
              isSavingDocument && "opacity-50"
            }`}
            disabled={isSavingDocument}
          >
            <div className="pr-2">
              <FaFileUpload />
            </div>
            {isSavingDocument ? (
              <Image width={32} height={32} src={LoaderGif} alt="Logo" />
            ) : (
              "Salvar Documento"
            )}
          </button>
          <iframe
            style={{
              width: "100%",
              height: `${isLoaded ? `calc(99vh)` : "0px"}`,
            }}
            // height={460}
            // width={700}
            src={pdf}
          />
        </div>
      ) : (
        // <Menubar>
        //   <button
        //     type="button"
        //     onClick={() => {
        //       setIsGeneratingPdf(true);
        //       const loadingPdf = new Promise((resolve, reject) => {
        //         generatePDF(ui.current, titulo)
        //           .then((res) => {
        //             openBlob(res);
        //             resolve("Aberto");
        //           })
        //           .catch((err) => {
        //             reject("Erro ao tentar abrir");
        //           })
        //           .finally(() => {
        //             setIsGeneratingPdf(false);
        //           });
        //       });

        //       toast.promise(loadingPdf, {
        //         pending: {
        //           render(data: any) {
        //             return "Aguarde";
        //           },
        //         },
        //         success: {
        //           render(data: any) {
        //             return "Pdf gerado em uma nova guia";
        //           },
        //         },
        //         error: {
        //           render(data: any) {
        //             return data.data;
        //           },
        //         },
        //       });
        //     }}
        //     className={`flex flex-row flex-nowrap items-center bg-success rounded px-2 py-1 text-white ${
        //       isGeneratingPdf && "opacity-50"
        //     }`}
        //     disabled={isGeneratingPdf}
        //   >
        //     <div className="pr-2">
        //       <FaRegFilePdf />
        //     </div>
        //     Gerar PDF
        //   </button>
        //   <button
        //     type="button"
        //     onClick={() => onSaveFormDocumentoPersonalizado()}
        //     className={`flex flex-row flex-nowrap items-center bg-success rounded px-2 py-1 text-white ${
        //       isSavingDocument && "opacity-50"
        //     }`}
        //     disabled={isSavingDocument}
        //   >
        //     <div className="pr-2">
        //       <FaFileUpload />
        //     </div>
        //     {isSavingDocument ? (
        //       <Image width={32} height={32} src={LoaderGif} alt="Logo" />
        //     ) : (
        //       "Salvar Documento"
        //     )}
        //   </button>
        //   <button
        //     onClick={() => {
        //       const loadingReset = new Promise((resolve, reject) => {
        //         onResetInputs()
        //           .then((res) => {
        //             resolve("Campos resetados");
        //           })
        //           .catch((err) => {
        //             reject("Erro ao tentar resetar");
        //           });
        //       });

        //       toast.promise(loadingReset, {
        //         pending: {
        //           render(data: any) {
        //             return "Aguarde";
        //           },
        //         },
        //         success: {
        //           render(data: any) {
        //             return data.data;
        //           },
        //         },
        //         error: {
        //           render(data: any) {
        //             return data.data;
        //           },
        //         },
        //       });
        //     }}
        //     className="flex flex-row gap-2 flex-nowrap items-center hover:bg-black-2 hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 rounded-sm px-3 py-1.5 text-sm font-medium outline-none"
        //   >
        //     {/* <div>Resetar Campos</div> */}
        //     <div>Desfazer todas as alterações</div>
        //   </button>

        //   {/* <button
        //                 onClick={() =>
        //                     //({ dadosCard, dadosCliente })
        //                     // //({ dadosCliente })
        //                     // //({ dadosCard })
        //                 }
        //             >
        //                 Mostrar todos propos
        //             </button> */}
        // </Menubar>
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <div className="flex w-[273px] h-[230px] overflow-hidden">
            <Image
              style={{ transform: "scale(13.5) translate(-22px, 3px)" }}
              src="/images/loaders/loaderProposta.svg"
              alt="Carregando..."
              width={980}
              height={280}
            />
          </div>
          <span className="text-black text-3xl mb-9">Gerando Documento</span>
          <LoaderBar steps={steps} currentStep={loaderStep} />
        </div>
      )}

      {/* <div
        ref={uiRef}
        // style={{ width: "100%", height: `calc(100vh - ${65}px)` }}
        style={{
          width: "100%",
          height: `${isLoaded ? `calc(70vh - ${65}px)` : "0px"}`,
        }}
      /> */}
    </div>
  );
};

export default GeracaoDocumentoPersonalizado;
