import Button from "@/components/Forms/Button";
import ColetaDados from "@/pages/CXESCRM005";
import {
  enviarLinkProposta,
  enviarLinkPropostaEmail,
} from "@/requests/CRM/enviarProposta";
// import { listarPropostas } from "@/requests/CRUD/Propostas/listarPropostas";
import Combobox from "@/components/Combobox";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import SweetAlertConfirmacao from "@/components/Modal/SweetAlertConfirm";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { useCamposPersonalizados } from "@/hooks/useCamposPersonalizados";
import { listarContratosPorColeta } from "@/requests/CRM/Contrato/listarContrato";
import { editarValidadeProposta } from "@/requests/CRM/Proposta/editarValidadeProposta";
import { listarLocksPermissoesEtapas } from "@/requests/CRM/kanban";
import { listarNegocioPeloId } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import {
  addConclusaoPendencia,
  remConclusaoPendencia,
} from "@/requests/CRUD/ConclusaoPendencia/conclusaoPendencia";
import { listarDistribuidoresCredenciais } from "@/requests/CRUD/Distribuidores/listarDistribuidoresCredenciais";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarMotivoNegocioPerdido } from "@/requests/CRUD/NegociosPerdido/listarMotivoNegocioPerdido";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { aprovarProposta } from "@/requests/CRUD/Propostas/aprovarProposta";
import { baixarProposta } from "@/requests/CRUD/Propostas/baixarProposta";
import { excluirProposta } from "@/requests/CRUD/Propostas/excluirProposta";
import { listarPropostas } from "@/requests/CRUD/Propostas/listarPropostas";
import { reprovarProposta } from "@/requests/CRUD/Propostas/reprovarProposta";
import { obterTarifaEnergia } from "@/requests/CRUD/TarifaEnergia/obterTarifaEnergia";
import { listarFormasDePagamentoPadraoTipoNegocioLoja } from "@/requests/CRUD/TiposNegocios/listarFormasDePagamentoPadraoTipoNegocioLoja";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { useProposalContext } from "@/src/contexts/ProposalContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useSocketContext } from "@/src/contexts/SocketContext";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { FormatFields, getDateTimeBrasil, GetForm } from "@/utils";
import { Tooltip } from "@mui/material";
import {
  ArrowLeft,
  FilePlus,
  FileSearch,
  Loader,
  RefreshCw,
} from "lucide-react";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { BiCheck, BiLogoWhatsapp, BiMailSend } from "react-icons/bi";
import { FaRegEye } from "react-icons/fa";
import { FaTrash } from "react-icons/fa6";
import {
  MdOutlineChangeCircle,
  MdOutlineClose,
  MdOutlineFileDownload,
} from "react-icons/md";
import { RiExchangeDollarLine } from "react-icons/ri";
import { toast } from "react-toastify";
import Swal from "sweetalert2";
import * as yup from "yup";
import FormPagamentoProposta from "./FormPagamentoProposta";
import MudancaInversorProposta from "./MudancaInversorProposta";
import PropostaCorretiva from "./PropostaCorretiva";
import RegerarProposta from "./RegerarProposta";
import VisualizarTemplateProposta from "./VisualizarTemplateProposta";
import PropostaView from "./propostaView";

