import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { useCamposPersonalizados } from "@/hooks/useCamposPersonalizados";
import { useAuth } from "@/src/contexts/authContext";
import {
  formatarValor,
  FormatFields,
  getDateBrasil,
  GetForm,
  getTextFromHmlTags,
} from "@/utils";
import { useEffect, useState } from "react";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";
import InputsFormPagamentoProposta from "../propostas/InputsFormPagamentoProposta";

export default function FormPagamentoContrato({
  formasPagamento,
  contasBancariasLojas,
  dadosCard,
  proposta,
  onSubmitFunction,
  dadosContratoDefault,
  origemDadosContrato,
  parametrosComerciais,
  origemDadosDefaultContrato,
  condicoesPagamento,
}: any) {
  const hoje = getDateBrasil(undefined, undefined, "fr-CA");
  const [isLoading, setIsLoading] = useState(false);
  const usarConfiguracaoGeral = origemDadosContrato?.origem === "configuracao";
  const [formaPagamentoSelecionada, setFormaPagamentoSelecionada] = useState(
    usarConfiguracaoGeral
      ? undefined
      : proposta && proposta?.codForma_pagamento_proposta
  );
  const { renderCamposPersonalizados } = useCamposPersonalizados(
    dadosCard?.id_coleta_cliente,
    dadosCard?.id
  );
  const { handleSubmit: handlePagamento, ...formPagamento } = GetForm();
  const { handleSubmit: handleCampos, ...formCampos } = GetForm();
  const [dataGeracaoContratoSelecionada, setDataGeracaoContratoSelecionada] =
    useState(hoje);
  const [dataPriVcto_pagamento_proposta, setDataPriVcto_pagamento_proposta] =
    useState(hoje);
  const [prazoEditadoManualmente, setPrazoEditadoManualmente] = useState(false);
  const [valorTotalProjeto, setValorTotalProjeto] = useState<any>("");
  const [saldoDevedorPersonalizado, setSaldoDevedorPersonalizado] =
    useState<any>(undefined);
  const [handleSubmits, setHandleSubmits] = useState<any[]>([]);
  const [valor_entrada_proposta, setValor_entrada_proposta] = useState<any>(
    proposta?.valor_entrada_proposta || 0
  );

  const { usuario } = useAuth();
  useEffect(() => {
    // Sugere o prazo com a mesma data de geração do contrato na abertura.
    const dataGeracaoAtual = formPagamento?.watch?.("data_geracao_contrato");
    const prazoAtual = formPagamento?.watch?.("dataPriVcto_pagamento_proposta");

    const dataBase = dataGeracaoAtual || hoje;
    setDataGeracaoContratoSelecionada(dataBase);

    if (!dataGeracaoAtual) {
      formPagamento?.setValue("data_geracao_contrato", dataBase);
    }

    if (!prazoAtual) {
      formPagamento?.setValue("dataPriVcto_pagamento_proposta", dataBase);
      setDataPriVcto_pagamento_proposta(dataBase);
    } else {
      setDataPriVcto_pagamento_proposta(prazoAtual);
      setPrazoEditadoManualmente(true);
    }
    // Executa apenas na montagem do formulário.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function onSubmitFormPagamentoContrato(data: any, event?: any) {
    delete data.camposPersonalizadosObrigatorios;
    if (!data?.data_geracao_contrato) {
      toast.error("Informe a data de geração do contrato");
      return;
    }

    if (data.data_geracao_contrato > hoje) {
      toast.error("Data de geração não pode ser maior que o dia de hoje");
      return;
    }

    // Só bloqueia quando falta pagar (saldo positivo). Pagar a mais que o
    // saldo devedor com juros é permitido, só segue com o salvamento.
    if (
      saldoDevedorPersonalizado !== undefined &&
      saldoDevedorPersonalizado > 0.01
    ) {
      handleSweetAlert({
        icon: "warning",
        title: "Parcelas não fecham o saldo devedor",
        html: `Ainda falta pagar <b>${formatarValor(
          saldoDevedorPersonalizado
        )}</b> considerando os juros até a última parcela`,
        showDenyButton: false,
        confirmButtonText: "Ok",
      });
      return;
    }

    setIsLoading(true);

    // Cada InputParcelaPersonalizada tem seu próprio form (GetForm próprio),
    // então precisa validar cada um separadamente antes de seguir com o submit.
    return Promise.all(
      handleSubmits.map(
        (handleSubmitParcela) =>
          new Promise((resolve, reject) => {
            handleSubmitParcela((d: any) => resolve(d))(event).finally(() =>
              reject(false)
            );
          })
      )
    )
      .then(() => {
        data["id_proposta"] = proposta.id_proposta;
        data["cliente_proposta"] = proposta.cliente_proposta;
        return onSubmitFunction(data).finally(() => setIsLoading(false));
      })
      .catch(() => {
        setIsLoading(false);
      });
  }
  /**
   * Popula o formulário conforme a origem escolhida no modal "Quando já Existir
   * Contratos Gerados".
   *
   * O gatilho é origemDadosContrato (que carrega um nonce), não só
   * dadosContratoDefault: clicar em "Usar Dados da Configuração Geral" fazia
   * setDadosContratoDefault(undefined) num valor que já era undefined, o React
   * não via mudança, este efeito não rodava e o formulário continuava com os
   * dados do contrato anterior.
   *
   * Em Configuração Geral: limpa Forma de Pagamento, Informações Pagamento e
   * Campos Personalizados (residuais do contrato/proposta anterior). Conta e
   * Valor de Entrada seguem da proposta; Observações vêm do parâmetro.
   */
  useEffect(() => {
    const usarDadosDoContrato =
      Boolean(dadosContratoDefault) &&
      origemDadosContrato?.origem !== "configuracao";

    if (usarDadosDoContrato) {
      formPagamento.reset({
        ...formPagamento.control._formValues,
        ...dadosContratoDefault,
      });
      setDataGeracaoContratoSelecionada(
        dadosContratoDefault.data_geracao_contrato || hoje
      );
      setDataPriVcto_pagamento_proposta(
        dadosContratoDefault.dataPriVcto_pagamento_proposta || hoje
      );
      setValor_entrada_proposta(dadosContratoDefault.valor_entrada_proposta);
      setFormaPagamentoSelecionada(
        dadosContratoDefault.codForma_pagamento_proposta
      );
      return;
    }

    if (origemDadosContrato?.origem !== "configuracao") {
      return;
    }

    const valoresAtuais = formPagamento.control._formValues;
    const valoresCampos = formCampos.control._formValues;

    const observacaoConfiguracaoGeral =
      parametrosComerciais?.condicao_pagamento_parametro
        ? getTextFromHmlTags(parametrosComerciais.condicao_pagamento_parametro)
        : proposta?.observacao_pagamento_proposta;

    const resetConfiguracaoGeral: any = {
      codConta_pagamento_proposta: proposta?.codConta_pagamento_proposta,
      // Limpa: residual do contrato/proposta anterior não deve ser sugerido.
      codForma_pagamento_proposta: "",
      data_geracao_contrato: hoje,
      dataPriVcto_pagamento_proposta: hoje,
      valor_entrada_proposta: String(proposta?.valor_entrada_proposta ?? "0"),
      observacao_pagamento_proposta: observacaoConfiguracaoGeral,
      informacoes_pagamento_proposta: "",
    };

    Object.keys(valoresAtuais || {}).forEach((key) => {
      if (
        (key.endsWith("_campo_personalizado") ||
          key.endsWith("_cp") ||
          key.includes("^")) &&
        !(key in resetConfiguracaoGeral)
      ) {
        resetConfiguracaoGeral[key] = "";
      }
    });

    formPagamento.reset(resetConfiguracaoGeral);

    const resetCampos: any = {};
    Object.keys(valoresCampos || {}).forEach((key) => {
      if (
        key.endsWith("_campo_personalizado") ||
        key.endsWith("_cp") ||
        key.includes("^")
      ) {
        resetCampos[key] = "";
      }
    });
    formCampos.reset(resetCampos);

    setDataGeracaoContratoSelecionada(hoje);
    setDataPriVcto_pagamento_proposta(hoje);
    setValor_entrada_proposta(proposta?.valor_entrada_proposta);
    setFormaPagamentoSelecionada(undefined);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [origemDadosContrato, dadosContratoDefault]);

  useEffect(() => {
    // Sugere o prazo com a mesma data de geração do contrato na abertura.
    const dataGeracaoAtual = formPagamento?.watch?.("data_geracao_contrato");
    const prazoAtual = formPagamento?.watch?.("dataPriVcto_pagamento_proposta");

    const dataBase = dataGeracaoAtual || hoje;
    setDataGeracaoContratoSelecionada(dataBase);

    if (!dataGeracaoAtual) {
      formPagamento?.setValue("data_geracao_contrato", dataBase);
    }

    if (!prazoAtual) {
      formPagamento?.setValue("dataPriVcto_pagamento_proposta", dataBase);
      setDataPriVcto_pagamento_proposta(dataBase);
    } else {
      setDataPriVcto_pagamento_proposta(prazoAtual);
      setPrazoEditadoManualmente(true);
    }
    // Executa apenas na montagem do formulário.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="mt-5">
      {!dadosCard?.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>
      )}
      {!dadosCard?.docDocument && (
        <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>
      )}
      <div className="bg-secondaryMenu bg-opacity-30 max-sm:text-sm text-black-2 rounded-lg text-center text-lg mb-5">
        <span>A condição de pagamento está correta?</span>{" "}
      </div>
      <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
        <span>
          Valor do projeto{" "}
          <strong>
            <i>{formatarValor(proposta?.valorTotal_proposta)}</i>
          </strong>
        </span>
      </div>
      {formatarValor(valorTotalProjeto) !=
        formatarValor(proposta?.valorTotal_proposta) && (
        <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
          <span>
            Valor do projeto com juros{" "}
            <strong>
              <i>{formatarValor(valorTotalProjeto)}</i>
            </strong>
          </span>
        </div>
      )}
      <div>
        <div className="bg-coolGray-100 px-3 py-1 rounded-md">
          <div className="font-bold">Informações do documento Google</div>
          <div className="flex items-center gap-1 text-gray-700 text-center">
            <span className="font-bold">Conta:</span>{" "}
            <span className={`${dadosCard?.profile?.name ? "" : "text-error"}`}>
              {dadosCard?.profile?.name || "Não conectada"}
            </span>
          </div>
          <div className="flex items-center gap-1 text-gray-700 text-center">
            <span className="font-bold">Nome:</span>{" "}
            <span
              className={`${!dadosCard?.docDocument?.name ? "text-error" : ""}`}
            >
              {dadosCard?.docDocument?.name || "Não encontrado"}
            </span>
          </div>
          <div
            className="flex items-center gap-1 text-gray-700 text-center cursor-pointer"
            onClick={() => {
              if (dadosCard?.docDocument?.id) {
                navigator.clipboard
                  .writeText(dadosCard?.docDocument?.id)
                  .then(() => {
                    toast.success("ID copiado!");
                  })
                  .catch(() => {
                    toast.error("Falha ao copiar");
                  });
              }
            }}
          >
            <span className="font-bold">ID:</span>{" "}
            <span
              className={`overflow-hidden text-ellipsis ${!dadosCard?.docDocument?.id ? "text-error" : ""}`}
            >
              {dadosCard?.docDocument?.id || "Não encontrado"}
            </span>
          </div>
        </div>
      </div>
      <section
        className="flex flex-col  lg:gap-5 max-sm:text-sm"
        // onSubmit={handlePagamento(onSubmitFormPagamentoContrato)}
      >
        <Input
          name="data_geracao_contrato"
          label="Data de Geração do Contrato"
          formulario={formPagamento}
          type="date"
          required
          error="Informe a Data de Geração"
          defaultValue={hoje}
          max={hoje}
          onChange={(e) => {
            const novaDataGeracao = e?.target?.value;
            formPagamento.setValue(
              "dataPriVcto_pagamento_proposta",
              novaDataGeracao
            );
            setDataGeracaoContratoSelecionada(novaDataGeracao);

            if (!prazoEditadoManualmente) {
              formPagamento?.setValue(
                "dataPriVcto_pagamento_proposta",
                novaDataGeracao
              );
              setDataPriVcto_pagamento_proposta(novaDataGeracao);
            }
          }}
        />
        <InputsFormPagamentoProposta
          condicoesPagamento={condicoesPagamento}
          formasPagamento={formasPagamento}
          contasBancariasLojas={contasBancariasLojas}
          dadosCard={dadosCard}
          proposta={proposta}
          form={formPagamento}
          usuario={usuario}
          setDataPriVcto_pagamento_proposta={(novaData: string) => {
            setDataPriVcto_pagamento_proposta(novaData);
            setPrazoEditadoManualmente(true);
          }}
          setValorTotalProjeto={setValorTotalProjeto}
          setSaldoDevedorPersonalizado={setSaldoDevedorPersonalizado}
          setHandleSubmits={setHandleSubmits}
        />

        {renderCamposPersonalizados(
          "2",
          formCampos,
          "5",
          dadosCard,
          true,
          handleCampos,
          usarConfiguracaoGeral
        )}

        <Button
          loading={isLoading}
          className="w-full bg-primary max-sm:h-10 max-sm:mt-2 max-sm:text-xs mt-5"
          onClick={(e: any) => {
            Promise.all(
              [handlePagamento, handleCampos].map(
                (handleSubmitItem) =>
                  new Promise((resolve, reject) => {
                    handleSubmitItem((d: any) => resolve(d))(e).finally(() =>
                      reject(false)
                    );
                  })
              )
            ).then((res) =>
              onSubmitFormPagamentoContrato(Object.assign({}, ...res), e)
            );
          }}
          disabled={!dadosCard?.docDocument}
        >
          Confirmar
        </Button>
      </section>
    </div>
  );
}