import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import ModalComponente from "@/components/Modal/ModalComponente";
import ModalRejeicao from "@/components/Modal/ModalReprovacao";
import { Skeleton } from "@/components/ui/skeleton";
import { listarComponentesKitByKitId } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { aprovarProposta } from "@/requests/CRUD/Propostas/aprovarProposta";
import { baixarProposta } from "@/requests/CRUD/Propostas/baixarProposta";
import { contabilizarEntradas } from "@/requests/CRUD/Propostas/contabilizarEntradas";
import { enviarEmailRepresentante } from "@/requests/CRUD/Propostas/enviarEmailRepresentante";
import { dadosKit, testeMeu } from "@/requests/CRUD/Propostas/listarDadosKit";
import { listarPropostasDados } from "@/requests/CRUD/Propostas/listarPropostas";
import { listarPropostasLink } from "@/requests/CRUD/Propostas/listarPropostasLink";
import { loginCliente } from "@/requests/CRUD/Propostas/loginclienteProposta";
import { reprovarProposta } from "@/requests/CRUD/Propostas/reprovarProposta";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { GetForm } from "@/utils";
import { useRouter } from "next/router";
import { ReactNode, useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { IoMdCheckmark, IoMdDownload } from "react-icons/io";
import { IoClose } from "react-icons/io5";
import * as yup from "yup";

const VisualizarProposta = () => {
  const router = useRouter();
  const { query } = router;
  const parametroQuery = query.id;
  const [isLoading, setIsLoading] = useState(false);
  const [isLoading2, setIsLoading2] = useState(false);
  const [recusarProposta, setRecusarProposta] = useState(false);
  const [guardaPdf, setGuardaPdf] = useState("");
  const [statusProposta, setStatusProposta] = useState("");
  const [nomeCliente, setNomeCliente] = useState("");
  const [emailRepresentante, setEmailRepresentante] = useState<any>();
  const [nomeRepresentante, setNomeRepresentante] = useState("");
  const [modulos, setModulos] = useState(0);
  const [idKit, setIdKit] = useState("");
  const [valorProposta, setValorProposta] = useState("");
  const [potenciaModulo, setPotenciaModulo] = useState("");
  const [verConteudo, setVerConteudo] = useState(false);
  const [mensagemStatus, setMensagemStatus] = useState<ReactNode>("");
  const [idProposta, setIdProposta] = useState("");
  const [numeroCliente, setNumeroCliente] = useState("");
  const [caminhoAws, setCaminhoAws] = useState("");
  const [modalRejeicao, setModalRejeicao] = useState<any>(false);
  const [openModalNumero, setOpenModalNumero] = useState<any>(false);
  const [proposta, setProposta] = useState<any>(false);
  const [podeAprovarProposta, setPodeAprovarProposta] = useState<any>(false);
  // const [caminhoAws, setCaminhoAws] = useState("");
  const [idCard, setIdCard] = useState("");
  const [isChrome, setIsChrome] = useState(false);

  const { listarDadosKanban } = useKanbanContext();

  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);

  const listarPropostasLinkFunction = async (parametroQuery: any) => {
    return listarPropostasLink(parametroQuery, query.sigla).then((res) => {
      // setPodeAprovarProposta(res["podeAprovarProposta"] == 1);

      setGuardaPdf(res["awslink"]);
      setNomeCliente(res["nome_cliente"]);
      setNomeRepresentante(res["nome_representante"]);
      setIdProposta(res["id_proposta"]);
      setCaminhoAws(res["caminho_aws"]);
      setEmailRepresentante(res["email_usuario"]);
      setStatusProposta(res["status_proposta"]);
      setIdCard(res["id_card"]);
      // setNumeroCliente(res["numero_cliente"]);
      setVerConteudo(true);
    });
  };

  useEffect(() => {
    switch (statusProposta) {
      case "0":
        setMensagemStatus(
          <span className="text-primary">Aguardando Aprovação</span>
        );
        break;
      case "1":
        setMensagemStatus(<span className="text-success">Aprovado</span>);
        break;
      case "2":
        setMensagemStatus(<span className="text-danger">Reprovado</span>);
        break;
      case "3":
        setMensagemStatus(<span className="text-black-2">Obsoleta</span>);
        break;
      default:
        setMensagemStatus(
          <span className="text-black-2"> Não informado </span>
        );
        break;
    }
  }, [statusProposta]);

  useEffect(() => {
    if (parametroQuery != undefined) {
      listarPropostasLinkFunction(parametroQuery).then(() => {
        contabilizarEntradas({
          token: parametroQuery as string,
          sigla: query.sigla as string,
        }).then(() => {
          enviarEmail();
        });
      });
    }
  }, [parametroQuery]);

  useEffect(() => {
    if (query.sigla != undefined) {
      listarPropostasDados(idProposta, query.sigla).then((e) => {
        if (e && e[0]) {
          setProposta(e[0]);
          setModulos(e[0]["modulosDigitado_proposta"]);
          setPotenciaModulo(
            e[0]["potencia_modulo_distribuidor"] || e[0]["potencia_modulo"]
          );
          const valorProposta = +e[0]["valorTotal_proposta"];
          if (typeof valorProposta === "number" && !isNaN(valorProposta)) {
            const valorFormatado = valorProposta.toLocaleString("pt-BR", {
              style: "currency",
              currency: "BRL",
            });

            setValorProposta(valorFormatado);
          } else {
            setValorProposta("Valor inválido");
          }
          setIdKit(e[0]["kit_proposta"]);
        }
      });
    }

    const userAgent = navigator.userAgent;
    if (userAgent.indexOf("Chrome") > -1) {
      setIsChrome(true);
    }
  }, [idProposta]);

  const onSubmitReprovar = (data: FieldValues) => {
    if (data["motivo_reprovacao"] != "99") {
      data["motivoOutros_proposta"] = "";
    }
    data["id_proposta"] = idProposta;
    data["email"] = emailRepresentante;
    data["nome_cliente"] = nomeCliente;
    data["numero_proposta"] = idProposta;
    data["numero_cliente"] = numeroCliente;
    data["titulo_email"] = "Proposta Reprovada";
    data["conteudo_email"] =
      `Infelizmente o cliente: ${nomeCliente} <strong>Reprovou</strong> a proposta n° ${idProposta} `;
    data["id_card"] = idCard;
    reprovarProposta(data).then((e) => {
      listarPropostasLinkFunction(parametroQuery);
      listarDadosKanban();
      setModalRejeicao(!modalRejeicao);
    });
  };

  const confirmarProposta = (data: any) => {
    aprovarProposta(data).then((e) => {
      listarPropostasLinkFunction(parametroQuery);
      listarDadosKanban();
    });
  };
  const handleValidateAprovar = () => {
    setIsLoading2(true);
    loginCliente({ numeroCliente: numeroCliente })
      .then(() => {
        if (recusarProposta == true) {
          setModalRejeicao(!modalRejeicao);
        } else {
          confirmarProposta({
            id_proposta: idProposta,
            email: emailRepresentante,
            nome_cliente: nomeCliente,
            numero_proposta: idProposta,
            numero_cliente: numeroCliente,
            titulo_email: "Cliente Aprovou a Proposta",
            conteudo_email: `Parabéns o cliente : ${nomeCliente} <strong>Aprovou</strong> a proposta n° ${idProposta} `,
            id_card: idCard,
          });
        }
        setOpenModalNumero(false);
      })
      .finally(() => {
        setIsLoading2(false);
      });
  };

  const baixarPropostaAws = (data: any) => {
    setIsLoading(true);
    baixarProposta(data).then((res) => {
      window.open(res.body);
      setIsLoading(false);
    });
  };

  const enviarEmail = () => {
    enviarEmailRepresentante({
      email: emailRepresentante,
      nome_cliente: nomeCliente,
      numero_proposta: idProposta,
      numero_cliente: numeroCliente,
      titulo_email: "Cliente Acessou a Proposta",
      conteudo_email: `Cliente ${nomeCliente} abriu a proposta n° ${idProposta}`,
    });
  };

  const closeFuncion = () => {
    setModalRejeicao(!modalRejeicao);
  };

  return (
    <>
      <div className="flex justify-center">
        {verConteudo ? (
          <div className="flex flex-col justify-center items-center bg-white rounded-2xl w-fit p-10">
            <div className="w-[400px] h-[150px]">
              <div className="flex flex-row text-black-2 w-full">
                <h1 className="text-3xl text-center">
                  Sua proposta n°{idProposta} está pronta,{" "}
                  <strong className="font-medium">{nomeCliente}</strong>
                </h1>
              </div>
              <div className="flex flex-row justify-center gap-6 mb-5 mt-4">
                <Button
                  type="button"
                  loading={isLoading}
                  onClick={() =>
                    baixarPropostaAws({
                      caminho: caminhoAws,
                    })
                  }
                  className="flex  justify-center items-center bg-primary text-center text-md rounded-md"
                >
                  Download {""}
                  <span className="ml-1">
                    <IoMdDownload size="22px" />
                  </span>
                </Button>

                {statusProposta == "0" && podeAprovarProposta && (
                  <>
                    <Button
                      type="button"
                      onClick={() => {
                        setOpenModalNumero(true);
                      }}
                      className="flex  justify-center items-center bg-success text-center text-md rounded-md"
                    >
                      Aprovar
                      <span className="ml-1">
                        <IoMdCheckmark size="22px" />
                      </span>
                    </Button>
                    <Button
                      type="button"
                      onClick={() => {
                        setOpenModalNumero(true);
                        setRecusarProposta(true);
                      }}
                      className="flex  justify-center items-center bg-danger text-center text-md rounded-md tex"
                    >
                      Reprovar
                      <span className="ml-1">
                        <IoClose size="22px" />
                      </span>
                    </Button>
                  </>
                )}
              </div>
            </div>
            {!podeAprovarProposta && statusProposta != "1" && (
              <div className="text-md font-medium bg-success/5 p-3 rounded-lg">
                Para Prosseguir com a aprovação da proposta entre em contato com
                o vendedor
              </div>
            )}
            <div className="bg-secondaryMenu  w-[700px] mt-5 mb-5 bg-opacity-20 rounded-md text-center text-black-2 ">
              O status atual da sua proposta é: {mensagemStatus}
              <br />
              Gerada por: <strong>{nomeRepresentante}</strong>
            </div>
            <div className="mb-1">
              <span className="text-black-2 text-md">
                Valor <strong>{valorProposta} </strong>
              </span>
            </div>
            {/* <div className="mb-1">
              <span className="text-black-2 text-md">
                Quantidade de Módulos: <strong>{modulos}</strong>{" "}
                , Potência do Módulo : <strong>{potenciaModulo} Kwp</strong>,
                Valor <strong>{valorProposta} </strong>
              </span>
            </div>
            <div>
              <span className="text-black-2 text-md">
                Inversor: <strong>{inversor1}</strong>,
              </span>
            </div>
            {inversor2 && (
              <div className="mb-1">
                <span className="text-black-2 text-md">
                  Inversor 2 : <strong>{inversor2}</strong>
                </span>
              </div>
            )} */}

            <div className="flex justify-center">
              {isChrome ? (
                <iframe src={guardaPdf} width="700px" height="700px" />
              ) : (
                <a href={guardaPdf}>
                  <Button>Clique aqui para Visualizar a Proposta</Button>
                </a>
              )}
            </div>
          </div>
        ) : (
          <div className="flex flex-col justify-center items-center bg-white rounded-2xl w-fit p-10">
            <div className="w-[400px] h-[150px]">
              <Skeleton className="flex flex-row text-black-2 w-full h-20" />
              <div className="flex flex-row justify-center gap-6 mb-5 mt-4">
                <Skeleton className="w-20 rounded-md h-10" />
                <Skeleton className="w-20 rounded-md h-10" />
                <Skeleton className="w-20 rounded-md h-10" />
              </div>
            </div>
            <div className="flex justify-center">
              <Skeleton className="w-[700px] h-[700px]" />
            </div>
          </div>
        )}
      </div>
      {modalRejeicao && (
        <ModalRejeicao
          onSubmitReprovar={onSubmitReprovar}
          openModalRejeitar={modalRejeicao}
          closeFuncion={closeFuncion}
        />
      )}
      {openModalNumero && (
        <ModalComponente
          hasForm={false}
          header="Enviar E-mail"
          defaultW="w-[400px]"
          opened={openModalNumero}
          onClose={() => setOpenModalNumero(!openModalNumero)}
          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 seu:{" "}
                <strong>
                  <i>Telefone</i>
                </strong>
              </span>{" "}
            </div>
            <Input
              label="Número"
              name="telefone"
              mascara="telefone"
              onChange={(e: any) => {
                setNumeroCliente(e.target.value);
              }}
            />
            <Button
              loading={isLoading2}
              className="w-full bg-primary mt-5"
              onClick={() => handleValidateAprovar()}
            >
              Salvar
            </Button>
          </div>
        </ModalComponente>
      )}
      {/* <ModalComponente
                hasForm={false}
                header="Reprovação"
                defaultW="w-[400px]"
                opened={openModalRejeitar}
                onClose={() => setOpenModalRejeitar(!openModalRejeitar)}
                hasSaveButton={false}
            >
                <div className="mt-5">
                    <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
                        <span>
                            Por favor, preencha o motivo da{" "}
                            <strong className="text-danger">
                                <i>Cancelamento</i>
                            </strong>
                        </span>{" "}
                    </div>

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

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

export default VisualizarProposta;