import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ImgAwsGallery from "@/components/ImgAwsGallery/ImgAwsGallery";
import ModalComponente from "@/components/Modal/ModalComponente";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarProductsFromCategory } from "@/requests/CRUD/ColetaDados/listarProductsFromCategory";
import { listarTiposItensKit } from "@/requests/CRUD/ColetaDados/listarTiposItensKit";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import { listarTabelasPrecos } from "@/requests/CRUD/TabelaPreco/tabelaPreco";
import { formatarValor, FormatFields, GetForm, GetGallery } from "@/utils";
import {
  criarComponenteTabelaPreco,
  distribuidorCompativelTabelaPreco,
  listarLinhasTabelaPrecoParaSelecao,
  obterLabelCategoriaTelhado,
  SIGLAS_CATEGORIA_TELHADO,
  tabelaPrecoAtendeTelhado,
} from "@/utils/tabelaPrecos";
import { Slider } from "@mui/material";
import { Plus, Search } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { toast } from "react-toastify";

const NewItemComponentePropostaForm = ({
  submitAddItemKit,
  origem,
  dadosCard,
  dadosForm,
  componentesKit,
  distribuidor,
  distribuidorNativo,
  itemCompostos,
  tabelasPrecos = [],
  itensKitTabelaPreco = [],
  filtrosTabelaPreco,
  defaultFilters,
  tensaoPadraoOrigem,
  inversoresBD = [],
}: any) => {
  const DISTRIBUIDOR_RAFID_WEG_ID = "4";
  const isDistribuidorRafidWeg =
    String(distribuidor) === DISTRIBUIDOR_RAFID_WEG_ID;
  const distribuidorBloqueado = distribuidorNativo || isDistribuidorRafidWeg;

  const [productCategories, setProductCategories] = useState<any[]>([]);
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const [showResults, setShowResults] = useState(false);

  // const [selectedCategory, setSelectedCategory] = useState(0);
  const [selectedCategory, setSelectedCategory] = useState("8");
  const [tableKey, setTableKey] = useState(0);
  const [productInfo, setProductInfo] = useState<any>({});
  const [isAddingProduct, setIsAddingProduct] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [products, setProducts] = useState<any[]>([]);
  const [imagens, setImagens] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [fabricantes, setFabricantes] = useState<any[]>([]);
  const [potenciasDisponiveis, setPotenciasDisponiveis] = useState<number[]>([
    0, 0,
  ]);
  const [potenciasFiltro, setPotenciasFiltro] = useState<number[]>([0, 0]);
  const [productsFiltrados, setProductsFiltrados] = useState<any[]>([]);
  const [fabricantesFilter, setFabricantesFilter] = useState<any[]>([]);
  const [filtro, setFiltro] = useState<any>({});
  const [idsFiltros, setIdsFiltros] = useState<any>({});
  const [avisoTensao, setAvisoTensao] = useState<string>("");
  const { openGallery, setGallery } = GetGallery();
  const { handleSubmit, ...formItem } = GetForm();
  const formFiltro = GetForm();

  // tabelasPrecos (prop) vem de listarTabelasPrecosComponentes, que só traz
  // tabela com mostrarAut_tabela_preco = "1" (usado pro auto-match). Pro
  // picker manual o usuário precisa ver TODAS as tabelas ativas, então busca
  // à parte, sem esse filtro.
  const [todasTabelasPrecos, setTodasTabelasPrecos] = useState<any[]>([]);
  useEffect(() => {
    listarTabelasPrecos().then((res: any) =>
      setTodasTabelasPrecos(Array.isArray(res) ? res : [])
    );
  }, []);

  const idTipoTabelaPreco = useMemo(
    () =>
      String(
        productCategories.find(
          (category: any) => category.nome_tipo_item === "Tabela de Preço"
        )?.id_tipo_item ?? ""
      ),
    [productCategories]
  );
  const ehCategoriaTabelaPreco =
    !!idTipoTabelaPreco && selectedCategory === idTipoTabelaPreco;

  // Linhas de Tabela de Preço não são "produtos" do catálogo — são
  // combinações qtd. módulos + inversor(es) já precificadas. Mostra TODAS as
  // linhas de TODAS as tabelas ativas (sem filtrar por loja/distribuidor/
  // telhado do negócio atual — é seleção manual, o usuário decide) e deixa
  // filtrar por qtde de módulos / potência do sistema.
  const [filtroQtdModulosTabelaPreco, setFiltroQtdModulosTabelaPreco] =
    useState("");
  const [potenciasFiltroTabelaPreco, setPotenciasFiltroTabelaPreco] =
    useState<number[]>([0, 0]);
  // Defaults: Distribuidor vem do que já foi informado na aba Dados; Inversor
  // vem do que já está no kit (aba Componentes); Telhado começa em "Todos"
  // (sem valor prévio equivalente pra puxar).
  const [filtroDistribuidorTabelaPreco, setFiltroDistribuidorTabelaPreco] =
    useState(() => (distribuidor ? String(distribuidor) : ""));
  const [filtroTelhadoTabelaPreco, setFiltroTelhadoTabelaPreco] = useState("");
  const [filtroInversorTabelaPreco, setFiltroInversorTabelaPreco] = useState(
    () => {
      const inversorAtual = (componentesKit || []).find(
        (componente: any) => String(componente.tipo_item) === "8"
      );
      return inversorAtual ? String(inversorAtual.id_item) : "";
    }
  );

  const todasLinhasTabelaPreco = useMemo(() => {
    if (!ehCategoriaTabelaPreco) return [];

    return listarLinhasTabelaPrecoParaSelecao(todasTabelasPrecos).map(
      ({ tabela, linha }: any) => {
        const componente = criarComponenteTabelaPreco(
          tabela,
          linha,
          undefined,
          itensKitTabelaPreco,
          filtrosTabelaPreco?.id_telhado
        );

        return {
          ...componente,
          // Referência crua da tabela — o `tipoTelhado_item` resolvido acima
          // já reflete o telhado do NEGÓCIO atual (via filtrosTabelaPreco), não
          // o telhado escolhido no filtro manual abaixo. Pra checar
          // compatibilidade contra o filtro precisa da tabela original.
          _tabela: tabela,
          descricaoTabela_exibicao:
            tabela.descricao_tabela_preco || componente.descricao_item,
          idLinha_exibicao:
            linha.id_linha_tabela_preco ?? (linha as any).id_linha ?? "-",
          qtdModulos_exibicao:
            linha.qtd_modulos_linha ?? linha.qtd_modulos ?? 0,
          potenciaSistema_exibicao:
            linha.potencia_sistema_linha ?? linha.potencia_sistema ?? 0,
          inversores_exibicao: (linha.inversores || [])
            .map((inv: any) =>
              `${inv.qtd ?? inv.quantidade ?? 1} ${inv.descricao ?? inv.label ?? ""}`.trim()
            )
            .filter(Boolean)
            .join(" | "),
          precoUnitario_exibicao: formatarValor(
            Number(componente.precoUnitario_item || 0)
          ),
        };
      }
    );
  }, [
    ehCategoriaTabelaPreco,
    todasTabelasPrecos,
    itensKitTabelaPreco,
    filtrosTabelaPreco,
  ]);

  const potenciasDisponiveisTabelaPreco = useMemo(() => {
    if (!todasLinhasTabelaPreco.length) return [0, 0];
    return todasLinhasTabelaPreco.reduce(
      (acc: number[], curr: any) => {
        const potencia = Number(curr.potenciaSistema_exibicao) || 0;
        return [Math.min(acc[0], potencia), Math.max(acc[1], potencia)];
      },
      [Infinity, 0]
    );
  }, [todasLinhasTabelaPreco]);

  useEffect(() => {
    setPotenciasFiltroTabelaPreco(potenciasDisponiveisTabelaPreco);
  }, [potenciasDisponiveisTabelaPreco]);

  const linhasTabelaPrecoDisponiveis = useMemo(() => {
    return todasLinhasTabelaPreco.filter((item: any) => {
      if (
        filtroQtdModulosTabelaPreco &&
        String(item.qtdModulos_exibicao) !== String(filtroQtdModulosTabelaPreco)
      ) {
        return false;
      }
      const potencia = Number(item.potenciaSistema_exibicao) || 0;
      if (
        potencia < potenciasFiltroTabelaPreco[0] ||
        potencia > potenciasFiltroTabelaPreco[1]
      ) {
        return false;
      }
      if (
        filtroDistribuidorTabelaPreco &&
        !distribuidorCompativelTabelaPreco(
          item.codDistribuidor_item,
          filtroDistribuidorTabelaPreco
        )
      ) {
        return false;
      }
      if (
        filtroTelhadoTabelaPreco &&
        !tabelaPrecoAtendeTelhado(item._tabela, filtroTelhadoTabelaPreco)
      ) {
        return false;
      }
      if (
        filtroInversorTabelaPreco &&
        !(item.inversores || []).some(
          (inv: any) => String(inv.id_item) === String(filtroInversorTabelaPreco)
        )
      ) {
        return false;
      }
      return true;
    });
  }, [
    todasLinhasTabelaPreco,
    filtroQtdModulosTabelaPreco,
    potenciasFiltroTabelaPreco,
    filtroDistribuidorTabelaPreco,
    filtroTelhadoTabelaPreco,
    filtroInversorTabelaPreco,
  ]);

  function filtrarPorMultiSelecao(
    row: any,
    columnId: string,
    filterValue: any[]
  ) {
    if (!row.original[columnId]) {
      return true;
    }

    if (
      !Array.isArray(filterValue) ||
      filterValue.length === 0 ||
      filterValue.some(
        (optionSelected) =>
          optionSelected?.value === "*" ||
          optionSelected?.label === row.original[columnId]
      )
    ) {
      return true;
    }

    return false;
  }

  useEffect(() => {
    setPotenciasFiltro(potenciasDisponiveis);
  }, [potenciasDisponiveis]);

  function getDistribuidorSelecionadoId() {
    return String(
      filtro?.codDistribuidor_item?.id_distribuidor ||
        (typeof filtro?.codDistribuidor_item === "string" ||
        typeof filtro?.codDistribuidor_item === "number"
          ? filtro?.codDistribuidor_item
          : null) ||
        (distribuidorBloqueado ? distribuidor : null) ||
        dadosForm?.distribuidor?.value ||
        ""
    );
  }

  function getTipoOrigemSelecionada() {
    return (
      filtro?.tipoOrigem_item?.value ||
      (isDistribuidorRafidWeg || distribuidorNativo
        ? "1"
        : dadosForm?.distribuidor?.isNativo_distribuidor != "0"
          ? "1"
          : "0")
    );
  }

  useEffect(() => {
    if (distribuidorBloqueado && distribuidor) {
      setFiltro((prev: any) => ({
        ...prev,
        codDistribuidor_item: { id_distribuidor: String(distribuidor) },
        tipoOrigem_item:
          isDistribuidorRafidWeg || distribuidorNativo
            ? { label: "Nativo", value: "1" }
            : { label: "Cadastrado", value: "0" },
      }));
      return;
    }

    if (!dadosForm?.distribuidor) return;

    setFiltro((prev: any) => ({
      ...prev,
      codDistribuidor_item: dadosForm["distribuidor"]["value"],
    }));
  }, [dadosForm, distribuidor, distribuidorBloqueado]);

  useEffect(() => {
    setProductsFiltrados(
      selectedCategory == "8"
        ? products.filter(
            (product) =>
              +product.potencia_item >= potenciasFiltro[0] &&
              +product.potencia_item <= potenciasFiltro[1]
          )
        : products
    );
  }, [potenciasFiltro, products]);

  useEffect(() => {
    const distribuidorSelecionadoId = getDistribuidorSelecionadoId();
    const tipoOrigemSelecionada = getTipoOrigemSelecionada();

    listarProductsFromCategory({
      id: selectedCategory,
      distribuidor: distribuidorSelecionadoId,
      tipoOrigem_item: tipoOrigemSelecionada,
    }).then((res) => {
      const codigosFabricantesInversor = new Set(
        (res || [])
          .map((item: any) => String(item?.codFabricante_item || "").trim())
          .filter(Boolean)
      );

      const novosFabricantes = fabricantes.filter((fabricante: any) => {
        const codigoInterno = String(
          fabricante?.codInterno_fabricante || ""
        ).trim();
        const codigoId = String(fabricante?.id_fabricante || "").trim();
        return (
          codigosFabricantesInversor.has(codigoInterno) ||
          codigosFabricantesInversor.has(codigoId)
        );
      });
      setFabricantesFilter(novosFabricantes);
    });
  }, [
    fabricantes,
    selectedCategory,
    filtro?.codDistribuidor_item,
    filtro?.tipoOrigem_item,
    dadosForm?.distribuidor?.value,
  ]);

  useEffect(() => {
    setGallery(
      imagens.map((imagem) => ({
        src: imagem.src,
        name: imagem?.imagem_item?.split("/").pop(),
      }))
    );
  }, [imagens]);

  useEffect(() => {
    listarDistribuidores().then((res) =>
      setDistribuidores(
        res.filter((distribuidor: any) => distribuidor.status_distribuidor == 1)
      )
    );
    if (distribuidorBloqueado || dadosCard?.tipoNegocio_coleta == "3") {
      listarDistribuidoresNativos().then(setDistribuidoresNativos);
    }

    if (
      dadosCard &&
      dadosCard.tipoNegocio_coleta === "3" &&
      dadosForm.tipo_ampliacao.value === "0"
    ) {
      setSelectedCategory("1");

      listarTiposItensKit().then((res) => {
        console.log("tipos itens", res);
        setProductCategories(res);
        listarProductsFromCategory({
          id: "1",
          distribuidor: distribuidorBloqueado
            ? distribuidor
            : dadosForm["distribuidor"]["value"],
          tipoOrigem_item: isDistribuidorRafidWeg || distribuidorNativo
            ? "1"
            : dadosForm["distribuidor"]["isNativo_distribuidor"] != "0"
              ? "1"
              : "0",
        }).then((res) => {
          setProducts([...res]);
        });
      });

      listarFabricantes()
        .then((res) =>
          setFabricantes(
            res.filter((fabricante: any) =>
              fabricante.tipos_itens_fabricante?.split(",")?.includes("1")
            )
          )
        )
        .finally(() => setIsLoaded(true));
      return;
    } else {
      setSelectedCategory("8");

      listarTiposItensKit().then((res) => {
        console.log("tipos itens", res);

        setProductCategories(res);
        listarProductsFromCategory({
          id: "8",
          distribuidor: distribuidorBloqueado
            ? distribuidor
            : dadosForm?.distribuidor?.value || distribuidor,
          tipoOrigem_item: isDistribuidorRafidWeg || distribuidorNativo
            ? "1"
            : dadosForm?.distribuidor?.isNativo_distribuidor != "0"
              ? "1"
              : "0",
        }).then((res) => {
          setProducts([...res]);

          setPotenciasDisponiveis(
            res.length > 0
              ? res.reduce(
                  (acc: number[], curr: any) => {
                    const valorMin =
                      +curr.potencia_item < acc[0]
                        ? +curr.potencia_item
                        : acc[0];
                    const valorMax =
                      +curr.potencia_item > acc[1]
                        ? +curr.potencia_item
                        : acc[1];

                    return [valorMin, valorMax];
                  },
                  [Infinity, 0]
                )
              : [0, 0]
          );
        });
      });
      listarFabricantes()
        .then((res) =>
          setFabricantes(
            res.filter((fabricante: any) =>
              fabricante.tipos_itens_fabricante?.split(",")?.includes("8")
            )
          )
        )
        .finally(() => setIsLoaded(true));
    }
  }, []);
  const [columns, setColumns] = useState(() => {
    if (
      dadosCard?.tipoNegocio_coleta === "3" &&
      !componentesKit.some((comp: any) => comp.tipo_item === "9")
    ) {
      return [
        { header: "Nome", accessorKey: "descricao_item" },
        { header: "Imagem", accessorKey: "imagem" },
        {
          header: "Fabricante",
          accessorKey: "codFabricante_item",
          filterFn: filtrarPorMultiSelecao,
        },
      ];
    }

    return [
      // { header: "ID", accessorKey: "id_item" },
      { header: "Nome", accessorKey: "descricao_item" },
      { header: "Imagem", accessorKey: "imagem" },

      {
        header: "Potência",
        accessorKey: "potencia_item",
        filterFn: filtrarPorMultiSelecao,
      },
      {
        header: "Tipo de Ligação",
        accessorKey: "fases_item",
        filterFn: filtrarPorMultiSelecao,
      },

      {
        header: "Distribuidor",
        accessorKey: "codDistribuidor_item",
        filterFn: filtrarPorMultiSelecao,
      },
      {
        header: "Fabricante",
        accessorKey: "codFabricante_item",
        filterFn: filtrarPorMultiSelecao,
      },
      {
        header: "Tipo de Inversor",
        accessorKey: "tipoInversor_item",
        filterFn: filtrarPorMultiSelecao,
      },
      {
        header: "Tipo de String",
        accessorKey: "tipoStringInversor_item",
        filterFn: filtrarPorMultiSelecao,
      },
      {
        header: "Tensão",
        accessorKey: "tensoes_item",
        filterFn: filtrarPorMultiSelecao,
      },
      {
        header: "Origem",
        accessorKey: "tipoOrigem_item",
        filterFn: filtrarPorMultiSelecao,
      },
    ];
  });

  function handleChangePotenciaFiltro(
    event: Event,
    newValue: number | number[]
  ) {
    const newValues = newValue as number[];
    setPotenciasFiltro(newValues);
  }

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

  const tiposStringsInversores = [
    { value: "microinversor", label: "Microinversor" },
    { value: "inversor_on_grid", label: "INVERSOR STRING ON-GRID" },
    { value: "inversor_off_grid", label: "INVERSOR STRING OFF-GRID" },
    { value: "inversor_hibrido", label: "INVERSOR STRING HÍBRIDO" },
    // { value: "inversor_string_microinversor", label: "Inversor String + Microinversor" },
  ];

  const formatProducts = async (data: any) => {
    setImagens((prev) => {
      return [...data].map((e: any, index: number) => ({
        ...e,
        src: "",
      }));
    });

    const newData = [...data].map((e: any, index: number) => {
      e.fases_item = fases.find((fase) => fase.value == e.fases_item)?.label;
      e.tipoInversor_item =
        e.tipoInversor_item == "micro_inversor"
          ? "Microinversor"
          : "Inversor de Parede";
      e.precoUnitario_item = formatarValor(+e.precoUnitario_item);
      e.tipoStringInversor_item = tiposStringsInversores.find(
        (tipo) => tipo.value == e.tipoStringInversor_item
      )?.label;

      e.potencia_item = FormatFields.formatarNumero(e.potencia_item) + "kW";

      e.nome_tipo_item = productCategories.find(
        (category) => category.id_tipo_item == selectedCategory
      )?.nome_tipo_item;
      e.codDistribuidor_item =
        e.codDistribuidor_item == 0
          ? "Sem Fabricante"
          : [
              ...(e["tipoOrigem_item"] == "1"
                ? distribuidoresNativos
                : distribuidores),
            ].find(
              (distribuidor) =>
                distribuidor.id_distribuidor == e["codDistribuidor_item"]
            )?.nome_distribuidor || "";
      e.codFabricante_item =
        e.codFabricante_item == 0
          ? "Sem Fabricante"
          : fabricantes?.find(
              (fabricante) => fabricante.id_fabricante == e.codFabricante_item
            )?.nome_fabricante;
      if (e.imagem_item && e.imagem_item !== null) {
        e.imagem = (
          <ImgAwsGallery
            key={index}
            caminho={e.imagem_item}
            indexImagem={index}
            setImagens={setImagens}
            onClick={() => openGallery(index, false)}
          />
        );
      }

      return e;
    });
    return [...newData];
  };

  function change_codDistribuidor_item(e: any) {
    setFiltro((prev: any) => ({
      ...prev,
      codDistribuidor_item: e?.id_distribuidor,
      tipoOrigem_item:
        e?.isNativo == "1"
          ? {
              label: "Nativo",
              value: "1",
            }
          : {
              label: "Cadastrado",
              value: "0",
            },
    }));
  }

  function change_simple(name: string, e: any) {
    setFiltro((prev: any) => ({
      ...prev,
      [name]: e,
    }));
  }

  function change_tensoes_item(e: any) {
    setFiltro((prev: any) => ({ ...prev, tensoes_item: e }));
    // Aviso quando tensão selecionada é diferente da tensão padrão do projeto origem
    if (tensaoPadraoOrigem) {
      const tensoesSelecionadas = Array.isArray(e)
        ? e.map((t: any) => t.value).join(",")
        : e?.value;
      if (
        tensoesSelecionadas &&
        !tensoesSelecionadas.includes("*") &&
        !tensoesSelecionadas.includes(tensaoPadraoOrigem)
      ) {
        const mensagem = `⚠️ A tensão selecionada (${tensoesSelecionadas}V) é diferente da tensão do projeto origem (${tensaoPadraoOrigem}V)`;
        setAvisoTensao(mensagem);
        toast.warning(mensagem);
      } else {
        setAvisoTensao("");
      }
    }
  }

  function resolveDistribuidorFromForm(formValue: any) {
    if (!formValue)
      return { distribuidorId: undefined, tipoOrigemValue: undefined };

    if (typeof formValue === "string") {
      const [tipoOrigemValue, distribuidorId] = formValue.split("-");
      return {
        distribuidorId: distribuidorId || undefined,
        tipoOrigemValue: tipoOrigemValue || undefined,
      };
    }

    return {
      distribuidorId:
        formValue.id_distribuidor ||
        formValue.value ||
        formValue.codDistribuidor_item,
      tipoOrigemValue:
        formValue.isNativo == "1" || formValue.isNativo === 1 ? "1" : "0",
    };
  }

  function handleFiltrar() {
    const values = formFiltro.getValues();
    const distribuidorForm = values?.codDistribuidor_item;

    if (!distribuidorForm) {
      toast.error("Selecione um distribuidor");
      return;
    }

    const { distribuidorId, tipoOrigemValue } =
      resolveDistribuidorFromForm(distribuidorForm);

    setFiltro((prev: any) => ({
      ...prev,
      codDistribuidor_item: distribuidorId,
      tipoOrigem_item: tipoOrigemValue
        ? {
            label: tipoOrigemValue === "1" ? "Nativo" : "Cadastrado",
            value: tipoOrigemValue,
          }
        : prev.tipoOrigem_item,
      codFabricante_item: values?.codFabricante_item || prev.codFabricante_item,
      fases_item: values?.fases_item || prev.fases_item,
      tipoInversor_item: values?.tipoInversor_item || prev.tipoInversor_item,
      tipoStringInversor_item:
        values?.tipoStringInversor_item || prev.tipoStringInversor_item,
      tensoes_item: values?.tensoes_item || prev.tensoes_item,
    }));

    setSelectedCategory(String(values?.categoria ?? selectedCategory));

    listarTiposItensKit().then((res) => {
      setProductCategories(res);
      listarProductsFromCategory({
        id: String(values?.categoria ?? selectedCategory),
        distribuidor: distribuidorId || dadosForm["distribuidor"]["value"],
        tipoOrigem_item:
          tipoOrigemValue ||
          (isDistribuidorRafidWeg || distribuidorNativo
            ? "1"
            : dadosForm["distribuidor"]["isNativo_distribuidor"] != "0"
              ? "1"
              : "0"),
      }).then((res) => {
        setProducts(res);

        const categoriaAtual = String(values?.categoria ?? selectedCategory);
        setPotenciasDisponiveis(
          categoriaAtual == "8" && res.length > 0
            ? res.reduce(
                (acc: number[], curr: any) => {
                  const valorMin =
                    +curr.potencia_item < acc[0] ? +curr.potencia_item : acc[0];
                  const valorMax =
                    +curr.potencia_item > acc[1] ? +curr.potencia_item : acc[1];

                  return [valorMin, valorMax];
                },
                [Infinity, 0]
              )
            : [0, 0]
        );
      });
    });

    setShowResults(true);
  }

  function submitEdicaoItem(data: any) {
    setIsLoading(true);
    let arrInfo = productInfo;
    if (Object.keys(productInfo).length === 0) {
      arrInfo = data.rowOriginal;
    }
    return submitAddItemKit({
      ...arrInfo,
      qtd_item: +data.quantity,
    }).finally(() => setIsLoading(false));
  }

  return (
    <div>
      <div className="flex flex-col gap-4" onClick={(e) => e.stopPropagation()}>
        <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
          <div className="grid grid-cols-1 gap-3 lg:grid-cols-12">
            <div className="lg:col-span-4">
              <InputSelectComponent
                label="Categoria"
                options={[
                  ...productCategories
                    .filter((category) => {
                      if (dadosCard && dadosCard.tipoNegocio_coleta === "3") {
                        if (dadosForm.tipo_ampliacao.value === "0") {
                          return (
                            category.id_tipo_item != "8" &&
                            category.id_tipo_item != "9"
                          );
                        }
                        return category.id_tipo_item != "9";
                      }
                      return category.id_tipo_item != "9";
                    })
                    .map((category) => ({
                      value: category.id_tipo_item,
                      label: category.nome_tipo_item,
                    })),
                ]}
                onChange={(e: any) => {
                  let newColumns: any[] = [
                    { header: "ID", accessorKey: "id_item" },
                    { header: "Código Interno", accessorKey: "codItem_item" },
                    { header: "Nome", accessorKey: "descricao_item" },
                    { header: "Imagem", accessorKey: "imagem" },
                    {
                      header: "Fabricante",
                      accessorKey: "codFabricante_item",
                      filterFn: filtrarPorMultiSelecao,
                    },
                  ];

                  if (e.value == "17") {
                    newColumns = [
                      { header: "Nome", accessorKey: "descricao_item" },
                      { header: "ID", accessorKey: "id_item" },
                      { header: "Código Interno", accessorKey: "codItem_item" },
                      {
                        header: "Preço Item",
                        accessorKey: "precoUnitario_item",
                      },
                    ];
                  }
                  if (e.value == "8") {
                    newColumns = [
                      { header: "ID", accessorKey: "id_item" },
                      { header: "Código Interno", accessorKey: "codItem_item" },
                      { header: "Nome", accessorKey: "descricao_item" },
                      { header: "Imagem", accessorKey: "imagem" },
                      {
                        header: "Potência",
                        accessorKey: "potencia_item",
                        filterFn: filtrarPorMultiSelecao,
                      },
                      {
                        header: "Tipo de Ligação",
                        accessorKey: "fases_item",
                        filterFn: filtrarPorMultiSelecao,
                      },
                      {
                        header: "Fabricante",
                        accessorKey: "codFabricante_item",
                        filterFn: filtrarPorMultiSelecao,
                      },
                      {
                        header: "Tipo de Inversor",
                        accessorKey: "tipoInversor_item",
                        filterFn: filtrarPorMultiSelecao,
                      },
                      {
                        header: "Tipo de String",
                        accessorKey: "tipoStringInversor_item",
                        filterFn: filtrarPorMultiSelecao,
                      },
                      {
                        header: "Tensão",
                        accessorKey: "tensoes_item",
                        filterFn: filtrarPorMultiSelecao,
                      },
                    ];
                  }
                  setColumns(newColumns);
                  setSelectedCategory(e.value);
                  setTableKey(tableKey + 1);
                  if (e.value === "17") {
                    setProducts(itemCompostos);
                    return;
                  }
                  if (String(e.value) === idTipoTabelaPreco) {
                    return;
                  }

                  const distribuidorSelecionadoId = getDistribuidorSelecionadoId();
                  const tipoOrigemSelecionada = getTipoOrigemSelecionada();

                  listarProductsFromCategory({
                    id: e.value,
                    distribuidor: distribuidorSelecionadoId,
                    tipoOrigem_item: tipoOrigemSelecionada,
                  }).then((res) => {
                    let response = res;
                    if (e.value == "13") {
                      response = res.filter(
                        (item: any) =>
                          item.fases_item === defaultFilters.fases_item
                      );
                    }
                    setProducts([...response]);

                    setPotenciasDisponiveis(
                      e.value == "8" && res.length > 0
                        ? res.reduce(
                            (acc: number[], curr: any) => {
                              const valorMin =
                                +curr.potencia_item < acc[0]
                                  ? +curr.potencia_item
                                  : acc[0];
                              const valorMax =
                                +curr.potencia_item > acc[1]
                                  ? +curr.potencia_item
                                  : acc[1];

                              return [valorMin, valorMax];
                            },
                            [Infinity, 0]
                          )
                        : [0, 0]
                    );
                  });
                }}
                width="w-full"
                defaultValue={selectedCategory}
              />
            </div>

            <div className="lg:col-span-4">
              <Input
                name="id_item"
                label="ID"
                formulario={formFiltro}
                width="w-full"
                onChange={(e) => {
                  setIdsFiltros((prev: any) => ({
                    ...prev,
                    id_item: e?.target?.value,
                  }));
                }}
              />
            </div>

            <div className="lg:col-span-4">
              <Input
                name="codItem_item"
                label="Código interno"
                formulario={formFiltro}
                width="w-full"
                onChange={(e) => {
                  setIdsFiltros((prev: any) => ({
                    ...prev,
                    codItem_item: e?.target?.value,
                  }));
                }}
              />
            </div>
          </div>

          {selectedCategory != "99" && !ehCategoriaTabelaPreco && (
            <div className="mt-3 rounded-xl border border-slate-200 bg-slate-50/80 p-3 dark:border-slate-700 dark:bg-slate-800/50">
              <div className="grid grid-cols-1 gap-3 lg:grid-cols-12">
                <div className="lg:col-span-4">
                  <InputSelectComponent
                    name="codDistribuidor_item"
                    label="Distribuidor"
                    formulario={formFiltro}
                    options={[
                      ...distribuidoresNativos.map((d) => ({
                        ...d,
                        isNativo: "1",
                      })),
                      ...distribuidores,
                    ].map((distribuidor) => ({
                      ...distribuidor,
                      value: `${distribuidor.isNativo == "1" ? "1" : "0"}-${distribuidor.id_distribuidor}`,
                      label: distribuidor.nome_distribuidor,
                    }))}
                    formatOptionLabel={(d) =>
                      dadosCard?.tipoNegocio_coleta != "3" ? (
                        d.label
                      ) : (
                        <div>{`${d.label} ${d.value == "*" ? "" : `(${d.isNativo == "1" ? "Nativo" : "Cadastrado"})`}`}</div>
                      )
                    }
                    width="w-full"
                    onChange={change_codDistribuidor_item}
                    defaultValue={
                      distribuidorBloqueado
                        ? isDistribuidorRafidWeg || distribuidorNativo
                          ? `1-${distribuidor}`
                          : `0-${dadosForm?.["distribuidor"]?.["value"]}`
                        : `0-${dadosForm?.["distribuidor"]?.["value"]}`
                    }
                    disabled={distribuidorBloqueado}
                  />
                </div>

                <div className="lg:col-span-4">
                  <InputSelectComponent
                    name="codFabricante_item"
                    label="Fabricantes"
                    formulario={formFiltro}
                    isMulti
                    options={[
                      { value: "*", label: "Todos" },
                      ...fabricantesFilter.map((cargo) => ({
                        value: cargo.id_fabricante,
                        label: cargo.nome_fabricante,
                      })),
                    ]}
                    width="w-full"
                    onChange={(e: any) => {
                      change_simple("codFabricante_item", e);
                    }}
                    defaultValue={
                      defaultFilters && defaultFilters.codFabricante_item
                    }
                  />
                </div>

                {selectedCategory == "8" && (
                  <>
                    <div className="lg:col-span-4">
                      <InputSelectComponent
                        name="fases_item"
                        label="Fases"
                        formulario={formFiltro}
                        isMulti
                        options={[
                          { value: "*", label: "Todos" },
                          ...fases.filter((fase) => fase.value != "2"),
                        ]}
                        width="w-full"
                        onChange={(e: any) => {
                          setFiltro((prev: any) => ({
                            ...prev,
                            fases_item: e,
                          }));
                        }}
                        defaultValue={
                          defaultFilters && defaultFilters.fases_item
                        }
                      />
                    </div>
                    <div className="lg:col-span-4">
                      <InputSelectComponent
                        name="tipoInversor_item"
                        label="Tipo de Inversor"
                        formulario={formFiltro}
                        isMulti
                        options={[
                          { value: "*", label: "Todos" },
                          {
                            value: "inversor_parede",
                            label: "Inversor de Parede",
                          },
                          { value: "micro_inversor", label: "Microinversor" },
                        ]}
                        width="w-full"
                        onChange={(e: any) => {
                          setFiltro((prev: any) => ({
                            ...prev,
                            tipoInversor_item: e,
                          }));
                        }}
                        defaultValue={
                          defaultFilters && defaultFilters.tipoInversor_item
                        }
                      />
                    </div>
                    <div className="lg:col-span-4">
                      <InputSelectComponent
                        name="tipoStringInversor_item"
                        label="Tipo de String"
                        formulario={formFiltro}
                        isMulti
                        options={[
                          { value: "*", label: "Todos" },
                          ...tiposStringsInversores,
                        ]}
                        width="w-full"
                        onChange={(e: any) => {
                          setFiltro((prev: any) => ({
                            ...prev,
                            tipoStringInversor_item: e,
                          }));
                        }}
                        defaultValue={
                          defaultFilters &&
                          defaultFilters.tipoStringInversor_item
                        }
                      />
                    </div>
                    <div className="lg:col-span-4">
                      <InputSelectComponent
                        name="tensoes_item"
                        label="Tensões (V)"
                        formulario={formFiltro}
                        isMulti
                        options={[
                          { value: "*", label: "Todas" },
                          { label: "110", value: "110" },
                          { label: "115", value: "115" },
                          { label: "120", value: "120" },
                          { label: "127", value: "127" },
                          { label: "208", value: "208" },
                          { label: "220", value: "220" },
                          { label: "240", value: "240" },
                          { label: "254", value: "254" },
                          { label: "380", value: "380" },
                          { label: "440", value: "440" },
                        ]}
                        width="w-full"
                        onChange={(e: any) => {
                          setFiltro((prev: any) => ({
                            ...prev,
                            tensoes_item: e,
                          }));
                          if (tensaoPadraoOrigem) {
                            const tensoesSelecionadas = Array.isArray(e)
                              ? e.map((t: any) => t.value).join(",")
                              : e?.value;
                            if (
                              tensoesSelecionadas &&
                              !tensoesSelecionadas.includes("*") &&
                              !tensoesSelecionadas.includes(tensaoPadraoOrigem)
                            ) {
                              const mensagem = `⚠️ A tensão selecionada (${tensoesSelecionadas}V) é diferente da tensão do projeto origem (${tensaoPadraoOrigem}V)`;
                              setAvisoTensao(mensagem);
                              toast.warning(mensagem);
                            } else {
                              setAvisoTensao("");
                            }
                          }
                        }}
                        defaultValue={
                          defaultFilters && defaultFilters.tensoes_item
                        }
                      />
                    </div>
                    <div className="lg:col-span-4">
                      <div className="flex w-full max-w-[420px] flex-col gap-2 rounded-xl border border-dashed border-slate-300 bg-white p-3 dark:border-slate-600 dark:bg-slate-900/60">
                        <div className="flex items-center justify-between gap-3">
                          <div className="text-sm font-medium text-slate-700 dark:text-slate-200">
                            Potência
                          </div>
                          <span className="text-xs text-slate-500 dark:text-slate-400">
                            {potenciasFiltro[0].toLocaleString("pt-BR", {
                              style: "currency",
                              currency: "BRL",
                            })}{" "}
                            -{" "}
                            {potenciasFiltro[1].toLocaleString("pt-BR", {
                              style: "currency",
                              currency: "BRL",
                            })}
                          </span>
                        </div>
                        <Slider
                          className="!py-0 !pt-2"
                          onChange={handleChangePotenciaFiltro}
                          value={potenciasFiltro}
                          max={potenciasDisponiveis[1]}
                          min={potenciasDisponiveis[0]}
                          step={1}
                        />
                      </div>
                    </div>
                  </>
                )}
              </div>

              <div className="mt-4 flex justify-end">
                <Button
                  type="button"
                  className="bg-success gap-2 rounded-md px-8 py-2 text-white shadow-sm transition hover:brightness-95"
                  onClick={handleFiltrar}
                >
                  <Search size={18} /> Filtrar
                </Button>
              </div>
            </div>
          )}

          {ehCategoriaTabelaPreco && (
            <div className="mt-3 rounded-xl border border-slate-200 bg-slate-50/80 p-3 dark:border-slate-700 dark:bg-slate-800/50">
              <div className="grid grid-cols-1 gap-3 lg:grid-cols-12">
                <div className="lg:col-span-4">
                  <Input
                    label="Qtde Módulos"
                    mascara="numerico"
                    width="w-full"
                    defaultValue={filtroQtdModulosTabelaPreco}
                    onChange={(e: any) =>
                      setFiltroQtdModulosTabelaPreco(
                        FormatFields.formatarNumerico(e.target.value)
                      )
                    }
                  />
                </div>
                <div className="lg:col-span-4">
                  <div className="flex w-full max-w-[420px] flex-col gap-2 rounded-xl border border-dashed border-slate-300 bg-white p-3 dark:border-slate-600 dark:bg-slate-900/60">
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-sm font-medium text-slate-700 dark:text-slate-200">
                        Potência do Sistema (kWp)
                      </div>
                      <span className="text-xs text-slate-500 dark:text-slate-400">
                        {FormatFields.formatarNumero(
                          potenciasFiltroTabelaPreco[0]
                        )}{" "}
                        - {FormatFields.formatarNumero(
                          potenciasFiltroTabelaPreco[1]
                        )}
                      </span>
                    </div>
                    <Slider
                      className="!py-0 !pt-2"
                      onChange={(_: Event, newValue: number | number[]) =>
                        setPotenciasFiltroTabelaPreco(newValue as number[])
                      }
                      value={potenciasFiltroTabelaPreco}
                      max={potenciasDisponiveisTabelaPreco[1]}
                      min={potenciasDisponiveisTabelaPreco[0]}
                      step={0.1}
                    />
                  </div>
                </div>
                <div className="lg:col-span-4">
                  <InputSelectComponent
                    label="Distribuidor"
                    options={[
                      { value: "", label: "Todos" },
                      ...distribuidoresNativos.map((d: any) => ({
                        value: d.id_distribuidor,
                        label: d.nome_distribuidor,
                      })),
                      ...distribuidores.map((d: any) => ({
                        value: d.id_distribuidor,
                        label: d.nome_distribuidor,
                      })),
                    ]}
                    width="w-full"
                    onChange={(e: any) =>
                      setFiltroDistribuidorTabelaPreco(e?.value ?? "")
                    }
                    defaultValue={filtroDistribuidorTabelaPreco}
                  />
                </div>
                <div className="lg:col-span-4">
                  <InputSelectComponent
                    label="Tipo de Telhado"
                    options={[
                      { value: "", label: "Todos" },
                      ...SIGLAS_CATEGORIA_TELHADO.map((sigla) => ({
                        value: sigla,
                        label: obterLabelCategoriaTelhado(sigla),
                      })),
                    ]}
                    width="w-full"
                    onChange={(e: any) =>
                      setFiltroTelhadoTabelaPreco(e?.value ?? "")
                    }
                    defaultValue=""
                  />
                </div>
                <div className="lg:col-span-4">
                  <InputSelectComponent
                    label="Inversor"
                    options={[
                      { value: "", label: "Todos" },
                      ...inversoresBD.map((inv: any) => ({
                        value: inv.id_item,
                        label: inv.descricao_item,
                      })),
                    ]}
                    width="w-full"
                    onChange={(e: any) =>
                      setFiltroInversorTabelaPreco(e?.value ?? "")
                    }
                    defaultValue={filtroInversorTabelaPreco}
                  />
                </div>
              </div>
            </div>
          )}
        </section>

        {isLoaded ? (
          tableKey >= 0 &&
          (ehCategoriaTabelaPreco ? (
            <ReactTable
              key={`tabela-preco-${tableKey}`}
              columns={[
                { header: "Tabela", accessorKey: "descricaoTabela_exibicao" },
                { header: "ID Linha", accessorKey: "idLinha_exibicao" },
                { header: "Qtde Mod", accessorKey: "qtdModulos_exibicao" },
                {
                  header: "Potência Sistema (kWp)",
                  accessorKey: "potenciaSistema_exibicao",
                },
                { header: "Inversor(es)", accessorKey: "inversores_exibicao" },
                { header: "Preço", accessorKey: "precoUnitario_exibicao" },
              ]}
              formatFunction={async (data: any) => data}
              listFunction={async () => new Promise((resolve) => resolve([]))}
              data={linhasTabelaPrecoDisponiveis}
              idCol="id_item"
              pageName="Linha de Tabela de Preço"
              tableDivClassName="overflow-auto"
              actionButtons={(
                data: any,
                updateTable: any,
                setIsLoading: any,
                { rowOriginal }: any
              ) => [
                {
                  className: `navButton text-black dark:text-white`,
                  onClick: () => {
                    setProductInfo(rowOriginal);
                    formItem.setValue("quantity", "1");
                    setIsAddingProduct(true);
                  },
                  content: <Plus strokeWidth={3} />,
                },
              ]}
            />
          ) : selectedCategory === "8" ? (
            showResults ? (
              <ReactTable
                key={tableKey}
                columns={columns}
                formatFunction={formatProducts}
                listFunction={async () => new Promise((resolve) => resolve([]))}
                data={productsFiltrados}
                idCol="id_item"
                pageName="Produto"
                tableDivClassName="overflow-auto"
                actionButtons={(
                  data: any,
                  updateTable: any,
                  setIsLoading: any,
                  { rowOriginal }: any
                ) => [
                  {
                    className: `navButton text-black dark:text-white`,
                    onClick: (e: any) => {
                      if (
                        data.tipo_item === "13" &&
                        !rowOriginal.item_composto
                      ) {
                        rowOriginal.item_composto = 1;
                      }
                      setProductInfo(rowOriginal);
                      formItem.setValue("quantity", "1");
                      if (
                        data.tipo_item === "9" &&
                        dadosCard?.tipoNegocio_coleta === "3"
                      ) {
                        return submitEdicaoItem({
                          rowOriginal,
                          quantity: dadosForm.quantidade_modulos_ampliacao,
                        });
                      }
                      setIsAddingProduct(true);
                    },
                    content: <Plus strokeWidth={3} />,
                  },
                ]}
                filters={{ ...filtro, ...idsFiltros }}
                manualFilters
              />
            ) : null
          ) : (
            <ReactTable
              key={tableKey}
              columns={columns}
              formatFunction={formatProducts}
              listFunction={async () => new Promise((resolve) => resolve([]))}
              data={productsFiltrados}
              idCol="id_item"
              pageName="Produto"
              tableDivClassName="overflow-auto"
              actionButtons={(
                data: any,
                updateTable: any,
                setIsLoading: any,
                { rowOriginal }: any
              ) => [
                {
                  className: `navButton text-black dark:text-white`,
                  onClick: (e: any) => {
                    if (data.tipo_item === "13" && !rowOriginal.item_composto) {
                      rowOriginal.item_composto = 1;
                    }
                    setProductInfo(rowOriginal);

                    const inversor = componentesKit?.find(
                      (item: any) => item?.tipo_item == "8"
                    );
                    let qtd_item = "1";
                    if (rowOriginal?.id_item == inversor?.idStringCA_item) {
                      qtd_item = inversor?.qtdStringCA_item || "1";
                    } else if (
                      rowOriginal?.id_item == inversor?.idStringCC_item
                    ) {
                      qtd_item = inversor?.qtdStringCC_item || "1";
                    }
                    formItem.setValue(
                      "quantity",
                      String(qtd_item) == "1"
                        ? rowOriginal.item_composto
                          ? "1"
                          : String(qtd_item)
                        : String(qtd_item)
                    );
                    if (
                      data.tipo_item === "9" &&
                      dadosCard?.tipoNegocio_coleta === "3"
                    ) {
                      return submitEdicaoItem({
                        rowOriginal,
                        quantity: dadosForm.quantidade_modulos_ampliacao,
                      });
                    }
                    setIsAddingProduct(true);
                  },
                  content: <Plus strokeWidth={3} />,
                },
              ]}
              filters={{ ...filtro, ...idsFiltros }}
              manualFilters
            />
          ))
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}

        {isAddingProduct && (
          <ModalComponente
            hasForm={false}
            header={productInfo.descricao_item}
            defaultW="w-[400px]"
            opened={isAddingProduct}
            onClose={() => setIsAddingProduct(false)}
            hasSaveButton={false}
          >
            <div className="flex flex-col gap-3">
              <div>
                <Input
                  name="quantity"
                  label="Quantidade"
                  formulario={formItem}
                  disabled={
                    productInfo.item_composto && productInfo.tipo_item !== "13"
                  }
                  // defaultValue={productInfo.item_composto ? "1" : ""}
                  // defaultValue={
                  //   productInfo?.id_item ==
                  //   componentesKit?.find((item: any) => item?.tipo_item == "8")
                  //     ?.idStringCA_item
                  //     ? componentesKit?.find(
                  //         (item: any) => item?.tipo_item == "8",
                  //       )?.qtdStringCA_item || "1"
                  //     : productInfo?.id_item ==
                  //         componentesKit?.find(
                  //           (item: any) => item?.tipo_item == "8",
                  //         )?.idStringCC_item
                  //       ? componentesKit?.find(
                  //           (item: any) => item?.tipo_item == "8",
                  //         )?.qtdStringCC_item || "1"
                  //       : productInfo.item_composto
                  //         ? "1"
                  //         : ""
                  // }
                  onKeyDown={(e: any) => {
                    e.stopPropagation();
                    if (e.key.includes("Enter")) {
                      e.preventDefault();
                      handleSubmit(submitEdicaoItem)(e);
                    }
                  }}
                  mascara="numerico"
                  required
                  error="Informe a quantidade"
                />
              </div>
              <div className="flex flex-row justify-end gap-2">
                <Button
                  loading={isLoading}
                  onClick={handleSubmit(submitEdicaoItem)}
                >
                  Confirmar
                </Button>
                <Button
                  className="bg-error"
                  onClick={() => setIsAddingProduct(false)}
                >
                  Cancelar
                </Button>
              </div>
            </div>
          </ModalComponente>
        )}
      </div>
    </div>
  );
};

export default NewItemComponentePropostaForm;