import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import {
  filtrarPorMultiSelecao,
  filtrarPorMultiSelecaoEmArray,
  FormatFields,
  GetForm,
} from "@/utils";
import { FieldValues } from "react-hook-form";

import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarInversores } from "@/requests/CRUD/Inversor/listarInversores";
import {
  atualizarItensCompostos,
  gravarItensCompostos,
} from "@/requests/CRUD/ItemComposto/cadastrarItem";
import {
  deletarItemComposto,
  editarItensCompostosFaixa,
  gravarItensCompostosFaixa,
} from "@/requests/CRUD/KitManual/cadastroKitManual";
import { listagemItens } from "@/requests/CRUD/KitManual/listarKitManual";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarTodosTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/listarTiposEdificacao";
import { useAuth } from "@/src/contexts/authContext";
import { formatLabelTipoEdificacao } from "@/utils/formatTipoEdificacao";
import { Eye, EyeOff, Trash } from "lucide-react";
import { useEffect, useState } from "react";
import { MdEdit, MdOutlineToggleOff, MdOutlineToggleOn } from "react-icons/md";
import Swal from "sweetalert2";
import FormItemComposto from "./FormItensCompostos";

const ConsultaItemComposto = () => {
  const [dadosItens, setDadosItens] = useState<any[]>([]);
  const [filtro, setFiltro] = useState<any>({});
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [isLoaded, setIsLoaded] = useState(false);
  const [isVisible, setIsVisible] = useState<Record<number, number>>({});
  const [isDistribuidorTodos, setIsDistribuidorTodos] = useState(false);

  const formFiltro = GetForm();
  const dados = [
    "id_item",
    "status_item",
    "codItem_item",
    "sku_item",
    "descricao_item",
    "fases_item",
    "qtd_faixas",
    "potenciaDe_item",
    "potenciaAte_item",
    "precoUnitario_item",
    "loja_item",
    "possui_itens_item",
    "codDistribuidor_item",
    "codInversor_item",
    "tipoEdificacao_item",
    "mostrarAut_item",
    "tipoOrigem_item",
  ];
  const columns = dados.map((e) => {
    let header = e;
    header = header == "id_item" ? "ID" : header;
    header = header == "potenciaDe_item" ? "Potencia de" : header;
    header = header == "potenciaAte_item" ? "Potencia ate" : header;
    header = header == "sku_item" ? "Sku" : header;
    header = header == "status_item" ? "Status" : header;
    header = header == "possui_itens_item" ? "Possui itens" : header;
    header = header == "loja_item" ? "Loja" : header;
    header = header == "codDistribuidor_item" ? "Distribuidor" : header;
    header = header == "codInversor_item" ? "Inversor" : header;
    header =
      header == "potenciaPorInversor_item" ? "Pot. por inversor" : header;
    header = header == "fases_item" ? "Fase" : header;
    header = header == "tipoEdificacao_item" ? "Tipo de Edificação" : header;
    header = header == "codItem_item" ? "Código Item" : header;
    header = header == "descricao_item" ? "Descrição Item" : header;
    header = header == "qtd_faixas" ? "Faixas" : header;
    header = header == "precoUnitario_item" ? "Preço Item" : header;
    header = header == "mostrarAut_item" ? "Mostrar Aut Item" : header;
    header = header == "tipoOrigem_item" ? "Origem" : header;
    header = header == "potencia_item" ? "Potência" : header;

    return {
      header,
      accessorKey: e,
      hidden: ["potencia_item"].includes(e),
      filterFn: ["potencia_item"].includes(e)
        ? filtrarPorRange
        : e === "tipoEdificacao_item"
          ? filtrarPorMultiSelecaoEmArray
          : filtrarPorMultiSelecao,
    };
  });
  const [dadosFiltrados, setDadosFiltrados] = useState<any>([]);
  const [inversores, setInversores] = useState<any>([]);
  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 gravarItensCompostosFaixa(data)
      .then((res) => {
        const dados = {
          itensCompostos: itensCompostos || [],
          origemItemComposto: "item_composto",
          idItemComposto: res.id_item,
        };
        return gravarItensCompostos(dados);
      })
      .then(() => {
        listItens();
      });
  };

  const sendEditarItens = async (data: any) => {
    const itensCompostos = data.itensCompostos;
    data.possui_itens_item =
      data.possui_itens_item === true ||
      data.possui_itens_item === "true" ||
      data.possui_itens_item === "on" ||
      data.possui_itens_item === 1 ||
      data.possui_itens_item === "1"
        ? 1
        : 0;
    delete data.itensCompostos;

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

    return editarItensCompostosFaixa(data).then(() => {
      atualizarItensCompostos(dados).then(() => {
        listItens();
      });
    });
  };
  const listItens = async () => {
    const res = await listagemItens("itens_compostos", {
      tipoOrigem_item: "*",
    });
    setDadosItens(res);
  };
  const [lojas, setLojas] = useState<any[]>([]);
  const [tiposEdificacao, setTiposEdificacao] = useState<any[]>([]);
  useEffect(() => {
    Promise.all([
      listItens(),
      listarLojas(session.id_usuario).then(setLojas),
      listarTodosTiposEdificacao().then(setTiposEdificacao),
      listarInversores().then(setInversores),
      listarDistribuidores().then((res) =>
        setDistribuidores(
          res.filter(
            (distribuidor: any) => distribuidor.isFornecedor_distribuidor == "0"
          )
        )
      ),
      listarDistribuidoresNativos().then(setDistribuidoresNativos),
    ]).then(() => setIsLoaded(true));
  }, []);

  const formatFunction = (arr: any) => {
    return arr.map((e: any, i: number) => {
      e["qtd_faixas"] = Array.isArray(e["faixas"]) ? e["faixas"].length : 0;
      e["precoUnitario_item"] =
        "R$" + FormatFields.formatarNumero(e["precoUnitario_item"]);
      e["potencia_item"] = parseFloat(
        e["potenciaDe_item"] || e["potenciaAte_item"]
      );
      function getFase() {
        switch (e["fases_item"]) {
          case "1":
            return "Monofásico";
          case "2":
            return "Bifásico";
          case "3":
            return "Trifásico";
          case "*":
            return "Todos";
        }
      }
      e["codDistribuidor_item"] =
        [
          ...(e["tipoOrigem_item"] == "1"
            ? distribuidoresNativos
            : distribuidores),
        ].find(
          (distribuidor) =>
            distribuidor.id_distribuidor == e["codDistribuidor_item"]
        )?.nome_distribuidor || "Todos";
      e["tipoOrigem_item"] =
        e["tipoOrigem_item"] == "1" ? "Nativo" : "Cadastrado";

      const codInversores = e["codInversor_item"];
      const ids =
        codInversores === "*"
          ? []
          : Array.isArray(codInversores)
            ? codInversores
            : String(codInversores)
                .split(",")
                .map((id) => id.trim());

      const descricao =
        codInversores === "*"
          ? "Todos"
          : inversores
              .filter((inv: any) => ids.includes(String(inv.id_item)))
              .map((inv: any) => inv.descricao_item)
              .join(", ") || "Todos";

      e["codInversor_item"] = descricao;
      e["possui_itens_item"] = e["possui_itens_item"] == "1" ? "Sim" : "Não";
      e["loja_item"] =
        e["loja_item"] === "*"
          ? "Todos"
          : lojas.find((loja: any) => loja.id_loja == e["loja_item"])
              ?.nome_loja || "";
      e["tipoEdificacao_item"] =
        e["tipoEdificacao_item"] === "*"
          ? "Todos"
          : e["tipoEdificacao_item"]
            ? String(e["tipoEdificacao_item"])
                .split(",")
                .map((id) => id.trim())
                .filter(Boolean)
                .map((id) => {
                  const edificacao = tiposEdificacao.find(
                    (tipo: any) =>
                      String(tipo.id_tipo_edificacao) === String(id)
                  );
                  return edificacao
                    ? formatLabelTipoEdificacao(edificacao)
                    : id;
                })
                .join(", ")
            : "";

      e["fases_item"] = getFase();

      e["mostrarAut_item"] = e["mostrarAut_item"] == "1" ? "Sim" : "Não";
      return e;
    });
  };

  useEffect(() => {
    const filteredData = dadosItens.filter((item) => {
      return Object.entries(filtro).every(
        ([chave, valorFiltro]: [string, any]) => {
          // Ignora campos vazios
          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;
            if (chave === "tipoEdificacao_item") {
              const idsItem = String(valorItem ?? "")
                .split(",")
                .map((id) => id.trim())
                .filter(Boolean);
              if (idsItem.includes("*")) return true;
              return valorFiltro.some((v) => idsItem.includes(String(v)));
            }
            return valorFiltro.includes(String(valorItem));
          }

          // Filtro de range mínimo
          if (chave.startsWith("potenciaDe_")) {
            const keyReal = "potenciaDe_item";
            const valorItemPotencia = parseFloat(item[keyReal]);
            console.log(
              "Filtrando por potência mínima",
              valorFiltro,
              valorItemPotencia
            );
            const min = parseFloat(valorFiltro);
            return !isNaN(valorItemPotencia) && valorItemPotencia >= min;
          }

          // Filtro de range máximo
          if (chave.startsWith("potenciaAte_")) {
            const keyReal = "potenciaAte_item";
            const valorItemPotencia = parseFloat(item[keyReal]);
            console.log(
              "Filtrando por potência máxima",
              valorFiltro,
              valorItemPotencia
            );
            const max = parseFloat(valorFiltro);
            return !isNaN(valorItemPotencia) && valorItemPotencia <= max;
          }

          // Comparação direta como fallback
          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;
  };
  const handleDelete = async (dados: any) => {
    Swal.fire({
      title: "Excluir " + dados.descricao_item,
      html: `
    Deseja excluir o item selecionado?<br><br>
    Se tiver itens dentro irão ser deletados também!
  `,
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Sim",
      confirmButtonColor: "#d33",
      cancelButtonText: "Cancelar",
      cancelButtonColor: "#3085d6",
    }).then((result: any) => {
      if (result.isConfirmed) {
        dados["id_usuario"] = session.id_usuario;
        deletarItemComposto(dados).then(() => {
          listItens();
        });
      }
    });
  };
  return (
    <>
      {isLoaded ? (
        <>
          {/* <div className="flex flex-row gap-2 flex-wrap pb-3"> */}
          <InputGroup>
            <Input
              name="potenciaDe_item"
              label="Potência de"
              formulario={formFiltro}
              mascara="numero"
              onChange={(e: any) => {
                const valor = e.target.value
                  ? e.target.value.replace(",", ".")
                  : undefined;
                setFiltro((prev: any) => ({
                  ...prev,
                  potenciaDe_item: valor,
                }));
              }}
            />
            <Input
              name="potenciaAte_item"
              label="Potência ate"
              formulario={formFiltro}
              mascara="numero"
              onChange={(e: any) => {
                const valor = e.target.value
                  ? e.target.value.replace(",", ".")
                  : undefined;
                setFiltro((prev: any) => ({
                  ...prev,
                  potenciaAte_item: valor,
                }));
              }}
            />
            <InputSelectComponent
              name="status_item"
              label="Status"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                { value: "1", label: "Ativo" },
                { value: "0", label: "Inativo" },
              ]}
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  status_item: e.map((a: any) => a.value),
                }));
              }}
            />
            <InputSelectComponent
              name="mostrarAut_item"
              label="Mostrar Automáticamente nos Componentes"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                { value: "1", label: "Sim" },
                { value: "0", label: "Não" },
              ]}
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  mostrarAut_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" },
              ]}
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  tipoOrigem_item: e.map((a: any) => a.value),
                }));
              }}
            />
          </InputGroup>

          <InputGroup>
            <InputSelectComponent
              name="fases_item"
              label="Fases"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...[
                  { value: "1", label: "Monofásico" },
                  { value: "2", label: "Bifásico" },
                  { value: "3", label: "Trifásico" },
                ],
              ]}
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  fases_item: e.map((a: any) => a.value),
                }));
              }}
            />
            <InputSelectComponent
              label="Loja"
              name="loja_item"
              isMulti
              options={[
                { value: "*", label: "Todas" },
                ...lojas.map((loja: any) => ({
                  label: loja.nome_loja,
                  value: loja.id_loja,
                })),
              ]}
              error={"Preencha a Loja"}
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  loja_item: e.map((a: any) => a.value),
                }));
              }}
            />
            <InputSelectComponent
              name="possui_itens_item"
              label="Possui Itens"
              isMulti
              options={[
                { value: "*", label: "Todos" },
                { value: "1", label: "Sim" },
                { value: "0", label: "Não" },
              ]}
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  possui_itens_item: e.map((a: any) => a.value),
                }));
              }}
              // skipEffect
            />
            <InputSelectComponent
              name="tipoEdificacao_item"
              label="Tipo de Edificação"
              isMulti
              options={[
                { label: "Todos", value: "*" },
                ...tiposEdificacao.map((tipo: any) => ({
                  label: formatLabelTipoEdificacao(tipo),
                  value: tipo.id_tipo_edificacao,
                })),
              ]}
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  tipoEdificacao_item: e.map((a: any) => a.value),
                }));
              }}
              error="Informe o tipo de edificação"
            />
            <InputSelectComponent
              label={"Distribuidor/Fornecedor"}
              name="codDistribuidor_item"
              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>
              )}
              onChange={(e: any) => {
                const todosSelecionado =
                  e?.some((d: any) => d?.value == "*") ?? false;
                setIsDistribuidorTodos(todosSelecionado);

                setFiltro((prev: any) => ({
                  ...prev,
                  codDistribuidor_item: e.map((d: any) => d.id_distribuidor),
                  codInversor_item: todosSelecionado
                    ? ["*"]
                    : prev.codInversor_item,
                  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),
                }));
              }}
              error="Informe o Distribuidor/Fornecedor"
            />
            <div className="w-full  rounded-md relative ">
              {/* <span className="bg-white text-red-400 px-2 text-xs font-medium absolute -top-3 left-3">Para filtrar inversor, selecione o Distribuidor</span> */}
              <InputSelectComponent
                label={"Inversores"}
                name="codInversor_item"
                isMulti
                options={[
                  { label: "Todos", value: "*" },
                  ...inversores
                    .filter((inv: any) => {
                      if (filtro?.codDistribuidor_item?.length > 0) {
                        const codDistribuidorSelecionados =
                          filtro?.codDistribuidor_item ?? [];

                        return codDistribuidorSelecionados.includes(
                          String(inv.codDistribuidor_item)
                        );
                      }
                      return true;
                    })
                    .map((e: any) => ({
                      value: e["id_item"],
                      label: e["descricao_item"],
                    })),
                ]}
                controlledValue={filtro?.codInversor_item ?? []}
                disabled={isDistribuidorTodos}
                onChange={(e: any) => {
                  setFiltro((prev: any) => ({
                    ...prev,
                    codInversor_item: e.map((a: any) => a.value),
                  }));
                }}
              />
            </div>
          </InputGroup>
          {/* </div> */}
          <ReactTable
            columns={columns}
            data={dadosFiltrados}
            listFunction={fakeList}
            idCol="id_item"
            // canDelete
            // deleteFunction={handleDelete}
            // canDesactive
            isActiveCol="status_item"
            // canEdit
            manualFilters
            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["mudar_status"] = 1;
                      rowData[isActiveCol] = !isActive ? "1" : "0";

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

                      return editFunction(rowData).then(() => updateTable());
                    }
                  );
                },
                content:
                  rowOriginal?.tipoOrigem_item == "0" ? (
                    Boolean(isVisible[rowData[idCol]]) ? (
                      <Eye />
                    ) : (
                      <EyeOff />
                    )
                  ) : undefined,
              },
              {
                className: `navButton buttonDanger`,
                title: "Deletar item",
                onClick: (e: any) => handleDelete(rowData),
                content: <Trash />,
              },
            ]}
            createFunction={onSubmitFunction}
            editFunction={sendEditarItens}
            Form={(props) => (
              <FormItemComposto
                {...props}
                dadosFiltrados={dadosFiltrados}
                distribuidores={distribuidores}
                lojas={lojas}
                tiposEdificacao={tiposEdificacao}
              />
            )}
            formatFunction={formatFunction}
            pageName="Itens Compostos"
            // filters={filtro}
          />
        </>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
};
export default ConsultaItemComposto;