import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import photovoltaic from "@/public/images/cover/photovoltaic2.jpg";
import { TiposTelhadoProps } from "@/requests/CRUD/CategoriasTelhado/categoriaTelhadoType";
import { listarCategoriasTelhados } from "@/requests/CRUD/CategoriasTelhado/listarCategoriaTelhado";
import {
  dimensionarKit,
  listarKits,
} from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarItensKitsPorTipo } from "@/requests/CRUD/ColetaDados/listarItenskitsDiversos";
import { listarItensCompostos } from "@/requests/CRUD/ItemComposto/listarItem";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields } from "@/utils";
import { montarItensCompostosAutomaticos } from "@/utils/filtrarItemCompostoInversor";
import { Slider } from "@mui/material";
import { Building } from "lucide-react";
import Image from "next/image";
import { useEffect, useState } from "react";
import { BsLightningChargeFill } from "react-icons/bs";
import { CiFilter } from "react-icons/ci";
import { FaCheckCircle } from "react-icons/fa";

function isConectorItem(item: any) {
  return String(item?.id_tipo_item ?? item?.tipo_item) === "3";
}

function calcularQtdConectores(componentes: any[] = []) {
  const conectorAtual = componentes.find((item) => isConectorItem(item));
  const inversores = componentes.filter(
    (item) => String(item?.tipo_item) === "8"
  );

  if (!inversores.length) {
    return conectorAtual?.qtd_item ?? 1;
  }

  const totalStrings = inversores.reduce((acc: number, inversor: any) => {
    return (
      acc +
      Number(inversor?.strings_item || 1) * Number(inversor?.qtd_item || 1)
    );
  }, 0);

  return totalStrings > 0 ? totalStrings : conectorAtual?.qtd_item ?? 1;
}

function selecionarConectorDoDistribuidor(
  conectoresData: any[] = [],
  distribuidorId: string | number,
  tipoOrigem: string,
  qtdConectores: string | number
) {
  const conector = (conectoresData || [])
    .filter(
      (item: any) =>
        String(item.status_item) === "1" &&
        String(item.codDistribuidor_item) === String(distribuidorId) &&
        String(item.tipoOrigem_item) === String(tipoOrigem)
    )
    .sort(
      (a: any, b: any) =>
        Number(a.precoUnitario_item || 0) -
        Number(b.precoUnitario_item || 0)
    )[0];

  if (!conector) return null;

  return {
    ...conector,
    qtd_item: String(qtdConectores),
    nome_tipo_item: conector.nome_tipo_item || "Conector",
  };
}

function ajustarConectoresComponentes(
  componentes: any[] = [],
  distribuidorId: string | number,
  tipoOrigem: string,
  conectoresData: any[] = []
) {
  const conectorAtual = componentes.find((item) => isConectorItem(item));
  const codDistribuidor = String(conectorAtual?.codDistribuidor_item ?? "").trim();

  if (
    conectorAtual &&
    codDistribuidor &&
    codDistribuidor !== "*" &&
    codDistribuidor === String(distribuidorId)
  ) {
    return componentes;
  }

  const novoConector = selecionarConectorDoDistribuidor(
    conectoresData,
    distribuidorId,
    tipoOrigem,
    calcularQtdConectores(componentes)
  );

  if (!novoConector) return componentes;

  if (!conectorAtual) {
    return [...componentes, novoConector];
  }

  return componentes.map((item) =>
    isConectorItem(item) ? novoConector : item
  );
}

function removerConectoresDoKit(kit: any) {
  const componentes = kit?.componentes || [];
  const conectores = componentes.filter(isConectorItem);

  const valorConectores = conectores.reduce((acc: number, item: any) => {
    const precoUnitario = Number(
      FormatFields.desformatarNumeros(item.precoUnitario_item || 0)
    );
    const qtd = Number(item.qtd_item || 1);
    return acc + precoUnitario * qtd;
  }, 0);

  const precoKitAtual = Number(
    FormatFields.desformatarNumeros(kit.preco_kit || 0)
  );

  return {
    ...kit,
    preco_kit: Math.max(0, precoKitAtual - valorConectores),
    componentes: componentes.filter((item: any) => !isConectorItem(item)),
  };
}

function aplicarFiltroConectoresNosKits(
  kits: any[],
  distribuidores: any[],
  carregarConectores: string | undefined
) {
  if (carregarConectores !== "0") return kits;

  return kits.map((kit: any) => {
    const distribuidorKit = distribuidores?.find(
      (distribuidor: any) =>
        String(distribuidor.id_distribuidor) === String(kit.distribuidor)
    );

    if (distribuidorKit?.somenteKitsFechado_distribuidor == "0") {
      return removerConectoresDoKit(kit);
    }

    return kit;
  });
}

