import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { useCamposPersonalizados } from "@/hooks/useCamposPersonalizados";
import UcsManager from "@/pages/CXESCRM005/UcsManager";
import { listarUcsColeta } from "@/requests/CRM/UCs/listarUcsColeta";
import {
  validarUcs,
  verificaUcsExistentes,
} from "@/requests/CRM/UCs/validarUcs";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarConcessionarias } from "@/requests/CRUD/Concessionaria/listarConcessionarias";
import { obterCosip } from "@/requests/CRUD/ParametrosComerciais/Cosip/obterCosip";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { listarTarifasEnergia } from "@/requests/CRUD/TarifaEnergia/listarTarifasEnergia";
import { obterTarifaEnergia } from "@/requests/CRUD/TarifaEnergia/obterTarifaEnergia";
import { listarTodosTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/listarTiposEdificacao";
import { listarCidades } from "@/requests/common/EstadosCidades/estadosCidades";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { IValueLabel } from "@/types/formInterfaces";
import { GetForm } from "@/utils";
import { formatLabelTipoEdificacao } from "@/utils/formatTipoEdificacao";
import { useEffect, useMemo, useState } from "react";
import { FieldValues } from "react-hook-form";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";
import * as yup from "yup";

export const arrayTipo = [
  { value: "1", label: "Monofásico" },
  { value: "2", label: "Bifásico" },
  { value: "3", label: "Trifásico" },
];

const FormNegocioCard = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  blockEditCard,
  ...rest
}: any) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const [simultaneidade, setSimultaneidade] = useState<any[]>([]);
  const [concessionarias, setConcessionarias] = useState<IValueLabel[]>([]);
  const [ucs, setUcs] = useState<any[]>([]);
  const [ucsMensal, setUcsMensal] = useState<any[]>([]);
  const [ucsMedia, setUcsMedia] = useState<any[]>([]);
  const [parametros, setParametros] = useState<any[]>([]);
  const [dadosClassificacaoTarifas, setDadosClassificacaoTarifas] = useState<
    any[]
  >([]);
  const { renderCamposPersonalizados, filterCamposPersonalizados } =
    useCamposPersonalizados(defaultValues.id_coleta_cliente, defaultValues.id);
  const [porcentagens, setPorcentagens] = useState<Record<number, number>>({});
  const [distribuicaoManual, setDistribuicaoManual] = useState<
    Record<number, number>
  >({});
  const [existsUCB, setExistsUCB] = useState();
  const [cosipValue, setCosipValue] = useState();
  const { isMobile } = useScreenContext();
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [dynamicSubgroup, setDynamicSubgroup] = useState("");
  const [classificacao, setClassificacao] = useState<IValueLabel[]>([]);
  const [tiposEdificacao, setTiposEdificacao] = useState<IValueLabel[]>([]);
  const [ucAtual, setUcAtual] = useState(0);

  // Configuração da validação para simultaneidade não maior que 100%
  useEffect(() => {
    setYupSchema(
      yup.object().shape({
        simultaneidade_coleta: yup
          .number()
          .transform((value, originalValue) => {
            // Se o valor original está vazio, retorna undefined
            if (
              originalValue === "" ||
              originalValue === null ||
              originalValue === undefined
            ) {
              return undefined;
            }
            // Converte strings numéricas para números
            if (typeof originalValue === "string") {
              // Remove vírgulas e converte para número
              const numberValue = parseFloat(originalValue.replace(",", "."));
              return isNaN(numberValue) ? undefined : numberValue;
            }
            return value;
          })
          .nullable()
          .max(100, "A simultaneidade não pode ser maior que 100%")
          .min(0, "A simultaneidade não pode ser negativa")
          .typeError("Valor deve ser um número válido"),
      }),
    );
  }, []);

  useEffect(() => {
    Promise.all([
      listarClassificacoes().then((res) => {
        const arrayClassificacoes = res.map((classificacao: any) => ({
          label: `${classificacao.nome_classificacao}`,
          value: `${classificacao.id_classificacao}`,
        }));
        setClassificacao(arrayClassificacoes);
      }),
      listarTarifasEnergia().then((res) => {
        setDadosClassificacaoTarifas(res);
      }),
      listarConcessionarias().then((res) =>
        setConcessionarias(
          res
            .filter((e: any) => e.status_concessionaria == 1)
            .map((concessionaria: any) => ({
              label: `${concessionaria.nome_concessionaria}`,
              value: `${concessionaria.id_concessionaria}`,
            })),
        ),
      ),
      listarTodosTiposEdificacao().then((res) =>
        setTiposEdificacao(
          res.map((tipo: any) => ({
            label: formatLabelTipoEdificacao(tipo),
            value: `${tipo.id_tipo_edificacao}`,
          })),
        ),
      ),
      listarTodosTiposEdificacao().then((res) =>
        setTiposEdificacao(
          res.map((tipo: any) => ({
            label: formatLabelTipoEdificacao(tipo),
            value: `${tipo.id_tipo_edificacao}`,
          })),
        ),
      ),
      listarCidades().then((cidade) => {
        obterCosip({
          cidade: cidade.find(
            (c: any) => c.nome_cidade === defaultValues.cidade_coleta,
          )?.id_cidade,
        }).then(setCosipValue);
      }),
      listarParametros().then((defaultParams) =>
        listarUcsColeta(defaultValues.id_coleta_cliente).then((res) => {
          let ucsColeta: any = [];
          const ucsBeneficiarias = res.filter((uc: any) => {
            if (uc.isGeradora_uc_coleta != "0") {
              ucsColeta.push({
                ...uc,
                defaultOutrosCustos: defaultParams.outros_custos_parametro,
              });
            }
            return uc.isGeradora_uc_coleta == "0";
          });
          setParametros(defaultParams);
          if (ucsColeta[0] == undefined) {
            ucsColeta.push({
              id_uc_coleta: "",
              codColeta_uc_coleta: defaultValues.id_coleta_cliente,
              isGeradora_uc_coleta: 1,
              numero_uc_coleta: defaultValues.uc_coleta,
              valor: 0,
              cosip_uc_coleta: "",
              outros_custos_uc_coleta: defaultParams.outros_custos_parametro,
              defaultOutrosCustos: defaultParams.outros_custos_parametro,
              porcentagem_uc_coleta: "",
            });
          }

          ucsColeta = [...ucsColeta, ...ucsBeneficiarias];
          const ucsForm = ucsColeta.map((uc: any, index: number) => ({
            ...uc,
            id_uc_coleta: uc.id_uc_coleta,
            uc: uc.numero_uc_coleta || "",
            nome:
              uc.isGeradora_uc_coleta == "1"
                ? "UG " + (uc.numero_uc_coleta || "")
                : "UB " + (uc.numero_uc_coleta || ""),
            key: index,
            valor: +uc.valor == +uc.valor ? [uc.valor] : uc.valor,
            tipoValor:
              defaultParams.obrigado_digitar_consumo_mes_a_mes_parametro === "1"
                ? "Mensal"
                : +uc.valor == +uc.valor
                  ? "Média"
                  : "Mensal",
            // cosip_uc_coleta: "",
            // outros_custos_uc_coleta: "",
            // defaultOutrosCustos: defaultParams.outros_custos_parametro,
          }));

          // Separando por tipoValor direto do resultado mapeado
          const ucsSeparado = {
            media: ucsForm.filter((uc: any) => uc.tipoValor === "Média"),
            mensal: ucsForm.filter((uc: any) => uc.tipoValor === "Mensal"),
          };

          // Atualizando states de uma vez só
          setUcs(ucsForm);
          setUcsMedia(ucsSeparado.media);
          setUcsMensal(ucsSeparado.mensal);
        }),
      ),
    ]).finally(() => {
      setIsLoaded(true);
    });
  }, []);

  function validateUcs() {
    let errors = false;

    ucs.map((uc, index) => {
      const ucErrors = [];
      if (!uc.uc && index > 0) {
        ucErrors.push(`não possui número de UC`);
      }
      if (
        uc.tipoValor === "Média"
          ? uc.valor === 0
          : uc.valor.every((val: any) => val === "")
      ) {
        ucErrors.push(`não possui consumo`);
      }
      if (ucs.some((e, i) => i != index && e.uc == uc.uc && e.uc != "")) {
        ucErrors.push(`se repete`);
      }
      if (ucErrors.length) {
        errors = true;
        toast.error(`${uc.nome} ${ucErrors.join(", ")}`);
      }
    });

    return errors; // Retorna o array de erros
  }
  const getOptionsSubGrupo = () => {
    const options = dadosClassificacaoTarifas
      .filter(
        (res) =>
          res.concessionaria_tarifa === defaultValues.concessionaria_coleta,
      )
      .map((res2) => ({
        label: res2.subgrupo_tarifa,
        value: res2.subgrupo_tarifa,
      }));

    if (options.length === 0) {
      return [
        { label: "B1", value: "B1" },
        { label: "B2", value: "B2" },
        { label: "B3", value: "B3" },
      ];
    }

    return options;
  };

  useEffect(() => {
    form.setValue("ucs" as never, ucs as never);
  }, [ucs]);

  function onChangeUcAtual(index: number) {
    setUcAtual(index);
  }
  const ucsAtualizadas = useMemo(
    () =>
      ucs.map((uc) => ({
        ...uc,
        porcentagem_uc_coleta: (porcentagens[uc.key] ?? 0).toFixed(2),
        distribuicao_uc_coleta: (distribuicaoManual[uc.key] ?? 0).toFixed(2),
      })),
    [ucs, porcentagens, distribuicaoManual],
  );

  const [checkUcsExistentes, setCheckUcsExistentes] = useState<any>();
  const verificar = async () => {
    const verify = await verificaUcsExistentes({
      ucs: ucs.filter((uc) => uc.isGeradora_uc_coleta != 1),
      id_coleta: defaultValues.id_coleta_cliente,
    });

    setCheckUcsExistentes(verify);
  };
  useEffect(() => {
    if (
      ucsAtualizadas.filter((uc) => uc.isGeradora_uc_coleta != 1).length > 0 &&
      defaultValues.id_coleta_cliente
    ) {
      verificar();
    }
  }, [ucs, ucsAtualizadas, defaultValues.id_coleta_cliente]);

  async function onSubmitFormNegocioCard(data: FieldValues) {
    rest.setIsLoading(true);
    setIsLoading(true);
    filterCamposPersonalizados(data, 2)
    // Validação da simultaneidade
    const simultaneidade = parseFloat(data.simultaneidade_coleta);
    if (!isNaN(simultaneidade) && simultaneidade > 100) {
      setIsLoading(false);
      rest.setIsLoading(false);
      return toast.error("A simultaneidade não pode ser maior que 100%");
    }

    if (!["2", "4"].includes(defaultValues?.tipoNegocio_coleta)) {
      if (validateUcs()) {
        setIsLoading(false);
        return rest.setIsLoading(false);
      }

      verificar();

      await validarUcs({
        ucs: ucsAtualizadas,
        id_coleta: defaultValues.id_coleta_cliente,
      }).finally(() => {
        setIsLoading(false);
        rest.setIsLoading(false);
      });
    }

    const { grupo_coleta, subgrupo_coleta, concessionaria_coleta } =
      form.control._formValues;
    const tarifaData = {
      id_concessionaria: concessionaria_coleta?.value,
      grupo: grupo_coleta?.value,
      subgrupo: subgrupo_coleta?.value,
    };
    const tarifas = await obterTarifaEnergia(tarifaData);
    if (tarifas.length < 1) {
      setIsLoading(false);
      rest.setIsLoading(false);
      return toast.error(
        `Tarifa não encontrada),
        grupo(${grupo_coleta.label}),
        subgrupo(${subgrupo_coleta.label})
        e a concessionária(${concessionaria_coleta.label}) especificada`,
      );
    }

    data["ucs"] = ucsAtualizadas;

    if (data.tipo_edificacao_coleta?.value) {
      data.tipo_edificacao_coleta = data.tipo_edificacao_coleta.value;
    }

    if (data.tipo_edificacao_coleta?.value) {
      data.tipo_edificacao_coleta = data.tipo_edificacao_coleta.value;
    }

    return onSubmitFunction(data).finally(() => setIsLoading(false));
  }

  return isLoaded ? (
    <>
      <form
        style={{ scale: !isMobile ? "0.9" : "1" }}
        onSubmit={handleSubmit(
          onSubmitFormNegocioCard
        )}
        {...rest}
      >
        <p className="mb-2 text-lg text-black dark:text-white font-semibold">
          {`Dados da Unidade ${ucAtual > 0 ? "Beneficiária" : "Geradora"}`}
        </p>
        <InputGroup className={`pt-2 ${ucAtual && "hidden"}`}>
          {/* <Input
          formulario={form}
          label="UC Geradora"
          defaultValue={defaultValues && defaultValues.uc_coleta}
          name="numeroUC_coleta"
          type="text"
        /> */}
          <Input
            formulario={form}
            name="simultaneidade_coleta"
            label="Simultaneidade (%)"
            type="number"
            max="100"
            min="0"
            step="0.01"
            // options={simultaneidade
            //   .filter((e: any) => e.status_simultaneidade == 1)
            //   .map((simultaneidade: any) => ({
            //     ...simultaneidade,
            //     label: `${simultaneidade.perfil_consumo_simultaneidade}`,
            //     value: `${simultaneidade.id_simultaneidade}`,
            //   }))}
            required
            error="A simultaneidade deve ser um valor válido entre 0 e 100%"
            defaultValue={
              defaultValues &&
              (defaultValues.simultaneidade_coleta ||
                defaultValues["simultaneidade_proposta"])
            }
            disabled={disabledFields?.some(
              (field: string) => field == "perfil_consumo_coleta"
            )}
          />
          <InputSelectComponent
            name="classificacao_coleta"
            // name="tipoLigacao"
            label="Classificação"
            formulario={form}
            options={classificacao}
            required
            onChange={(e: any) => {
              e.value == 1
                ? setDynamicSubgroup("B1")
                : e.value == 3
                  ? setDynamicSubgroup("B2")
                  : setDynamicSubgroup("B3");
            }}
            error="Informe o Tipo de ligação"
            defaultValue={defaultValues && defaultValues.classificacao_coleta}
            disabled={disabledFields?.some(
              (field: string) => field == "tipoLigacao_coleta"
            )}
            skipEffect
          />
          <InputSelectComponent
            name="tipoLigacao_coleta"
            // name="tipoLigacao"
            label="Tipo de Ligação"
            formulario={form}
            options={arrayTipo}
            required
            error="Informe o Tipo de ligação"
            defaultValue={defaultValues && defaultValues.tipoLigacao_coleta}
            disabled={disabledFields?.some(
              (field: string) => field == "tipoLigacao_coleta"
            )}
            skipEffect
          />
          <Input
            name="disjuntor_coleta"
            label="Disjuntor"
            formulario={form}
            maxLength={3}
            mascara="numerico"
            // required
            // error="Informe o Disjuntor"
            defaultValue={defaultValues && defaultValues.disjuntor_coleta}
            disabled={disabledFields?.some(
              (field: string) => field == "disjuntor_coleta"
            )}
          />
          <InputSelectComponent
            name="concessionaria_coleta"
            // name="concessionaria"
            label="Concessionária"
            formulario={form}
            options={concessionarias}
            required
            error="Informe a Concessionária"
            defaultValue={defaultValues && defaultValues.concessionaria_coleta}
            disabled={disabledFields?.some(
              (field: string) => field == "concessionaria_coleta"
            )}
            skipEffect
          />
          <InputSelectComponent
            name="grupo_coleta"
            // name="grupo_proposta"
            label="Grupo"
            formulario={form}
            options={[{ label: "Fatura B", value: "B" }]}
            required
            error="Selecione uma Classificação"
            defaultValue={(defaultValues && defaultValues.grupo_coleta) || "B"}
            disabled={disabledFields?.some(
              (field: string) => field == "grupo_coleta"
            )}
            skipEffect
          />
          <InputSelectComponent
            name="subgrupo_coleta"
            // name="subgrupo_proposta"
            label="Subgrupo"
            formulario={form}
            options={getOptionsSubGrupo()}
            defaultValue={
              dynamicSubgroup != ""
                ? dynamicSubgroup
                : defaultValues && defaultValues.subgrupo_coleta
            }
            required
            error="Selecione um Subgrupo"
            disabled={disabledFields?.some(
              (field: string) => field == "subgrupo_coleta"
            )}
          // skipEffect
          />
          {defaultValues?.tipoNegocio_coleta === "1" && (
            <InputSelectComponent
              name="tipo_edificacao_coleta"
              label="Tipo de Edificação"
              formulario={form}
              options={tiposEdificacao}
              required
              error="Selecione o Tipo de Edificação"
              defaultValue={
                defaultValues && defaultValues.tipo_edificacao_coleta
              }
              disabled={disabledFields?.some(
                (field: string) => field === "tipo_edificacao_coleta",
              )}
            />
          )}
        </InputGroup>
        {checkUcsExistentes &&
          checkUcsExistentes.some(
            (c: any) => c.numero_uc_coleta == ucs[ucAtual]?.uc
          ) &&
          ucAtual !== 0 && (
            <div className=" mb-3 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-4 rounded-md border-[#fcdcaa] shadow-sm">
              <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                <RiErrorWarningFill size={20} color="#ffb747" />
              </div>
              <div className="grid gap-2">
                <p className="text-black">
                  &bull; ATENÇÃO! Esta UC Beneficiária{" "}
                  {
                    checkUcsExistentes.find(
                      (c: any) => c.numero_uc_coleta == ucs[ucAtual]?.uc
                    )?.numero_uc_coleta
                  }{" "}
                  já está sendo Beneficiada pelo(s) projeto(s) Nr(s){" "}
                  {checkUcsExistentes
                    .filter((c: any) => c.numero_uc_coleta == ucs[ucAtual]?.uc)
                    ?.map((c: any) => c.id_coleta)
                    .join(", ")}
                </p>
              </div>
            </div>
          )}
        {!["2", "4"].includes(defaultValues?.tipoNegocio_coleta) && (
          <UcsManager
            dadosCard={defaultValues}
            ucs={ucs}
            classificacao={form.getValues("classificacao_coleta" as any)}
            porcentagens={porcentagens}
            setPorcentagens={setPorcentagens}
            setDistribuicaoManual={setDistribuicaoManual}
            setUcs={setUcs}
            cosipValue={cosipValue}
            parametros={parametros}
            onChangeUcAtual={onChangeUcAtual}
            blockEditCard={blockEditCard}
            isDisabled={disabledFields?.some((field: string) => field == "ucs")}
          />
        )}
        {renderCamposPersonalizados("5", form, "2", defaultValues)}
        {!blockEditCard && (
          <div className="w-full flex lg:justify-end mt-4">
            <Button
              className="max-sm:w-full max-sm:text-sm max-sm:h-11"
              loading={isLoading}
            >
              Salvar
            </Button>
          </div>
        )}
      </form>


    </>
  ) : (
    <div className="w-full h-[400px] flex flex-col justify-center items-center">
      <LoaderSun />
    </div>
  );
};

export default FormNegocioCard;