import LoaderSun from "@/components/common/Loader/LoaderSun";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarCategoriasTelhados } from "@/requests/CRUD/CategoriasTelhado/listarCategoriaTelhado";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import { cadastrarItens } from "@/requests/CRUD/KitManual/cadastroKitManual";
import { editarItens } from "@/requests/CRUD/KitManual/editarKitManual";
import { listagemItens } from "@/requests/CRUD/KitManual/listarKitManual";
import { useAuth } from "@/src/contexts/authContext";
import {
  filtrarPorMultiSelecao,
  filtrarPorTexto,
  FormatFields,
  GetForm,
} from "@/utils";
import _ from "lodash";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import {
  MdEdit,
  MdInfo,
  MdOutlineToggleOff,
  MdOutlineToggleOn,
} from "react-icons/md";
import Swal from "sweetalert2";
import FormCabo from "./FormCabo";

const ConsultaCabo = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const [espessurasItem, setEspessurasItem] = useState<any>([]);

  const [fabricantes, setFabricantes] = useState<any[]>([]);
  const [fabricantesTodos, setFabricantesTodos] = useState<any[]>([]);
  const [distribuidorSelecionadoCsv, setDistribuidorSelecionadoCsv] =
    useState<string>("");
  const [categorias, setCategorias] = useState<any[]>([]);
  const [filtro, setFiltro] = useState<any>({});

  const formFiltro = GetForm();
  const dados = [
    "id_item",
    "status_item",
    "codItem_item",
    "sku_item",
    "nome_fabricante",
    "codDistribuidor_item",
    "tipoCabo_item",
    "espessura_item",
    "cor_item",
    "descricao_item",
    "precoUnitario_item",
    "garantia_item",
    "tipoOrigem_item",
  ];
  useEffect(() => {
    // Carregue fabricantes, distribuidores, etc normalmente
    Promise.all([
      listarFabricantes({ tipo_item: "2" }).then((res) => {
        setFabricantesTodos(res || []);
        setFabricantes(res || []);
      }),
      listarDistribuidores().then((res) =>
        setDistribuidores(
          res.filter(
            (distribuidor: any) => distribuidor.isFornecedor_distribuidor == "0"
          )
        )
      ),
      listarDistribuidoresNativos().then(setDistribuidoresNativos),
      listarCategoriasTelhados().then(setCategorias),
    ]).then(() => setIsLoaded(true));

    // Carregue as espessuras só UMA vez:
    listagemItens("cabos", { tipoOrigem_item: "*" }).then((res) => {
      setEspessurasItem(
        Array.from(
          new Set(
            res
              .filter((res: any) => res.espessura_item !== null)
              .map((res: any) => res.espessura_item)
          )
        ).map((item) => ({
          label: item,
          value: item,
        }))
      );
    });
  }, []);

  useEffect(() => {
    if (distribuidorSelecionadoCsv === "") {
      setFabricantes(fabricantesTodos);
      return;
    }

    const distribuidoresSelecionados = (
      filtro?.codDistribuidor_item || []
    ).filter((d: any) => d?.value != "*");
    const idsNativosSelecionados = new Set(
      distribuidoresSelecionados
        .filter((d: any) => d?.isNativo == "1")
        .map((d: any) => String(d?.value || "").split("-")[1] || "")
        .filter(Boolean)
    );
    const idsCadastradosSelecionados = new Set(
      distribuidoresSelecionados
        .filter((d: any) => d?.isNativo != "1")
        .map((d: any) => String(d?.value || "").split("-")[1] || "")
        .filter(Boolean)
    );

    listagemItens("cabos", { tipoOrigem_item: "*" }).then((res) => {
      const itensFiltradosPorDistribuidor = (res || []).filter((item: any) => {
        const idDistribuidorItem = String(
          item?.codDistribuidor_item || ""
        ).trim();
        if (!idDistribuidorItem) return false;

        const origemItem = String(item?.tipoOrigem_item || "").trim();
        if (origemItem === "1") {
          return idsNativosSelecionados.has(idDistribuidorItem);
        }
        if (origemItem === "0") {
          return idsCadastradosSelecionados.has(idDistribuidorItem);
        }

        return (
          idsNativosSelecionados.has(idDistribuidorItem) ||
          idsCadastradosSelecionados.has(idDistribuidorItem)
        );
      });

      const codigosFabricantes = new Set(
        itensFiltradosPorDistribuidor
          .map((item: any) => String(item?.codFabricante_item || "").trim())
          .filter(Boolean)
      );
      const nomesFabricantes = new Set(
        itensFiltradosPorDistribuidor
          .map((item: any) =>
            String(item?.nome_fabricante || "")
              .trim()
              .toLowerCase()
          )
          .filter(Boolean)
      );

      const novosFabricantes = fabricantesTodos.filter((fabricante: any) => {
        const codigoInterno = String(
          fabricante?.codInterno_fabricante || ""
        ).trim();
        const codigoId = String(fabricante?.id_fabricante || "").trim();
        const nome = String(fabricante?.nome_fabricante || "")
          .trim()
          .toLowerCase();
        return (
          codigosFabricantes.has(codigoInterno) ||
          codigosFabricantes.has(codigoId) ||
          nomesFabricantes.has(nome)
        );
      });

      setFabricantes(novosFabricantes);
    });
  }, [
    distribuidorSelecionadoCsv,
    fabricantesTodos,
    filtro?.codDistribuidor_item,
  ]);

  // Agora, listagemItensTotal é apenas:
  const listagemItensTotal = async () => {
    return listagemItens("cabos", { tipoOrigem_item: "*" });
  };
  const columns = dados.map((e) => {
    let header = _.capitalize(e).replaceAll("_item", "").replaceAll("_", " ");
    header = header == "Coditem" ? "Código Interno" : header;
    header = header == "Ultimaatualizacao" ? "Ultima Atualização" : header;
    header = header == "Precounitario" ? "Preço Unitário" : header;
    header = header == "Coddistribuidor" ? "Distribuidor/Fornecedor" : header;
    header = header == "Tipocabo" ? "Tipo Cabo" : header;
    header = header == "CorItem" ? "Cor do Item" : header;
    header = header == "Tipoorigem" ? "Origem" : header;
    // header = header == "EspessuraItem" ? "Cor do Item" : header;

    return {
      header: header,
      accessorKey: e,
      filterFn: ["agrupamento_modulos_item"].includes(e)
        ? filtrarPorTexto
        : filtrarPorMultiSelecao,
    };
  });

  const onSubmitFunction = async (data: FieldValues) => {
    return cadastrarItens(data);
  };

  const sendEditarItens = async (data: any) => {
    return editarItens(data);
  };

  const formatFunction = (arr: any) => {
    return arr.map((e: any) => {
      e["precoUnitario_item"] =
        "R$" + FormatFields.formatarNumero(e["precoUnitario_item"]);

      e["codDistribuidor_item"] =
        [
          ...(e["tipoOrigem_item"] == "1"
            ? distribuidoresNativos
            : distribuidores),
        ].find(
          (distribuidor) =>
            distribuidor.id_distribuidor == e["codDistribuidor_item"]
        )?.nome_distribuidor || "";
      e["tipoCabo_item"] =
        [
          { label: "Cabo Solar", value: "0" },
          { label: "Cabo Elétrico", value: "1" },
        ].find((cabo) => cabo.value == e["tipoCabo_item"])?.label || "";
      e["tipoOrigem_item"] =
        e["tipoOrigem_item"] == "1" ? "Nativo" : "Cadastrado";
      return e;
    });
  };

  return isLoaded ? (
    <>
      <div className="flex flex-row gap-2 flex-wrap pb-3">
        <InputSelectComponent
          name="codDistribuidor_item"
          label="Distribuidores/Fornecedores"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            ...[
              ...distribuidoresNativos.map((d) => ({
                ...d,
                isNativo: "1",
              })),
              ...distribuidores,
            ].map((distribuidor) => ({
              ...distribuidor,
              value: `${distribuidor.isNativo == "1" ? "1" : "0"}-${distribuidor.id_distribuidor}`,
              label: distribuidor.nome_distribuidor,
            })),
          ]}
          formatOptionLabel={(distribuidor) => (
            <div>{`${distribuidor.label} ${distribuidor.value == "*" ? "" : `(${distribuidor.isNativo == "1" ? "Nativo" : "Cadastrado"})`}`}</div>
          )}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            const idsDistribuidores = (e || [])
              .filter((d: any) => d?.value != "*")
              .map((d: any) => String(d?.value || "").split("-")[1] || "")
              .filter(Boolean)
              .join(",");

            setDistribuidorSelecionadoCsv(idsDistribuidores);
            setFiltro((prev: any) => ({
              ...prev,
              codDistribuidor_item: e,
              tipoOrigem_item: [
                ...(e?.some((d: any) => d?.value == "*" || d?.isNativo == "1")
                  ? [
                      {
                        label: "Nativo",
                        value: "1",
                      },
                    ]
                  : []),
                ...(e?.some((d: any) => d?.value == "*" || d?.isNativo != "1")
                  ? [
                      {
                        label: "Cadastrado",
                        value: "0",
                      },
                    ]
                  : []),
              ],
            }));
          }}
        />
        <InputSelectComponent
          name="codFabricante_item"
          label="Fabricantes"
          infoMessage="Atenção! Nesta lista mostra apenas os Fabricante de Cabos que tenha Cabos cadastrados para os Distribuidores selecionados."
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            ...fabricantes.map((fabricante) => ({
              ...fabricante,
              codDistribuidor_fabricante:
                fabricante.codDistribuidor_fabricante ||
                distribuidorSelecionadoCsv,
              value: fabricante.id_fabricante,
              label: fabricante.nome_fabricante,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({ ...prev, nome_fabricante: e }));
          }}
        />
        <InputSelectComponent
          name="status_item"
          label="Status"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            { value: "1", label: "Ativo" },
            { value: "0", label: "Inativo" },
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({ ...prev, status_item: e }));
          }}
        />
        <InputSelectComponent
          name="tipoCabo_item"
          label="Tipo cabo"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            { label: "Cabo Solar", value: "0" },
            { label: "Cabo Elétrico", value: "1" },
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({ ...prev, tipoCabo_item: e }));
          }}
        />
        <InputSelectComponent
          name="cor_item"
          label="Cor do Cabo"
          formulario={formFiltro}
          isMulti
          options={[
            { label: "Preto", value: "Preto" },
            { label: "Vermelho", value: "Vermelho" },
            ...(filtro?.tipoCabo_item
              ?.map((res: any) => res.value)
              .includes("1")
              ? [
                  { label: "Verde", value: "Verde" },
                  { label: "Azul", value: "Azul" },
                  { label: "Amarelo", value: "Amarelo" },
                  { label: "Branco", value: "Branco" },
                ]
              : []),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({ ...prev, cor_item: e }));
          }}
        />
        <InputSelectComponent
          name="espessura_item"
          label="Espessura do Cabo"
          formulario={formFiltro}
          isMulti
          options={espessurasItem}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({ ...prev, espessura_item: e }));
          }}
        />
        <InputSelectComponent
          name="tipoOrigem_item_filtro"
          label="Origem"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            { value: "1", label: "Nativo" },
            { value: "0", label: "Cadastrado" },
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({ ...prev, tipoOrigem_item: e }));
          }}
        />
      </div>
      <ReactTable
        columns={columns}
        listFunction={listagemItensTotal}
        idCol="id_item"
        isActiveCol="status_item"
        // canEdit
        formatFunction={formatFunction}
        actionButtons={(
          rowData: any,
          updateTable: any,
          setIsLoading: any,
          {
            idCol,
            isActive,
            isActiveCol,
            pageName,
            editFunction,
            rowOriginal,
            openEdit,
          }: any
        ) => [
          {
            title: "Editar",
            className: `navButton buttonWarning`,
            onClick: (e: any) => {
              return openEdit(rowOriginal);
            },
            content:
              rowOriginal?.tipoOrigem_item == "0" ? <MdEdit /> : undefined,
          },
          {
            className: `navButton ${isActive ? "buttonSuccess" : "buttonDanger"}`,

            onClick: (e: any) => {
              handleSweetAlert(
                {
                  icon: "warning",
                  title: `${!isActive ? "Ativar" : "Desativar"} ${pageName}`,
                  html: `Tem certeza que deseja <b>${!isActive ? "Ativar" : "Desativar"}</b> o registro ${rowData[idCol]}?`,
                },
                async () => {
                  rowData["precoUnitario_item"] =
                    FormatFields.desformatarNumeros(
                      rowData["precoUnitario_item"]
                    );

                  rowData["parametro"] = "cabo";
                  rowData["parametro_coluna"] = "cabos";
                  rowData["parametro_anexo"] = "imagem_item";
                  rowData["subpasta_aws"] = "Cabo/AnexoCabo";
                  rowData["mudar_status"] = 1;
                  rowData["id_cliente"] = session.id_empresa_usuario;
                  rowData[isActiveCol] = !isActive ? "1" : "0";

                  return editFunction(rowData).then(() => updateTable());
                }
              );
            },
            content:
              rowOriginal?.tipoOrigem_item == "0" ? (
                isActive ? (
                  <MdOutlineToggleOn />
                ) : (
                  <MdOutlineToggleOff />
                )
              ) : undefined,
          },
          {
            title: "Nativo",
            className: `navButton buttonWarning`,
            onClick: (e: any) => {
              Swal.fire({
                icon: "info",
                title: `Item de Origem Nativa`,
                html: `Este item é de origem nativa, ou seja, é compartilhado entre as empresas e não pode ser editado ou desativado. Para sugerir alterações, entre em contato com o suporte.`,
              });
            },
            content:
              rowOriginal?.tipoOrigem_item == "1" ? <MdInfo /> : undefined,
          },
        ]}
        manualFilters
        createFunction={onSubmitFunction}
        editFunction={sendEditarItens}
        Form={FormCabo}
        pageName="Cabo"
        filters={filtro}
      />
    </>
  ) : (
    <div className="flex justify-center w-full">
      <LoaderSun />
    </div>
  );
};

export default ConsultaCabo;