const KitsProposta = ({
  imgTelhados,
  form,
  parametros,
  blockNextStep,
  setStepInicializado,
  defaultValues,
  dadosCard,
  camposPersonalizados,
  setNextStepAction,
  camposPersonalizadosData,
  fabricantes,
}: {
  form: any;
  parametros: any;
  imgTelhados: any;
  blockNextStep: any;
  setStepInicializado: any;
  defaultValues: any;
  dadosCard: any;
  camposPersonalizados: any;
  setNextStepAction?: any;
  camposPersonalizadosData: any;
  fabricantes: any;
}) => {
  const {
    modulosSelecionados,
    totalModulos,
    tipo_bateria,
    kitEscolhido,
    // categoriaEscolhida: telhadoEscolhido,
    potenciaKwp,
    potencia_modulo,
    modulo,
    kitProprio,
    distribuidores,
    distribuidor,
    // fabricante,
    // fabricantes,
    categoriaEscolhida,
    //
    tipoLigacao_proposta,
    tipoLigacao_digitado_proposta,
    tipoTelhadoEscolhido,
    tensoes,
    tipo_inversor,
    tipo_string_inversor,
    tensao,
    marca_inversor,
    id_microInversor,
    calculo_capacidade_modulos_parametro,
    porcent_calculo_capacidade_modulos_parametro,
  } = form.control._formValues;

  const tipoLigacaoDigitadoValue =
    tipoLigacao_digitado_proposta?.value ?? tipoLigacao_digitado_proposta;

  const kitManual = kitProprio.value == "1";
  const [kitDistribuidores, setKitDistribuidores] = useState<any[]>([]);
  const [allKits, setAllKits] = useState<any>([]);
  const [potenciaFiltro, setPotenciaFiltro] = useState<any[]>([]);
  const [fabricanteSelecionado, setFabricanteSelecionado] = useState("0");
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [valor, setValor] = useState<number[]>([0, 0]);

  const [stringboxes, setStringboxes] = useState<any[]>([]);
  const [itensComp, setItensComp] = useState<any[]>([]);
  const [itensCompostos, setItensCompostos] = useState<any[]>([]);
  const [telhados, setTelhados] = useState<TiposTelhadoProps[]>([]);
  const [kitSelecionado, setKitSelecionado] = useState(
    kitEscolhido?.id_kit || -1
  );

  const [valorMaxDistribuidores, setValorMaxDistribuidores] = useState(0);
  const [valorMinDistribuidores, setValorMinDistribuidores] = useState(0);
  // const [optionsDistribuidores, setOptionsDistribuidores] = useState<any[]>([]);
  const [filteredDistribuidores, setFilteredDistribuidores] = useState<any[]>(
    []
  );

  const [potenciaRange, setPotenciaRange] = useState<number[]>([0, 0]);
  const [potenciaMin, setPotenciaMin] = useState(0);
  const [potenciaMax, setPotenciaMax] = useState(0);

  const [kitManualDimensionado, setKitManualDimensionado] = useState<any>();

  const [dimensionamentoError, setDimensionamentoError] = useState("");
  function convertName(name: string) {
    return (
      name
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .replace(/\s+/g, "_") + "_cp"
    );
  }
  useEffect(() => {
    if (!setNextStepAction || !form?.trigger) return;

    setNextStepAction(() => async () => {
      const values = form.getValues();

      // Validar apenas os campos personalizados obrigatórios do step atual
      const camposCpObrigatoriosDoStep = (camposPersonalizadosData || [])
        .filter((campo: any) => campo.obrigatorio_campo_personalizado === "1")
        .map((campo: any) => convertName(campo.nome_campo_personalizado));

      // Se não houver campos personalizados obrigatórios neste step, validação passa
      if (camposCpObrigatoriosDoStep.length === 0) {
        return true;
      }

      const isValid = await form.trigger(camposCpObrigatoriosDoStep);
      return isValid;
    });
  }, [JSON.stringify(camposPersonalizadosData)]);
  useEffect(() => {
    setFilteredDistribuidores(
      allKits.filter((kit: any) => {
        // potência filter (range)
        const kitPot =
          Number(kit.potencia_kit_distribuidor ?? kit.potencia_kit) || 0;
        if (
          potenciaRange &&
          (kitPot < potenciaRange[0] || kitPot > potenciaRange[1])
        )
          return false;

        // fabricante filter: allow "Todos" (0)
        if (
          fabricanteSelecionado &&
          !["0", "*"].includes(String(fabricanteSelecionado))
        ) {
          const codigo = String(fabricanteSelecionado);

          const kitFabricantes: string[] = [];
          if (kit.codFabricante_kit_distribuidor)
            kitFabricantes.push(String(kit.codFabricante_kit_distribuidor));
          if (kit.codFabricante_item)
            kitFabricantes.push(String(kit.codFabricante_item));
          if (kit.codFabricante) kitFabricantes.push(String(kit.codFabricante));
          if (Array.isArray(kit.inversores)) {
            kit.inversores.forEach((inv: any) => {
              if (inv.codFabricante_item)
                kitFabricantes.push(String(inv.codFabricante_item));
            });
          }

          if (!kitFabricantes.includes(codigo)) return false;
        }

        const precoKit = kit.preco_kit;
        return precoKit >= valor[0] && precoKit <= valor[1];
      })
    );
  }, [potenciaRange, allKits, valor, fabricanteSelecionado]);

  const setValue = form.setValue;

  const { perfil, usuario } = useAuth();

  const fetchItensKit = async () => {
    const stringboxesData = await listarItensKitsPorTipo("13");
    const itensCompData = await listarItensCompostos();
    const itensCompostosData = await listarItensKitsPorTipo("17");
    const conectoresData = await listarItensKitsPorTipo("3");
    return {
      stringboxesData,
      itensCompData,
      itensCompostosData,
      conectoresData,
    };
  };

  useEffect(() => {
    const loadData = async () => {
      blockNextStep(true);
      setStepInicializado(false);
      const { stringboxesData, itensCompData, itensCompostosData, conectoresData } =
        await fetchItensKit();
      setStringboxes(stringboxesData);
      setItensComp(itensCompData);
      setItensCompostos(itensCompostosData);
      await getKits(stringboxesData, itensCompData, itensCompostosData, conectoresData);
    };
    loadData();
  }, [potenciaKwp]);

  useEffect(() => {
    listarCategoriasTelhados().then((res) => {
      setTelhados(res);
    });
  }, []);

  // useEffect(() => {
  //   listarFabricantes()
  //     .then((res) => setFabricantes(res || []))
  //     .catch(() => setFabricantes([]));
  // }, []);

  const getNomeTelhadoSelecionado = () => {
    const telhadoId = tipoTelhadoEscolhido || categoriaEscolhida;

    // Tratando se telhadoId for um objeto com value
    const id = typeof telhadoId === "object" ? telhadoId?.value : telhadoId;

    const telhado = telhados.find(
      (item) => item.sigla_categoria_telhado === id
    );
    return telhado?.nome_categoria_telhado || "Não especificado";
  };

  async function getStringBox(
    stringboxesData: any,
    itensCompData: any,
    componentes: any
  ) {
    const stringItem = componentes.find((a: any) => a.tipo_item === "8");

    if (!stringItem) {
      console.warn("Nenhum componente com tipo_item === '8' encontrado");
      return [];
    }

    const { idStringCA_item, idStringCC_item, potencia_item } = stringItem;

    const stringboxesBD = stringboxesData
      .filter(
        (a: any) =>
          Boolean(Number(a.mostrarAut_item)) &&
          (tipoLigacao_proposta == a.fases_item || a.fases_item === "*") &&
          ((a.id_item === idStringCA_item && a.tipoString_item === "0") ||
            (a.id_item === idStringCC_item && a.tipoString_item === "1"))
      )
      .map((sb: any) => {
        const itensRelacionados = itensCompData.filter(
          (item: any) =>
            item.origem_itens_compostos === "stringbox" &&
            sb.id_item === item.cod_item_itens_compostos
        );
        const soma = itensRelacionados.reduce(
          (acc: any, item: any) =>
            acc + Number(item.precoTotalItem_itens_compostos || 0),
          0
        );
        let qtdItem =
          sb.tipoString_item === "1"
            ? stringItem["qtdStringCC_item"]
            : stringItem["qtdStringCA_item"];
        // if (
        //   tipoLigacao_proposta === "2" &&
        //   ["1", "2"].includes(parametros?.aviso_inversoresBi_parametro)
        // ) {
        //   qtdItem = "2";
        // }
        return {
          ...sb,
          itensComp: itensRelacionados,
          nome_tipo_item: "Stringbox",
          precoUnitario_item:
            sb.montagemSuprimento_item === "comprada"
              ? Number(sb.precoUnitario_item || 0)
              : soma,
          qtd_item: qtdItem,
          item_composto: "1",
          potencia_item,
        };
      });

    return stringboxesBD;
  }

  function resolverItensCompostosKit(
    itensCompData: any,
    itensCompostosData: any,
    componentes: any[],
    idDistribuidorKit?: string | number | null,
  ) {
    return montarItensCompostosAutomaticos(
      itensCompostosData,
      itensCompData,
      potenciaKwp,
      componentes,
      tipoLigacao_proposta,
      idDistribuidorKit,
    );
  }

  async function getKits(
    stringboxesData = stringboxes,
    itensCompData = itensComp,
    itensCompostosData = itensCompostos,
    conectoresData: any[] = []
  ) {
    setIsLoaded(false);
    blockNextStep(true);
    let diff;

    if (calculo_capacidade_modulos_parametro?.value === "2") {
      diff = parseFloat(porcent_calculo_capacidade_modulos_parametro) / 100;
    } else if (calculo_capacidade_modulos_parametro?.value === "1") {
      diff = 1;
    }
    if (kitManual) {
      const inversorAlteracao = Boolean(form.getValues("inversorAlteracao"));
      const componentesAtuais = form.getValues("componentesKit") || [];
      const possuiInversorManual = componentesAtuais.some(
        (item: any) => String(item?.tipo_item) === "8"
      );

      if (inversorAlteracao && possuiInversorManual) {
        const componentesPreservados = componentesAtuais.map((item: any) => {
          if (String(item?.tipo_item) === "9") {
            return { ...item, qtd_item: String(totalModulos || 0) };
          }
          return item;
        });

        setValue("componentesKit", componentesPreservados);
        setKitManualDimensionado(componentesPreservados);
        setValue("kitRequisitado", 1);
        blockNextStep(false);
        setIsLoaded(true);
        setIsLoading(false);
        return;
      }

      setDimensionamentoError("");
      return dimensionarKit({
        potencia_kit: potenciaKwp,
        tipo_bateria: tipo_bateria,
        tipo_kit: kitManual ? "0" : "1",
        calculo_capacidade: calculo_capacidade_modulos_parametro?.value,
        distribuidor: distribuidor.id_distribuidor,
        tipoTelhado: tipoTelhadoEscolhido,
        qtdModulos: totalModulos,
        porcentualAumento: diff || 0,
        caboPorPlaca: defaultValues.qtd_cabo_por_modulo_parametro,
        calculo_cabo: defaultValues.calculo_cabo_parametro || "0",
        orientacoes: form.control._formValues.distribuicaoDosModulos.length,
        // potenciaModulo: potencia_modulo,
        espessura: form.control._formValues.espessura_cabo,
        modulo,
        tipoStringInversor: tipo_string_inversor.value,
        tensoes: tensoes.map((tensao: any) => tensao.value),
        tipoLigacao: dadosCard.tipoLigacao_coleta,
        tipoLigacaoDigitado: tipoLigacaoDigitadoValue,
        marca_inversor: marca_inversor?.value,
        id_microInversor: id_microInversor?.value || "",
        tipo_negocio: dadosCard?.tipoNegocio_coleta,
      })
        .then(async (componentes) => {
          let componentesFilterByParamter = componentes.filter(
            (a: any) =>
              parametros.carregar_conectores_parametro !== "0" ||
              !isConectorItem(a)
          );

          if (parametros.carregar_conectores_parametro !== "0") {
            componentesFilterByParamter = ajustarConectoresComponentes(
              componentesFilterByParamter,
              distribuidor.id_distribuidor,
              kitManual ? "0" : "1",
              conectoresData
            );
          }

          const itensCompostosFiltrados = resolverItensCompostosKit(
            itensCompData,
            itensCompostosData,
            componentesFilterByParamter,
            distribuidor?.id_distribuidor
          );

          const inversorSelecionado = componentesFilterByParamter.find(
            (a: any) => a.tipo_item == "8"
          )?.id_item;

          // const itensCompostosFiltrados = itensCompostos.filter((item: any) => {
          //   const codInversor = String(item.codInversor_item ?? "").trim();

          //   if (!codInversor || codInversor === "*") {
          //     return true;
          //   }

          //   return String(codInversor) === String(inversorSelecionado ?? "");
          // });

          const stringbox = await getStringBox(
            stringboxesData,
            itensCompData,
            componentesFilterByParamter
          );
          const idsJaPresentes = new Set(
            componentesFilterByParamter.map((item: any) =>
              String(
                item.id_item ?? item.id_item_composto ?? item.cod_item_composto
              )
            )
          );

          const componentesAutomaticosNovos = [
            ...itensCompostosFiltrados,
            ...stringbox,
          ].filter((item: any) => {
            const idItem = String(
              item.id_item ?? item.id_item_composto ?? item.cod_item_composto
            );
            return !idsJaPresentes.has(idItem);
          });


          const componentesKitComOrigem = componentesAutomaticosNovos.map(
            (item: any) => ({
              ...item,
              automatico: true,
              origem_inversor_item: String(inversorSelecionado || ""),
              origensAutomaticas: String(inversorSelecionado || "")
                ? [
                    {
                      id_inversor: String(inversorSelecionado),
                      qtd: Number(item.qtd_item || 0) || 1,
                    },
                  ]
                : item.origensAutomaticas || [],
            })
          );

          const componentesKitCompletos = [
            ...componentesFilterByParamter,
            ...componentesKitComOrigem,
          ];
          setValue("kitRequisitado", 1);
          setValue("componentesKit", componentesKitCompletos);
          setKitManualDimensionado(componentesKitCompletos);
          blockNextStep(false);
        })
        .catch((err) => {
          setDimensionamentoError(err);
          console.error(err);
        })
        .finally(() => {
          setIsLoaded(true);
          setIsLoading(false);
        });
    } else {
      listarKits({
        potencia_kit: potenciaKwp,
        tipo_kit: kitManual ? "0" : "1",
        distribuidores: distribuidores?.map(
          (distribuidor: any) => distribuidor.id_distribuidor
        ),
        categoria: categoriaEscolhida,
        tipoTelhado: tipoTelhadoEscolhido,
        // fabricante: fabricante.id_fabricante,
        // fabricantes: fabricantes?.map(
        //   (fabricante: any) => fabricante.id_fabricante
        // ),
        qtdModulos: totalModulos,
        caboPorPlaca: defaultValues.qtd_cabo_por_modulo_parametro,
        calculo_cabo: defaultValues.calculo_cabo_parametro || "0",
        calculo_capacidade: calculo_capacidade_modulos_parametro?.value,
        orientacoes: form.control._formValues.distribuicaoDosModulos.length,
        tipoInversor: tipo_inversor?.value,
        fabricanteInversor: marca_inversor?.value,
        potenciaModulos: potencia_modulo,
        tensoes: tensoes.map((tensao: any) => tensao.value),
        // tensao: tensao?.value,
        tipoLigacao: dadosCard.tipoLigacao_coleta,
        tipoLigacaoDigitado: tipoLigacaoDigitadoValue,
        tipo_negocio: dadosCard?.tipoNegocio_coleta,
      })
        .then((res) => {
          res = aplicarFiltroConectoresNosKits(
            res,
            distribuidores,
            parametros.carregar_conectores_parametro
          );

          const precos = res.map((d: any) => {
            let preco = d.preco_kit;
            // Se o preço vem como string formatada (ex: "1.250,50"), converter para número
            if (typeof preco === "string") {
              preco = preco.replace(/\./g, "").replace(",", ".");
            }
            return parseFloat(preco);
          });

          if (precos.length > 0) {
            const menorPreco = Math.min(...precos);
            const maiorPreco = Math.max(...precos);
            setValor([menorPreco, maiorPreco]);
            setValorMaxDistribuidores(maiorPreco);
            setValorMinDistribuidores(menorPreco);
          }

          setAllKits(res);
          setFilteredDistribuidores(res);

          if (res) {
            const opcaoTodos = { label: "Todos", value: "0" };
            const potencias = Array.from(
              new Set(
                res.map(
                  (modulo: any) =>
                    modulo.potencia_kit_distribuidor ?? modulo.potencia_kit
                )
              )
            ).map((uniqueValue) => ({
              value: uniqueValue,
              label: uniqueValue,
            }));
            setPotenciaFiltro([opcaoTodos, ...potencias]);

            // compute numeric min/max potencia and initialize range
            const numericPots: any = Array.from(
              new Set(
                res
                  .map((m: any) =>
                    Number(m.potencia_kit_distribuidor ?? m.potencia_kit)
                  )
                  .filter((v: number) => !isNaN(v))
              )
            );
            if (numericPots.length > 0) {
              const minPot = Math.min(...numericPots);
              const maxPot = Math.max(...numericPots);
              setPotenciaMin(minPot);
              setPotenciaMax(maxPot);
              setPotenciaRange([minPot, maxPot]);
            } else {
              setPotenciaMin(0);
              setPotenciaMax(0);
              setPotenciaRange([0, 0]);
            }

            const dadosKitSelecionado = res.find(
              (kit: any) => kit.id_kit == kitSelecionado
            );
            if (dadosKitSelecionado) {
              const idKitSelecionado = dadosKitSelecionado.id_kit;
              // setKitSelecionado(dadosKitSelecionado);
              handleSelectKit(idKitSelecionado, res);
            }
          }
        })
        .finally(() => {
          setIsLoaded(true);
          setIsLoading(false);
        });
    }
  }

  const handleSelectKit = async (id: number, kits: any[] = allKits) => {
    let kit = kits.find((e: any) => e.id_kit == id);
    if (!kit) return;

    const [kitFiltrado] = aplicarFiltroConectoresNosKits(
      [kit],
      distribuidores,
      parametros.carregar_conectores_parametro
    );
    kit = kitFiltrado || kit;

    setValue("kitEscolhido", kit);
    setKitSelecionado(id);

    const inverterPrincipal = (kit?.componentes || []).find(
      (item: any) => String(item?.tipo_item) === "8"
    );

    const componentesKitSemDuplicados = (kit?.componentes || []).reduce(
      (acc: any[], componente: any) => {
        const idItem = String(
          componente.id_item ??
            componente.id_item_composto ??
            componente.cod_item_composto
        );
        const tipoItem = String(
          componente.tipo_item ?? componente.id_tipo_item ?? ""
        );
        const jaExiste = acc.some((item: any) => {
          const idExistente = String(
            item.id_item ?? item.id_item_composto ?? item.cod_item_composto
          );
          const tipoExistente = String(
            item.tipo_item ?? item.id_tipo_item ?? ""
          );
          return idExistente === idItem && tipoExistente === tipoItem;
        });

        if (!jaExiste) {
          const deveAnotarOrigem =
            String(componente?.item_composto) === "1" ||
            String(componente?.nome_tipo_item) === "Stringbox";

          acc.push(
            deveAnotarOrigem && inverterPrincipal
              ? {
                  ...componente,
                  automatico: true,
                  origem_inversor_item: String(inverterPrincipal.id_item || ""),
                  origensAutomaticas: [
                    {
                      id_inversor: String(inverterPrincipal.id_item || ""),
                      qtd: Number(componente.qtd_item || 0) || 1,
                    },
                  ],
                }
              : componente
          );
        }

        return acc;
      },
      []
    );

    const itensCompostosFiltrados = resolverItensCompostosKit(
      itensComp,
      itensCompostos,
      componentesKitSemDuplicados,
      kit?.distribuidor,
    );
    const stringbox = await getStringBox(
      stringboxes,
      itensComp,
      componentesKitSemDuplicados
    );
    setValue("componentesKit", [
      ...componentesKitSemDuplicados,
      ...itensCompostosFiltrados,
      ...stringbox,
    ]);
  };

  const handleChangeMarca = (selectedOption: any) => {
    const valor =
      selectedOption && typeof selectedOption === "object"
        ? selectedOption.value
        : selectedOption;

    if (valor === undefined || valor === null || valor === "") return;

    const selected = fabricantes.find((f: any) => f.id_fabricante == valor);

    setValue("marca_inversor", {
      value: valor,
      label:
        selectedOption?.label ||
        selected?.nome_fabricante ||
        (valor == "*" ? "Todos" : String(valor)),
    });
    setFabricanteSelecionado(String(valor));
  };

  useEffect(() => {
    if (marca_inversor?.value !== undefined && marca_inversor?.value !== null) {
      setFabricanteSelecionado(String(marca_inversor.value));
    }
  }, [marca_inversor]);
  const handleChange = (event: Event, newValue: number | number[]) => {
    const newValues = newValue as number[];
    setValor(newValues);
  };
  return (
    <div className=" max-sm:text-xs overflow-hidden">
      {isLoading ? (
        <div className="flex justify-center w-full ">
          <div className="max-sm:w-[90px]">
            <LoaderSun />
          </div>
        </div>
      ) : (
        <>
          {kitSelecionado == -1 && !kitManualDimensionado && (
            <div className="w-full flex flex-row-reverse">
              <div className="underline text-error">
                A próxima etapa será liberada ao Selecionar um Kit
              </div>
            </div>
          )}
          {camposPersonalizados}
          {!kitManual && (
            <div
              className={`flex justify-between bg-white dark:text-white dark:bg-form-input mb-3 rounded-sm p-2 items-center`}
            >
              <div className="lg:flex flex-col gap-2 hidden">
                <div className="flex items-center gap-2 flex-wrap">
                  {/* <div className="flex flex-col w-48">
                    <span className="text-sm">Potência Sistema</span>
                    <div className="px-2">
                      <div className="text-xs mb-1">
                        {potenciaRange && potenciaRange[0] === potenciaRange[1]
                          ? `${potenciaRange[0]} Wp`
                          : `${potenciaRange[0]} - ${potenciaRange[1]} Wp`}
                      </div>
                      <Slider
                        value={potenciaRange}
                        min={potenciaMin}
                        max={potenciaMax}
                        step={1}
                        valueLabelDisplay="auto"
                        onChange={(_e, newValue) => {
                          const vals = newValue as number[];
                          setPotenciaRange(vals);
                        }}
                        disabled={potenciaMax === potenciaMin}
                      />
                    </div>
                  </div> */}
                  <div className="flex flex-col min-w-60">
                    <InputSelectComponent
                      name="marca_inversor"
                      label="Fabricante Inversor"
                      formulario={form}
                      onChange={handleChangeMarca}
                      defaultValue={marca_inversor?.value || ""}
                      options={[
                        { label: "Todos", value: "*" },
                        ...fabricantes
                          .filter(
                            (e: any) =>
                              (e.tipos_itens_fabricante
                                ?.split(",")
                                .includes("8") ||
                                e.tipos_itens_fabricante == "*") &&
                              e.status_fabricante == "1"
                          )
                          .map((fabricante: any) => ({
                            ...fabricante,
                            value: fabricante.id_fabricante,
                            label: fabricante.nome_fabricante,
                          })),
                      ]}
                    />
                  </div>
                  {usuario.visualiza_custo_kit_usuario == "1" && (
                    <div className="w-52 items-center flex-col flex pt-3 px-2">
                      <span className="text-sm flex text-center">
                        {valor[0].toLocaleString("pt-BR", {
                          style: "currency",
                          currency: "BRL",
                        })}{" "}
                        -{" "}
                        {valor[1].toLocaleString("pt-BR", {
                          style: "currency",
                          currency: "BRL",
                        })}
                      </span>
                      <Slider
                        // className=" !py-0 !pt-4"
                        // onChange={handleChange}
                        // defaultValue={valor}
                        // max={valorMaxDistribuidores}
                        // min={valorMinDistribuidores}
                        // step={1}
                        className=" !py-0 !pt-4"
                        onChange={handleChange}
                        value={valor}
                        max={valorMaxDistribuidores}
                        min={valorMinDistribuidores}
                        step={1}
                      />
                    </div>
                  )}
                </div>
              </div>
              <div className="lg:hidden flex justify-end  md:justify-center items-center">
                <Popover>
                  <PopoverTrigger asChild>
                    <div className="flex items-center cursor-pointer rounded-full w-20 h-10 md:hover:bg-stroke justify-center text-sm">
                      Filtros
                      <CiFilter size={15} />
                    </div>
                  </PopoverTrigger>
                  <PopoverContent className="z-99999 md:w-70 w-55 dark:bg-boxdark-2 max-sm:-translate-x-8 p-1">
                    <div className="flex flex-col justify-center items-center">
                      <header className="text-center mb-3">Filtros</header>
                      <div className="md:px-8 grid gap-3 mt-3">
                        <span className="text-sm pl-2">Potência Sistema</span>
                        <div className="px-2 w-full">
                          <div className="text-xs mb-1">
                            {potenciaRange &&
                            potenciaRange[0] === potenciaRange[1]
                              ? `${potenciaRange[0]} Wp`
                              : `${potenciaRange[0]} - ${potenciaRange[1]} Wp`}
                          </div>
                          <Slider
                            value={potenciaRange}
                            min={potenciaMin}
                            max={potenciaMax}
                            step={1}
                            valueLabelDisplay="auto"
                            onChange={(_e, newValue) => {
                              const vals = newValue as number[];
                              setPotenciaRange(vals);
                            }}
                            disabled={potenciaMax === potenciaMin}
                          />
                        </div>
                        <div className="flex flex-col">
                          <InputSelectComponent
                            name="marca_inversor"
                            label="Fabricante Inversor"
                            formulario={form}
                            onChange={handleChangeMarca}
                            defaultValue={marca_inversor?.value || ""}
                            options={[
                              { label: "Todos", value: "*" },
                              ...fabricantes
                                .filter(
                                  (e: any) =>
                                    (e.tipos_itens_fabricante
                                      ?.split(",")
                                      .includes("8") ||
                                      e.tipos_itens_fabricante
                                        ?.split(",")
                                        .includes("*") ||
                                      e.tipos_itens_fabricante == null ||
                                      e.tipos_itens_fabricante == "8") &&
                                    e.status_fabricante == "1"
                                )
                                .map((fabricante: any) => ({
                                  ...fabricante,
                                  value: fabricante.id_fabricante,
                                  label: fabricante.nome_fabricante,
                                })),
                            ]}
                          />
                        </div>
                        <span className="text-sm pl-2">Marca distribuidor</span>
                        {/* <Combobox
                        handleChange={handleChangeDistribuidor}
                        defaultValue="0"
                        placeholder="Distribuidor"
                        canUnselect={false}
                        options={optionsDistribuidores}
                      /> */}
                        <div className="grid grid-cols-5 gap-2 px-4"></div>
                        <span className="text-sm text-center">
                          {valor[0].toLocaleString("pt-BR", {
                            style: "currency",
                            currency: "BRL",
                          })}{" "}
                          -{" "}
                          {valor[1].toLocaleString("pt-BR", {
                            style: "currency",
                            currency: "BRL",
                          })}
                        </span>
                        <Slider
                          className=" !py-0 !pt-4"
                          onChange={handleChange}
                          // defaultValue={valor}
                          value={valor}
                          max={valorMaxDistribuidores}
                          min={valorMinDistribuidores}
                          step={1}
                        />
                      </div>
                    </div>
                  </PopoverContent>
                </Popover>
              </div>
              <div>
                <div>Kits encontrados: {filteredDistribuidores.length}</div>
              </div>
            </div>
          )}
          {isLoaded ? (
            kitManual ? (
              kitManualDimensionado ? (
                <div className="w-full flex flex-row items-center justify-center py-5">
                  <div className="text-success">
                    Kit montado, prossiga com a edição dos componentes
                  </div>
                </div>
              ) : (
                <div className="w-full flex flex-row items-center  justify-center py-5">
                  <div className="text-error max-sm:px-3">
                    {dimensionamentoError ||
                      `Nehum kit encontrado, experimente mudar a quantidade de módulos, potência dos môdulos`}
                  </div>
                </div>
              )
            ) : (
              <>
                <div className="flex gap-2 flex-wrap justify-start h-[54vh] max-sm:h-[57vh] items-stretch overflow-auto">
                  {kitDistribuidores &&
                    filteredDistribuidores.length > 0 &&
                    filteredDistribuidores.map((item, index) => {
                      let kitAtualSelecionado = false;

                      // if (kitManual) {
                      kitAtualSelecionado = kitEscolhido
                        ? kitEscolhido.id_kit == item.id_kit
                        : false;
                      // } else {
                      //   kitAtualSelecionado = kitEscolhido
                      //     ? kitEscolhido.id_kit_distribuidor ==
                      //       item.id_kit_distribuidor
                      //     : false;
                      // }
                      if (kitAtualSelecionado) {
                        blockNextStep(false);
                        if (kitAtualSelecionado != kitSelecionado) {
                          setKitSelecionado(kitAtualSelecionado || -1);
                        }
                      }

                      return (
                        <div
                          key={index}
                          className="min-w-[340px] max-sm:text-xs lg:max-w-[340px] flex-1"
                        >
                          <div className="h-full">
                            <div
                              onClick={() => handleSelectKit(item.id_kit)}
                              className={`rounded-md bg-white max-h-[350px] h-full overflow-hidden
                              ${
                                !kitAtualSelecionado
                                  ? "hover:border-meta-3 dark:hover:border-meta-3  dark:border-strokedark dark:bg-boxdark"
                                  : kitAtualSelecionado
                                    ? "border-meta-3 dark:border-meta-3 border-[3px]"
                                    : "border-stroke dark:border-strokedark dark:"
                              }
                              [transform-style:preserve-3d] transition-all duration-500 relative cursor-pointer  border-2  shadow-default`}
                            >
                              <div className="inset-0 h-[100%]">
                                <div className="relative h-[22%]">
                                  <Image
                                    alt="Modulo"
                                    className="h-[100%]"
                                    src={photovoltaic}
                                    style={{
                                      objectFit: "cover",
                                    }}
                                  />
                                  <div className="self-center absolute bottom-0 ml-2  rounded-se-lg rounded-ss-lg flex items-center bg-primary text-white  p-2">
                                    <Building size={17} />
                                    {
                                      distribuidores.find(
                                        (distribuidor: any) =>
                                          distribuidor.id_distribuidor ==
                                          item.codDistribuidor_kit
                                      )?.nome_distribuidor
                                    }
                                    {/* Kit Manual */}
                                    {/* {kitManual
                                    ? "Kit Manual"
                                    : item.nome_distribuidor} */}
                                  </div>
                                  <div className="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
                                    ID: {item.id_kit}
                                  </div>
                                  {kitAtualSelecionado && (
                                    <div className="absolute right-2 bottom-2 p-[1px] text-success text-xl border border-success rounded-full border-3">
                                      <FaCheckCircle />
                                    </div>
                                  )}
                                </div>
                                <div className="p-3 h-[24%] overflow-hidden">
                                  <span className="font-bold text-sm h-[20%]">
                                    Descrição do Kit:
                                  </span>
                                  <div className="flex justify-between items-center h-[80%] gap-1">
                                    <span className="text-xs self-start overflow-auto h-[100%]">
                                      {item.descricao_kit}
                                      {/* {kitManual
                                      ? item.descricao_kit
                                      : item.descricao_kit_distribuidor} */}
                                    </span>
                                    <div className="grid">
                                      <div className="self-center rounded-lg mr-2 p-1 flex items-center border-bodydark text-white text-xs bg-success">
                                        <BsLightningChargeFill />
                                        {item.potencia_kit}
                                        {/* {kitManual
                                        ? item.potencia_kit
                                        : item.potencia_kit_distribuidor} */}
                                        Wp
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div className="px-2 py-1 h-[12%] border-t border-stroke dark:border-strokedark bg-gray-50 dark:bg-boxdark-2">
                                  <div className="flex items-center justify-center gap-2">
                                    <span className="text-xs px-2 py-0.5 bg-primary text-white rounded-full">
                                      Telhado
                                    </span>
                                    <span className="font-semibold text-xs text-primary dark:text-white">
                                      {getNomeTelhadoSelecionado()}
                                    </span>
                                  </div>
                                </div>
                                <div className="p-3 h-[42%] overflow-hidden">
                                  <div className="flex flex-col h-[100%]">
                                    <span className="font-bold h-[20%]">
                                      Componentes:
                                    </span>
                                    <div className="flex flex-col gap-1 h-[80%] overflow-auto">
                                      <div className="self-start rounded-lg p-1 overflow-auto">
                                        {/* {kitManual ? ( */}
                                        <div className="flex flex-col gap-1">
                                          {item["modulos"].map(
                                            (
                                              modulo: any,
                                              indexModulo: number
                                            ) => (
                                              <span key={indexModulo}>
                                                {`${modulo.qtd_item}x ${modulo.descricao_item}`}
                                              </span>
                                            )
                                          )}
                                          {item["inversores"].map(
                                            (
                                              inversor: any,
                                              indexInversor: number
                                            ) => (
                                              <span key={indexInversor}>
                                                {`${inversor.qtd_item}x ${inversor.descricao_item} de ${inversor.potencia_item}kWp`}
                                              </span>
                                            )
                                          )}
                                        </div>
                                        {/* ) : (
                                      <div className="grid">
                                        <span>
                                          {item.qtdModulos_kit_distribuidor}x{" "}
                                          {""}
                                          {item.descricao_modulo_distribuidor}
                                        </span>
                                        <span>
                                          {item.qtdInversor1_kit_distribuidor}
                                          x {""}
                                          {
                                            item.descricao_inversor_distribuidor
                                          }
                                        </span>
                                      </div>
                                    )} */}
                                      </div>
                                      <span className="font-semibold ">
                                        {usuario.visualiza_custo_kit_usuario ==
                                          "1" &&
                                          (() => {
                                            let preco =
                                              FormatFields.desformatarNumeros(
                                                item.preco_kit
                                              );
                                            // console.log(
                                            //   "preco Kit",
                                            //   preco,
                                            //   preco.toLocaleString("pt-BR", {
                                            //     style: "currency",
                                            //     currency: "BRL",
                                            //   })
                                            // );
                                            // Se o preço vem como string formatada (ex: "1.250,50"), converter para número
                                            // if (typeof preco === "string") {
                                            //   preco = preco
                                            //     .replace(/\./g, "")
                                            //     .replace(",", ".");
                                            // }
                                            return preco.toLocaleString(
                                              "pt-BR",
                                              {
                                                style: "currency",
                                                currency: "BRL",
                                              }
                                            );
                                          })()}
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                </div>
                {allKits.length == 0 ? (
                  <div className="w-full flex flex-row items-center justify-center py-5">
                    <div className="text-error max-sm:px-3">
                      Nehum kit encontrado, experimente mudar a quantidade de
                      módulos, potência dos môdulos
                    </div>
                  </div>
                ) : (
                  <div className="flex text-black mt-6 text-lg justify-center w-full ">
                    {
                      !(filteredDistribuidores.length > 0) &&
                        "Sem Kits para o filtro selecionado"
                      // (kitManual
                      //   ? "Sem kits cadastrados!"
                      //   : "Sem distribuidores para o filtro selecionado!")
                    }
                  </div>
                )}
              </>
            )
          ) : (
            <div className="flex justify-center w-full ">
              <div className="max-sm:w-[90px]">
                <LoaderSun />
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
};

export default KitsProposta;