import InputSelectComponent from "@/components/Forms/InputSelect";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listagemItens } from "@/requests/CRUD/KitManual/listarKitManual";
import { GetForm } from "@/utils";
import { useCallback, useEffect, useState } from "react";

interface CategoriaConfig {
  label: string;
  value: string;
  data: string;
  parametro: string;
}

const categoriasConfig: CategoriaConfig[] = [
  {
    label: "Inversor",
    value: "inversor",
    data: "inversores",
    parametro: "inversor",
  },
  { label: "Módulo", value: "modulo", data: "modulos", parametro: "modulo" },
  {
    label: "Estrutura",
    value: "estrutura",
    data: "estruturas",
    parametro: "estrutura",
  },
  {
    label: "Bateria",
    value: "bateria",
    data: "baterias",
    parametro: "bateria",
  },
  { label: "Cabo", value: "cabo", data: "cabos", parametro: "cabo" },
  {
    label: "Aterramento",
    value: "aterramento",
    data: "aterramentos",
    parametro: "aterramento",
  },
  {
    label: "Conector",
    value: "conector",
    data: "conectores",
    parametro: "conector",
  },
  {
    label: "Perfil Alumínio",
    value: "perfis_aluminio",
    data: "perfis_aluminio",
    parametro: "aluminio",
  },
  {
    label: "Suporte",
    value: "suporte",
    data: "suportes",
    parametro: "suporte",
  },
  {
    label: "Terminal",
    value: "terminal",
    data: "terminais",
    parametro: "terminal",
  },
  {
    label: "Disjuntor",
    value: "disjuntor",
    data: "disjuntores",
    parametro: "disjuntor",
  },
  { label: "DPS", value: "dps", data: "dps", parametro: "dps" },
  {
    label: "Monitoramento",
    value: "monitoramento",
    data: "monitoramento",
    parametro: "monitoramento",
  },
  { label: "Estação", value: "estacao", data: "estacao", parametro: "estacao" },
  {
    label: "Outros",
    value: "outros_componentes",
    data: "outros_componentes",
    parametro: "outros_componentes",
  },
  {
    label: "StringBox",
    value: "stringbox",
    data: "stringbox",
    parametro: "stringbox",
  },
  {
    label: "Itens Compostos",
    value: "itens_compostos",
    data: "itens_compostos",
    parametro: "itens_compostos",
  },
];

