import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import {
  atualizarItensCompostos,
  gravarItensCompostos,
} from "@/requests/CRUD/ItemComposto/cadastrarItem";
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, FormatFields, GetForm } from "@/utils";
import _ from "lodash";
import { Eye, EyeOff } from "lucide-react";
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 FormStringBox from "./FormStringBox";

const ConsultaStringBox = () => {
  const { valuesSession } = useAuth();
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const [fabricantes, setFabricantes] = useState<any[]>([]);
  const [fabricantesTodos, setFabricantesTodos] = useState<any[]>([]);
  const [distribuidorSelecionadoCsv, setDistribuidorSelecionadoCsv] =
    useState<string>("");
  const [filtro, setFiltro] = useState<any>({});
  const [isLoaded, setIsLoaded] = useState(false);
  const [dadosItens, setDadosItens] = useState<any[]>([]);
  const [isVisible, setIsVisible] = useState<Record<number, number>>({});
  const [dadosFiltrados, setDadosFiltrados] = useState<any>([]);

  const formFiltro = GetForm();
  const { session } = valuesSession();
  const dados = [
    "id_item",
    "status_item",
    "codItem_item",
    "sku_item",
    "codFabricante_item",
    "nome_fabricante",
    "montagemSuprimento_item",
    "fases_item",
    "tipoString_item",
    "correnteEntrada_item",
    "correnteSaida_item",
    "codDistribuidor_item",
    "precoUnitario_item",
    "descricao_item",
    "garantia_item",
    "tipoOrigem_item",
  ];
  const columns = dados.map((e) => {
    let header = _.capitalize(e).replaceAll("_item", "").replaceAll("_", " ");
    header = header == "Coditem" ? "Código Interno" : header;
    header = header == "Correnteentrada" ? "Corrente de Entrada" : header;
    header = header == "Correntesaida" ? "Corrente de Saída" : header;
    header = header == "Ultimaatualizacao" ? "Ultima Atualização" : header;
    header = header == "Montagemsuprimento" ? "Suprimento" : header;
    header = header == "Precounitario" ? "Preço Unitário" : header;
    header = header == "Codfabricante" ? "Cod Fabricante" : header;
    header = header == "Tipostring" ? "Tipo Stringbox" : header;
    header = header == "Coddistribuidor" ? "Distribuidor/Fornecedor" : header;
    header = header == "Tipoorigem" ? "Origem" : header;
    return {
      header: header,
      accessorKey: e,
      filterFn: ["correnteEntrada_item", "correnteSaida_item"].includes(e)
        ? filtrarPorRange
        : filtrarPorMultiSelecao,
    };
  });
  function filtrarPorRange(row: any, columnId: string, filterValue: any) {
    if (!row.original[columnId]) {
      return true;
    }
    const cellValue = parseFloat(row.original[columnId]);
    if (isNaN(cellValue)) return false;

    const min =
      filterValue?.min !== undefined ? parseFloat(filterValue.min) : undefined;
    const max =
      filterValue?.max !== undefined ? parseFloat(filterValue.max) : undefined;

    if (min !== undefined && max !== undefined) {
      return cellValue >= min && cellValue <= max;
    }

    if (min !== undefined) {
      return cellValue >= min;
    }

    if (max !== undefined) {
      return cellValue <= max;
    }

    return true;
  }
  const onSubmitFunction = async (data: FieldValues) => {
    const itensCompostos = data.itensCompostos;
    delete data.itensCompostos;
    return cadastrarItens(data).then((res) => {
      const dados = {
        itensCompostos: itensCompostos || [],
        origemItemComposto: "stringbox",
        idItemComposto: res.id_item,
      };
      gravarItensCompostos(dados);
      listagemItensTotal();
    });
  };

  const sendEditarItens = async (data: any) => {
    const itensCompostos = data.itensCompostos;

    delete data.itensCompostos;

    const dados = {
      arrItemCompostos: itensCompostos || [],
      origemItemComposto: "stringbox",
      idItemComposto: data.id_item,
    };

    return editarItens(data).then(() => {
      atualizarItensCompostos(dados);
      listagemItensTotal();
    });
  };
  const listagemItensTotal = async () => {
    const res = await listagemItens("stringbox", { tipoOrigem_item: "*" });
    setDadosItens(res);
  };
  useEffect(() => {
    const filteredData = dadosItens.filter((item) => {
      return Object.entries(filtro).every(
        ([chave, valorFiltro]: [string, any]) => {
          if (
            valorFiltro === undefined ||
            valorFiltro === null ||
            (Array.isArray(valorFiltro) && valorFiltro.length === 0) ||
            (typeof valorFiltro === "string" && valorFiltro.trim() === "")
          ) {
            return true;
          }

          const valorItem = item[chave];
          if (Array.isArray(valorFiltro)) {
            if (valorFiltro.includes("*")) return true;
            return valorFiltro.includes(String(valorItem));
          }

          if (chave === "correnteEntrada_itemDe") {
            const valorItemPotencia = Number(item["correnteEntrada_item"]);
            const max = Number(valorFiltro);
            return !isNaN(valorItemPotencia) && valorItemPotencia >= max;
          }
          if (chave === "correnteEntrada_itemAte") {
            const valorItemPotencia = Number(item["correnteEntrada_item"]);
            const max = Number(valorFiltro);
            return !isNaN(valorItemPotencia) && valorItemPotencia <= max;
          }

          if (chave === "correnteSaida_itemDe") {
            const valorItemPotencia = Number(item["correnteSaida_item"]);
            const max = Number(valorFiltro);
            return !isNaN(valorItemPotencia) && valorItemPotencia >= max;
          }
          if (chave === "correnteSaida_itemAte") {
            const valorItemPotencia = Number(item["correnteSaida_item"]);
            const max = Number(valorFiltro);
            return !isNaN(valorItemPotencia) && valorItemPotencia <= max;
          }

          return String(valorItem) === String(valorFiltro);
        }
      );
    });

    const visiveis: Record<number, number> = {};
    filteredData.forEach((item: any) => {
      visiveis[item.id_item] = Number(item.mostrarAut_item);
    });
    setDadosFiltrados(filteredData);

    setIsVisible(visiveis);
  }, [filtro, dadosItens]);
  const fakeList = async (): Promise<any[]> => {
    const promise: Promise<any[]> = new Promise((resolve, reject) =>
      resolve(dadosFiltrados)
    );
    return promise;
  };
  useEffect(() => {
    Promise.all([
      listarFabricantes({ tipo_item: "13" }).then((res) => {
        setFabricantesTodos(res || []);
        setFabricantes(res || []);
      }),
      listarDistribuidores().then((res) => setDistribuidores(res)),
      listarDistribuidoresNativos().then(setDistribuidoresNativos),
      listagemItensTotal(),
    ]).then(() => setIsLoaded(true));
  }, []);

  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("stringbox", { 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,
  ]);

  const formatFunction = (arr: any) => {
    return arr.map((e: any) => {
      e["precoUnitario_item"] =
        "R$" + FormatFields.formatarNumero(e["precoUnitario_item"]);
      e["tipoString_item"] =
        e["tipoString_item"] === "0"
          ? "CA-Corrente Alternada"
          : "CC-Corrente Contínua";
      e["fases_item"] =
        e["fases_item"] === "1"
          ? "Monofásico"
          : e["fases_item"] === "2"
            ? "Bifásico"
            : e["fases_item"] === "3"
              ? "Trifásico"
              : "Todas";
      e["montagemSuprimento_item"] =
        e["montagemSuprimento_item"] === "comprada" ? "Comprada" : "Montada";
      e["codDistribuidor_item"] =
        [
          ...(e["tipoOrigem_item"] == "1"
            ? distribuidoresNativos
            : distribuidores),
        ].find(
          (distribuidor) =>
            distribuidor.id_distribuidor == e["codDistribuidor_item"]
        )?.nome_distribuidor || "";
      e["tipoOrigem_item"] =
        e["tipoOrigem_item"] == "1" ? "Nativo" : "Cadastrado";
      return e;
    });
  };
  return (
    <>
      {isLoaded ? (
        <>
          <section className="mb-4 rounded-xl border border-slate-200 bg-slate-50/70 p-4 shadow-sm">
            <div className="mb-3 flex items-center justify-between">
              <h3 className="text-sm font-semibold text-slate-700">
                Filtros da Consulta
              </h3>
            </div>

            <div className="mx-auto grid max-w-7xl grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-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="w-full"
                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.map((d: any) => d.id_distribuidor),
                    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" }]
                        : []),
                    ]?.map((o) => o?.value),
                  }));
                }}
              />

              <InputSelectComponent
                name="codFabricante_item"
                label="Fabricantes"
                infoMessage="Atenção! Nesta lista mostra apenas os Fabricante de StringBox que tenha StringBox 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="w-full"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    codFabricante_item: e.map((a: any) => a.value),
                  }));
                }}
              />

              <InputSelectComponent
                name="fases_item"
                label="Fase"
                formulario={formFiltro}
                isMulti
                options={[
                  { value: "*", label: "Todas" },
                  { label: "Monofásico", value: "1" },
                  { label: "Bifásico", value: "2" },
                  { label: "Trifásico", value: "3" },
                ]}
                width="w-full"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    fases_item: e.map((a: any) => a.value),
                  }));
                }}
              />
            </div>

            <div className="mx-auto mt-3 grid max-w-7xl grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
              <InputSelectComponent
                name="mostrarAut_item"
                label="Exibir Automaticamente nos Componentes"
                formulario={formFiltro}
                isMulti
                options={[
                  { value: "*", label: "Todos" },
                  { value: "1", label: "Sim" },
                  { value: "0", label: "Não" },
                ]}
                width="w-full"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    mostrarAut_item: e.map((a: any) => a.value),
                  }));
                }}
              />

              <InputSelectComponent
                name="montagemSuprimento_item"
                label="Suprimento"
                formulario={formFiltro}
                isMulti
                options={[
                  { value: "*", label: "Todos" },
                  { value: "comprada", label: "Comprada" },
                  { value: "montada", label: "Montada" },
                ]}
                width="w-full"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    montagemSuprimento_item: e.map((a: any) => a.value),
                  }));
                }}
              />

              <InputSelectComponent
                name="tipoOrigem_item_filtro"
                label="Origem"
                formulario={formFiltro}
                isMulti
                options={[
                  { value: "*", label: "Todos" },
                  { value: "1", label: "Nativo" },
                  { value: "0", label: "Cadastrado" },
                ]}
                width="w-full"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    tipoOrigem_item: e.map((a: any) => a.value),
                  }));
                }}
              />

              <InputSelectComponent
                name="status_item"
                label="Status"
                formulario={formFiltro}
                isMulti
                options={[
                  { value: "*", label: "Todos" },
                  { value: "1", label: "Ativo" },
                  { value: "0", label: "Inativo" },
                ]}
                width="w-full"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    status_item: e.map((a: any) => a.value),
                  }));
                }}
              />
            </div>

            <div className="mx-auto mt-3 grid max-w-7xl grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-5">
              <InputSelectComponent
                name="tipoString_item"
                label="Tipo de Stringbox"
                formulario={formFiltro}
                isMulti
                options={[
                  { value: "*", label: "Todos" },
                  { label: "CA-Corrente Alternada", value: "0" },
                  { label: "CC-Corrente Contínua", value: "1" },
                ]}
                width="w-full"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    tipoString_item: e.map((a: any) => a.value),
                  }));
                }}
              />

              <Input
                name="correnteEntrada_item"
                label="Corrente de Entrada De"
                mascara="numerico"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    correnteEntrada_itemDe: e.target.value,
                  }));
                }}
              />

              <Input
                name="correnteEntrada_item"
                label="Corrente de Entrada Até"
                mascara="numerico"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    correnteEntrada_itemAte: e.target.value,
                  }));
                }}
              />

              <Input
                name="correnteSaida_item"
                label="Corrente de Saída De"
                mascara="numerico"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    correnteSaida_itemDe: e.target.value,
                  }));
                }}
              />

              <Input
                name="correnteSaida_item"
                label="Corrente de Saída Até"
                mascara="numerico"
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    correnteSaida_itemAte: e.target.value,
                  }));
                }}
              />
            </div>
          </section>
          <ReactTable
            columns={columns}
            data={dadosFiltrados}
            listFunction={fakeList}
            // listFunction={listagemItensTotal}
            manualFilters
            idCol="id_item"
            isActiveCol="status_item"
            // canEdit
            // canDesactive
            actionButtons={(
              data: 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 ${data[idCol]}?`,
                    },
                    async () => {
                      data["precoUnitario_item"] =
                        FormatFields.desformatarNumeros(
                          data["precoUnitario_item"]
                        );

                      data["parametro"] = "stringbox";
                      data["parametro_coluna"] = "stringbox";
                      data["parametro_anexo"] = "imagem_item";
                      data["subpasta_aws"] = "Stringbox/AnexoStringbox";
                      data["mudar_status"] = 1;
                      data["id_cliente"] = session.id_empresa_usuario;
                      data[isActiveCol] = !isActive ? "1" : "0";

                      return editFunction(data).then(() => updateTable());
                    }
                  );
                },
                content:
                  rowOriginal?.tipoOrigem_item == "0" ? (
                    isActive ? (
                      <MdOutlineToggleOn />
                    ) : (
                      <MdOutlineToggleOff />
                    )
                  ) : undefined,
              },
              {
                className: `navButton ${Number(data["mostrarAut_item"]) === 1 ? "buttonSuccess" : "buttonDanger"}`,
                title: "Mostrar Automáticamente nos Componentes",
                onClick: (e: any) => {
                  handleSweetAlert(
                    {
                      icon: "warning",
                      title: `${Number(data["mostrarAut_item"]) === 1 ? "Não Mostrar Automáticamente nos Componentes" : "Mostrar Automáticamente nos Componentes"} ${pageName}`,
                      html: `Tem certeza que deseja <b>${Number(data["mostrarAut_item"]) === 1 ? "Não Mostrar Automáticamente nos Componentes" : "Mostrar Automáticamente nos Componentes"}</b> o registro ${data[idCol]}?`,
                    },
                    async () => {
                      data["mudar_visibilidade"] = 1;
                      data["mostrarAut_item"] =
                        Number(data["mostrarAut_item"]) === 1 ? 0 : 1;

                      return editFunction(data).then(() => updateTable());
                    }
                  );
                },
                content:
                  rowOriginal?.tipoOrigem_item == "0" ? (
                    Number(data["mostrarAut_item"]) === 1 ? (
                      <Eye />
                    ) : (
                      <EyeOff />
                    )
                  ) : 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,
              },
            ]}
            createFunction={onSubmitFunction}
            editFunction={sendEditarItens}
            Form={(props) => (
              <FormStringBox
                {...props}
                distribuidores={distribuidores}
                fabricantes={fabricantes}
              />
            )}
            formatFunction={formatFunction}
            pageName="StringBox"
            // filters={filtro}
          />
        </>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
};
export default ConsultaStringBox;