const options = [
  {
    value: "*",
    label: "Todos",
  },
  {
    value: "0",
    label: "Proposta Gerada",
  },
  {
    value: "1",
    label: "Aprovada",
  },
  {
    value: "3",
    label: "Cancelada",
  },
  {
    value: "2",
    label: "Reprovada",
  },
];
const PropostasTab = ({
  dadosCliente,
  dadosCard,
  buscaPropostas,
  propostas,
  coletaContratos,
  setActiveStepAtual,
  activeStep,
  setDadosCard,
  condicoesPagamento,
  formasPagamento,
  contasBancariasLojas,
  tiposServicos,
}: any) => {
  const [openModalRejeitar, setOpenModalRejeitar] = useState(false);
  const [openModalEmail, setOpenModalEmail] = useState(false);
  const [openModalCondPagamento, setModalCondPagamento] = useState(false);
  const [openModalWhatsApp, setOpenModalWhatsApp] = useState(false);
  const [motivosReprovacao, setMotivosReprovacao] = useState<any[]>([]);
  const [motivoSelecionado, setMotivoSelecionado] = useState<string>("");
  const [view, setView] = useState("Propostas");
  const [locksPermissoes, setLocksPermissoes] = useState<any>([]);
  const [viewDados, setViewDados] = useState(false);
  const [propostaSelecionada, setPropostaSelecionada] = useState<any>([]);
  const [statusPropostas, setStatusPropostas] = useState<string>("");
  const [tarifasEnergia, setTarifasEnergia] = useState<any>([]);
  const [parametros, setParametros] = useState<any>([]);
  const [isPropostaHelte, setIsPropostaHelte] = useState(false);
  const [selectedTipoProposta, setSelectedTipoProposta] = useState(false);
  const [credenciais, setCredenciais] = useState<any[]>([]);
  const [condicaoPagamentoCustom, setCondicaoPagamentoCustom] = useState<any>();
  const { isMobile, setOnDrawer } = useScreenContext();
  const [dadosProposta, setDadosProposta] = useState<any>();
  const idColeta = dadosCard?.id_coleta_cliente;
  const { notificar } = useSocketContext();
  const { notificarNotificacao } = useSocketContext();
  const { perfil, usuario } = useAuth();
  const [canCloseModal, setCanCloseModal] = useState(false);
  const { reListarDadosKanban, setMenuOnView, openMenu } = useKanbanContext();
  const { handleSubmit, ...form } = GetForm();
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [contratoAssinado, setContratoAssinado] = useState<any>(false);
  const [valorAlteracaoProposta, setvalorAlteracaoProposta] = useState<any>();
  const [openModalVisualizarTemplate, setOpenModalVisualizarTemplate] =
    useState(false);
  const [dataValidadePropostaOverride, setDataValidadePropostaOverride] =
    useState<any>();
  const [inversorAlteracaoProposta, setInversorAlteracaoProposta] =
    useState<any>();

  const [yupSchemaReprovar, setYupSchemaReprovar] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [yupSchemaEmail, setYupSchemaEmail] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [yupSchemaValue, setYupSchemaValue] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [mostrarPdf, setMostrarPdf] = useState(false);

  const { handleSubmit: handleReprovar, ...formReprovar } = GetForm(
    yupSchemaReprovar,
    setYupSchemaReprovar
  );
  const { handleSubmit: handleValue, ...formValue } = GetForm(
    yupSchemaValue,
    setYupSchemaValue
  );
  const { handleSubmit: handleEmail, ...formEmail } = GetForm(
    yupSchemaEmail,
    setYupSchemaEmail
  );

  const { handleSubmit: handleWhatsApp, ...formWhatsApp } = GetForm();

  const {
    handleSubmit: handleValidadeSubmitProposta,
    ...formValidadeProposta
  } = GetForm();
  const { renderCamposPersonalizados, filterCamposPersonalizados } =
    useCamposPersonalizados(idColeta, dadosCard.id);
  const [openModalProposta, setOpenModalProposta] = useState(false);
  const [openViewProposta, setOpenViewProposta] = useState(false);
  const [
    openModalVisualizarGeracaoProposta,
    setOpenModalVisualizarGeracaoProposta,
  ] = useState(false);
  const [openModalVisualizarProposta, setOpenModalVisualizarProposta] =
    useState(false);
  const { relacionarDadosProposta } = useProposalContext();

  const [distribudor, setDistribudor] = useState();
  const [proposta, setProposta] = useState<any>();
  const [loja, setLoja] = useState<any>();
  const [formaPagamentoPadrao, setFormaPagamentoPadrao] = useState<any>();
  const [statusSavingProposta, setStatusSavingProposta] = useState<any>();
  const [isSavingProposal, setIsSavingProposal] = useState<any>();

  useEffect(() => {
    Promise.all([
      buscaPropostas(),
      listarDadosParametros(),
      listarPermissoesLocks(),
      listarDistribuidoresCredenciais().then((res) => {
        setCredenciais(res);
      }),
      listarLojas().then((res) => {
        setLoja(
          res.find((lojaf: any) => lojaf.id_loja == dadosCard.id_loja_coleta)
        );
      }),
      listarFormasDePagamentoPadraoTipoNegocioLoja({
        id_loja: dadosCard?.id_loja_coleta,
        id_tipo_negocio: dadosCard?.tipoNegocio_coleta,
      }).then((res: any) => {
        if (res?.length > 0) {
          setFormaPagamentoPadrao(res?.[0]?.cod_forma_pagamento);
        }
      }),
    ]).finally(() => setIsLoaded(true));
  }, []);
  const [openModalAssinaturas, setOpenModalAssinaturas] = useState(false);
  const [signatariosContrato, setSignatariosContrato] = useState<any[]>([]);
  const [contratoSelecionado, setContratoSelecionado] = useState<any>();

  function validarDadosClienteAssinatura(): {
    valido: boolean;
    camposFaltando: string[];
  } {
    const camposFaltando: string[] = [];

    if (!dadosCliente?.nome_cliente?.trim()) camposFaltando.push("Nome");
    if (!dadosCliente?.cpfcnpj_cliente?.trim()) camposFaltando.push("CPF/CNPJ");
    if (!dadosCliente?.dataNascimento_cliente?.trim())
      camposFaltando.push("Data de Nascimento");
    if (!dadosCliente?.email_cliente?.trim()) camposFaltando.push("E-mail");
    if (!dadosCliente?.telefone1_cliente?.trim())
      camposFaltando.push("Telefone");

    return { valido: camposFaltando.length === 0, camposFaltando };
  }

  const contratoEmAssinaturaDigital = (proposta: any): boolean => {
    return (
      proposta.status_proposta === "4" || proposta.em_assinatura_digital === "1"
    );
  };

  // Verifica se todos os signatários já assinaram (não pode mais cancelar)
  const todosAssinaram = (proposta: any): boolean => {
    return proposta.todos_assinaram === "1";
  };
  const stripHtmlTags = (html: any) => {
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = html;

    // Preserva quebras de linha e espaços
    const plainText = tempDiv.innerHTML
      .replace(/<br\s*\/?>/gi, "\n") // Substitui <br> por quebra de linha
      .replace(/<\/p>/gi, "\n") // Substitui fechamento de <p> por quebra de linha
      .replace(/<[^>]+>/g, "") // Remove outras tags HTML
      .replace(/\n\s*\n/g, "\n\n"); // Remove múltiplas quebras de linha extras

    setCondicaoPagamentoCustom(plainText.trim());
  };

  const etapaAtual = dadosCard?.id_lista;

  useEffect(() => {
    listarMotivoNegocioPerdido().then((res) => {
      // //(res);

      setMotivosReprovacao(
        res.filter((motivo: any) => motivo.status_perdido == "1")
      );
    });

    listarContratosPorColeta(dadosCard?.id_coleta_cliente).then((res) => {
      const possuiContratoAtivo = res.some((contato: any) => {
        return contato.status_contrato == "1";
      });

      setContratoAssinado(possuiContratoAtivo);
    });
  }, [dadosCard?.status_coleta]);

  const listarDadosParametros = () => {
    listarParametros().then((res: any) => {
      setParametros(res);
      stripHtmlTags(res?.condicao_pagamento_parametro);
    });
  };

  const listarPermissoesLocks = () => {
    listarLocksPermissoesEtapas().then((res: any) => {
      setLocksPermissoes(res);
    });
  };

  const statusProposta = [
    { name: "Proposta Gerada", color: "bg-[#619ce8]", value: "0" },
    { name: "Aprovada", color: "bg-[#07b51c]", value: "1" },
    { name: "Inativa", color: "bg-[#8d968e]", value: "2" },
    { name: "Cancelada", color: "bg-[#b5071e]", value: "3" },
    {
      name: "Contrato Gerado - Aguardando Assinatura Digital",
      color: "bg-[#f0a500]",
      value: "4",
    },
  ];

  const handleChange = (status: any) => {
    if (statusPropostas === status) {
      setStatusPropostas("");
    } else {
      setStatusPropostas(status);
    }
  };
  const enviarLink = async (data: any) => {
    return enviarLinkProposta(data).then((e) => {
      notificarNotificacao();
      reListarDadosKanban();
      window.open(e["Whatsapp"]);
    });
  };

  const confirmarProposta = async (data: any) => {
    setIsLoading(true);
    return aprovarProposta({
      ...data,
      id_card: dadosCard?.id,
      id_usuario: session.id_usuario,
    })
      .then(async (e: any) => {
        return addConclusaoPendencia({
          id_coleta: dadosCard?.id_coleta_cliente,
          id_etapa: dadosCard?.id_lista,
          id_pendencia: "4",
        }).then((res) => {
          listarPropostas(idColeta);
          notificarNotificacao();
          buscaPropostas();
          setModalCondPagamento(false);
          setActiveStepAtual(activeStep + 1);
          reListarDadosKanban();
        });
      })
      .finally(() => setIsLoading(false));
  };

  const baixarPropostaAws = (data: any) => {
    // //(data);
    baixarProposta(data).then((res) => {
      window.open(res.body);
    });
  };
  const [
    openModalAlterarInversorProposta,
    setOpenModalAlterarInversorProposta,
  ] = useState(false);
  const [
    openModalAlterarValidadeProposta,
    setOpenModalAlterarValidadeProposta,
  ] = useState(false);
  const [openModalAlterarValorProposta, setOpenModalAlterarValorProposta] =
    useState<any>([false, null]);

  const onSubmitReprovar = (data: FieldValues) => {
    // //(data);
    setIsLoading(true);

    data["id_cliente"] = dadosCliente["id_cliente"];
    // if (motivoSelecionado != "99") {
    //   data["motivoOutros_proposta"] = "";
    // }
    data["id_card"] = dadosCard?.id;
    data["id_usuario"] = session.id_usuario;
    reprovarProposta(data)
      .then((e) => {
        remConclusaoPendencia({
          id_coleta: dadosCard?.id_coleta_cliente,
          id_pendencia: "6",
        });
        remConclusaoPendencia({
          id_coleta: dadosCard?.id_coleta_cliente,
          id_pendencia: "5",
        });
        remConclusaoPendencia({
          id_coleta: dadosCard?.id_coleta_cliente,
          id_pendencia: "4",
        });
        remConclusaoPendencia({
          id_coleta: dadosCard?.id_coleta_cliente,
          id_pendencia: "3",
        }).then((res) => {
          listarPropostas(idColeta);
          buscaPropostas();
          setOpenModalRejeitar(false);
          notificarNotificacao();
          // reListarDadosKanban().then(() => {

          reListarDadosKanban();
          // });
        });
      })
      .finally(() => setIsLoading(false));
  };

  const { valuesSession } = useAuth();
  const { session } = valuesSession();

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

    data["id_usuario"] = session.id_usuario;

    enviarLinkPropostaEmail(data)
      .then(() => {
        setOpenModalEmail(false);
        listarPropostas(idColeta);
        notificarNotificacao();
        reListarDadosKanban();
      })
      .finally(() => {
        setIsLoading(false);
      });
  };
  const newProposalFunction = () => {
    return (
      <ColetaDados
        inCard={true}
        idColeta={idColeta}
        dadosCliente={dadosCliente}
        dadosCard={dadosCard}
        buscaPropostas={buscaPropostas}
        tarifaEnergia={tarifasEnergia[0]}
        propostaHelte={isPropostaHelte}
        loja={loja}
        setDadosCard={setDadosCard}
      />
    );
  };
  const onSubmitWhatsApp = (data: FieldValues) => {
    setIsLoading(true);

    data["id_usuario"] = session.id_usuario;

    const loadingLink = new Promise((resolve, reject) => {
      enviarLink(data)
        .then(() => {
          setOpenModalWhatsApp(false);
          listarPropostas(idColeta);
          notificarNotificacao();
          reListarDadosKanban();
          resolve("Concluídio");
        })
        .catch((err) => {
          reject(err);
        })
        .finally(() => {
          setIsLoading(false);
        });
    });

    toast
      .promise(loadingLink, {
        pending: {
          render(data: any) {
            return "Aguarde";
          },
        },
        success: {
          render(data: any) {
            return "Link criado!";
          },
        },
        error: {
          render(data: any) {
            return data.data;
          },
        },
      })
      .finally(() => setIsLoading(false));
  };
  const [loadProposalAwsContent, setLoadProposalAwsContent] = useState(false);

  const handleChangeProposalValue = (e: any) => {
    const valorAMudar = FormatFields.desformatarNumeros(
      e?.alteracao_valor_proposta
    );
    const dadosPropostaAtual = openModalAlterarValorProposta[1];
    const valorAtual = dadosPropostaAtual?.valorTotal_proposta;

    if (valorAMudar !== valorAtual) {
      Swal.fire({
        title: "Alterar valor da proposta?",
        icon: "question",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Sim",
        cancelButtonText: "Cancelar",
      }).then((result) => {
        if (result.isConfirmed) {
          if (dadosPropostaAtual.caminhoJson_proposta) {
            setLoadProposalAwsContent(true);
            baixarAwsContent(dadosPropostaAtual.caminhoJson_proposta).then(
              (resultadoPrecificacao_proposta) => {
                setvalorAlteracaoProposta(valorAMudar);
                const proposta = JSON.parse(
                  resultadoPrecificacao_proposta
                )?.propostas;
                proposta && setProposta(proposta);
                const dadosProposta = JSON.parse(
                  resultadoPrecificacao_proposta
                )?.dadosProposta;
                dadosProposta && setDadosProposta(dadosProposta);
                setOpenModalVisualizarGeracaoProposta(true);
                setLoadProposalAwsContent(false);
                setOpenModalAlterarValorProposta([
                  !openModalAlterarValorProposta,
                  null,
                ]);
              }
            );
          }
        }
      });
    }
  };
  const [rangeModulos, setRangeModulos] = useState();
  const handleChangeProposalInversor = (
    valor: any,
    inversores: any,
    modulosLimit: any
  ) => {
    Swal.fire({
      title: "Alterar inversores da proposta?",
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Sim",
      cancelButtonText: "Cancelar",
    }).then((result) => {
      if (result.isConfirmed) {
        if (propostaSelecionada.caminhoJson_proposta) {
          setLoadProposalAwsContent(true);
          baixarAwsContent(propostaSelecionada.caminhoJson_proposta).then(
            (resultadoPrecificacao_proposta) => {
              setInversorAlteracaoProposta(inversores);
              setRangeModulos(modulosLimit);
              setvalorAlteracaoProposta(valor);
              const proposta = JSON.parse(
                resultadoPrecificacao_proposta
              )?.propostas;
              proposta && setProposta(proposta);
              const dadosProposta = JSON.parse(
                resultadoPrecificacao_proposta
              )?.dadosProposta;
              dadosProposta && setDadosProposta(dadosProposta);
              setOpenModalVisualizarGeracaoProposta(true);
              setLoadProposalAwsContent(false);
              setOpenModalAlterarInversorProposta(
                !openModalAlterarInversorProposta
              );
            }
          );
        } else {
          toast.error("A proposta selecionada não possui JSON");
        }
      }
    });
  };
  const handleRegerarProposta = (propostaRegerar: any) => {
    Swal.fire({
      title: "Regerar proposta?",
      html: "A proposta será regerada com o template atual, mantendo o valor e os componentes.",
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Sim",
      cancelButtonText: "Cancelar",
    }).then((result) => {
      if (result.isConfirmed) {
        if (!propostaRegerar.caminhoJson_proposta) {
          return toast.error("A proposta selecionada não possui JSON");
        }
        setLoadProposalAwsContent(true);
        baixarAwsContent(propostaRegerar.caminhoJson_proposta)
          .then((resultadoPrecificacao_proposta) => {
            // Limpa alterações de fluxos anteriores e mantém o valor atual da proposta
            setvalorAlteracaoProposta(propostaRegerar.valorTotal_proposta);
            setInversorAlteracaoProposta(undefined);
            setRangeModulos(undefined);
            setDataValidadePropostaOverride(undefined);

            const propostaJson = JSON.parse(
              resultadoPrecificacao_proposta
            )?.propostas;
            propostaJson && setProposta(propostaJson);

            const dadosPropostaJson = JSON.parse(
              resultadoPrecificacao_proposta
            )?.dadosProposta;
            dadosPropostaJson && setDadosProposta(dadosPropostaJson);

            setOpenModalVisualizarGeracaoProposta(true);
          })
          .finally(() => {
            setLoadProposalAwsContent(false);
          });
      }
    });
  };

  const [valueDiscount, setValueDiscount] = useState<any>();
  const handleChangeDiscount = (e: any) => {
    const valorInput = parseFloat(valueDiscount);
    const descontoMaximoPercentual = usuario?.max_desconto_usuario || 0;

    const descontoMaximoValor =
      (parseFloat(propostaSelecionada.valorProposta) *
        descontoMaximoPercentual) /
      100;

    if (valorInput > descontoMaximoValor) {
      alert(
        `Desconto máximo permitido é de R$ ${descontoMaximoValor.toFixed(2)}`
      );

      e.target.value = descontoMaximoValor.toFixed(2);
      return;
    }
    // setTotalDesconto(
    //   valorInput.toLocaleString("pt-BR", {
    //     style: "currency",
    //     currency: "BRL",
    //   })
    // );
    const valorComDesconto =
      parseFloat(propostaSelecionada.valorProposta) - valorInput;

    // setTotalGeralFormatado(valorComDesconto);
  };
  const [hasErrorDiscount, setHasErrorDiscount] = useState<any>();
  const filteredPropostas =
    statusPropostas !== "" && statusPropostas !== "*"
      ? propostas
          .filter(
            (proposta: any) => proposta.status_proposta === statusPropostas
          )
          .sort((a: any, b: any) => {
            if (a.status_proposta == "1" && b.status_proposta != "1") return -1;
            if (b.status_proposta == "1" && a.status_proposta != "1") return 1;
            return 0;
          })
      : propostas;
  function validadePro(proposta: any): any {
    if (proposta.data_validade_proposta) {
      const validadeProposta = new Date(proposta.data_validade_proposta);

      const hoje = new Date();
      hoje.setHours(0, 0, 0, 0); // Zera as horas para comparar só as datas
      validadeProposta.setHours(0, 0, 0, 0); // Zera as horas para comparar só as datas

      return {
        validade: validadeProposta.toLocaleDateString("pt-BR"),
        expired: validadeProposta < hoje,
      };
    }

    const dataProposta = new Date(proposta.data_proposta + "T00:00:00"); // Garante a interpretação correta da data

    if (!parametros?.tempo_validade_proposta_parametro) {
      return dataProposta.toLocaleDateString("pt-BR");
    }

    dataProposta.setDate(
      dataProposta.getDate() +
        Number(parametros.tempo_validade_proposta_parametro)
    );

    const hoje = new Date();
    hoje.setHours(0, 0, 0, 0); // Zera as horas para comparar só as datas

    const validadeExpirada = dataProposta < hoje;

    return {
      validade: dataProposta.toLocaleDateString("pt-BR"),
      expired: validadeExpirada,
    };
  }

  async function onSubmitEditarValidadeProposta(data: any) {
    // const hoje = new Date();
    // hoje.setHours(0, 0, 0, 0);
    const dataGeracao = new Date(propostaSelecionada.data_proposta?.split("-"));
    const novaData = new Date(data?.data_validade_proposta?.split("-"));
    const antigaData = new Date(
      validadePro(propostaSelecionada)?.validade?.split("/")?.reverse()
    );

    if (novaData < dataGeracao) {
      return Swal.fire({
        title: "Data Inválida",
        icon: "warning",
        html: `A data de validade da proposta '${novaData.toLocaleDateString(
          "pt-BR"
        )}' não pode ser inferior a data de geração da proposta: '${dataGeracao.toLocaleDateString("pt-BR")}'`,
        confirmButtonText: "Ok",
      });
    }

    if (
      novaData.toLocaleDateString("pt-BR") ==
      antigaData.toLocaleDateString("pt-BR")
    ) {
      return Swal.fire({
        title: "Data Inalterada",
        icon: "warning",
        html: `A mesma data foi informada`,
        confirmButtonText: "Ok",
      });
    }

    Swal.fire({
      title: "Alterar Data da Validade da Proposta?",
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Sim",
      cancelButtonText: "Cancelar",
    }).then((result) => {
      if (result.isConfirmed) {
        setIsLoading(true);
        return editarValidadeProposta({
          id_proposta: propostaSelecionada?.id_proposta,
          data_validade_proposta: data?.data_validade_proposta,
          antiga_data_validade_proposta: antigaData?.toLocaleDateString(
            "en-CA",
            {
              year: "numeric",
              month: "2-digit",
              day: "2-digit",
            }
          ),
          id_usuario: usuario?.id_usuario,
          id_coleta: propostaSelecionada.coleta_proposta,
        })
          .then(() => {
            setOpenModalAlterarValidadeProposta(false);
            setDataValidadePropostaOverride(data?.data_validade_proposta);
            if (propostaSelecionada?.caminhoJson_proposta) {
              setLoadProposalAwsContent(true);
              return baixarAwsContent(propostaSelecionada.caminhoJson_proposta)
                .then((resultadoPrecificacao_proposta) => {
                  const propostaJson = JSON.parse(
                    resultadoPrecificacao_proposta
                  )?.propostas;
                  propostaJson && setProposta(propostaJson);

                  const dadosPropostaJson = JSON.parse(
                    resultadoPrecificacao_proposta
                  )?.dadosProposta;

                  if (dadosPropostaJson) {
                    setDadosProposta({
                      ...dadosPropostaJson,
                      data_validade_proposta_override:
                        data?.data_validade_proposta,
                    });
                  }

                  setOpenModalVisualizarGeracaoProposta(true);
                })
                .finally(() => {
                  setLoadProposalAwsContent(false);
                });
            }

            setOpenModalAlterarValidadeProposta(false);
            return buscaPropostas();
          })
          .finally(() => {
            setIsLoading(false);
          });
      }
    });
  }

  async function onSubmitExcuirProposta(data: any) {
    return excluirProposta({
      ...data,
      id_usuario: usuario?.id_usuario,
    }).then(() => {
      listarPropostas(idColeta);
      buscaPropostas();
      reListarDadosKanban();
      listarNegocioPeloId(dadosCard?.id_coleta_cliente).then((res) => {
        setActiveStepAtual(Number(res?.indexAtual_coleta));
      });
    });
  }

  return (
    <div className="flex flex-col ">
      <div className="flex justify-start ">
        <Button
          type="button"
          onClick={() => {
            buscaPropostas();
            setView("Propostas");
            setViewDados(false);
          }}
          className={`w-fit h-fit mb-2 hover:brightness-95 text-sm px-8 gap-2 ${
            view === "Propostas" && viewDados == false ? "hidden" : "flex"
          } items-center`}
        >
          <ArrowLeft size={18} />
          Voltar
        </Button>
      </div>
      {view === "Propostas" ? (
        !viewDados && (
          <>
            {renderCamposPersonalizados(
              "5",
              form,
              "3",
              dadosCard,
              true,
              handleSubmit
            )}
            {!contratoAssinado &&
              perfil.permite_gerar_proposta_perfil === "1" &&
              locksPermissoes.some(
                (lock: any) =>
                  lock.etapa_funil_id === etapaAtual &&
                  lock.permissao_id === "1"
              ) && (
                <div className="flex justify-end gap-2">
                  <Tooltip
                    title="Visualizar o template geral das propostas com as tags originais (sem conversão)"
                    arrow={true}
                  >
                    <span className="inline-block">
                      <Button
                        type="button"
                        onClick={() => setOpenModalVisualizarTemplate(true)}
                        className="w-fit px-4 text-xs hover:brightness-95 gap-2 flex items-center"
                      >
                        <FileSearch size={isMobile ? 16 : 18} />
                        Template
                      </Button>
                    </span>
                  </Tooltip>
                  {(() => {
                    const camposObrigatorios = ["2", "4"].includes(
                      dadosCard?.tipoNegocio_coleta
                    )
                      ? []
                      : dadosCard?.tipoNegocio_coleta == "3"
                        ? ["tipoLigacao_coleta", "concessionaria_coleta"]
                        : [
                            "tipoLigacao_coleta",
                            "concessionaria_coleta",
                            "grupo_coleta",
                            "subgrupo_coleta",
                          ];

                    // Mapeamento dos nomes amigáveis
                    const camposLabels: Record<string, string> = {
                      tipoLigacao_coleta: "Tipo de ligação",
                      concessionaria_coleta: "Concessionária",
                      grupo_coleta: "Grupo",
                      subgrupo_coleta: "Subgrupo",
                    };

                    const camposFaltando = camposObrigatorios.filter(
                      (campo) => !dadosCard[campo]
                    );

                    const propostasAbertas = propostas.filter(
                      (proposta: any) => proposta.status_proposta === "1"
                    );

                    const podeGerarProposta =
                      camposFaltando.length === 0 &&
                      propostasAbertas.length === 0;

                    let tooltipMessage = "";
                    const mensagens = [];

                    if (contratoAssinado) {
                      mensagens.push("O contrato já foi assinado.");
                    }

                    if (perfil.permite_gerar_proposta_perfil !== "1") {
                      mensagens.push("Seu perfil não permite gerar propostas.");
                    }

                    const temPermissaoEtapa = locksPermissoes.some(
                      (lock: any) =>
                        lock.etapa_funil_id === etapaAtual &&
                        lock.permissao_id === "1"
                    );

                    if (!temPermissaoEtapa) {
                      mensagens.push("Você não tem permissão para essa etapa.");
                    }

                    if (camposFaltando.length > 0) {
                      const nomesCampos = camposFaltando
                        .map((campo) => camposLabels[campo] || campo)
                        .join(", ");
                      mensagens.push(
                        `Faltam os seguintes campos: ${nomesCampos}.`
                      );
                    }

                    if (propostasAbertas.length > 0) {
                      mensagens.push(
                        `Existem ${propostasAbertas.length} proposta(s) em aberto.`
                      );
                    }

                    if (mensagens.length > 0) {
                      tooltipMessage =
                        "Não é possível gerar proposta porque:\n- " +
                        mensagens.join("\n- ");
                    }
                    return (
                      <Tooltip
                        title={tooltipMessage || "Gerar nova proposta"}
                        arrow={true}
                      >
                        <span className="inline-block">
                          <Button
                            onClick={async () => {
                              if (!podeGerarProposta)
                                return alert(
                                  "Não vai dar só tirando a opção desabilitado, boa tentativa!"
                                );

                              if (isMobile) {
                                setMenuOnView(true);
                                openMenu(newProposalFunction());
                                setOpenViewProposta(true);
                              } else {
                                setOpenModalProposta(true);
                              }

                              setIsPropostaHelte(false);
                              setSelectedTipoProposta(false);
                              setIsPropostaHelte(false);
                              setSelectedTipoProposta(false);

                              if (
                                !dadosCard?.latitude ||
                                !dadosCard?.longitude
                              ) {
                                return toast.error(
                                  "É necessário definir um Endereço de Instalação!"
                                );
                              }

                              const tarifaData = {
                                id_concessionaria:
                                  dadosCard?.concessionaria_coleta,
                                grupo: dadosCard?.grupo_coleta,
                                subgrupo: dadosCard?.subgrupo_coleta,
                                tipo_fatura: dadosCard?.perfil_consumo_coleta,
                              };

                              if (
                                !["2", "3"].includes(
                                  dadosCard?.tipoNegocio_coleta
                                )
                              ) {
                                try {
                                  const tarifas =
                                    await obterTarifaEnergia(tarifaData);
                                  setTarifasEnergia(tarifas);
                                  if (tarifas.length < 1) {
                                    setIsLoading(false);
                                    return toast.error(
                                      `Tarifa não encontrada para o perfil de consumo(${dadosCard?.perfil_consumo_simultaneidade}),
                                      grupo(${dadosCard?.grupo_coleta}),
                                      subgrupo(${dadosCard?.subgrupo_coleta})
                                      e a concessionária(${dadosCard?.nome_concessionaria}) do negócio`
                                    );
                                  }
                                } catch (error) {
                                  return toast.error(
                                    `Tarifa não encontrada para o perfil de consumo(${dadosCard?.perfil_consumo_simultaneidade}),
                                    grupo(${dadosCard?.grupo_coleta}),
                                    subgrupo(${dadosCard?.subgrupo_coleta})
                                    e a concessionária(${dadosCard?.nome_concessionaria}) do negócio`
                                  );
                                }
                              }
                              if (isMobile) {
                                setMenuOnView(true);
                                openMenu(newProposalFunction());
                                setOpenViewProposta(true);
                              } else {
                                setOpenModalProposta(true);
                              }
                            }}
                            disabled={!podeGerarProposta}
                            className={`w-fit px-8 text-xs hover:brightness-95 gap-2 flex items-center ${
                              !podeGerarProposta
                                ? "opacity-50 cursor-not-allowed"
                                : ""
                            }`}
                          >
                            <FilePlus size={isMobile ? 16 : 18} />
                            Nova Proposta
                          </Button>
                        </span>
                      </Tooltip>
                    );
                  })()}
                </div>
              )}

            <div className="bg-white dark:bg-form-strokedark w-full h-11 gap-4 items-center p-7 flex rounded-md my-2">
              <input
                placeholder="Buscar.."
                className=" rounded-[6px] max-sm:!text-xs border-[1px] font-medium p-2 pl-3 dark:bg-form-input text-[#71717A] w-full text-sm border-[#E4E4E7]"
                type="text"
              />
              <Combobox
                handleChange={handleChange}
                placeholder="Selecione um status"
                options={options}
                className="max-sm:!text-xs"
              />
              {/* <DatePickerWithRange /> */}
            </div>

            {filteredPropostas.map((proposta: any, index: number) => {
              const emAssinatura = contratoEmAssinaturaDigital(proposta);
              const jaAssinaramTodos = todosAssinaram(proposta);
              return (
                <div
                  key={index}
                  className="bg-white text-sm max-sm:text-xs  dark:bg-form-strokedark text-black dark:text-white flex w-full justify-between rounded-md my-2"
                >
                  <div className="p-3 text-start">
                    <p className="">Proposta Nº {proposta.id_proposta}</p>
                    <p className=" font-medium">
                      Revisão {proposta.revisao_proposta}
                    </p>
                    <p className=" font-medium">
                      Data Geração:{" "}
                      {getDateTimeBrasil(
                        {
                          hour: undefined, // Define a hora como undefined para excluí-la
                          minute: undefined, // Define os minutos como undefined para excluí-los
                          second: undefined, // Define os segundos como undefined para excluí-los
                        },
                        proposta.data_proposta
                      )}{" "}
                      - Gerado por: {proposta.nome_usuario_gerador}
                    </p>
                    <p className=" font-medium">
                      Data Validade: {validadePro(proposta).validade}
                      <span
                        className={`bg-${(validadePro(proposta).expired && proposta.status_proposta != "1") || proposta.status_proposta == 3 ? "error" : "success"} p-1 ml-4 text-xs rounded-md text-white font-semibold`}
                      >
                        {proposta.status_proposta == 3
                          ? "CANCELADA"
                          : proposta.status_proposta == "1"
                            ? "APROVADA"
                            : validadePro(proposta).expired
                              ? "VENCIDA"
                              : "VÁLIDA"}
                      </span>
                    </p>

                    {proposta.status_proposta == 1 && (
                      <p className=" font-medium max-sm:hidden">
                        Data Aprovação:{" "}
                        {new Date(
                          proposta.data_hora_aprovacao
                        ).toLocaleDateString("pt-BR")}{" "}
                        - Aprovado por: {proposta.nome_usuario_aprovacao}
                      </p>
                    )}

                    {proposta.status_proposta == 1 && (
                      <p className=" font-medium"></p>
                    )}

                    {proposta.status_proposta == 3 && (
                      <p className=" font-medium">
                        Data Cancelamento:{" "}
                        {new Date(
                          proposta.data_hora_reprovacao
                        ).toLocaleDateString("pt-BR")}{" "}
                        - Cancelado por: {proposta.nome_usuario_reprovacao}
                      </p>
                    )}

                    {dadosCard?.tipoNegocio_coleta != "2" && (
                      <div className="flex gap-3 border-b border-gray-2 dark:border-gray ">
                        <span className="font-medium text-graydark dark:text-gray-2">
                          Valor da Tarifa de Aplicação:
                        </span>
                        <span className="text-green-600 dark:text-green-400 font-medium">
                          {`R$ ${FormatFields.formatarNumeroPreciso(proposta.precoDigitadoTarifa_proposta)}`}
                        </span>
                      </div>
                    )}

                    <p className="font-semibold">Proposta comercial</p>
                    <span className="max-sm:hidden">
                      Quantidade de módulos: {proposta.modulosDigitado_proposta}
                    </span>
                    {dadosCard?.tipoNegocio_coleta != "2" && (
                      <>
                        <br />
                        <span className="max-sm:hidden">
                          Potência dos Módulos:{" "}
                          {FormatFields.formatarNumero(
                            proposta.potencia_modulo_proposta
                          ) + " w"}
                        </span>
                        <br />
                        <span className="max-sm:hidden">
                          Potência do Sistema:{" "}
                          {FormatFields.formatarNumero(
                            proposta.potenciaSistema_proposta
                          ) + " kWp"}
                        </span>
                        <p className="max-sm:hidden">
                          Payback estimado: {proposta.payback_proposta}
                        </p>
                      </>
                    )}
                  </div>
                  <div className="flex flex-col justify-end max-sm:text-[10px] text-center ">
                    <p className="bg-stroke max-sm:absolute max-sm:left-[38%] p-2 rounded-t-lg">
                      Visualizações Link:{" "}
                      {proposta.quantidade_aberto_proposta_link || 0}
                    </p>
                  </div>
                  <div className="flex flex-col">
                    {statusProposta.map(
                      (status, statusIndex) =>
                        proposta.status_proposta === status.value && (
                          <div key={statusIndex}>
                            <div className="grid gap-2">
                              <div
                                className={`rounded-bl-xl ${status.value === "4" && "text-xs "} absolute right-0 text-white font-medium rounded-tr-md gap-2 lg:w-[250px] flex items-center h-fit justify-center bg-[#000]`}
                              >
                                <span
                                  className={`w-2 h-2 ${status.color} rounded-full ml-2`}
                                ></span>
                                <p className="mr-2">{status.name}</p>
                              </div>
                              <div
                                onClick={(e) => e.stopPropagation()}
                                className={`${status.value === "4" && "mt-9"} flex-row items-center rounded-sm gap-4 mt-7 flex h-fit justify-end mb-2 mr-2`}
                              >
                                <Button
                                  className={`bg-transparent text-[black] dark:text-[white] flex items-center rounded-md p-0 m-0 h-fit`}
                                  type="button"
                                  onClick={() => {
                                    setPropostaSelecionada(proposta);
                                    setOpenModalVisualizarProposta(true);
                                  }}
                                >
                                  <FaRegEye
                                    title="Visualizar Proposta"
                                    size={isMobile ? 17 : 22}
                                  />
                                </Button>
                                <Button
                                  className={`bg-transparent text-[blue] flex items-center rounded-md p-0 m-0 h-fit`}
                                  type="button"
                                  onClick={() => {
                                    baixarPropostaAws({
                                      caminho: proposta.caminho_proposta,
                                      id_proposta: proposta.id_proposta,
                                    });
                                  }}
                                >
                                  <MdOutlineFileDownload
                                    title="Baixar Proposta"
                                    color="#5193fc"
                                    size={20}
                                  />
                                </Button>

                                {proposta.status_proposta === "0" && (
                                  <>
                                    {perfil.alterar_valor_proposta_apos_geracao_perfil ==
                                      "1" && (
                                      <Button
                                        className={`bg-transparent text-[blue] flex items-center rounded-md p-0 m-0 h-fit`}
                                        type="button"
                                        onClick={() => {
                                          setPropostaSelecionada(proposta);
                                          setOpenModalAlterarValorProposta([
                                            true,
                                            proposta,
                                          ]);
                                        }}
                                      >
                                        <RiExchangeDollarLine
                                          title="Alterar valor"
                                          color="#5193fc"
                                          size={20}
                                        />
                                      </Button>
                                    )}

                                    {perfil.permite_alterar_inversores_proposta_perfil ==
                                      "1" &&
                                    proposta.tipoKit_proposta == "1" ? (
                                      <Button
                                        className={`bg-transparent text-[blue] flex items-center rounded-md p-0 m-0 h-fit`}
                                        type="button"
                                        onClick={() => {
                                          setPropostaSelecionada(proposta);
                                          setOpenModalAlterarInversorProposta(
                                            true
                                          );
                                        }}
                                      >
                                        <MdOutlineChangeCircle
                                          title="Alterar inversores"
                                          color="#5193fc"
                                          size={20}
                                        />
                                      </Button>
                                    ) : (
                                      <Tooltip
                                        title={
                                          perfil.permite_alterar_inversores_proposta_perfil ==
                                          "1"
                                            ? "Alterar inversores (Disponível apenas para propostas de kits próprios)"
                                            : "Você não tem permissão para alterar os inversores"
                                        }
                                        arrow={true}
                                      >
                                        <span className="inline-block">
                                          <Button
                                            disabled={
                                              perfil.permite_alterar_inversores_proposta_perfil !=
                                                "1" ||
                                              proposta.tipoKit_proposta != "1"
                                            }
                                            className={`bg-transparent text-[blue] flex items-center rounded-md p-0 m-0 h-fit ${
                                              perfil.permite_alterar_inversores_proposta_perfil !=
                                                "1" ||
                                              proposta.tipoKit_proposta != "1"
                                                ? "opacity-50 cursor-not-allowed"
                                                : ""
                                            }`}
                                            type="button"
                                            // onClick={() => {
                                            //   setPropostaSelecionada(proposta);
                                            //   setOpenModalAlterarInversorProposta(
                                            //     true
                                            //   );
                                            // }}
                                          >
                                            <MdOutlineChangeCircle
                                              title="Alterar inversores"
                                              color="#5193fc"
                                              size={20}
                                            />
                                          </Button>
                                        </span>
                                      </Tooltip>
                                    )}

                                    {perfil.alterar_validade_proposta_perfil ==
                                      "1" && (
                                      <Button
                                        className={`bg-transparent text-[#5193fc] flex items-center rounded-md p-0 m-0 h-fit`}
                                        type="button"
                                        onClick={() => {
                                          setPropostaSelecionada(proposta);
                                          setOpenModalAlterarValidadeProposta(
                                            true
                                          );
                                        }}
                                        title="Alterar Validade da Proposta"
                                      >
                                        <svg
                                          xmlns="http://www.w3.org/2000/svg"
                                          width="19"
                                          height="19"
                                          viewBox="0 0 24 24"
                                          fill="none"
                                          stroke="currentColor"
                                          strokeWidth="2"
                                          strokeLinecap="round"
                                          strokeLinejoin="round"
                                          className="lucide lucide-calendar-sync-icon lucide-calendar-sync"
                                        >
                                          <path d="M11 10v4h4" />
                                          <path d="m11 14 1.535-1.605a5 5 0 0 1 8 1.5" />
                                          <path d="M16 2v4" />
                                          <path d="m21 18-1.535 1.605a5 5 0 0 1-8-1.5" />
                                          <path d="M21 22v-4h-4" />
                                          <path d="M21 8.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4.3" />
                                          <path d="M3 10h4" />
                                          <path d="M8 2v4" />
                                        </svg>
                                      </Button>
                                    )}

                                    {perfil.permite_gerar_proposta_perfil ==
                                      "1" && (
                                      <Tooltip
                                        title="Regerar Proposta (usa o template atual, mantém valor e componentes)"
                                        arrow={true}
                                      >
                                        <span className="inline-block">
                                          <Button
                                            className={`bg-transparent text-[#5193fc] flex items-center rounded-md p-0 m-0 h-fit`}
                                            type="button"
                                            onClick={() => {
                                              setPropostaSelecionada(proposta);
                                              handleRegerarProposta(proposta);
                                            }}
                                          >
                                            <RefreshCw size={18} />
                                          </Button>
                                        </span>
                                      </Tooltip>
                                    )}
                                  </>
                                )}

                                <SweetAlertConfirmacao
                                  resultConfirmed={() => {
                                    formEmail.setValue(
                                      "id_proposta" as never,
                                      proposta.id_proposta as never
                                    );
                                    formEmail.setValue(
                                      "email_cliente" as never,
                                      dadosCliente.email_cliente as never
                                    );
                                    formEmail.setValue(
                                      "id_cliente" as never,
                                      proposta.cliente_proposta as never
                                    ),
                                      formEmail.setValue(
                                        "id_card" as never,
                                        dadosCard?.id as never
                                      ),
                                      setOpenModalEmail(true);
                                  }}
                                  className={`bg-transparent text-[blue] flex items-center rounded-md p-0 m-0 h-fit`}
                                  tittle="Enviar ao Email"
                                  icon="question"
                                  html={`Tem certeza que deseja <b>Enviar</b> a proposta n° ${proposta.id_proposta} portadora da coleta n° ${idColeta}?`}
                                >
                                  <BiMailSend
                                    title="Enviar Proposta por E-mail"
                                    size={isMobile ? 17 : 24}
                                  />
                                </SweetAlertConfirmacao>
                                <SweetAlertConfirmacao
                                  resultConfirmed={() => {
                                    const dados: any = {
                                      caminho_proposta:
                                        proposta.caminho_proposta,
                                      aprovacao_cliente:
                                        proposta.aprovacao_cliente,
                                      coleta_proposta: proposta.coleta_proposta,
                                      id_proposta: proposta.id_proposta,
                                      status_proposta: proposta.status_proposta,
                                      id_cliente: proposta.cliente_proposta,
                                      id_card: dadosCard?.id,
                                    };
                                    for (const key in dados) {
                                      formWhatsApp.setValue(
                                        key as never,
                                        dados[key] as never
                                      );
                                    }

                                    formWhatsApp.setValue(
                                      "whatsapp_cliente" as never,
                                      dadosCliente.telefone1_cliente as never
                                    );

                                    setOpenModalWhatsApp(true);
                                    // enviarLink(dados);
                                    // Swal.fire({
                                    //   title: "Sucesso",
                                    //   html: "Em breve você sera redirecionado!",
                                    //   didOpen: () => {
                                    //     Swal.showLoading();
                                    //   },
                                    //   timer: 6700,
                                    // }).then((result) => {
                                    //   /* Read more about handling dismissals below */
                                    //   if (
                                    //     result.dismiss ===
                                    //     Swal.DismissReason.timer
                                    //   ) {
                                    //   }
                                    // });
                                  }}
                                  className={`bg-transparent text-[green] flex items-center rounded-md p-0 m-0 h-fit`}
                                  tittle="Enviar ao Whatsapp"
                                  icon="question"
                                  html={`Tem certeza que deseja <b>Enviar</b> a proposta n° ${proposta.id_proposta} portadora da coleta n° ${idColeta}?`}
                                >
                                  <BiLogoWhatsapp
                                    title="Enviar Proposta por WhatsApp"
                                    size={isMobile ? 17 : 24}
                                  />
                                </SweetAlertConfirmacao>
                                {(perfil.permite_aprovar_proposta_perfil == 1 ||
                                  perfil.id_perfil == "1000") &&
                                  !filteredPropostas.some(
                                    (propose: any) =>
                                      propose.status_proposta == 1
                                  ) &&
                                  !validadePro(proposta).expired && (
                                    <>
                                      <BiCheck
                                        onClick={() => {
                                          setProposta(proposta);
                                          setModalCondPagamento(true);
                                        }}
                                        title="Aprovar Proposta"
                                        className={`bg-transparent   ${
                                          status.value == "0"
                                            ? "flex"
                                            : "hidden"
                                        }  h-fit p-0 gap-0 text-[green] cursor-pointer `}
                                        size={isMobile ? 17 : 24}
                                      />
                                    </>
                                  )}
                                {perfil.cancelar_proposta_perfil != 0 &&
                                  coletaContratos.every(
                                    (contrato: any) =>
                                      contrato.status_contrato != "1"
                                  ) && (
                                    <SweetAlertConfirmacao
                                      resultConfirmed={() => {
                                        onSubmitReprovar({
                                          id_proposta: proposta?.id_proposta,
                                        });
                                        // formReprovar.setValue(
                                        //   "id_proposta" as never,
                                        //   proposta.id_proposta as never
                                        // );
                                        // setOpenModalRejeitar(true);
                                      }}
                                      className={`bg-transparent text-[red] ${
                                        proposta.status_proposta == "1" ||
                                        proposta.status_proposta == "0"
                                          ? "flex"
                                          : "hidden"
                                      } items-center rounded-md p-0 m-0 h-fit`}
                                      tittle="Cancelamento"
                                      icon="error"
                                      html={`<div className="flex flex-col">
                                                  <p>
                                                  <b>Cancelar</b> a proposta n° ${proposta.id_proposta}?
                                                  </p>
                                                  <b>
                                                  (Todos contratos serão cancelados)
                                                  </b>
                                                  </div>
                                                  `}
                                    >
                                      <MdOutlineClose
                                        title="Cancelar Proposta"
                                        size={24}
                                      />
                                    </SweetAlertConfirmacao>
                                  )}
                                {perfil.permite_excluir_proposta_perfil != 0 &&
                                  ["0", "2", "3"].includes(
                                    proposta.status_proposta
                                  ) && (
                                    <SweetAlertConfirmacao
                                      resultConfirmed={() => {
                                        onSubmitExcuirProposta(proposta);
                                        // onSubmitReprovar({
                                        //   id_proposta: proposta?.id_proposta,
                                        // });
                                        // formReprovar.setValue(
                                        //   "id_proposta" as never,
                                        //   proposta.id_proposta as never
                                        // );
                                        // setOpenModalRejeitar(true);
                                      }}
                                      className={`bg-transparent text-[red] flex items-center rounded-md p-0 m-0 h-fit`}
                                      tittle="Exclusão"
                                      icon="error"
                                      html={`<div className="flex flex-col">
                                                <p>
                                                  <b>Excluir</b> a proposta n° ${proposta.id_proposta}?
                                                </p>
                                              </div>
                                            `}
                                    >
                                      <FaTrash
                                        title="Excluir Proposta"
                                        size={17}
                                      />
                                    </SweetAlertConfirmacao>
                                  )}
                              </div>
                            </div>
                          </div>
                        )
                    )}
                    <p className="flex flex-col max-sm:text-sm items-end text-black text-lg font-medium m-1">
                      R${" "}
                      {Number(proposta.valorTotal_proposta).toLocaleString(
                        "pt-BR",
                        {
                          minimumFractionDigits: 2,
                          maximumFractionDigits: 2,
                        }
                      )}
                    </p>
                    {dadosCard?.tipoNegocio_coleta != "2" && (
                      <p className="flex flex-col items-end text-black pr-2">
                        {proposta.precoDigitadoTarifa_proposta !=
                          proposta.precoTarifa_proposta && (
                          <span className="text-sm max-sm:text-xs">
                            Valor Tarifa Digitado: R${" "}
                            {Number(
                              proposta.precoDigitadoTarifa_proposta
                            ).toLocaleString("pt-BR", {
                              minimumFractionDigits: 2,
                              maximumFractionDigits: 2,
                            })}{" "}
                          </span>
                        )}
                        <span className="text-sm max-sm:text-xs">
                          Valor Tarifa: R${" "}
                          {Number(proposta.precoTarifa_proposta).toLocaleString(
                            "pt-BR",
                            {
                              minimumFractionDigits: 2,
                              maximumFractionDigits: 2,
                            }
                          )}
                        </span>
                      </p>
                    )}
                  </div>
                </div>
              );
            })}
            <ModalComponente
              hasForm={false}
              header="Alteração de inversor na proposta"
              opened={openModalAlterarInversorProposta}
              onClose={() =>
                setOpenModalAlterarInversorProposta(
                  !openModalAlterarInversorProposta
                )
              }
              hasSaveButton={false}
            >
              <MudancaInversorProposta
                loaded={loadProposalAwsContent}
                handleChangeProposalInversor={handleChangeProposalInversor}
                proposta={propostaSelecionada}
              />
            </ModalComponente>
            {openModalAlterarValidadeProposta && (
              <ModalComponente
                hasForm={false}
                header="Alteração da Validade da Proposta"
                defaultW="w-[400px]"
                opened={openModalAlterarValidadeProposta}
                onClose={() => setOpenModalAlterarValidadeProposta(false)}
                hasSaveButton={false}
              >
                <div>
                  <Input
                    name="data_validade_proposta"
                    label="Data da Validade"
                    formulario={formValidadeProposta}
                    type="date"
                    defaultValue={validadePro(propostaSelecionada)
                      ?.validade?.split("/")
                      ?.reverse()
                      .join("-")}
                  />
                  <Button
                    loading={isLoading}
                    className="w-full bg-primary mt-2"
                    onClick={handleValidadeSubmitProposta(
                      onSubmitEditarValidadeProposta
                    )}
                  >
                    <span>Salvar</span>
                  </Button>
                </div>
              </ModalComponente>
            )}
            <ModalComponente
              hasForm={false}
              header="Alteração de valor da proposta"
              defaultW="w-[400px]"
              opened={openModalAlterarValorProposta[0]}
              onClose={() =>
                setOpenModalAlterarValorProposta([
                  !openModalAlterarValorProposta,
                  null,
                ])
              }
              hasSaveButton={false}
            >
              <form
                className="flex flex-col gap-5"
                onSubmit={handleValue(handleChangeProposalValue)}
              >
                <Input
                  label="Valor da proposta"
                  prefix={"R$"}
                  formulario={formValue}
                  name="alteracao_valor_proposta"
                  mascara="monetario"
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                    let value = e.target.value;

                    // Remove tudo que não for número
                    const numericValue = value.replace(/\D/g, "");

                    // Divide por 100 para manter duas casas decimais
                    const float = parseFloat(numericValue) / 100;

                    const descontoMaximoPercentual =
                      usuario?.max_desconto_usuario || 0;

                    const acrescimoMaximoPercentual =
                      usuario?.max_acrescimo_usuario || 0;

                    const valorProposta = parseFloat(
                      propostaSelecionada.valorTotal_proposta
                    );

                    const descontoMaximoValor =
                      (valorProposta * descontoMaximoPercentual) / 100;
                    const acrescimoMaximoValor =
                      (valorProposta * acrescimoMaximoPercentual) / 100;
                    const valorMinimo = valorProposta - descontoMaximoValor;
                    const valorMaximo = valorProposta + acrescimoMaximoValor;

                    if (float < valorMinimo) {
                      setHasErrorDiscount(
                        `O valor não pode ser menor que ${parseFloat(
                          valorMinimo.toFixed(2)
                        ).toLocaleString("pt-BR", {
                          style: "currency",
                          currency: "BRL",
                        })}`
                      );

                      setValueDiscount(valorMinimo);
                      return;
                    }
                    if (float > valorMaximo) {
                      setHasErrorDiscount(
                        `O valor não pode ser maior que ${valorMaximo.toLocaleString(
                          "pt-BR",
                          {
                            style: "currency",
                            currency: "BRL",
                          }
                        )}`
                      );
                      setValueDiscount(valorMaximo);
                      return;
                    }
                    setHasErrorDiscount(null);

                    setValueDiscount(e.target.value);
                  }}
                  defaultValue={
                    openModalAlterarValorProposta[1] &&
                    openModalAlterarValorProposta[1]?.valorTotal_proposta
                  }
                />
                {hasErrorDiscount && (
                  <span className="text-danger font-medium">
                    {hasErrorDiscount}
                  </span>
                )}
                <Button
                  loading={isLoading}
                  disabled={loadProposalAwsContent || hasErrorDiscount}
                  className="w-full bg-primary mt-2"
                >
                  {loadProposalAwsContent ? (
                    <span className="mr-3 size-5 animate-spin ">
                      <Loader />
                    </span>
                  ) : (
                    <span>Salvar</span>
                  )}
                </Button>
              </form>
            </ModalComponente>
            <ModalComponente
              hasForm={false}
              header="Cancelar"
              defaultW="w-[400px]"
              opened={openModalRejeitar}
              onClose={() => setOpenModalRejeitar(!openModalRejeitar)}
              hasSaveButton={false}
            >
              <div className="mt-5">
                <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
                  <span>
                    Por favor, preencha o motivo da{" "}
                    <strong className="text-danger">
                      <i>Cancelamento</i>
                    </strong>
                  </span>{" "}
                </div>

                <form
                  className="flex flex-col gap-5"
                  onSubmit={handleReprovar(onSubmitReprovar)}
                >
                  <InputSelectComponent
                    formulario={formReprovar}
                    label="Motivo Cancelamento"
                    name="motivo_reprovacao"
                    required
                    error="Escolha Algum Motivo"
                    options={motivosReprovacao.map((res: any) => ({
                      label: `${res.motivo_perdido}`,
                      value: `${res.id_perdido}`,
                    }))}
                    onChange={(e: any) => setMotivoSelecionado(e.value)}
                  />
                  {motivoSelecionado == "99" && (
                    <Input
                      type="textarea"
                      formulario={formReprovar}
                      label="Motivo"
                      name="motivoOutros_proposta"
                      error="Informe o email"
                    />
                  )}

                  <Button
                    loading={isLoading}
                    className="w-full bg-primary mt-5"
                  >
                    Salvar
                  </Button>
                </form>
              </div>
            </ModalComponente>

            <ModalComponente
              hasForm={false}
              header={`Gerar proposta para o projeto nº ${idColeta}`}
              opened={openModalProposta}
              onClose={() => {
                setOpenModalProposta(!openModalProposta); // setActiveStepAtual(activeStep + 1);
              }}
              hasSaveButton={false}
              defaultW={
                credenciais.some(
                  (credencial) =>
                    credencial.codDistribuidor_credencial == "3" &&
                    credencial.status_credencial == "1"
                ) && !selectedTipoProposta
                  ? "w-fit"
                  : undefined
              }
            >
              {credenciais.some(
                (credencial) =>
                  credencial.codDistribuidor_credencial == "3" &&
                  credencial.status_credencial == "1"
              ) && !selectedTipoProposta ? (
                <div>
                  <InputSelectComponent
                    options={[
                      { value: "0", label: "Proposta Padrão" },
                      { value: "1", label: "Proposta HELTE" },
                    ]}
                    onChange={(e: any) => {
                      setIsPropostaHelte(e.value == "1");
                      setSelectedTipoProposta(true);
                    }}
                  />
                </div>
              ) : ["2", "4"].includes(dadosCard?.tipoNegocio_coleta) ? (
                <PropostaCorretiva
                  dadosCard={dadosCard}
                  dadosCliente={dadosCliente}
                  loja={loja}
                  buscaPropostas={buscaPropostas}
                  tiposServicos={tiposServicos}
                  formasPagamento={formasPagamento}
                  formaPagamentoPadrao={formaPagamentoPadrao}
                  contasBancariasLojas={contasBancariasLojas}
                  condicoesPagamento={condicoesPagamento}
                  setActiveStepPendencias={setActiveStepAtual}
                  activeStepPendencias={activeStep}
                />
              ) : (
                <ColetaDados
                  inCard={true}
                  idColeta={idColeta}
                  dadosCliente={dadosCliente}
                  dadosCard={dadosCard}
                  buscaPropostas={buscaPropostas}
                  tarifaEnergia={tarifasEnergia[0]}
                  loja={loja}
                  setActiveStepPendencias={setActiveStepAtual}
                  activeStepPendencias={activeStep}
                  setDadosCard={setDadosCard}
                />
              )}
            </ModalComponente>

            <ModalComponente
              hasForm={false}
              header={`Dados da Proposta Nº: ${+propostaSelecionada.id_proposta}`}
              opened={openModalVisualizarProposta}
              onClose={() => {
                setOpenModalVisualizarProposta(!openModalVisualizarProposta);
                // setActiveStepAtual(activeStep + 1);
              }}
              hasSaveButton={false}
            >
              <PropostaView
                proposta={propostaSelecionada}
                dadosCard={dadosCard}
                tarifasEnergia={tarifasEnergia}
                distribudor={distribudor}
                parametros={parametros}
                formasPagamento={formasPagamento}
              />
            </ModalComponente>

            <ModalComponente
              hasForm={false}
              hasCloseBtn={true}
              header="Template da Proposta (tags originais)"
              opened={openModalVisualizarTemplate}
              onClose={() => setOpenModalVisualizarTemplate(false)}
              hasSaveButton={false}
            >
              {openModalVisualizarTemplate && (
                <VisualizarTemplateProposta dadosCard={dadosCard} />
              )}
            </ModalComponente>

            <ModalComponente
              hasForm={false}
              hasCloseBtn={true}
              header={`Nova geração da proposta Nº: ${+propostaSelecionada.id_proposta}`}
              opened={openModalVisualizarGeracaoProposta}
              onClose={() => {
                setOpenModalVisualizarGeracaoProposta(
                  !openModalVisualizarGeracaoProposta
                );

                buscaPropostas();
              }}
              hasSaveButton={false}
            >
              <RegerarProposta
                inversorAlteracaoProposta={inversorAlteracaoProposta}
                rangeModulos={rangeModulos}
                valorAlteradoProposta={valorAlteracaoProposta}
                dataValidadePropostaOverride={dataValidadePropostaOverride}
                setCanCloseModal={setCanCloseModal}
                propostaSelecionada={propostaSelecionada}
                proposta={proposta}
                setStatusSavingProposta={setStatusSavingProposta}
                setIsSavingProposal={setIsSavingProposal}
                dadosProposta={dadosProposta}
                setDadosProposta={setDadosProposta}
                dadosCard={dadosCard}
                parametros={parametros}
                dadosFormProposta={dadosProposta}
                usuario={usuario}
                dadosCliente={dadosCliente}
                setMostrarPdf={setMostrarPdf}
                loja={loja}
              />
            </ModalComponente>

            <ModalComponente
              hasForm={false}
              header="Enviar E-mail"
              defaultW="w-[400px]"
              opened={openModalEmail}
              onClose={() => setOpenModalEmail(!openModalEmail)}
              hasSaveButton={false}
            >
              <div className="mt-5">
                <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
                  <span>
                    Por favor, preencha o:{" "}
                    <strong>
                      <i>Email</i>
                    </strong>
                  </span>{" "}
                </div>

                <form
                  className="flex flex-col gap-5"
                  onSubmit={handleEmail(onSubmitEmail)}
                >
                  <Input
                    formulario={formEmail}
                    label="Email"
                    name="email_cliente"
                    error="Preencha o Email"
                    required
                  />
                  <Button
                    loading={isLoading}
                    className="w-full bg-primary mt-5"
                  >
                    Salvar
                  </Button>
                </form>
              </div>
            </ModalComponente>
            <ModalComponente
              hasForm={false}
              header="Forma de Pagamento"
              defaultW="max-w-[900px]"
              opened={openModalCondPagamento}
              onClose={() => setModalCondPagamento(!openModalCondPagamento)}
              hasSaveButton={false}
            >
              {isLoaded ? (
                <FormPagamentoProposta
                  condicoesPagamento={condicoesPagamento}
                  formasPagamento={formasPagamento}
                  loja={loja}
                  contasBancariasLojas={contasBancariasLojas}
                  dadosCard={dadosCard}
                  proposta={proposta}
                  condicaoPagamentoCustom={condicaoPagamentoCustom}
                  onSubmitFunction={confirmarProposta}
                  formaPagamentoPadrao={formaPagamentoPadrao}
                />
              ) : (
                <div className="flex relative mt-[10%] overflow-hidden items-center justify-center">
                  <LoaderSun />
                </div>
              )}
            </ModalComponente>
            <ModalComponente
              hasForm={false}
              header="Enviar WhatsApp"
              defaultW="w-[400px]"
              opened={openModalWhatsApp}
              onClose={() => setOpenModalWhatsApp(!openModalWhatsApp)}
              hasSaveButton={false}
            >
              <div className="mt-5">
                <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
                  <span>
                    Por favor, preencha o:{" "}
                    <strong>
                      <i>WhatsApp</i>
                    </strong>
                  </span>{" "}
                </div>

                <form
                  className="flex flex-col gap-5"
                  onSubmit={handleWhatsApp(onSubmitWhatsApp)}
                >
                  <Input
                    formulario={formWhatsApp}
                    label="WhatsApp"
                    name="whatsapp_cliente"
                    mascara="telefone"
                    error="Informe o WhatsApp"
                    required
                  />
                  <Button
                    loading={isLoading}
                    className="w-full bg-primary mt-5"
                  >
                    Salvar
                  </Button>
                </form>
              </div>
            </ModalComponente>
          </>
        )
      ) : (
        <ColetaDados
          inCard={true}
          idColeta={idColeta}
          dadosCliente={dadosCliente}
          dadosCard={dadosCard}
          buscaPropostas={buscaPropostas}
          tarifaEnergia={tarifasEnergia[0]}
          loja={loja}
          setDadosCard={setDadosCard}
        />
      )}
    </div>
  );
};

export default PropostasTab;