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 { useGoogleAuth } from "@/hooks/useGoogleAuth";
import { listarUsuarios } from "@/requests/CRM/Dashboard/listarDashboard";
import { listarCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { cadastrarDocumentoGerado } from "@/requests/CRUD/DocumentosGerados/cadastrarDocumentoGerado";
import { deletarDocumentoGerado } from "@/requests/CRUD/DocumentosGerados/deletarDocumentoGerado";
import { desaprovarDocumentoPersonalizadoGerado } from "@/requests/CRUD/DocumentosGerados/desaprovarDocumentoPersonalizadoGerado";
import { enviarDocumentoPersonalizadoGeradoPorEmail } from "@/requests/CRUD/DocumentosGerados/enviarDocumentoPersonalizadoGeradoPorEmail";
import { enviarDocumentoPersonalizadoGeradoPorWhatsApp } from "@/requests/CRUD/DocumentosGerados/enviarDocumentoPersonalizadoGeradoPorWhatsApp";
import { listarDocumentosGeradosPorIdColeta } from "@/requests/CRUD/DocumentosGerados/listarDocumentosGeradosPorIdColeta";
import { salvarDocumentoPersonalizadoGeradoAssinado } from "@/requests/CRUD/DocumentosGerados/salvarDocumentoPersonalizadoGeradoAssinado";
import { listarDocumentosPersonalizados } from "@/requests/CRUD/DocumentosPersonalizados/listarDocumentosPersonalizados";
import { listarDadosDocsTemplates } from "@/requests/CRUD/Lojas/cadastrarLojas";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { listarPerfis } from "@/requests/CRUD/Perfil/listarPerfis";
import { baixarAws, baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useSocketContext } from "@/src/contexts/SocketContext";
import { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import { handleGetDocData } from "@/utils/docs";
import { ArrowLeft, Download, Eye, FileInput, FilePlus, X } from "lucide-react";
import { useEffect, useState } from "react";
import { BiCheck, BiLogoWhatsapp, BiMailSend, BiTrash } from "react-icons/bi";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";
import * as yup from "yup";
import CamposPersonalizados from "../campos_personalizados";
import GeracaoDocumentoPersonalizado from "./GeracaoDocumentoPersonalizado";
import VisualizarDocGerado from "./visualizacaoDocumentoGerado";
import { useCamposPersonalizados } from "@/hooks/useCamposPersonalizados";

const DocumentosPersonalizados = ({
  dadosCard,
  dadosCliente,
  dadosLista,
  blockEditCard,
  dadosProposta,
}: any) => {
  const [documentosGeradosColeta, setDocumentosGeradosColeta] = useState<any[]>(
    [],
  );
  const [documentosPersonalizados, setDocumentosPersonalizados] = useState<
    any[]
  >([]);
  const [docDocsList, setDocDocsList] = useState<any[]>([]);
  // const { lojaAtual } = useLoja();
  const { connected, profile } = useGoogleAuth(dadosCard?.id_loja_coleta);
  const { handleSubmit, ...form } = GetForm();
  const { isMobile } = useScreenContext();
  const [yupSchemaEmail, setYupSchemaEmail] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [yupSchemaWhatsApp, setYupSchemaWhatsApp] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [yupSchemaDocumento, setYupSchemaDocumento] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [yupSchemaCampos, setYupSchemaCampos] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [openModalVisualizarDocumento, setOpenModalVisualizarDocumento] =
    useState({ id: null, caminho: null, open: false });
  const { valuesSession, perfil } = useAuth();
  const { session } = valuesSession();
  const perfil_usuario = session.perfil_usuario;
  const [openViewDocs, setOpenViewDocs] = useState(false);
  const [openModalEmail, setOpenModalEmail] = useState(false);
  const [openModalWhatsApp, setOpenModalWhatsApp] = useState(false);
  const [modalCamposPersonalizados, setModalCamposPersonalizados] =
    useState(false);
  const [openModalDocumentoAssinado, setOpenModalDocumentoAssinado] =
    useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const { handleSubmit: handleCampos, ...formCampos } = GetForm(
    yupSchemaCampos,
    setYupSchemaCampos,
  );
  const [documentoSelecionado, setDocumentoSelecionado] = useState<any>();
  const [documentoGeradoSelecionado, setDocumentoGeradoSelecionado] =
    useState<any>();
  const [isLoaded, setIsLoaded] = useState(false);

  const [view, setView] = useState("DocumentosGerados");

  const [deletarDocumentos, setDeletarDocumentos] = useState<any[]>([]);

  const [dadosUsuario, setDadosUsuario] = useState<any>([]);
  const [dadosPerfis, setDadosPerfis] = useState(null);
  // const [perfilResponsavel, setPerfilResponsavel] = useState(null);
  const [camposPersonalizadosBd, setCamposPersonalizadosBd] = useState<any>();
  // const perfilResponsavel = "4";
  const [parametros, setParametros] = useState<any>({});
  const { handleSubmit: handleEmail, ...formEmail } = GetForm(
    yupSchemaEmail,
    setYupSchemaEmail,
  );

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

  const { notificarNotificacao } = useSocketContext();

  const { handleSubmit: handleDocumentoAssinado, ...formDocumentoAssinado } =
    GetForm(yupSchemaDocumento, setYupSchemaDocumento);

  function obterDataAtual() {
    let dataAtual = new Date();
    dataAtual.toLocaleString("en-US", { timeZone: "America/Sao_Paulo" });
    return dataAtual.toISOString();
  }
  const [nenhumIdDocs, setNenhumIdDocs] = useState(false);
  // useEffect(() => {
  //   if (!isReady) return;
  //   listarDadosDocsTemplates(lojaAtual?.id_loja, authData?.profile.id).then(
  //     async (res) => {
  //       const docData = await handleGetDocData(res);
  //       if (!docData.some((a: any) => a.tipo === "2")) {
  //         setNenhumIdDocs(true);
  //       } else {
  //         setNenhumIdDocs(false);
  //       }
  //     }
  //   );
  // }, [isReady]);

  function onSubmitEmail(data: any) {
    // data["id_cliente"] = dadosCliente.id_cliente
    data["assunto_email"] = `${documentosPersonalizados.find(
      (documento) =>
        documento.id_documento_personalizado ==
        data["codModelo_documento_gerado"],
    )?.nome_documento_personalizado
      }-${dadosCliente.nome_cliente}`;

    // return;
    data["titulo_email"] = `Olá ${dadosCliente.nome_cliente}`;
    data["codCliente_documento_gerado"] = dadosCliente.id_cliente;
    data["corpo_email"] = `Segue em anexo o ${documentosPersonalizados.find(
      (documento) =>
        documento.id_documento_personalizado ==
        data["codModelo_documento_gerado"],
    )?.nome_documento_personalizado
      }`;

    data["id_usuario"] = session.id_usuario;

    data["remetente_email"] = "";

    setIsLoading(true);

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

  useEffect(() => {
    listarPerfis().then((res) => setDadosPerfis(res));
    listarParametros().then((res) => setParametros(res));
    listarUsuarios().then((res) => setDadosUsuario(res));
  }, []);
  async function verifyIdDocs(idDoc: any) {
    if (!idDoc) return false;
    if (!connected) return false;

    if (!docDocsList || docDocsList?.length == 0) return false;

    return docDocsList.find((a: any) => a.id === idDoc);
  }

  function onSubmitWhatsApp(data: any) {
    setIsLoading(true);
    data["id_usuario"] = session.id_usuario;
    enviarDocumentoPersonalizadoGeradoPorWhatsApp(data)
      .then((res) => {
        window.open(res);
        notificarNotificacao();
      })
      .finally(() => {
        setIsLoading(false);
      });
    // const toastPromise = new Promise((resolve, reject) => {
    //   baixarAws(data.caminho_documento_gerado)
    //     .then(async (caminhoDocumento) => {
    //       const recipientPhoneNumber = `55${FormatFields.formatarNumerico(
    //         data.whatsapp_cliente
    //       )}`;
    //       const documentLink: string = caminhoDocumento;
    //       const documentName = data.caminho_documento_gerado.split("/").pop();

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

    //       return enviarDocumentoWhatsApp(obj)
    //         .then((res) => {
    //           setOpenModalWhatsApp(false);
    //           resolve(res);
    //         })
    //         .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(() => {
    listarDocumentosPersonalizados({
      status_documento_personalizado: "1",
      tipo_negocio_documento_personalizado: dadosCard?.tipoNegocio_coleta,
    }).then((res) => {
      setDocumentosPersonalizados(res);
    });

    atualizarDocumentosGerados();
  }, []);

  useEffect(() => {
    if (profile) {
      listarDadosDocsTemplates(dadosCard?.id_loja_coleta, profile?.id).then(
        async (res) => {
          const newDocDocsList = await handleGetDocData(res);
          setDocDocsList(newDocDocsList);
        },
      );
    }
  }, [connected]);

  async function atualizarDocumentosGerados() {
    return listarDocumentosGeradosPorIdColeta(dadosCard.id_coleta_cliente).then(
      (res) => {
        setDocumentosGeradosColeta(res);
        notificarNotificacao();
        setIsLoaded(true);
      },
    );
  }

  async function onSubmitDocumentoGerado(data: any) {
    const { session } = valuesSession();
    let dataAtual = new Date();

    // Define o fuso horário para "America/Sao_Paulo"
    dataAtual.toLocaleString("en-US", { timeZone: "America/Sao_Paulo" });
    // //(dadosCliente)

    data["codModelo_documento_gerado"] =
      documentoSelecionado.id_documento_personalizado;
    // data["id_documento_gerado"] = documentoSelecionado.id_documento_gerado
    data["codCliente_documento_gerado"] = dadosCliente.id_cliente;
    data["codColeta_documento_gerado"] = dadosCard.id_coleta_cliente;
    data["caminho_documento_gerado"] =
      `clientes/${dadosCliente.pasta_cliente}/Documentos/${documentoSelecionado.nome_documento_personalizado}-${dadosCliente.nome_cliente
        .replaceAll("/", "_")
        .replaceAll("\\", "_")
        .replaceAll(".", "_")}-${dataAtual.toISOString()}.pdf`;
    data["usuario_documento_gerado"] = session.id_usuario;

    const formulario = new FormData();
    for (const key in data) {
      formulario.append(key, data[key]);
    }

    return cadastrarDocumentoGerado(formulario).then((res) =>
      listarDocumentosGeradosPorIdColeta(dadosCard.id_coleta_cliente).then(
        (res) => {
          setDocumentosGeradosColeta(res);
          notificarNotificacao();

          setView("DocumentosGerados");
        },
      ),
    );
  }

  // async function ApagarDocumentoSelecionado(data: any) {
  //   const { session } = valuesSession();
  //   let dataAtual = new Date();

  //   // Define o fuso horário para "America/Sao_Paulo"
  //   dataAtual.toLocaleString("en-US", { timeZone: "America/Sao_Paulo" });
  //   // //(dadosCliente)

  //   data["codModelo_documento_gerado"] =
  //     documentoSelecionado.id_documento_personalizado;
  //   // data["id_documento_gerado"] = documentoSelecionado.id_documento_gerado
  //   data["codCliente_documento_gerado"] = dadosCliente.id_cliente;
  //   data["codColeta_documento_gerado"] = dadosCard.id_coleta_cliente;
  //   data["caminho_documento_gerado"] = `clientes/${session.id_usuario}_${
  //     session.telefone1_usuario
  //   }/Documentos/${documentoSelecionado.nome_documento_personalizado}-${
  //     dadosCliente.nome_cliente
  //   }-${dataAtual.toISOString()}.pdf`;
  //   data["usuario_documento_gerado"] = session.id_usuario;

  //   const formulario = new FormData();
  //   for (const key in data) {
  //     formulario.append(key, data[key]);
  //   }

  //   return deletarDocumentoGerado(formulario).then((res: any) => {
  //     setDeletarDocumentos(res);
  //     // notificarNotificacao();
  //     setIsLoaded(true);
  //   });
  // }

  function onAproveDocument(data: any) {
    const inputElement = data.arquivo_documento_eventTarget as HTMLInputElement;

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

      const newForm = new FormData();

      const arquivo = inputElement.files[0];

      let dataAtual = new Date();

      // Define o fuso horário para "America/Sao_Paulo"
      dataAtual.toLocaleString("en-US", { timeZone: "America/Sao_Paulo" });
      const caminho_documento_assinado_gerado = `${documentoGeradoSelecionado.caminho_documento_gerado
        .split("-")
        .slice(0, -3)
        .join("-")}-${dataAtual.toISOString()}-Assinado.pdf`;

      const dadosContrato: any = {
        ...documentoGeradoSelecionado,
        documento_assinado: arquivo,
        caminho_documento_assinado_gerado,
        id_usuario: session.id_usuario,
      };

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

      setIsLoading(true);
      salvarDocumentoPersonalizadoGeradoAssinado(newForm)
        .then(() => {
          setIsLoaded(false);
          atualizarDocumentosGerados()
            .then(() => setOpenModalDocumentoAssinado(false))
            .finally(() => setIsLoaded(true));
        })
        .finally(() => setIsLoading(false));
    } else {
      toast.error("Selecione o arquivo assinado");
    }
  }
  const enviaCampos = () => {
    setModalCamposPersonalizados(false);
    setView("FormDocumento");
  };
  useEffect(() => {
    listarCamposPersonalizados({
      id_coleta: dadosCard?.id_coleta_cliente,
    }).then((res) => {
      const camposDisponiveis = res.filter(
        (a: any) => a.status_campo_personalizado == "1",
      );
      setCamposPersonalizadosBd(camposDisponiveis);

      camposDisponiveis.forEach((campo: any) => {
        let valorFormatado: any = campo?.dados_gravacao_personalizado;

        if (
          campo?.tipo_campo_personalizado === "12" &&
          Array.isArray(campo?.descricao_multiselecao_personalizado)
        ) {
          const encontrado = campo.descricao_multiselecao_personalizado.find(
            (item: any) =>
              item.id_multiselecao_personalizado ===
              campo.dados_gravacao_personalizado,
          );

          if (encontrado) {
            valorFormatado = encontrado.descricao_multiselecao_personalizado;
          }
        }
        if (campo?.tipo_campo_personalizado === "13") {
          //input de seleção normal
          const encontrado = campo.descricao_multiselecao_personalizado.find(
            (item: any) =>
              item.id_multiselecao_personalizado ===
              campo.dados_gravacao_personalizado,
          );

          if (encontrado) {
            valorFormatado = encontrado.descricao_multiselecao_personalizado;
          }
        }

        formCampos.setValue(campo?.nome_relacionamento_rapido, valorFormatado);
      });
    });
  }, []);
  const [docsComStatus, setDocsComStatus] = useState<any>([]);
  const [docGerandoSelecionado, setDocGerandoSelecionado] = useState<any>(null);

  useEffect(() => {
    const carregar = async () => {
      if (!documentosPersonalizados) return;

      const filtrados = documentosPersonalizados.filter((doc) => {
        return doc.permissoes.some((permissao: any) => {
          return (
            (permissao.funis_permissao_documento_personalizado == "*" ||
              permissao.funis_permissao_documento_personalizado ==
              dadosLista.id_funil) &&
            (permissao.etapas_permissao_documento_personalizado == "*" ||
              permissao.etapas_permissao_documento_personalizado
                .split(",")
                .includes(dadosCard.id_lista)) &&
            (permissao.perfis_permissao_documento_personalizado == "*" ||
              permissao.perfis_permissao_documento_personalizado
                .split(",")
                .includes(perfil?.id_perfil) ||
              perfil?.id_perfil == "1000")
          );
        });
      });

      const result = await Promise.all(
        filtrados.map(async (doc) => {
          const docDocument = await verifyIdDocs(
            doc.documentId_template_documento_personalizado,
          );

          return { ...doc, hasIdDoc: !!docDocument, docDocument };
        }),
      );

      setDocsComStatus(result);
    };

    carregar();
  }, [documentosPersonalizados, dadosCard, dadosLista, perfil, docDocsList]);

  return (
    <div className="flex flex-col max-sm:mb-4">
      {view == "DocumentosGerados" ? (
        <>

          <div className={"flex justify-end"}>
            {!blockEditCard && (
              <Button
                onClick={() => {
                  if (!dadosProposta) {
                    toast.warn(
                      "ATENÇÃO! Para gerar documento personalizado você precisa antes Aprovar uma Proposta.",
                    );
                    return;
                  }
                  setView("DocumentosPersonalizados");
                }}
                className="w-fit max-sm:text-xs px-8 gap-2 text-sm max-sm:justify-end  flex items-center"
              >
                <FilePlus size={isMobile ? 15 : 18} />
                Gerar Novo Documento Personalizado
              </Button>
            )}
          </div>
          <section className="w-full flex flex-col gap-2 my-3">
            {isLoaded ? (
              documentosGeradosColeta[0] ? (
                documentosGeradosColeta.map((documentoGerado, index) => (
                  <div
                    key={index}
                    className="bg-white dark:bg-boxdark-2 max-md:text-sm flex w-full justify-between rounded-md relative h-21"
                  >
                    {documentoGerado.caminho_documento_assinado_gerado && (
                      <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 bg-[#07b51c] rounded-full ml-2`}
                        ></span>
                        <p className="mr-2">{"Assinado"}</p>
                      </div>
                    )}
                    <div className="flex-col p-3 text-start dark:text-white flex justify-center">
                      <p className="font-bold">
                        {documentoGerado.caminho_documento_gerado
                          .split("/")
                          .pop()
                          .replace(
                            /-\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z\.pdf$/,
                            "",
                          )}
                      </p>

                      <p className="text-xs font-bold">
                        Data Gerado: {documentoGerado.data_documento_gerado}{" "}
                        Gerador Por:
                        {
                          dadosUsuario.find(
                            (e: any) =>
                              e.id_usuario ==
                              documentoGerado.usuario_documento_gerado,
                          )?.nome_usuario
                        }{" "}
                      </p>
                    </div>
                    <div className="p-3 flex flex-col justify-center items-center">
                      <div className="flex flex-row gap-4 items-center">
                        <Button
                          className={`bg-transparent text-[#000] flex items-center rounded-md p-0 m-0 h-fit`}
                          type="button"
                          onClick={() => {
                            setOpenModalVisualizarDocumento({
                              id: documentoGerado.id_documento_gerado,
                              caminho: documentoGerado.caminho_documento_gerado,
                              open: true,
                            });
                          }}
                        >
                          <Eye />
                        </Button>
                        <Button
                          className={`bg-transparent text-[blue] flex items-center rounded-md p-0 m-0 h-fit`}
                          type="button"
                          onClick={() => {
                            const toastPromise = new Promise(
                              (resolve, reject) => {
                                baixarAws(
                                  documentoGerado.caminho_documento_gerado,
                                )
                                  .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";
                                },
                              },
                            });
                          }}
                        >
                          <Download color="#5193fc" size={20} />
                        </Button>
                        <SweetAlertConfirmacao
                          resultConfirmed={() => {
                            formEmail.setValue(
                              "caminho_documento_gerado" as never,
                              documentoGerado.caminho_documento_gerado as never,
                            );
                            formEmail.setValue(
                              "codModelo_documento_gerado" as never,
                              documentoGerado.codModelo_documento_gerado as never,
                            );
                            formEmail.setValue(
                              "email_cliente" as never,
                              dadosCliente.email_cliente as never,
                            );
                            formEmail.setValue(
                              "id_documento_gerado" as never,
                              documentoGerado.id_documento_gerado 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 documento ${documentoGerado.caminho_documento_gerado
                            .split("/")
                            .pop()}?`}
                        >
                          <BiMailSend size={24} />
                        </SweetAlertConfirmacao>
                        <SweetAlertConfirmacao
                          resultConfirmed={() => {
                            formWhatsApp.setValue(
                              "id_documento_gerado" as never,
                              documentoGerado.id_documento_gerado as never,
                            );
                            formWhatsApp.setValue(
                              "whatsapp_cliente" as never,
                              dadosCliente.telefone1_cliente as never,
                            );
                            formWhatsApp.setValue(
                              "caminho_documento_gerado" as never,
                              documentoGerado.caminho_documento_gerado as never,
                            );
                            setOpenModalWhatsApp(true);
                          }}
                          tittle="Enviar ao Whatsapp"
                          icon="question"
                          html={`Tem certeza que deseja <b>Enviar</b> O documento ${documentoGerado.caminho_documento_gerado
                            .split("/")
                            .pop()}?`}
                          className="bg-transparent text-[green] flex items-center rounded-md p-0 m-0 h-fit"
                        >
                          <BiLogoWhatsapp size={24} />
                        </SweetAlertConfirmacao>

                        {documentoGerado.caminho_documento_assinado_gerado ? (
                          <Button
                            className="bg-transparent text-[red] flex items-center rounded-md p-0 m-0 h-fit"
                            onClick={() =>
                              handleSweetAlert(
                                {
                                  icon: "question",
                                  title: "Cancelar Assinatura",
                                  html: `Tem certeza que deseja <b>Cancelar</b> a assinatura?`,
                                },
                                () => {
                                  desaprovarDocumentoPersonalizadoGerado({
                                    ...documentoGerado,
                                    id_usuario: session.id_usuario,
                                  }).then(atualizarDocumentosGerados);
                                },
                              )
                            }
                          >
                            <X size={24} />
                          </Button>
                        ) : (
                          <Button
                            className="bg-transparent text-[green] flex items-center rounded-md p-0 m-0 h-fit"
                            onClick={() => {
                              setDocumentoGeradoSelecionado(documentoGerado);
                              formDocumentoAssinado.setValue(
                                "arquivo_documento_eventTarget" as never,
                                undefined as never,
                              );
                              setOpenModalDocumentoAssinado(true);
                            }}
                          >
                            <BiCheck size={24} />
                          </Button>
                        )}

                        <Button
                          className="bg-transparent text-[red] flex items-center rounded-md p-0 m-0 h-fit"
                          onClick={() =>
                            handleSweetAlert(
                              {
                                icon: "question",
                                title: "Apagar Documento ",
                                html: `Tem certeza que deseja <b>Deletar</b> o documento selecionado?`,
                              },
                              () => {
                                deletarDocumentoGerado({
                                  ...documentoGerado,
                                  id_usuario: session.id_usuario,
                                }).then(atualizarDocumentosGerados);
                              },
                            )
                          }
                        >
                          <BiTrash size={20} />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                <div className="w-full max-sm:text-xs text-center font-bold p-2">
                  Não há documentos gerados para este cliente
                </div>
              )
            ) : (
              <div className="w-full h-[400px] flex flex-col justify-center items-center">
                <LoaderSun />
              </div>
            )}
          </section>
        </>
      ) : view == "DocumentosPersonalizados" ? (
        <>
          <Button
            onClick={() => setView("DocumentosGerados")}
            className={`w-fit max-sm:text-xs h-fit px-8 gap-2 text-sm flex items-center`}
          >
            <ArrowLeft size={isMobile ? 15 : 18} />
            Voltar
          </Button>
          <div className="w-full max-sm:text-xs text-center font-bold p-2">
            Selecione um Template
          </div>

          {isLoaded ? (
            <section className="w-full max-sm:text-xs flex flex-col gap-2">
              {docsComStatus.map((doc: any, index: any) => {
                return (
                  <div
                    key={index}
                    className="bg-white dark:bg-boxdark-2 flex w-full justify-between rounded-md"
                  >
                    <div className="p-3 text-start">
                      <div className="flex flex-row items-center gap-2 dark:text-white">
                        <Button
                          type="button"
                          loading={docGerandoSelecionado === index}
                          onClick={() => {
                            // if (!doc?.hasIdDoc) return;
                            setDocGerandoSelecionado(index);
                            baixarAwsContent(
                              doc.caminho_template_documento_personalizado,
                            ).then((template_documento_personalizado) => {
                              setDocumentoSelecionado({
                                ...doc,
                                template_documento_personalizado,
                              });

                              const precisaCamposPersonalizados = camposPersonalizadosBd
                                ?.filter(
                                  (a: any) =>
                                    a.local_campo_personalizado === "3",
                                )
                                .some(
                                  (item: any) =>
                                    doc?.id_documento_personalizado ===
                                    item?.etapaDocs_campo_personalizado,
                                );

                              if (precisaCamposPersonalizados)
                                setModalCamposPersonalizados(true);
                              else setView("FormDocumento");
                            }).finally(() => setDocGerandoSelecionado(null));
                          }}
                          disabled={!doc.docDocument || docGerandoSelecionado !== null}
                        >
                          <span>
                            <FileInput size={18} />
                          </span>
                          Gerar
                        </Button>
                        <span className="w-full">
                          {doc.nome_documento_personalizado}
                        </span>
                        {profile?.name ? (
                          <div className="flex justify-center items-center w-full text-sm">
                            <div className="bg-coolGray-100 px-5 py-1 rounded-md">
                              <div className="flex items-center gap-1 text-gray-700 text-center">
                                <span className="font-bold">Conta:</span>
                                <span className="">{profile?.name}</span>
                              </div>
                              {doc.docDocument ? (
                                <>
                                  <div className="flex items-center gap-1 text-gray-700 text-center">
                                    <span className="font-bold">Nome:</span>
                                    <span className="">
                                      {doc.docDocument?.name}
                                    </span>
                                  </div>
                                  <p className="text-xs text-gray-500 truncate w-full text-center">
                                    <b>ID:</b> {doc.docDocument?.id}
                                  </p>
                                </>
                              ) : (
                                <>
                                  <div className="flex items-center gap-1 text-gray-700 text-center">
                                    <span
                                      className={`font-bold ${!doc.docDocument && "text-error"}`}
                                    >
                                      Documento não encontrado
                                    </span>
                                  </div>
                                  <p className="text-xs text-gray-500 truncate w-full text-center">
                                    <b>ID:</b>{" "}
                                    {
                                      doc.documentId_template_documento_personalizado
                                    }
                                  </p>
                                </>
                              )}
                            </div>
                          </div>
                        ) : (
                          // <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">
                          //     {`A "Conta Google" pertencente a ${profile?.name} está conectada ${nenhumIdDocs ? "mas o documento não está conectado" : `e o documento "${docDocument?.name}" foi o selecionado a ser gerado`}`}
                          //   </p>
                          // </div>
                          !connected && (
                            <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-2 rounded-md border-[#fcdcaa] shadow-sm">
                              <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                                <RiErrorWarningFill size={20} color="#ffb747" />
                              </div>
                              <p className="text-black text-sm">
                                Atenção!! Não foi conectado nenhuma &quot;Conta
                                Google&quot; para que possamos identificar as
                                Templates existentes. Favor avisar o ADM do
                                Sistema.
                              </p>
                            </div>
                          )
                        )}
                        {/* {!doc?.hasIdDoc && (
                        <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 deste Documento
                            Personalizado, e isso irá gerar um erro na geração
                            final do .PDF. Favor avisar o ADM do Sistema.
                          </p>
                        </div>
                      )} */}
                      </div>
                    </div>
                  </div>
                );
              })}
            </section>
          ) : (
            <div className="w-full h-[400px] flex flex-col justify-center items-center">
              <LoaderSun />
            </div>
          )}
        </>
      ) : (
        <>
          <Button
            onClick={() => setView("DocumentosPersonalizados")}
            className={`w-fit h-fit px-8 gap-2 flex items-center`}
          >
            <ArrowLeft size={18} />
            Voltar
          </Button>
          <section>
            {/* <FormDocumentoPersonalizado
              onSubmitFunction={onSubmitDocumentoGerado}
              dadosCard={dadosCard}
              dadosCliente={dadosCliente}
              dadosProposta={dadosProposta}
              camposPersonalizados={formCampos.control._formValues}
              template={documentoSelecionado.template_documento_personalizado}
              titulo={`${documentoSelecionado.nome_documento_personalizado}-${
                dadosCliente.nome_cliente
              }-${obterDataAtual()}`}
            /> */}
            {/* {dadosCliente && dadosProposta && ( */}
            {/* <FormDocumentoPersonalizado
              onSubmitFunction={onSubmitDocumentoGerado}
              dadosCard={dadosCard}
              dadosCliente={dadosCliente}
              dadosProposta={dadosProposta}
              camposPersonalizados={formCampos.control._formValues}
              template={documentoSelecionado.template_documento_personalizado}
              titulo={`${documentoSelecionado.nome_documento_personalizado}-${
                dadosCliente.nome_cliente
              }-${obterDataAtual()}`}
            /> */}
            <GeracaoDocumentoPersonalizado
              onSubmitFunction={onSubmitDocumentoGerado}
              dadosCard={dadosCard}
              dadosCliente={dadosCliente}
              dadosProposta={dadosProposta}
              parametros={parametros}
              camposPersonalizados={formCampos.control._formValues}
              template={documentoSelecionado.template_documento_personalizado}
              titulo={`${documentoSelecionado.nome_documento_personalizado}-${dadosCliente.nome_cliente
                }-${obterDataAtual()}`}
              documento={documentoSelecionado}
              setView={setView}
            />
          </section>
        </>
      )}

      <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="Informe o email"
              required
            />
            <Button loading={isLoading} className="w-full bg-primary mt-5">
              Salvar
            </Button>
          </form>
        </div>
      </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>
      <ModalComponente
        hasForm={false}
        header="Campos Personalizados"
        defaultW="w-[1200px]"
        opened={modalCamposPersonalizados}
        onClose={() => setModalCamposPersonalizados(!modalCamposPersonalizados)}
        hasSaveButton={false}
      >
        <div className="mt-5">
          <form
            className="flex flex-col gap-5"
            onSubmit={handleCampos(enviaCampos)}
          >
            <div className="border p-2 mb-2 pt-5 relative rounded-md border-stroke">
              <span className="px-1 absolute  text-black text-2xl font-bold -top-3 bg-white">
                Campos Personalizados
              </span>
              <CamposPersonalizados
                dataCard={dadosCard}
                formulario={formCampos}
                localCampo="3"
                localAtualProposta={documentoSelecionado}
                idLoja={dadosCard?.id_loja_coleta}
                tipoNegocio={dadosCard?.tipoNegocio_coleta}
              />
            </div>
            <Button loading={isLoading} className="w-full bg-primary mt-5">
              Confirmar
            </Button>
          </form>
        </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>
      <ModalComponente
        hasForm={false}
        header="Aprovar Documento Personalizado"
        defaultW="w-[400px]"
        opened={openModalDocumentoAssinado}
        onClose={() =>
          setOpenModalDocumentoAssinado(!openModalDocumentoAssinado)
        }
        hasSaveButton={false}
      >
        Ao selecionar o documento assinado o documento personalizado será
        aprovado
        <form
          onSubmit={handleDocumentoAssinado(onAproveDocument)}
          className="flex flex-col"
        >
          <Input
            type="file"
            typeFile="application/pdf"
            label="Documento Assinado"
            name="arquivo_conrtrato"
            onInputProp={(e: any) =>
              formDocumentoAssinado.setValue(
                "arquivo_documento_eventTarget" as never,
                e.target as never,
              )
            }
            onRemoveFile={() =>
              formDocumentoAssinado.setValue(
                "arquivo_documento_eventTarget" as never,
                undefined as never,
              )
            }
          />
          <div className="flex flex-row justify-center items-center gap-2">
            <Button
              type="button"
              className="bg-danger"
              onClick={() =>
                setOpenModalDocumentoAssinado(!openModalDocumentoAssinado)
              }
            >
              Cancelar
            </Button>
            <Button loading={isLoading}>Aprovar</Button>
          </div>
        </form>
      </ModalComponente>
    </div>
  );
};

export default DocumentosPersonalizados;