import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarContratosPorColeta } from "@/requests/CRM/Contrato/listarContrato";
import { atualizaDadosClienteAmpliacao } from "@/requests/CRUD/ColetaDados/editarColeta";
import { addConclusaoPendencia } from "@/requests/CRUD/ConclusaoPendencia/conclusaoPendencia";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import FormDadosTecnicos from "./FormDadosTecnicos";
import { useCamposPersonalizados } from "@/hooks/useCamposPersonalizados";

const DadosTecnicos = ({
  dadosCard,
  proposta,
  blockEditCard,
  steps,
  setActiveStepAtual,
  activeStep,
}: any) => {
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [disabledFieldsNegocio, setDisabledFieldsNegocio] = useState<any[]>([
    "perfil_consumo_coleta",
    "tipoLigacao_coleta",
    "concessionaria_coleta",
    "grupo_coleta",
    "disjuntor_coleta",
    "subgrupo_coleta",
    "ucs",
  ]);

  const [keyForm, setKeyForm] = useState(0);
  const [coletaContratos, setColetaContratos] = useState<any[]>([]);
  const [defaultValues, setDefaultValues] = useState<any[]>([]);

  const contratoAssinado = coletaContratos.some(
    (contrato) => contrato.status_contrato == "1"
  );

  const { reListarDadosKanban } = useKanbanContext();

  async function onSubmitEditCard(data: any) {
    setIsLoading(true);
    data["id_coleta"] = dadosCard.id_coleta_cliente;
    if (!dadosCard.cod_coleta) {
      data["novoContatoAmplia"] = 1;
    } else {
      data["cod_coleta"] = dadosCard.cod_coleta;
    }

    data["orientacoes_integrador_ampliacao"] =
      data?.orientacoes_integrador_ampliacao?.join(",");
    return atualizaDadosClienteAmpliacao(data)
      .then(() => {
        addConclusaoPendencia({
          id_coleta: dadosCard.id_coleta_cliente,
          id_etapa: dadosCard.id_lista,
          id_pendencia: "29",
        }).then((res) => {});
        dadosCard = Object.keys(data).reduce((acc, dadosKey) => {
          if (Object.keys(dadosCard).includes(dadosKey)) {
            acc[dadosKey] = data[dadosKey];
          }
          return acc;
        }, dadosCard); // Aqui está atualizando dadosCard da forma mais muquirana que você vai ver na sua vida
        const dadosTecnicosIndex = steps.findIndex(
          (etapa: any) => etapa.label === "Dados Técnicos"
        );
        if (activeStep === dadosTecnicosIndex) {
          setActiveStepAtual(activeStep + 1);
        }

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

  useEffect(() => {
    Promise.all([
      listarContratosPorColeta(dadosCard.id_coleta_cliente).then((res) => {
        setColetaContratos(res);
        validarCamposDesabilitados();
      }),
      listarParametros().then((res) => {
        const newData = {
          ...dadosCard,
          subgrupo_coleta: dadosCard.subgrupo_coleta || res.subgrupo_parametro,
          simultaneidade_proposta: res.simultaneidade_proposta,
        };
        setDefaultValues(newData);
      }),
    ]).then(() => setIsLoaded(true));
  }, []);

  function validarCamposDesabilitados() {
    if (!!proposta || contratoAssinado || blockEditCard) {
      setDisabledFieldsNegocio([
        "perfil_consumo_coleta",
        "tipoLigacao_coleta",
        "concessionaria_coleta",
        "grupo_coleta",
        "disjuntor_coleta",
        "subgrupo_coleta",
        "ucs",
      ]);
    } else {
      setDisabledFieldsNegocio([]);
    }
  }

  useEffect(() => {
    validarCamposDesabilitados();
  }, [proposta]);

  return (
    <div className="flex justify-center relative z-1 h-fit rounded w-full ">
      <div className="flex justify-center w-full">
        {isLoaded ? (
          <div className="grid w-full">
            <div className="dark:bg-form-input bg-white p-3 shadow rounded">
              {(!!proposta || contratoAssinado) && (
                <div className="w-full flex flex-col items-center">
                  <div className="sticky top-0 left-0 bg-error/75 text-white z-1 p-2 rounded flex flex-row gap-2 w-fit">
                    <Info />
                    Para editar os dados do negócio é necessário
                    {!!proposta && " cancelar a proposta aprovada"}
                    {contratoAssinado &&
                      (!!proposta && contratoAssinado ? " e" : "") +
                        " cancelar o contrato aprovado"}
                  </div>
                </div>
              )}
              <FormDadosTecnicos
                onSubmitFunction={onSubmitEditCard}
                defaultValues={defaultValues}
                blockEditCard={blockEditCard}
                setIsLoading={setIsLoading}
                disabledFields={disabledFieldsNegocio}
                key={keyForm}
              />
            </div>
          </div>
        ) : (
          <div className="w-full h-[400px] flex flex-col justify-center items-center">
            <LoaderSun />
          </div>
        )}
      </div>
    </div>
  );
};

export default DadosTecnicos;