import Combobox from "@/components/Combobox";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import ModalComponente from "@/components/Modal/ModalComponente";
import SweetAlertConfirmacao, {
  handleSweetAlert,
} from "@/components/Modal/SweetAlertConfirm";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { enviarContratoPorEmail } from "@/requests/CRM/Contrato/enviarContratoPorEmail";
import { envioContratoPorWhatsApp } from "@/requests/CRM/Contrato/envioContratoPorWhatsApp";
// import { listarClienteContratos } from "@/requests/CRM/Contrato/listarClienteContratos";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useGoogleAuth } from "@/hooks/useGoogleAuth";
import { cancelarContrato } from "@/requests/CRM/Contrato/cancelarContrato";
import { editarDatasContrato } from "@/requests/CRM/Contrato/editarDatasContrato";
import { obterContratoById } from "@/requests/CRM/Contrato/obterContratoById";
import { listarPrazoInstalacao } from "@/requests/CRM/Contrato/obterTemplateContrato";
import { salvarContratoAssinado } from "@/requests/CRM/Contrato/salvarContratoAssinado";
import { listarLocksPermissoesEtapas } from "@/requests/CRM/kanban";
import {
  atualizarPreApuracaoColeta,
  concluirAcaoPreApuracao,
  estornarConclucaoAcao,
} from "@/requests/CRUD/Apuracoes/cadastroPreApuracao";
import { estornarPreApuracao } from "@/requests/CRUD/Apuracoes/estornarPreApuracao";
import { listarNegocioPeloId } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import {
  addConclusaoPendencia,
  remConclusaoPendencia,
} from "@/requests/CRUD/ConclusaoPendencia/conclusaoPendencia";
import { excluirContrato } from "@/requests/CRUD/Contatos/excluirContrato";
import { listarDadosDocsTemplates } from "@/requests/CRUD/Lojas/cadastrarLojas";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { alterarCondicaoPagamento } from "@/requests/CRUD/Propostas/alterarCondicaoPagamento";
import { listarPropostas } from "@/requests/CRUD/Propostas/listarPropostas";
import { baixarAws } from "@/requests/common/Aws/baixarAws";
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 { useLoja } from "@/src/contexts/lojaContext";
import { getDateBrasil, getDateTimeBrasil, GetForm } from "@/utils";
import { handleGetDocData } from "@/utils/docs";
import { FilePlus } from "lucide-react";
import { Dispatch, useEffect, useState } from "react";
import { BiCheck, BiLogoWhatsapp, BiMailSend } from "react-icons/bi";
import { FaRegEye } from "react-icons/fa";
import { FaTrash } from "react-icons/fa6";
import {
  MdOutlineClose,
  MdOutlineEditCalendar,
  MdOutlineFileDownload,
} from "react-icons/md";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";
import Swal from "sweetalert2";
import * as yup from "yup";
import VisualizarDocGerado from "../documentos_gerados/visualizacaoDocumentoGerado";
import FormContrato from "./FormContrato";
import FormPagamentoContrato from "./FormPagamentoContrato";
import GeracaoContrato from "./GeracaoContrato";
import {
  IOrigemDadosDefaultContrato,
  origemDadosContratoConfiguracaoGeral,
  origemDadosDeContrato,
} from "@/utils/origemDadosDefaultContrato";

const options = [
  {
    value: "0",
    label: "Aguardando Aprovação",
  },
  {
    value: "1",
    label: "Aprovada",
  },
  {
    value: "3",
    label: "Cancelada",
  },
  {
    value: "2",
    label: "Reprovada",
  },
];

const statusContrato = [
  { name: "Contrato Gerado", color: "bg-[#619ce8]", value: "0" },
  { name: "Aprovado", color: "bg-[#07b51c]", value: "1" },
  { name: "Inativo", color: "bg-[#8d968e]", value: "2" },
  { name: "Cancelado", color: "bg-[#b5071e]", value: "3" },
];