const RelatorioItensKit = () => {
  const formFiltro = GetForm();
  const [categoriaSelecionada, setCategoriaSelecionada] =
    useState<string>("todas");
  const [filtroOrigem, setFiltroOrigem] = useState<string>("*");
  const [filtroDistribuidor, setFiltroDistribuidor] = useState<string>("*");
  const [filtroIsNativoDistribuidor, setFiltroIsNativoDistribuidor] =
    useState<string>("*");
  const [filtroFabricante, setFiltroFabricante] = useState<string>("*");
  const [filtroStatus, setFiltroStatus] = useState<string>("*");
  const [fabricantesOptions, setFabricantesOptions] = useState<
    { label: string; value: string }[]
  >([]);
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);

  useEffect(() => {
    Promise.all([
      listarDistribuidores().then(setDistribuidores),
      listarDistribuidoresNativos().then(setDistribuidoresNativos),
    ]);
  }, []);

  const columns = [
    {
      header: "Categoria",
      accessorKey: "categoria",
    },
    {
      header: "ID",
      accessorKey: "id_item",
    },
    {
      header: "Código Interno",
      accessorKey: "codItem_item",
    },
    {
      header: "SKU",
      accessorKey: "sku_item",
    },
    {
      header: "Descrição",
      accessorKey: "descricao_item",
    },
    {
      header: "Origem",
      accessorKey: "origem_label",
    },
    {
      header: "Distribuidores/Fornecedores",
      accessorKey: "distribuidor_label",
    },
    {
      header: "Fabricantes",
      accessorKey: "fabricante_label",
    },
    {
      header: "Status",
      accessorKey: "status_label",
    },
  ];

  const listFunction = useCallback(async (): Promise<any[]> => {
    const categoriasParaBuscar =
      categoriaSelecionada === "todas"
        ? categoriasConfig
        : categoriasConfig.filter((cat) => cat.value === categoriaSelecionada);

    const resultados = await Promise.all(
      categoriasParaBuscar.map(async (cat) => {
        const itens = await listagemItens(cat.data, cat.parametro);
        return (itens || []).map((item: any) => ({
          ...item,
          categoria: cat.label,
        }));
      })
    );

    const itens = resultados.flat().map((item: any) => {
      const tipoOrigem = String(item.tipoOrigem_item ?? "0");
      const listaDistribuidores =
        tipoOrigem === "1" ? distribuidoresNativos : distribuidores;
      const distribuidor = listaDistribuidores.find(
        (d: any) =>
          String(d.id_distribuidor) === String(item.codDistribuidor_item)
      );

      return {
        ...item,
        origem_label: tipoOrigem === "1" ? "Nativo" : "Cadastrado",
        distribuidor_label:
          distribuidor?.nome_distribuidor || item.codDistribuidor_item || "-",
        fabricante_label: item.nome_fabricante || "-",
        status_label: String(item.status_item) === "1" ? "Ativo" : "Inativo",
      };
    });

    const itensParaFiltroFabricante = itens.filter((item: any) => {
      const origemOk =
        filtroOrigem === "*" || String(item.tipoOrigem_item) === filtroOrigem;
      const distribuidorOk =
        filtroDistribuidor === "*" ||
        String(item.codDistribuidor_item) === filtroDistribuidor;
      const origemDistribuidorOk =
        filtroDistribuidor === "*" ||
        String(item.tipoOrigem_item) === String(filtroIsNativoDistribuidor);
      const statusOk =
        filtroStatus === "*" || String(item.status_item) === filtroStatus;

      return origemOk && distribuidorOk && origemDistribuidorOk && statusOk;
    });

    const fabricantesUnicos = Array.from(
      new Set(
        itensParaFiltroFabricante
          .map((item: any) => item.nome_fabricante)
          .filter((nome: any) => Boolean(nome))
      )
    ) as string[];

    setFabricantesOptions(
      fabricantesUnicos
        .sort((a, b) => a.localeCompare(b))
        .map((nome) => ({ label: nome, value: nome }))
    );

    return itens.filter((item: any) => {
      const origemOk =
        filtroOrigem === "*" || String(item.tipoOrigem_item) === filtroOrigem;
      const distribuidorOk =
        filtroDistribuidor === "*" ||
        String(item.codDistribuidor_item) === filtroDistribuidor;
      const origemDistribuidorOk =
        filtroDistribuidor === "*" ||
        item.tipoOrigem_item == filtroIsNativoDistribuidor;
      const fabricanteOk =
        filtroFabricante === "*" || item.nome_fabricante === filtroFabricante;
      const statusOk =
        filtroStatus === "*" || String(item.status_item) === filtroStatus;

      return (
        origemOk &&
        distribuidorOk &&
        origemDistribuidorOk &&
        fabricanteOk &&
        statusOk
      );
    });
  }, [
    categoriaSelecionada,
    distribuidores,
    distribuidoresNativos,
    filtroDistribuidor,
    filtroIsNativoDistribuidor,
    filtroFabricante,
    filtroOrigem,
    filtroStatus,
  ]);

  return (
    <div>
      <div className="flex flex-row gap-2 flex-wrap pb-3">
        <InputSelectComponent
          name="categoria"
          label="Categoria"
          formulario={formFiltro}
          options={[
            { value: "todas", label: "Todas" },
            ...categoriasConfig.map((cat) => ({
              value: cat.value,
              label: cat.label,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(option: any) => {
            setCategoriaSelecionada(option?.value || "todas");
          }}
        />
        <InputSelectComponent
          name="origem"
          label="Origem"
          formulario={formFiltro}
          options={[
            { value: "*", label: "Todos" },
            { value: "1", label: "Nativo" },
            { value: "0", label: "Cadastrado" },
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(option: any) => {
            setFiltroOrigem(option?.value || "*");
          }}
        />
        <InputSelectComponent
          name="distribuidor"
          label="Distribuidores/Fornecedores"
          formulario={formFiltro}
          options={[
            { value: "*", label: "Todos" },
            ...[
              ...distribuidoresNativos.map((d) => ({ ...d, isNativo: "1" })),
              ...distribuidores.map((d) => ({ ...d, isNativo: "0" })),
            ].map((d: any) => ({
              ...d,
              value: String(d.id_distribuidor),
              label: `${d.nome_distribuidor} (${d.isNativo === "1" ? "Nativo" : "Cadastrado"})`,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(option: any) => {
            setFiltroDistribuidor(option?.value || "*");
            setFiltroIsNativoDistribuidor(option?.isNativo);
          }}
        />
        <InputSelectComponent
          name="fabricante"
          label="Fabricantes"
          formulario={formFiltro}
          options={[{ value: "*", label: "Todos" }, ...fabricantesOptions]}
          width="flex-1 min-w-[200px]"
          onChange={(option: any) => {
            setFiltroFabricante(option?.value || "*");
          }}
          infoMessage="Atenção! Nesta lista mostra apenas os Fabricante de Itens do Kit que tenha Itens cadastrados para os Distribuidores selecionados."
        />
        <InputSelectComponent
          name="status"
          label="Status"
          formulario={formFiltro}
          options={[
            { value: "*", label: "Todos" },
            { value: "1", label: "Ativo" },
            { value: "0", label: "Inativo" },
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(option: any) => {
            setFiltroStatus(option?.value || "*");
          }}
        />
      </div>
      <ReactTable
        key={`${categoriaSelecionada}-${filtroOrigem}-${filtroDistribuidor}-${filtroIsNativoDistribuidor}-${filtroFabricante}-${filtroStatus}`}
        columns={columns as any}
        listFunction={listFunction}
        pageName="Relatório Itens do Kit"
        cannotFilter={false}
      />
    </div>
  );
};

export default RelatorioItensKit;