const Contratos = ({
  dadosCard,
  usuarios,
  ucsColeta,
  dadosCliente,
  proposta,
  setPropostas,
  coletaContratos,
  atualizarContratosColeta,
  buscaPropostas,
  compareActiveStep,
  setActiveStepAtual,
  activeStep,
  stepsTemp,
  setDadosNegocio,
  formasPagamento,
  contasBancariasLojas,
  condicoesPagamento,
}: {
  [x: string]: any;
  setActiveStepAtual: Dispatch<any>;
}) => {
  const { lojaAtual } = useLoja();

  const [view, setView] = useState("Contratos");
  const { connected, profile } = useGoogleAuth(lojaAtual?.id_loja);
  const { handleSubmit, ...form } = GetForm();

  const [statusContratos, setStatusContratos] = useState<string>("0");
  // const [coletaContratos, setColetaContratos] = useState<any[]>([]);
  // const [perfil, setPerfil] = useState<any>([]);
  const [coletaContratosFiltro, setColetaContratosFiltro] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [locksPermissoes, setLocksPermissoes] = useState<any>([]);
  // const [propostas, setPropostas] = useState([]);
  const [openModalEmail, setOpenModalEmail] = useState(false);
  const [openModalCondPagamento, setModalCondPagamento] = useState(false);
  const [openModalContrato, setOpenModalContrato] = useState(false);
  // const [openDrawerContrato, setOpenDrawerContrato] = useState(false);
  // const [proposta, setProposta] = useState<any>();
  const { perfil, valuesSession, usuario } = useAuth();

  const [openModalWhatsApp, setOpenModalWhatsApp] = useState(false);
  const [openModalAprovarContrato, setOpenModalAprovarContrato] =
    useState(false);
  const [openModalAlterarDatas, setOpenModalAlterarDatas] = useState(false);
  const [openModalRegerarContrato, setOpenModalRegerarContrato] =
    useState(false);
  const [datasContratoForm, setDatasContratoForm] = useState({
    data_geracao_contrato: "",
    data_contrato: "",
  });
  const [dataContratoSistemaRegerar, setDataContratoSistemaRegerar] =
    useState("");
  const getDataHoraSaoPaulo = () =>
    new Date().toLocaleString("sv-SE", {
      timeZone: "America/Sao_Paulo",
      hour12: false,
    });
  const getDataSaoPaulo = () => getDataHoraSaoPaulo().split(" ")[0];
  const getDataHoraInputSaoPaulo = () =>
    getDataHoraSaoPaulo().replace(" ", "T").slice(0, 16);

  const toDateInput = (valor?: string) => {
    if (!valor) return "";
    return String(valor).split(" ")[0].split("T")[0];
  };
  const toDateTimeInput = (valor?: string) => {
    if (!valor) return "";
    return String(valor).replace(" ", "T").slice(0, 16);
  };

  const hoje = getDataSaoPaulo();
  const [dataAprovacaoContrato, setDataAprovacaoContrato] = useState(
    getDataHoraInputSaoPaulo()
  );
  const [contratoSelecionado, setContratoSelecionado] = useState<any>();
  const [dataGeracaoContrato, setDataGercaoContrato] = useState(hoje);
  const [camposPersonalizados, setCamposPersonalizados] = useState<any>();
  const [parametrosComerciais, setParametrosComerciais] = useState<any>();
  const [openModalNumeroContrato, setOpenModalNumeroContrato] = useState(false);
  const [ultimoContratoGerado, setUltimoContratoGerado] = useState<any>();
  const [dadosContratoDefault, setDadosContratoDefault] = useState<any>();

  /**
   * Qual origem o usuário escolheu para os dados sugeridos no contrato:
   * "contrato" (dados de um contrato já gerado) ou "configuracao" (dados da
   * Configuração Geral).
   *
   * Existe porque o formulário NÃO pode depender só de dadosContratoDefault
   * ficar undefined: clicar em "Usar Dados da Configuração Geral" chamava
   * setDadosContratoDefault(undefined) quando o valor JÁ era undefined, o React
   * não via mudança de estado, o efeito que popula o formulário não rodava e
   * ficava na tela o que já estava lá (os dados do contrato). O nonce garante
   * que cada clique é uma escolha nova, mesmo repetindo a mesma origem.
   */
  const [origemDadosContrato, setOrigemDadosContrato] = useState<{
    origem: "contrato" | "configuracao";
    nonce: number;
  }>();
  const [origemDadosDefaultContrato, setOrigemDadosDefaultContrato] =
    useState<IOrigemDadosDefaultContrato>();

  const { session } = valuesSession();
  const { isMobile } = useScreenContext();
  const id_usuario = session.id_usuario;
  const [openModalVisualizarDocumento, setOpenModalVisualizarDocumento] =
    useState({ id: null, caminho: null, open: false });
  const { reListarDadosKanban, openMenu } = useKanbanContext();
  const { notificarNotificacao } = useSocketContext();

  const etapaAtual = dadosCard?.id_lista;
  const [yupSchemaEmail, setYupSchemaEmail] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [yupSchemaWhatsApp, setYupSchemaWhatsApp] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [yupSchemaContrato, setYupSchemaContrato] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit: handleEmail, ...formEmail } = GetForm(
    yupSchemaEmail,
    setYupSchemaEmail
  );

  // const { handleSubmit: handlePagamento, ...formPagamento } = GetForm(
  //   yupSchemaEmail,
  //   setYupSchemaEmail
  // );

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

  const { handleSubmit: handleContratoAssinado, ...formContratoAssinado } =
    GetForm(yupSchemaContrato, setYupSchemaContrato);

  const { handleSubmit: handleNumeroContrato, ...formNumeroContrato } =
    GetForm();

  const handleChangeStatus = (status: any) => {
    if (statusContratos === status) {
      setStatusContratos("");
    } else {
      setStatusContratos(status);
    }
  };

  const [cronogramaInstalacao, setCronogramaInstalacao] = useState<
    any[] | undefined
  >(undefined);

  const [lojas, setLojas] = useState<any[] | undefined>(undefined);

  useEffect(() => {
    listarPrazoInstalacao().then((result) => setCronogramaInstalacao(result));
    listarLojas(session.id_usuario).then((result) => setLojas(result));
    listarParametros().then((result) => setParametrosComerciais(result));
  }, []);

  const confirmarContrato = async (data: any) => {
    // filterCamposPersonalizados(data);
    if (data.data_geracao_contrato != hoje) {
      setDataGercaoContrato(data.data_geracao_contrato);
    } else {
      setDataGercaoContrato(hoje);
    }

    setIsLoading(true);
    return alterarCondicaoPagamento({
      ...data,
      id_usuario: session.id_usuario,
      origem: "contrato",
      id_coleta: dadosCard.id_coleta_cliente,
      id_proposta: proposta.id_proposta,
      cliente_proposta: proposta.cliente_proposta,
    })
      .then((e: any) => {
        listarPropostas(dadosCard?.id_coleta_cliente).then((res) => {
          setPropostas(res);
          setModalCondPagamento(false);
          setCamposPersonalizados(data);
          if (isMobile) {
            openMenu(newContractFunction());
          } else {
            setOpenModalContrato(true);
          }
          // setView("NovoContrato");
        });
        //
        // openMenu(newContractFunction());

        // buscaPropostas().then((res: any) => {
        //   setModalCondPagamento(false);
        //   if (isMobile) {
        //     openMenu(newContractFunction());
        //   } else {
        //     setOpenModalContrato(true);
        //   }
        //   // setView("NovoContrato");
        // });
      })
      .finally(() => setIsLoading(false));
  };

  useEffect(() => {
    listarPermissoesLocks();
  }, []);

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

  const onSubmitNumeroContrato = async (data: any) => {
    const idContratoEscolhido = data.numero_contrato;

    const contratoEscolhido = await obterContratoById(
      idContratoEscolhido,
      session?.sigla
    ).catch(() => null);

    if (!contratoEscolhido?.id_contrato) {
      toast.error("Contrato informado não foi encontrado.");
      return;
    }

    setDadosContratoDefault(contratoEscolhido);
    setOrigemDadosContrato({ origem: "contrato", nonce: Date.now() });
    setOrigemDadosDefaultContrato(origemDadosDeContrato(idContratoEscolhido));
    setOpenModalNumeroContrato(false);
    setModalCondPagamento(true);
  };

  const onSubmitEmail = (data: any) => {
    setIsLoading(true);
    data["assunto_email"] = "Contrato";
    data["titulo_email"] = `Olá ${dadosCliente.nome_cliente}`;
    data["cliente_contrato"] = dadosCliente.id_cliente;
    data["corpo_email"] = `Segue em anexo contrato do seu negócio`;
    data["coleta_contrato"] = coletaContratos[0].coleta_contrato;
    data["id_card"] = dadosCard.id;
    data["id_usuario"] = session.id_usuario;

    enviarContratoPorEmail(data)
      .then((res) => {
        notificarNotificacao();
        reListarDadosKanban();
        setOpenModalEmail(false);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  function onSubmitWhatsApp(data: any) {
    setIsLoading(true);
    envioContratoPorWhatsApp(data)
      .then((res) => {
        window.open(res);
        notificarNotificacao();
        reListarDadosKanban();
      })
      .catch((err) => {
        toast.error(err);
      })
      .finally(() => {
        setIsLoading(false);
      });
    // const toastPromise = new Promise((resolve, reject) => {
    //   // baixarAws(data.caminho_contrato)
    //   // .then(async (linkDocumento) => {
    //       // envioContratoPorWhatsApp({...data, linkDocumento})
    //     // .then(async (caminhoDocumento) => {
    //       // const recipientPhoneNumber = `55${FormatFields.formatarNumerico(
    //       //   data.whatsapp_cliente
    //       // )}`;
    //       // const documentLink: string = caminhoDocumento;
    //       // const documentName = data.caminho_contrato.split("/").pop();

    //       // const obj = {
    //       //   recipientPhoneNumber,
    //       //   documentLink,
    //       //   documentName,
    //       // };

    //       // return enviarDocumentoWhatsApp(obj)
    //       //   .then((res) => envioContratoPorWhatsApp(data).then(() => res))
    //       //   .then((res) => {
    //       //     setOpenModalWhatsApp(false);
    //       //     reListarDadosKanban();
    //       //     resolve(res);
    //       //     // contarEnvioWhatsApp()
    //       //   })
    //       //   .catch((err) => reject(err.response ? err.response.data : err.message));
    //     // })
    //     // .catch((err) => {
    //     //   reject("Arquivo não encontrado");
    //     // })
    //     // .finally(() => {
    //     //   setIsLoading(false);
    //     // });
    // });

    // return toast.promise(toastPromise, {
    //   pending: {
    //     render(data: any) {
    //       return "Aguarde";
    //     },
    //   },
    //   success: {
    //     render(data: any) {
    //       return "Documento Enviado!";
    //     },
    //     theme: "light",
    //   },
    //   error: {
    //     render(data: any) {
    //       console.error(data);
    //       return data.data;
    //       return "Erro ao realizar enviar o documento";
    //     },
    //   },
    // });
  }

  useEffect(() => {
    setColetaContratosFiltro(
      coletaContratos.filter(
        (contrato: any) =>
          statusContratos === "0" || contrato.status_contrato == statusContratos
      )
    );
  }, [coletaContratos, statusContratos]);

  useEffect(() => {
    // listarPerfil(session.perfil_usuario).then((res) => setPerfil(res));
    atualizarContratos();
  }, []);

  async function atualizarContratos() {
    return atualizarContratosColeta().then(() => {
      setIsLoaded(true);
    });
  }

  const obterPropostaDoContrato = (contrato?: any) => {
    if (
      proposta &&
      String(proposta.id_proposta) === String(contrato?.proposta_contrato)
    ) {
      return proposta;
    }
    return proposta || null;
  };

  const abrirModalAlterarDatas = (contrato: any) => {
    if (String(contrato?.status_contrato) === "1") {
      return toast.warning(
        "Não é permitido alterar as datas de contratos já aprovados"
      );
    }

    setContratoSelecionado(contrato);
    setDatasContratoForm({
      data_geracao_contrato: toDateInput(contrato?.data_geracao_contrato),
      data_contrato: toDateTimeInput(contrato?.data_contrato),
    });
    setOpenModalAlterarDatas(true);
  };

  const onSubmitAlterarDatasContrato = () => {
    if (
      !datasContratoForm.data_geracao_contrato ||
      !datasContratoForm.data_contrato
    ) {
      return toast.error(
        "Preencha a data de geração e a data de inclusão no sistema"
      );
    }

    if (String(contratoSelecionado?.status_contrato) === "1") {
      return toast.error(
        "Não é permitido alterar as datas de contratos já aprovados"
      );
    }

    const propostaContrato = obterPropostaDoContrato(contratoSelecionado);
    const dataGeracaoProposta = toDateInput(propostaContrato?.data_proposta);
    const dataGeracaoContratoInformada =
      datasContratoForm.data_geracao_contrato;
    const dataSistemaInformada = toDateInput(datasContratoForm.data_contrato);

    if (
      dataGeracaoProposta &&
      dataGeracaoContratoInformada < dataGeracaoProposta
    ) {
      return toast.error(
        `A data de geração do contrato não pode ser menor que a data de geração da proposta aprovada (${getDateBrasil(
          undefined,
          dataGeracaoProposta
        )})`
      );
    }

    if (dataGeracaoProposta && dataSistemaInformada < dataGeracaoProposta) {
      return toast.error(
        `A data de geração no sistema não pode ser menor que a data de geração da proposta aprovada (${getDateBrasil(
          undefined,
          dataGeracaoProposta
        )})`
      );
    }

    const podeRegerarPdf = lojaAtual?.tipoAssintatura_loja !== "0";

    Swal.fire({
      title: "Alterar datas do contrato?",
      icon: "question",
      html: podeRegerarPdf
        ? `Confirma a alteração das datas do contrato Nº <b>${contratoSelecionado?.id_contrato}</b>?<br/><br/>Após salvar, o PDF será regerado com as novas datas.`
        : `Confirma a alteração das datas do contrato Nº <b>${contratoSelecionado?.id_contrato}</b>?`,
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: podeRegerarPdf
        ? "Sim, salvar e regerar PDF"
        : "Sim, salvar",
      cancelButtonText: "Cancelar",
      customClass: {
        popup: "dark:bg-form-strokedark dark:text-white",
      },
    }).then((result) => {
      if (!result.isConfirmed) return;

      setIsLoading(true);
      editarDatasContrato({
        id_contrato: contratoSelecionado?.id_contrato,
        id_usuario: session.id_usuario,
        id_coleta:
          contratoSelecionado?.coleta_contrato || dadosCard?.id_coleta_cliente,
        data_geracao_contrato: datasContratoForm.data_geracao_contrato,
        data_contrato: datasContratoForm.data_contrato,
      })
        .then(() => {
          setOpenModalAlterarDatas(false);
          if (podeRegerarPdf) {
            toast.success(
              "Datas atualizadas. Gere e salve o PDF com as novas datas."
            );
            setDataGercaoContrato(datasContratoForm.data_geracao_contrato);
            setDataContratoSistemaRegerar(datasContratoForm.data_contrato);
            setOpenModalRegerarContrato(true);
          } else {
            toast.success("Datas do contrato atualizadas com sucesso");
          }
          return atualizarContratos();
        })
        .catch((err: any) => {
          toast.error(err?.message || "Erro ao alterar datas do contrato");
        })
        .finally(() => setIsLoading(false));
    });
  };

  async function onAproveContract(data: any) {
    if (!dataAprovacaoContrato) {
      return toast.error(
        "Data de aprovação inválida. Informe uma data válida."
      );
    }

    const dataGeracaoSelecionada = String(
      contratoSelecionado?.data_geracao_contrato || ""
    )
      .split(" ")[0]
      .split("T")[0];
    const dataAprovacaoDia = dataAprovacaoContrato.split("T")[0];

    if (dataGeracaoSelecionada && dataAprovacaoDia < dataGeracaoSelecionada) {
      return toast.error(
        "Data de aprovação inválida. Não pode ser menor que a data de geração do contrato."
      );
    }

    const agoraSaoPaulo = getDataHoraInputSaoPaulo();
    if (dataAprovacaoContrato > agoraSaoPaulo) {
      toast.warn(
        "A data de aprovação é maior que a data atual. O sistema vai salvar assim mesmo."
      );
    }

    const inputElement = data.arquivo_contrato_eventTarget as HTMLInputElement;

    if (inputElement?.files && inputElement.files[0]) {
      if (inputElement.files[0].type != "application/pdf") {
        return toast.error("Selecione um pdf válido");
      }

      if (!proposta) {
        return toast.error("Não há uma proposta aprovada!");
      }

      const newForm = new FormData();

      const arquivo = inputElement?.files?.[0];
      const dataAprovacaoFormatada = `${dataAprovacaoContrato.replace(
        "T",
        " "
      )}:00`;

      const dadosContrato: any = {
        ...contratoSelecionado,
        arquivo_contrato: arquivo,
        caminho_assinado_contrato: `clientes/${dadosCliente.pasta_cliente}/Contratos/Assinado_Contrato_${proposta.id_proposta}_Versao_${
          coletaContratos.length + 1
        }_Coleta_${proposta.coleta_proposta}.pdf`,
        status_contrato: "1",
        data_hora_aprovacao: dataAprovacaoFormatada,
        id_usuario: session.id_usuario,
        id_card: dadosCard.id,
      };

      for (const key in dadosContrato) {
        newForm.append(key, dadosContrato[key]);
      }

      setIsLoading(true);

      if (dadosCard.pre_apuracao_comissao_loja_coleta == "0") {
        salvarContratoAssinado(newForm)
          .then(() => {
            concluirAcaoPreApuracao(dadosCard.id_coleta_cliente);
            setIsLoaded(false);
            notificarNotificacao();
            atualizarContratos()
              .then(() => {
                setOpenModalAprovarContrato(false);
                // setActiveStepAtual(activeStep + 1);
              })
              .finally(() => setIsLoaded(true));

            addConclusaoPendencia({
              id_coleta: dadosCard.id_coleta_cliente,
              id_etapa: dadosCard.id_lista,
              id_pendencia: "6",
            }).then((res) => {
              listarNegocioPeloId(dadosCard?.id_coleta_cliente).then((res) => {
                // setActiveStepAtual(Number(res?.indexAtual_coleta));
                setActiveStepAtual(activeStep + 1);
              });
            });
          })
          .finally(() => {
            reListarDadosKanban();
            setIsLoading(false);
          });
      } else {
        salvarContratoAssinado(newForm)
          .then(() => {
            atualizarPreApuracaoColeta({
              id_coleta_cliente: dadosCard.id_coleta_cliente,
              cod_preApuracao_coleta: dadosCard.pre_apuracao_comissao_loja,
            });
            setIsLoaded(false);
            notificarNotificacao();
            atualizarContratos()
              .then(() => {
                setOpenModalAprovarContrato(false);
                setActiveStepAtual(activeStep + 1);
              })
              .finally(() => setIsLoaded(true));

            addConclusaoPendencia({
              id_coleta: dadosCard.id_coleta_cliente,
              id_etapa: dadosCard.id_lista,
              id_pendencia: "6",
            }).then((res) => {
              listarNegocioPeloId(dadosCard?.id_coleta_cliente).then((res) => {
                setActiveStepAtual(activeStep + 1);
              });
            });
          })
          .finally(() => {
            reListarDadosKanban();

            // listarDadosKanban().then(() => setIsLoading(false));
            setIsLoading(false);
          });
      }
    } else {
      toast.error("Selecione o arquivo assinado");
    }
  }
  const [nenhumIdDocs, setNenhumIdDocs] = useState(false);
  const [docDocument, setDocDocument] = useState<any>();
  useEffect(() => {
    if (!connected) return;
    listarDadosDocsTemplates(lojaAtual?.id_loja, profile?.id).then(
      async (res) => {
        const docData = await handleGetDocData(res);
        const newDoc = docData.find(
          (a: any) =>
            a.tipo === "2" && a.tipoNegocio == dadosCard.tipoNegocio_coleta
        );
        if (
          !docData.some(
            (a: any) =>
              a.tipo === "2" && a.tipoNegocio == dadosCard.tipoNegocio_coleta
          )
        ) {
          setNenhumIdDocs(true);
        } else {
          setNenhumIdDocs(false);
          setDocDocument(newDoc);
        }
      }
    );
  }, [connected, profile]);
  const newContractFunction = () => {
    if (lojaAtual?.tipoAssintatura_loja === "0") {
      return (
        <FormContrato
          dadosCard={dadosCard}
          dadosCliente={dadosCliente}
          setActiveStepAtual={setActiveStepAtual}
          activeStep={activeStep}
          ucsColeta={ucsColeta}
          proposta={proposta}
          camposPersonalizados={camposPersonalizados}
          coletaContratos={coletaContratos}
          reloadContratos={reloadContratos}
          setIsLoading={setIsLoading}
        />
      );
    }
    return (
      <GeracaoContrato
        dadosCard={dadosCard}
        dataGeracaoContrato={dataGeracaoContrato}
        lojas={lojas}
        usuario={usuario}
        dadosCliente={dadosCliente}
        setActiveStepAtual={setActiveStepAtual}
        activeStep={activeStep}
        ucsColeta={ucsColeta}
        proposta={proposta}
        camposPersonalizados={camposPersonalizados}
        coletaContratos={coletaContratos}
        reloadContratos={reloadContratos}
        setIsLoading={setIsLoading}
        setModalCondPagamento={setModalCondPagamento}
        setOpenModalContrato={setOpenModalContrato}
        origemDadosDefaultContrato={origemDadosDefaultContrato}
      />
    );
  };
  const reloadContratos = () => {
    setIsLoaded(false);
    atualizarContratos();
    notificarNotificacao();
    setOpenModalContrato(false);
    setView("Contratos");
    listarNegocioPeloId(dadosCard?.id_coleta_cliente).then((res) => {
      setDadosNegocio({ ...res });
    });
  };

  async function onSubmitExcuirContrato(data: any) {
    return excluirContrato({
      ...data,
      id_usuario: usuario?.id_usuario,
    }).then(() => {
      reloadContratos();
    });
  }

  return (
    <div className="flex flex-col">
      {view == "Contratos" ? (
        <div className="w-full flex-col">
          {!connected && (
            <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-2 rounded-md border-[#fcdcaa] shadow-sm">
              <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                <RiErrorWarningFill size={20} color="#ffb747" />
              </div>
              <p className="text-black text-sm">
                Atenção!! Não foi conectado nenhuma &#34;Conta Google&#34; para
                que possamos identificar as Templates existentes. Favor avisar o
                ADM do Sistema.
              </p>
            </div>
          )}
          {nenhumIdDocs && (
            <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-2 rounded-md border-[#fcdcaa] shadow-sm">
              <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                <RiErrorWarningFill size={20} color="#ffb747" />
              </div>
              <p className="text-black text-sm">
                Atenção!! Não foi informado nenhum ID de documento com o Modelo
                para a Geração dos Contratos, e isso irá gerar um erro na
                geração final do .PDF. Favor avisar o ADM do Sistema.
              </p>
            </div>
          )}
          {/* {renderCamposPersonalizados("5", form, "5", dadosCard, true, handleSubmit)} */}

          <div className={`  flex justify-end`}>
            {/* {coletaContratos.every(
            (contrato) => contrato.status_contrato != "1"
            ) && */}
            {isLoaded &&
              proposta &&
              coletaContratos.every(
                (contrato: any) => contrato.status_contrato != "1"
              ) &&
              perfil.permite_gerar_contrato_perfil == "1" &&
              locksPermissoes.some(
                (lock: any) =>
                  lock.etapa_funil_id === etapaAtual &&
                  lock.permissao_id === "2"
              ) && (
                <Button
                  onClick={() => {
                    // if (isMobile) {
                    //   Swal.fire({
                    //     title: "Atenção!",
                    //     text: "O acesso está disponível somente em equipamentos com telas maiores.",
                    //     icon: "warning",
                    //     confirmButtonText: "Ok",
                    //     confirmButtonColor: "#4CAF50",
                    //   });
                    //   return; // Impede a navegação
                    // }
                    const falhasDeValidacao: any[] = [];
                    let camposObrigatorios: any[] = [];
                    if (dadosCliente.tipoPessoa_cliente == "F") {
                      camposObrigatorios = [
                        { valor: "cpfcnpj_cliente", nome: "CPF/CNPJ" },
                        {
                          valor: "dataNascimento_cliente",
                          nome: "Data de Nascimento",
                        },
                        {
                          valor: "estadoCivil_cliente",
                          nome: "Estado Civil",
                        },
                        { valor: "profissao_cliente", nome: "Profissão" },
                        { valor: "cep_cliente", nome: "CEP" },
                        { valor: "bairro_cliente", nome: "Bairro" },
                        { valor: "rua_cliente", nome: "Rua" },
                        { valor: "nro_cliente", nome: "Número de endereço" },
                        { valor: "cidade_cliente", nome: "Cidade" },
                        { valor: "estado_cliente", nome: "Estado" },
                        { valor: "nome_cliente", nome: "Nome" },
                      ];
                    } else {
                      camposObrigatorios = [
                        { valor: "cpfcnpj_cliente", nome: "CPF/CNPJ" },
                        { valor: "nomeEmpresa_cliente", nome: "Razão Social" },
                        {
                          valor: "nomeResponsavelFisico_cliente",
                          nome: "Nome Responsável Legal",
                        },
                        {
                          valor: "data_aberturaEmpresa_cliente",
                          nome: "Data Abertura",
                        },
                        {
                          valor: "ie_cliente",
                          nome: "IE",
                        },
                        { valor: "cepEmpresa_cliente", nome: "CEP" },
                        {
                          valor: "logradouroEmpresa_cliente",
                          nome: "Logradouro",
                        },
                        { valor: "numeroEmpresa", nome: "Número de endereço" },
                        { valor: "bairroEmpresa_cliente", nome: "Bairro" },
                        { valor: "cidadeEmpresa_cliente", nome: "Cidade" },
                        { valor: "ufEmpresa_cliente", nome: "Estado" },
                      ];
                    }

                    for (const campoObrigatorio of camposObrigatorios) {
                      if (!dadosCliente[campoObrigatorio.valor]) {
                        falhasDeValidacao.push(campoObrigatorio.nome);
                      }
                    }
                    // if (falhasDeValidacao.length > 0) {
                    //   return toast.error(
                    //     `Informações incompletas, é necessário informar: ${falhasDeValidacao.join(", ")} do Cliente`
                    //   );
                    // }
                    if (
                      parametrosComerciais?.sugestaoDadosContrato_parametro ===
                        "1" &&
                      coletaContratos.length > 0
                    ) {
                      const ultimo = coletaContratos.reduce(
                        (max: any, c: any) =>
                          +c.id_contrato > +max.id_contrato ? c : max
                      );
                      setUltimoContratoGerado(ultimo);
                      formNumeroContrato.setValue(
                        "numero_contrato" as never,
                        ultimo.id_contrato as never
                      );
                      setOpenModalNumeroContrato(true);
                      return;
                    }
                    // Sem contratos gerados (ou parâmetro configurado pra não
                    // sugerir): a origem é a Configuração Geral, e o formulário
                    // precisa saber disso pra limpar resíduo de uma tentativa
                    // anterior que carregou dados de contrato.
                    setDadosContratoDefault(undefined);
                    setOrigemDadosContrato({
                      origem: "configuracao",
                      nonce: Date.now(),
                    });
                    setOrigemDadosDefaultContrato(
                      origemDadosContratoConfiguracaoGeral()
                    );
                    setModalCondPagamento(true);
                    // setView("NovoContrato");
                  }}
                  className="w-fit px-8 gap-2 max-sm:text-xs text-sm flex items-center"
                >
                  <FilePlus size={18} />
                  Novo Contrato
                </Button>
              )}
          </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={handleChangeStatus}
              className="max-sm:!text-xs"
              placeholder="Selecione um status"
              options={options}
            />
            {/* <DatePickerWithRange /> */}
          </div>
          <div className="w-full max-sm:mb-4 max-sm:text-xs text-sm flex flex-col gap-2">
            {isLoaded ? (
              coletaContratosFiltro?.map((contrato, index) => (
                <div
                  key={index}
                  className="bg-white text-black dark:text-white dark:bg-form-strokedark flex w-full justify-between rounded-md relative"
                >
                  <div className=" rounded-bl-xl text-white font-medium rounded-tr-md gap-2  flex items-center h-fit justify-center bg-[#000] absolute right-0 top-0">
                    <span
                      className={`w-2 h-2 ${
                        statusContrato.find(
                          (status) => status.value == contrato.status_contrato
                        )?.color
                      } rounded-full ml-2`}
                    ></span>
                    <p className="mr-2">
                      {
                        statusContrato.find(
                          (status) => status.value == contrato.status_contrato
                        )?.name
                      }
                    </p>
                  </div>
                  <div className="p-3 text-start">
                    <p className="">Contrato Nº {contrato.id_contrato} </p>

                    {contrato.status_contrato == 1 && (
                      <p className=" font-medium">
                        Data Aprovação:{" "}
                        {new Date(
                          contrato.data_hora_aprovacao
                        ).toLocaleDateString("pt-BR")}{" "}
                        - Aprovado por: {contrato.usuario_aprovacao_contrato}
                      </p>
                    )}

                    {contrato?.status_contrato == 3 &&
                      contrato?.data_hora_reprovacao && (
                        <p className="font-medium">
                          Data Cancelamento:{" "}
                          {new Date(
                            contrato.data_hora_reprovacao
                          ).toLocaleString("pt-BR")}
                          {" - Cancelado por: "}
                          {contrato.usuario_reprovacao_contrato}
                        </p>
                      )}

                    <p className=" font-medium">
                      {" "}
                      Data Gerado:{" "}
                      {getDateBrasil(
                        undefined,
                        contrato.data_geracao_contrato
                      )}{" "}
                      Gerador Por:{" "}
                      {
                        usuarios.find(
                          (user: any) =>
                            user.id_usuario == contrato.user_contrato
                        )?.nome_usuario
                      }
                    </p>
                    <p className=" font-medium">
                      Data Incluido no sistema:{" "}
                      {getDateTimeBrasil(undefined, contrato.data_contrato)}
                    </p>
                    <p className=" font-medium">
                      Revisão {contrato.revisao_contrato}
                    </p>
                    <p className="font-semibold">
                      Proposta Nº {contrato.proposta_contrato}
                    </p>
                  </div>
                  <div className="p-3 flex flex-col justify-center items-center">
                    <div className="flex flex-row gap-4 items-center">
                      <Popover>
                        <PopoverTrigger asChild>
                          <div
                            className={`bg-transparent text-[#000] flex items-center rounded-md p-0 m-0 h-fit cursor-pointer`}
                            // type="button"
                            onClick={() => {
                              if (contrato.status_contrato != "1") {
                                setOpenModalVisualizarDocumento({
                                  id: contrato.id_contrato,
                                  caminho: contrato.caminho_contrato,
                                  open: true,
                                });
                              }
                            }}
                          >
                            <FaRegEye
                              title="Visualizar Contrato"
                              size={isMobile ? 17 : 22}
                            />
                          </div>
                        </PopoverTrigger>
                        {contrato.status_contrato == "1" && (
                          <PopoverContent
                            // align="start"
                            className="popover w-fit h-fit p-1"
                            // className="z-99999 md:w-70 w-55 dark:bg-boxdark-2 max-sm:-translate-x-8 p-1"
                          >
                            <div className="flex flex-col p-1">
                              <div
                                className="p-1 cursor-pointer hover:bg-black/10"
                                onClick={() => {
                                  setOpenModalVisualizarDocumento({
                                    id: contrato.id_contrato,
                                    caminho: contrato.caminho_contrato,
                                    open: true,
                                  });
                                }}
                              >
                                Contrato
                              </div>
                              <div
                                className="p-1 cursor-pointer hover:bg-black/10"
                                onClick={() => {
                                  setOpenModalVisualizarDocumento({
                                    id: contrato.id_contrato,
                                    caminho: contrato.caminho_assinado_contrato,
                                    open: true,
                                  });
                                }}
                              >
                                Contrato Assinado
                              </div>
                            </div>
                          </PopoverContent>
                        )}
                      </Popover>
                      <Popover>
                        <PopoverTrigger asChild>
                          <div
                            className={`bg-transparent text-[#000] flex items-center rounded-md p-0 m-0 h-fit cursor-pointer`}
                            // type="button"
                            onClick={() => {
                              if (contrato.status_contrato != "1") {
                                const toastPromise = new Promise(
                                  (resolve, reject) => {
                                    baixarAws(contrato.caminho_contrato)
                                      .then((res) => resolve(window.open(res)))
                                      .catch((err) => {
                                        reject("err");
                                      });
                                  }
                                );
                                return toast.promise(toastPromise, {
                                  pending: {
                                    render(data: any) {
                                      return "Aguarde";
                                    },
                                  },
                                  success: {
                                    render(data: any) {
                                      return "Download Iniciado";
                                    },
                                    theme: "light",
                                  },
                                  error: {
                                    render(data: any) {
                                      return "Erro ao realizar o download";
                                    },
                                  },
                                });
                              }
                            }}
                          >
                            <MdOutlineFileDownload
                              title="Baixar Contrato"
                              color="#5193fc"
                              size={isMobile ? 17 : 24}
                            />
                          </div>
                        </PopoverTrigger>
                        {contrato.status_contrato == "1" && (
                          <PopoverContent
                            // align="start"
                            className="popover w-fit h-fit p-1"
                            // className="z-99999 md:w-70 w-55 dark:bg-boxdark-2 max-sm:-translate-x-8 p-1"
                          >
                            <div className="flex flex-col p-1">
                              <div
                                className="p-1 cursor-pointer hover:bg-black/10"
                                onClick={() => {
                                  const toastPromise = new Promise(
                                    (resolve, reject) => {
                                      baixarAws(contrato.caminho_contrato)
                                        .then((res) =>
                                          resolve(window.open(res))
                                        )
                                        .catch((err) => {
                                          reject("err");
                                        });
                                    }
                                  );
                                  return toast.promise(toastPromise, {
                                    pending: {
                                      render(data: any) {
                                        return "Aguarde";
                                      },
                                    },
                                    success: {
                                      render(data: any) {
                                        return "Download Iniciado";
                                      },
                                      theme: "light",
                                    },
                                    error: {
                                      render(data: any) {
                                        return "Erro ao realizar o download";
                                      },
                                    },
                                  });
                                }}
                              >
                                Contrato
                              </div>
                              <div
                                className="p-1 cursor-pointer hover:bg-black/10"
                                onClick={() => {
                                  const toastPromise = new Promise(
                                    (resolve, reject) => {
                                      baixarAws(
                                        contrato.caminho_assinado_contrato
                                      )
                                        .then((res) =>
                                          resolve(window.open(res))
                                        )
                                        .catch((err) => {
                                          reject("err");
                                        });
                                    }
                                  );
                                  return toast.promise(toastPromise, {
                                    pending: {
                                      render(data: any) {
                                        return "Aguarde";
                                      },
                                    },
                                    success: {
                                      render(data: any) {
                                        return "Download Iniciado";
                                      },
                                      theme: "light",
                                    },
                                    error: {
                                      render(data: any) {
                                        return "Erro ao realizar o download";
                                      },
                                    },
                                  });
                                }}
                              >
                                Contrato Assinado
                              </div>
                            </div>
                          </PopoverContent>
                        )}
                      </Popover>
                      <SweetAlertConfirmacao
                        resultConfirmed={() => {
                          formEmail.setValue(
                            "id_contrato" as never,
                            contrato.id_contrato as never
                          );
                          formEmail.setValue(
                            "caminho_contrato" as never,
                            contrato.caminho_contrato as never
                          );
                          formEmail.setValue(
                            "email_cliente" as never,
                            dadosCliente.email_cliente 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> O contrato ${contrato.caminho_contrato
                          .split("/")
                          .pop()}?`}
                      >
                        <BiMailSend
                          title="Enviar Contrato por E-mail"
                          size={isMobile ? 17 : 24}
                        />
                      </SweetAlertConfirmacao>
                      <SweetAlertConfirmacao
                        resultConfirmed={() => {
                          formWhatsApp.setValue(
                            "id_contrato" as never,
                            contrato.id_contrato as never
                          );
                          formWhatsApp.setValue(
                            "whatsapp_cliente" as never,
                            dadosCliente.telefone1_cliente as never
                          );
                          formWhatsApp.setValue(
                            "caminho_contrato" as never,
                            (contrato.caminho_assinado_contrato ||
                              contrato.caminho_contrato) as never
                          );
                          formWhatsApp.setValue(
                            "id_card" as never,
                            dadosCard.id as never
                          );
                          formWhatsApp.setValue(
                            "id_usuario" as never,
                            session.id_usuario as never
                          );
                          setOpenModalWhatsApp(true);
                        }}
                        tittle="Enviar ao Whatsapp"
                        icon="question"
                        html={`Tem certeza que deseja <b>Enviar</b> O contrato ${contrato.caminho_contrato
                          .split("/")
                          .pop()}?`}
                        className="bg-transparent text-[green] flex items-center rounded-md p-0 m-0 h-fit"
                      >
                        <BiLogoWhatsapp
                          title="Enviar Contrato por WhatsApp"
                          size={isMobile ? 17 : 24}
                        />
                      </SweetAlertConfirmacao>
                      {(perfil?.alterar_datas_contrato_perfil == 1 ||
                        perfil?.alterar_datas_contrato_perfil == "1" ||
                        perfil?.id_perfil == "1000" ||
                        perfil?.id_perfil == 1000) &&
                        String(contrato.status_contrato) !== "1" && (
                          <Button
                            className="bg-transparent text-[#5193fc] flex items-center rounded-md p-0 m-0 h-fit"
                            type="button"
                            onClick={() => abrirModalAlterarDatas(contrato)}
                          >
                            <MdOutlineEditCalendar
                              title="Alterar Datas do Contrato"
                              size={isMobile ? 17 : 24}
                            />
                          </Button>
                        )}

                      {(perfil?.permite_aprovar_contrato_perfil == 1 ||
                        perfil.id_perfil == "1000") &&
                        coletaContratos.every(
                          (contrato: any) => contrato.status_contrato != "1"
                        ) &&
                        contrato.status_contrato != "3" &&
                        (dadosCard?.pre_apuracao_comissao_loja_coleta != "0" ||
                          (dadosCard?.pre_apuracao_comissao_loja_coleta ==
                            "0" &&
                            dadosCard?.status_apuracao_coleta &&
                            +dadosCard?.status_apuracao_coleta == 0)) && (
                          <>
                            <Button
                              className="bg-transparent text-[green] flex items-center rounded-md p-0 m-0 h-fit"
                              onClick={() => {
                                setContratoSelecionado(contrato);
                                setDataAprovacaoContrato(
                                  getDataHoraInputSaoPaulo()
                                );
                                formContratoAssinado.setValue(
                                  "arquivo_contrato_eventTarget" as never,
                                  undefined as never
                                );
                                setOpenModalAprovarContrato(true);
                              }}
                            >
                              <BiCheck title="Aprovar Contrato" size={24} />
                            </Button>
                          </>
                        )}

                      {(perfil.id_perfil == 1000 ||
                        perfil.cancelar_contrato_perfil == 1) &&
                        contrato.status_contrato != 3 &&
                        (stepsTemp.some((step: any) => step.id === "8")
                          ? activeStep <=
                            stepsTemp.findIndex((step: any) => step.id === "8")
                          : true) && (
                          // dadosCard.status_coleta != 7 &&
                          // dadosCard.status_coleta != 10 &&
                          <Button
                            className="bg-transparent text-[red] flex items-center rounded-md p-0 m-0 h-fit"
                            onClick={() => {
                              handleSweetAlert(
                                {
                                  icon: "question",
                                  title: "Cancelar Contrato",
                                  html: `Tem certeza que deseja <b>Cancelar</b> o contrato Nº${contrato.id_contrato}?`,
                                },
                                () => {
                                  if (
                                    dadosCard.pre_apuracao_comissao_loja_coleta ==
                                    "0"
                                  ) {
                                    estornarConclucaoAcao(
                                      dadosCard.id_coleta_cliente
                                    ).then(() => {
                                      cancelarContrato({
                                        ...contrato,
                                        id_usuario: session.id_usuario,
                                        id_card: dadosCard.id,
                                      }).then(() => {
                                        estornarPreApuracao({
                                          id_coleta:
                                            dadosCard.id_coleta_cliente,
                                          idPreApuracao: null,
                                          id_card: dadosCard.id,
                                          id_usuario: usuario.id_usuario,
                                        });
                                        reListarDadosKanban();
                                        atualizarContratos();
                                        notificarNotificacao();

                                        remConclusaoPendencia({
                                          id_coleta:
                                            dadosCard.id_coleta_cliente,
                                          id_pendencia: "5",
                                        }).then((res) => {
                                          listarNegocioPeloId(
                                            dadosCard?.id_coleta_cliente
                                          ).then((res) => {
                                            setActiveStepAtual(
                                              Number(res?.indexAtual_coleta)
                                            );
                                          });
                                        });

                                        remConclusaoPendencia({
                                          id_coleta:
                                            dadosCard.id_coleta_cliente,
                                          id_pendencia: "6",
                                        }).then((res) => {
                                          listarNegocioPeloId(
                                            dadosCard?.id_coleta_cliente
                                          ).then((res) => {
                                            setActiveStepAtual(
                                              Number(res?.indexAtual_coleta)
                                            );
                                          });
                                        });
                                      });
                                    });
                                  } else {
                                    cancelarContrato({
                                      ...contrato,
                                      id_usuario: session.id_usuario,
                                      id_card: dadosCard.id,
                                    }).then(() => {
                                      estornarPreApuracao({
                                        id_coleta: dadosCard.id_coleta_cliente,
                                        idPreApuracao: null,
                                        id_card: dadosCard.id,
                                        id_usuario: usuario.id_usuario,
                                      });

                                      atualizarContratos();
                                      notificarNotificacao();

                                      remConclusaoPendencia({
                                        id_coleta: dadosCard.id_coleta_cliente,
                                        id_pendencia: "6",
                                      }).then(() => {
                                        remConclusaoPendencia({
                                          id_coleta:
                                            dadosCard.id_coleta_cliente,
                                          id_pendencia: "5",
                                        }).then(() => {
                                          listarNegocioPeloId(
                                            dadosCard?.id_coleta_cliente
                                          ).then((res) => {
                                            setActiveStepAtual(
                                              Number(res?.indexAtual_coleta)
                                            );
                                          });
                                          reListarDadosKanban();
                                        });
                                      });
                                    });
                                  }
                                }
                              );
                            }}
                          >
                            <MdOutlineClose
                              title="Cancelar Contrato"
                              size={isMobile ? 17 : 24}
                            />
                          </Button>
                        )}

                      {perfil?.excluir_contrato_perfil == 1 &&
                        ["0", "2", "3"].includes(contrato.status_contrato) && (
                          <>
                            <Button
                              className="bg-transparent text-[red] flex items-center rounded-md p-0 m-0 h-fit"
                              onClick={() => {
                                Swal.fire({
                                  showDenyButton: true,
                                  confirmButtonText: "Confirmar",
                                  confirmButtonColor: "#4CAF50",
                                  denyButtonText: "Cancelar",
                                  denyButtonColor: "#FF0000",
                                  customClass: {
                                    popup:
                                      "dark:bg-form-strokedark dark:text-white",
                                  },
                                  title: "Exclusão",
                                  icon: "error",
                                  html: `<div className="flex flex-col">
                                      <p>
                                        <b>Excluir</b> o contrato n° ${contrato.id_contrato}?
                                      </p>
                                    </div>
                                  `,
                                }).then((result) => {
                                  if (result.isConfirmed) {
                                    onSubmitExcuirContrato(contrato);
                                  }
                                  return result;
                                });
                              }}
                            >
                              <FaTrash title="Excluir Contrato" size={17} />
                            </Button>
                          </>
                        )}
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <div className="w-full lg:h-[400px] flex flex-col justify-center items-center">
                <div className="max-sm:w-[90px] ">
                  <LoaderSun />
                </div>
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className="w-full flex-col">
          <Button
            type="button"
            onClick={reloadContratos}
            className={`w-fit h-fit mb-2 px-8 gap-2 flex items-center bg-primary justify-center`}
            loading={isLoading}
          >
            {/* <div className="absolute">
              <ArrowLeft size={18} />
            </div> */}
            Voltar
          </Button>
          {cronogramaInstalacao && lojas && (
            <>
              {lojaAtual?.tipoAssintatura_loja === "1" ? (
                <GeracaoContrato
                  dataGeracaoContrato={dataGeracaoContrato}
                  dadosCard={dadosCard}
                  usuario={usuario}
                  dadosCliente={dadosCliente}
                  proposta={proposta}
                  lojas={lojas}
                  camposPersonalizados={camposPersonalizados}
                  cronogramaInstalacao={cronogramaInstalacao}
                  coletaContratos={coletaContratos}
                  reloadContratos={reloadContratos}
                  setIsLoading={setIsLoading}
                  setModalCondPagamento={setModalCondPagamento}
                  setOpenModalContrato={setOpenModalContrato}
                  origemDadosDefaultContrato={origemDadosDefaultContrato}
                />
              ) : (
                <FormContrato
                  dadosCard={dadosCard}
                  dadosCliente={dadosCliente}
                  proposta={proposta}
                  lojas={lojas}
                  cronogramaInstalacao={cronogramaInstalacao}
                  coletaContratos={coletaContratos}
                  reloadContratos={reloadContratos}
                  setIsLoading={setIsLoading}
                />
              )}
            </>
          )}
        </div>
      )}
      <ModalComponente
        hasForm={false}
        header="Enviar E-mail"
        defaultW="w-100"
        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="Informe o email"
              required
            />
            <Button loading={isLoading} className="w-full bg-primary mt-5">
              Salvar
            </Button>
          </form>
        </div>
      </ModalComponente>

      <ModalComponente
        hasForm={false}
        header="Geração de Contrato"
        // defaultW="w-[1200px] max-sm:w-[90vw]"
        defaultW="max-w-[900px]"
        opened={openModalCondPagamento}
        onClose={() => setModalCondPagamento(!openModalCondPagamento)}
        hasSaveButton={false}
      >
        <FormPagamentoContrato
          key={origemDadosContrato?.nonce ?? "pagamento-contrato"}
          // formPagamento={formPagamento}
          // handlePagamento={handlePagamento}
          formasPagamento={formasPagamento}
          contasBancariasLojas={contasBancariasLojas}
          // dadosCard={dadosCard}
          dadosCard={{ ...dadosCard, profile, docDocument, connected }}
          proposta={proposta}
          onSubmitFunction={confirmarContrato}
          dadosContratoDefault={dadosContratoDefault}
          origemDadosContrato={origemDadosContrato}
          parametrosComerciais={parametrosComerciais}
          origemDadosDefaultContrato={origemDadosDefaultContrato}
          condicoesPagamento={condicoesPagamento}
        />
      </ModalComponente>
      <ModalComponente
        hasForm={false}
        header="Quando já Existir Contratos Gerados"
        defaultW="w-[400px]"
        opened={openModalNumeroContrato}
        onClose={() => setOpenModalNumeroContrato(false)}
        hasSaveButton={false}
      >
        <div className="mt-5">
          <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-base mb-5 p-3">
            <span>
              Já existem contratos gerados para este negócio. Caso deseja gerar
              um novo contrato baseado em um contrato, informe o número do
              contrato e clique no botão &quot;Buscar Dados do Contrato&quot;,{" "}
              <strong>
                LEMBRANDO que neste caso, os &quot;Parametros Default&quot;, os
                Campos Personalizados e demais itens preenchidos, são puxados do
                Contrato informado, e se houve alterações recentes nos
                PARÂMETROS, não serão considerados.
              </strong>
            </span>
          </div>

          <form
            className="flex flex-col gap-5"
            onSubmit={handleNumeroContrato(onSubmitNumeroContrato)}
          >
            <Input
              formulario={formNumeroContrato}
              label="Número do Contrato"
              name="numero_contrato"
              mascara="numerico"
              error="Informe o Número do Contrato"
              required
              defaultValue={ultimoContratoGerado?.id_contrato}
            />
            <Button type="submit" className="w-full bg-primary mt-5">
              Buscar Dados do Contrato
            </Button>
            <Button
              type="button"
              className="w-full bg-secondary"
              onClick={() => {
                setDadosContratoDefault(undefined);
                setOrigemDadosContrato({
                  origem: "configuracao",
                  nonce: Date.now(),
                });
                setOrigemDadosDefaultContrato(
                  origemDadosContratoConfiguracaoGeral()
                );
                setOpenModalNumeroContrato(false);
                setModalCondPagamento(true);
              }}
            >
              Usar Dados da Configuração Geral
            </Button>
          </form>
        </div>
      </ModalComponente>
      <ModalComponente
        hasForm={false}
        header="Gerar Contrato"
        // className="overflow-hidden"
        opened={openModalContrato}
        onClose={() => setOpenModalContrato(!openModalContrato)}
        hasSaveButton={false}
      >
        {cronogramaInstalacao && lojas && (
          <>
            {lojaAtual?.tipoAssintatura_loja === "1" ? (
              <GeracaoContrato
                dataGeracaoContrato={dataGeracaoContrato}
                dadosCard={dadosCard}
                usuario={usuario}
                dadosCliente={dadosCliente}
                proposta={proposta}
                lojas={lojas}
                camposPersonalizados={camposPersonalizados}
                cronogramaInstalacao={cronogramaInstalacao}
                coletaContratos={coletaContratos}
                reloadContratos={reloadContratos}
                setIsLoading={setIsLoading}
                setModalCondPagamento={setModalCondPagamento}
                setOpenModalContrato={setOpenModalContrato}
                origemDadosDefaultContrato={origemDadosDefaultContrato}
              />
            ) : (
              <FormContrato
                dadosCard={dadosCard}
                dadosCliente={dadosCliente}
                proposta={proposta}
                lojas={lojas}
                cronogramaInstalacao={cronogramaInstalacao}
                coletaContratos={coletaContratos}
                reloadContratos={reloadContratos}
                setIsLoading={setIsLoading}
                origemDadosDefaultContrato={origemDadosDefaultContrato}
              />
            )}
          </>
        )}
        {/* <GeracaoContrato
          dadosCard={dadosCard}
          dadosCliente={dadosCliente}
          setActiveStepAtual={setActiveStepAtual}
          activeStep={activeStep}
          proposta={proposta}
          camposPersonalizados={formPagamento.control._formValues}
          coletaContratos={coletaContratos}
          reloadContratos={reloadContratos}
          setIsLoading={setIsLoading}
        /> */}
      </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>
      <ModalComponente
        hasForm={false}
        header="Aprovar Contrato"
        defaultW="w-[600px]"
        opened={openModalAprovarContrato}
        onClose={() => setOpenModalAprovarContrato(!openModalAprovarContrato)}
        hasSaveButton={false}
      >
        Ao selecionar o documento assinado o contrato será aprovado
        <div className="px-2 pt-3 text-sm font-medium">
          Data de Geração do Contrato:{" "}
          {contratoSelecionado?.data_geracao_contrato
            ? getDateBrasil(
                undefined,
                contratoSelecionado.data_geracao_contrato
              )
            : "Não informada"}
        </div>
        <form
          onSubmit={handleContratoAssinado(onAproveContract)}
          className="flex flex-col p-2"
        >
          <div className="p-2">
            <Input
              type="datetime-local"
              label="Data da Aprovação"
              name="data_hora_aprovacao"
              value={dataAprovacaoContrato}
              min={
                contratoSelecionado?.data_geracao_contrato
                  ? `${
                      String(contratoSelecionado.data_geracao_contrato)
                        .split(" ")[0]
                        .split("T")[0]
                    }T00:00`
                  : undefined
              }
              onChange={(e: any) => setDataAprovacaoContrato(e.target.value)}
              required
              error="Informe a data de aprovação"
            />
          </div>
          <div className="p-2">
            <Input
              type="file"
              typeFile="application/pdf"
              label="Documento Assinado"
              name="arquivo_conrtrato"
              onInputProp={(e: any) =>
                formContratoAssinado.setValue(
                  "arquivo_contrato_eventTarget" as never,
                  e.target as never
                )
              }
              onRemoveFile={() =>
                formContratoAssinado.setValue(
                  "arquivo_contrato_eventTarget" as never,
                  undefined as never
                )
              }
            />
          </div>
          <div className="flex flex-row justify-center items-center gap-2 mt-4">
            <Button loading={isLoading}>Aprovar</Button>

            <Button
              type="button"
              className="bg-danger"
              onClick={() =>
                setOpenModalAprovarContrato(!openModalAprovarContrato)
              }
            >
              Cancelar
            </Button>
          </div>
        </form>
      </ModalComponente>
      <ModalComponente
        hasForm={false}
        header="Alterar Datas do Contrato"
        defaultW="w-[560px]"
        opened={openModalAlterarDatas}
        onClose={() => setOpenModalAlterarDatas(false)}
        hasSaveButton={false}
      >
        <div className="flex flex-col gap-3 p-2">
          <p className="text-sm font-semibold">
            Contrato Nº {contratoSelecionado?.id_contrato}
          </p>

          <div className="rounded-lg border border-stroke bg-gray-1 p-3 space-y-1 text-sm">
            <p className="font-semibold text-dark mb-2">
              Proposta Aprovada (somente leitura)
            </p>
            <p>
              Nº da Proposta:{" "}
              <b>
                {obterPropostaDoContrato(contratoSelecionado)?.id_proposta ||
                  contratoSelecionado?.proposta_contrato ||
                  "-"}
              </b>
            </p>
            <p>
              Data de Geração da Proposta:{" "}
              <b>
                {obterPropostaDoContrato(contratoSelecionado)?.data_proposta
                  ? getDateBrasil(
                      undefined,
                      obterPropostaDoContrato(contratoSelecionado)
                        ?.data_proposta
                    )
                  : "Não informada"}
              </b>
            </p>
            <p>
              Data de Aprovação da Proposta:{" "}
              <b>
                {obterPropostaDoContrato(contratoSelecionado)
                  ?.data_hora_aprovacao
                  ? getDateTimeBrasil(
                      undefined,
                      obterPropostaDoContrato(contratoSelecionado)
                        ?.data_hora_aprovacao
                    )
                  : "Não informada"}
              </b>
            </p>
          </div>

          <Input
            type="date"
            label="Data de Geração do Contrato"
            name="data_geracao_contrato_edit"
            value={datasContratoForm.data_geracao_contrato}
            min={toDateInput(
              obterPropostaDoContrato(contratoSelecionado)?.data_proposta
            )}
            onChange={(e: any) =>
              setDatasContratoForm((prev) => ({
                ...prev,
                data_geracao_contrato: e.target.value,
              }))
            }
            required
            error="Informe a data de geração"
          />
          <Input
            type="datetime-local"
            label="Data de Geração no Sistema"
            name="data_contrato_edit"
            value={datasContratoForm.data_contrato}
            min={
              toDateInput(
                obterPropostaDoContrato(contratoSelecionado)?.data_proposta
              )
                ? `${toDateInput(
                    obterPropostaDoContrato(contratoSelecionado)?.data_proposta
                  )}T00:00`
                : undefined
            }
            onChange={(e: any) =>
              setDatasContratoForm((prev) => ({
                ...prev,
                data_contrato: e.target.value,
              }))
            }
            required
            error="Informe a data de inclusão no sistema"
          />
          <p className="text-xs text-body-color">
            As datas do contrato não podem ser menores que a data de geração da
            proposta aprovada. Ao salvar, o PDF será regerado.
          </p>
          <div className="flex flex-row justify-center items-center gap-2 mt-2">
            <Button
              type="button"
              loading={isLoading}
              onClick={onSubmitAlterarDatasContrato}
            >
              Salvar e Regerar PDF
            </Button>
            <Button
              type="button"
              className="bg-danger"
              onClick={() => setOpenModalAlterarDatas(false)}
            >
              Cancelar
            </Button>
          </div>
        </div>
      </ModalComponente>
      <ModalComponente
        hasForm={false}
        header={`Regerar PDF do Contrato Nº ${contratoSelecionado?.id_contrato || ""}`}
        defaultW="w-[1000px]"
        opened={openModalRegerarContrato}
        onClose={() => setOpenModalRegerarContrato(false)}
        hasSaveButton={false}
      >
        {openModalRegerarContrato && contratoSelecionado && proposta && (
          <GeracaoContrato
            dadosCard={dadosCard}
            dataGeracaoContrato={dataGeracaoContrato}
            dataContratoSistema={dataContratoSistemaRegerar}
            lojas={lojas}
            usuario={usuario}
            dadosCliente={dadosCliente}
            setActiveStepAtual={setActiveStepAtual}
            activeStep={activeStep}
            ucsColeta={ucsColeta}
            proposta={proposta}
            camposPersonalizados={camposPersonalizados}
            coletaContratos={coletaContratos}
            reloadContratos={() => {
              setOpenModalRegerarContrato(false);
              reloadContratos();
            }}
            setIsLoading={setIsLoading}
            setModalCondPagamento={setModalCondPagamento}
            setOpenModalContrato={setOpenModalContrato}
            regerarContrato
            contratoExistente={contratoSelecionado}
          />
        )}
      </ModalComponente>
      <ModalComponente
        hasForm={false}
        header={`Visualizar Documento ${openModalVisualizarDocumento.id}`}
        defaultW="w-[1200px]"
        opened={openModalVisualizarDocumento.open}
        onClose={() =>
          setOpenModalVisualizarDocumento({
            id: null,
            caminho: null,
            open: false,
          })
        }
        hasSaveButton={false}
      >
        <VisualizarDocGerado caminho={openModalVisualizarDocumento.caminho} />
      </ModalComponente>
    </div>
  );
};

export default Contratos;