import Container from "@/components/Forms/Container";

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 { listarTodosKanbans } from "@/requests/CRM/kanban";
import { cadastrarCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/cadastrarCamposPersonalizados";
import {
  deletarCampoPersonalizado,
  editarCamposPersonalizados,
  listarCamposPersonalizados,
  listarEtapasPropostaCampoPersonalizado,
  listarLocaisCamposPersonalizados,
  listarTipoCampoPersonalizado,
} from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { listarPendencias } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarDocumentosPersonalizados } from "@/requests/CRUD/DocumentosPersonalizados/listarDocumentosPersonalizados";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarPerfis } from "@/requests/CRUD/Perfil/listarPerfis";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { useContractContext } from "@/src/contexts/ContractProvider";
import { useProposalContext } from "@/src/contexts/ProposalContext";
import { GetForm } from "@/utils";
import { useCallback, useEffect, useState } from "react";
import { FaLongArrowAltRight } from "react-icons/fa";
import { MdDelete } from "react-icons/md";
import FormCamposPersonalizados from "./FormCamposPersonalizados";

const CamposPersonalizadosComponent = () => {
  const [tiposCampos, setTiposCampos] = useState<any>([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [lojas, setLojas] = useState<any>([]);
  const [locaisCampos, setLocaisCampos] = useState<any>([]);
  const [perfis, setPerfis] = useState<any>([]);
  const [tiposNegocios, setTiposNegocios] = useState<any>([]);
  const [funis, setFunis] = useState<any[]>([]);
  const [etapas, setEtapas] = useState<any[]>([]);
  const [filtro, setFiltro] = useState<any>({});
  const [pendencias, setPendencias] = useState<any>([]);
  const [etapasProposta, setEtapasProposta] = useState<any[]>([]);
  // FIX 2: documentosPersonalizados agora é carregado no useEffect inicial
  // para que a coluna "Documento" funcione ao listar todos os campos
  const [documentosPersonalizados, setDocumentosPersonalizados] = useState<
    any[]
  >([]);

  // FIX 1 e 3: estados para guardar apenas etapas/documentos que já têm campos criados
  const [todasEtapasProposta, setTodasEtapasProposta] = useState<any[]>([]);
  const [todosDocumentosPersonalizados, setTodosDocumentosPersonalizados] =
    useState<any[]>([]);
  const [dadosCarregados, setDadosCarregados] = useState<any[]>([]);

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

    if (
      filterValue?.length == 0 ||
      filterValue.some(
        (optionSelected) =>
          optionSelected.value == "*" ||
          row.original[columnId] == "Todos" ||
          row.original[columnId].split(",").includes(optionSelected.label),
      )
    ) {
      return true;
    }

    return false;
  }

  async function handleGetListF() {
    const res = await listarCamposPersonalizados();
    return res.filter(
      (item: any, index: any, self: any) =>
        index ===
        self.findIndex(
          (t: any) => t.id_campo_personalizado === item.id_campo_personalizado,
        ),
    );
  }

  const { getRelacionamentosRapidos } = useProposalContext();
  const { getRelacionamentosRapidosDocs, getRelacionamentosRapidosContratos } =
    useContractContext();

  const formFiltro = GetForm();

  const columns = [
    {
      header: "ID",
      accessorKey: "id_campo_personalizado",
    },
    {
      header: "Nome",
      accessorKey: "nome_campo_personalizado",
    },
    {
      header: "Ordem na Tela",
      accessorKey: "ordem_campo_personalizado",
    },
    {
      header: "Tag",
      accessorKey: "tag_campo_personalizado",
    },
    {
      header: "Tipo Campo",
      accessorKey: "tipo_campo_personalizado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Tipo Negócio",
      accessorKey: "tipoNegocio_campo_personalizado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Loja Negócio",
      accessorKey: "lojas_campo_personalizado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Obrigatório",
      accessorKey: "obrigatorio_campo_personalizado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Local Campo",
      accessorKey: "local_campo_personalizado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Etapa da Proposta",
      accessorKey: "etapaProposta_campo_personalizado",
    },
    {
      header: "Documento",
      accessorKey: "etapaDocs_campo_personalizado",
    },
    {
      header: "Pendência",
      accessorKey: "pendencia_campo_personalizado",
    },
    {
      header: "Perfis que podem Editar",
      accessorKey: "perfisEditar_campo_personalizado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Perfis que podem Visualizar",
      accessorKey: "perfisVisualizar_campo_personalizado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Opção Listagem",
      accessorKey: "opcao_listagem_campo_personalizado",
    },
    {
      header: "Status",
      accessorKey: "status_campo_personalizado",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Fluxos",
      accessorKey: "fluxos_documento",
      cell: (info: any) => info.row.original.fluxosRender ?? info.getValue(),
    },
  ];

  useEffect(() => {
    Promise.all([
      listarTipoCampoPersonalizado().then(setTiposCampos),
      listarTiposNegocios().then(setTiposNegocios),
      listarPerfis().then(setPerfis),
      listarPendencias().then(setPendencias),
      listarLocaisCamposPersonalizados().then(setLocaisCampos),
      listarLojas().then(setLojas),
      listarTodosKanbans().then((res) => {
        res = res.filter((funil: any) => funil.id_funil != "0");
        setFunis(res);
        setEtapas(res.map((funil: any) => funil.listas_kanban).flat());
      }),
      listarPerfis().then((res) => setPerfis(res)),
      // FIX 2: carregar documentos no início para que a coluna funcione sem filtro aplicado
      listarDocumentosPersonalizados().then((docs) => {
        setDocumentosPersonalizados(docs);
        setTodosDocumentosPersonalizados(docs);
      }),
      // FIX 1: carregar todas as etapas da proposta no início para cruzar com campos criados
      listarEtapasPropostaCampoPersonalizado().then(setTodasEtapasProposta),
    ]).then(() => setIsLoaded(true));
  }, []);

  const handleCadastrarCampos = async (data: any) => {
    return cadastrarCamposPersonalizados(data).then(() => {
      if (data.local_campo_personalizado === "1") {
        getRelacionamentosRapidos();
      }
      if (data.local_campo_personalizado === "2") {
        getRelacionamentosRapidosContratos();
      }
      if (data.local_campo_personalizado === "3") {
        getRelacionamentosRapidosDocs();
      }
      fetchData();
    });
  };

  const [localSelecionadoFiltro, setLocalSelecionadoFiltro] = useState<
    string[]
  >([]);

  const ETAPAS_AMPLIACAO = [
    {
      descricao_proposta_personalizado: "Dados da Ampliação",
      id_proposta_personalizado: "Dados da Ampliação",
    },
    {
      descricao_proposta_personalizado: "Componentes",
      id_proposta_personalizado: "Componentes",
    },
    {
      descricao_proposta_personalizado: "Custos Extras",
      id_proposta_personalizado: "Custos Extras",
    },
    {
      descricao_proposta_personalizado: "Precificação",
      id_proposta_personalizado: "Precificação",
    },
    {
      descricao_proposta_personalizado: "Observações",
      id_proposta_personalizado: "Observações",
    },
    {
      descricao_proposta_personalizado: "Resumo",
      id_proposta_personalizado: "Resumo",
    },
  ];

  const ETAPAS_MANUTENCOES = [
    {
      descricao_proposta_personalizado: "Dados",
      id_proposta_personalizado: "Dados",
    },
    {
      descricao_proposta_personalizado: "Observações",
      id_proposta_personalizado: "Observações",
    },
    {
      descricao_proposta_personalizado: "Resumo",
      id_proposta_personalizado: "Resumo",
    },
  ];

  const TIPOS_ETAPAS_FIXAS: Record<string, typeof ETAPAS_AMPLIACAO> = {
    "3": ETAPAS_AMPLIACAO,
    "2": ETAPAS_MANUTENCOES,
    "4": ETAPAS_MANUTENCOES,
  };
  const etapasPropostaComCampos = (() => {
    // 1. Pega todas as etapas que realmente têm campo criado
    const etapasComCampos = new Set(
      dadosCarregados
        .filter((c) => c.local_campo_personalizado === "1")
        .flatMap((c) =>
          String(c.etapaProposta_campo_personalizado || "")
            .split(",")
            .map((e) => e.trim()),
        )
        .filter(Boolean),
    );

    // 2. Tipos de negócio selecionados
    const tiposNegocioFiltro: any[] =
      filtro?.tipoNegocio_campo_personalizado ?? [];

    const incluiTodos =
      tiposNegocioFiltro.length === 0 ||
      tiposNegocioFiltro.some((t: any) => t.value === "*");

    const tiposFixosSelecionados = tiposNegocioFiltro
      .map((t: any) => String(t.value))
      .filter((v) => v in TIPOS_ETAPAS_FIXAS);

    const todosFixos =
      !incluiTodos &&
      tiposNegocioFiltro.length > 0 &&
      tiposNegocioFiltro.every(
        (t: any) => String(t.value) in TIPOS_ETAPAS_FIXAS,
      );

    let etapasBase: any[] = [];

    if (todosFixos) {
      const vistas = new Set<string>();
      etapasBase = tiposFixosSelecionados
        .flatMap((tipo) => TIPOS_ETAPAS_FIXAS[tipo])
        .filter((e) => {
          if (vistas.has(e.descricao_proposta_personalizado)) return false;
          vistas.add(e.descricao_proposta_personalizado);
          return true;
        });
    } else {
      const etapasFixasDosMixados = tiposFixosSelecionados.flatMap(
        (tipo) => TIPOS_ETAPAS_FIXAS[tipo],
      );

      const descricoesPadrao = new Set(
        todasEtapasProposta.map((e: any) => e.descricao_proposta_personalizado),
      );

      const etapasFixasExtras = etapasFixasDosMixados.filter(
        (e) => !descricoesPadrao.has(e.descricao_proposta_personalizado),
      );

      etapasBase = [...todasEtapasProposta, ...etapasFixasExtras];
    }

    // 3. FILTRO FINAL: só retorna etapas que têm campo criado
    return etapasBase.filter((etapa: any) =>
      etapasComCampos.has(etapa.descricao_proposta_personalizado),
    );
  })();

  const documentosComCampos = (() => {
    if (todosDocumentosPersonalizados.length === 0) return [];
    return todosDocumentosPersonalizados;
  })();

  const formatFunction = (arr: any) => {
    return arr.map((e: any) => {
      const campoLocal = e.local_campo_personalizado;
      e["tipo_campo_personalizado"] =
        e["tipo_campo_personalizado"] === "*"
          ? "Todos"
          : tiposCampos.find(
            (tipo: any) =>
              tipo.id_tipo_personalizado == e["tipo_campo_personalizado"],
          )?.nome_tipo_personalizado || "";

      e["local_campo_personalizado"] =
        locaisCampos.find(
          (tipo: any) =>
            tipo.id_local_personalizado == e["local_campo_personalizado"],
        )?.descricao_local_personalizado || "";

      e["pendencia_campo_personalizado"] =
        e["pendencia_campo_personalizado"] === "*"
          ? "Todos"
          : pendencias
            .filter((tipo: any) =>
              String(e["pendencia_campo_personalizado"])
                .split(",")
                .includes(String(tipo.id_pendencia)),
            )
            .map((p: any) => p.nome_pendencia)
            .join(", ");

      e["tipoNegocio_campo_personalizado"] =
        e["tipoNegocio_campo_personalizado"] === "*"
          ? "Todos"
          : tiposNegocios.find((tipo: any) =>
            e["tipoNegocio_campo_personalizado"].includes(
              tipo.id_tipo_negocio,
            ),
          )?.nome_tipo_negocio || "";

      e["etapaProposta_campo_personalizado"] =
        e["etapaProposta_campo_personalizado"] === "*"
          ? "Todos"
          : e["etapaProposta_campo_personalizado"]
            ? e["etapaProposta_campo_personalizado"]
            : "";

      e["etapaDocs_campo_personalizado"] =
        e["etapaDocs_campo_personalizado"] === "*"
          ? "Todos"
          : documentosPersonalizados
            .filter((a) =>
              String(e["etapaDocs_campo_personalizado"] ?? "")
                .split(",")
                .includes(String(a.id_documento_personalizado)),
            )
            .map((t) => t.nome_documento_personalizado)
            .join(",") || "";

      const raw = e["lojas_campo_personalizado"];

      const lojaIds = Array.isArray(raw)
        ? raw.map((id: any) => Number(id))
        : typeof raw === "string"
          ? raw.split(",").map((id: any) => Number(id.trim()))
          : [];

      const nomesLojas = lojas
        .filter((loja: any) => lojaIds.includes(Number(loja.id_loja)))
        .map((loja: any) => loja.nome_loja);

      e["lojas_campo_personalizado"] =
        e["lojas_campo_personalizado"] === "*"
          ? "Todos"
          : nomesLojas.map((loja: any) => loja).join(", ") || "";

      e["obrigatorio_campo_personalizado"] =
        e["obrigatorio_campo_personalizado"] === "1" ? "Sim" : "Não";

      e["perfisVisualizar_campo_personalizado"] =
        e["perfisVisualizar_campo_personalizado"] === "*"
          ? "Todos"
          : perfis
            .filter((perfil: any) =>
              e["perfisVisualizar_campo_personalizado"].includes(
                perfil.id_perfil,
              ),
            )
            .map((id: any) => id.nome_perfil)
            .join(", ") || "";
      e["perfisEditar_campo_personalizado"] =
        e["perfisEditar_campo_personalizado"] === "*"
          ? "Todos"
          : perfis
            .filter((perfil: any) =>
              e["perfisEditar_campo_personalizado"].includes(
                perfil.id_perfil,
              ),
            )
            .map((id: any) => id.nome_perfil)
            .join(", ") || "";

      e["opcao_listagem_campo_personalizado"] =
        e.nome_tabela_campo_personalizado
          ? `Tabela: ${e.nome_tabela_campo_personalizado}`
          : e.descricao_multiselecao_personalizado?.length > 0
            ? e.descricao_multiselecao_personalizado
              .map((o: any) => o.descricao_multiselecao_personalizado)
              .join(", ")
            : "";

      const tagId = e["tag_campo_personalizado"];
      const tagName = e["nome_relacionamento_rapido"];
      if (tagId && tagName) {
        e["tag_campo_personalizado"] = `${tagId} - {{${tagName}}}`;
      } else if (tagId) {
        e["tag_campo_personalizado"] = String(tagId);
      } else {
        e["tag_campo_personalizado"] = "";
      }

      e.fluxos_documento =
        campoLocal === "4"
          ? (e.fluxos ?? [])
            .map((fluxo: any) =>
              fluxo.fluxo_etapas_campo_personalizado == "*"
                ? "Todos"
                : funis.find(
                  (funil: any) =>
                    funil.id_funil ==
                    fluxo.fluxo_etapas_campo_personalizado,
                )?.titulo_funil,
            )
            .filter(Boolean)
            .join(", ")
          : "";

      e.fluxosRender =
        campoLocal === "4" ? (
          <div className="flex flex-col bg-body bg-opacity-10 rounded-md min-h-[80px]">
            <table>
              <thead>
                <tr className="text-center  dark:text-white text-sm">
                  <td className="p-2 text-center">
                    <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                      <strong>Fluxos</strong>
                    </div>
                  </td>
                  <td></td>
                  <td className="p-2 text-center">
                    <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                      <strong>Etapas a editar</strong>
                    </div>
                  </td>
                  <td></td>
                  <td className="p-2 text-center">
                    <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                      <strong>Etapas a visualizar</strong>
                    </div>
                  </td>
                </tr>
              </thead>
              <tbody>
                {e.fluxos?.map((fluxo: any, indexFluxo: number) => (
                  <tr
                    key={indexFluxo}
                    className={`hover:bg-primary hover:bg-opacity-20 text-xs ${indexFluxo % 2 == 1 && "bg-body bg-opacity-10 dark:bg-graydark dark:bg-opacity-50 dark:hover:bg-primary dark:hover:bg-opacity-10"}`}
                  >
                    <td className="p-2 text-center">
                      <div className="bg-white dark:bg-black rounded p-1">
                        {fluxo.fluxo_etapas_campo_personalizado == "*"
                          ? "Todos"
                          : funis.find(
                            (funil: any) =>
                              funil.id_funil ==
                              fluxo.fluxo_etapas_campo_personalizado,
                          )?.titulo_funil}
                      </div>
                    </td>
                    <td className="w-0">
                      <FaLongArrowAltRight />
                    </td>
                    <td className="p-2 text-center">
                      <div className="bg-white dark:bg-black rounded p-1">
                        {fluxo.editar_etapas_campo_personalizado
                          ?.split(",")
                          ?.includes("*")
                          ? "Todas"
                          : etapas
                            .filter((etapa) =>
                              fluxo.editar_etapas_campo_personalizado
                                ?.split(",")
                                ?.includes(etapa.id_etapa_funil),
                            )
                            .map((etapa) => etapa.titulo_etapa_funil)
                            .join(", ")}
                      </div>
                    </td>
                    <td className="w-0">
                      <FaLongArrowAltRight />
                    </td>

                    <td className="p-2 text-center">
                      <div className="p-2 text-center w-full">
                        <div className="bg-white dark:bg-black rounded p-1">
                          {fluxo.visualizar_etapas_campo_personalizado
                            ?.split(",")
                            ?.includes("*")
                            ? "Todos"
                            : etapas
                              .filter((etapa) =>
                                fluxo.visualizar_etapas_campo_personalizado
                                  ?.split(",")
                                  .includes(etapa.id_etapa_funil),
                              )
                              .map((etapa) => etapa.titulo_etapa_funil)
                              .join(", ")}
                        </div>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div>Fluxo indisponível para local do campo.</div>
        );
      return e;
    });
  };

  const handleEditCamposPersonalizados = async (data: any) => {
    return editarCamposPersonalizados(data).then(() => {
      if (data.local_campo_personalizado === "1") {
        getRelacionamentosRapidos();
      }
      if (data.local_campo_personalizado === "2") {
        getRelacionamentosRapidosContratos();
      }
      if (data.local_campo_personalizado === "3") {
        getRelacionamentosRapidosDocs();
      }
      fetchData(filtro);
    });
  };

  const CustomForm = useCallback(
    (props: any) => (
      <FormCamposPersonalizados
        {...props}
        tipoCamposPersonalizados={tiposCampos}
        tiposNegocios={tiposNegocios}
        lojas={lojas}
        camposPersonalizados={locaisCampos}
        funis={funis}
        perfis={perfis}
        etapasFluxos={etapas}
      />
    ),
    [etapas, funis, locaisCampos, lojas, perfis, tiposCampos, tiposNegocios],
  );

  const [data, setData] = useState([]);

  async function fetchData(filtrosAtuais: Record<string, any> = filtro) {
    const dados = await listarCamposPersonalizados();

    const dadosUnicos = dados.filter(
      (item: any, index: any, self: any) =>
        index ===
        self.findIndex(
          (t: any) => t.id_campo_personalizado === item.id_campo_personalizado,
        ),
    );

    setDadosCarregados(dadosUnicos);

    const resultadoFiltrado = dadosUnicos.filter((row: any) => {
      if (row.local_campo_personalizado === "4") {
        const id_fluxo = row.fluxos.flatMap(
          (b: any) => b.fluxo_etapas_campo_personalizado,
        );
        row["fluxos_documento"] = id_fluxo;
      }

      return Object.entries(filtrosAtuais).every(
        ([chave, valoresFiltro]: [string, any[]]) => {
          if (!Array.isArray(valoresFiltro) || valoresFiltro.length === 0)
            return true;

          // Ignora o filtro quando selecionado "Todos"
          if (valoresFiltro.some((a: any) => a?.value === "*")) {
            return true;
          }

          const valoresFiltroNormalizados = valoresFiltro.map((v) =>
            typeof v === "object" ? String(v.value).trim() : String(v).trim(),
          );

          const valorRow = row[chave];

          if (!valorRow || valorRow === "*") {
            return true;
          }

          const valoresRow = Array.isArray(valorRow)
            ? valorRow.map((v) => String(v).trim())
            : String(valorRow)
              .split(",")
              .map((v) => v.trim());

          return valoresRow.some((v: string) =>
            valoresFiltroNormalizados.includes(v),
          );
        },
      );
    });

    setData(resultadoFiltrado);
  }

  const fakeList = async (): Promise<any[]> => {
    const promise: Promise<any[]> = new Promise((resolve, reject) =>
      resolve(data),
    );
    return promise;
  };

  useEffect(() => {
    fetchData(filtro);
  }, [filtro]);

  const tipoNegocioRaw = formFiltro.watch(
    "tipoNegocio_campo_personalizado" as any,
  ) as any;

  const tipoNegocio = Array.isArray(tipoNegocioRaw)
    ? tipoNegocioRaw
    : tipoNegocioRaw
      ? [tipoNegocioRaw]
      : [];

  return isLoaded ? (
    <Container>
      <h2 className="text-xl text-center font-semibold text-black p-4">
        Campos Personalizados
      </h2>
      <div className="flex border mb-2 p-4 rounded-md border-black/20 relative flex-row gap-2 flex-wrap pb-3">
        <span className="bg-white font-semibold text-black px-3 absolute -top-3 left-5">
          Filtro dos Campos personalizados
        </span>
        <InputSelectComponent
          name="tipo_campo_personalizado"
          label="Tipo Campo"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            ...tiposCampos.map((tipoCampos: any) => ({
              label: tipoCampos.nome_tipo_personalizado,
              value: tipoCampos.id_tipo_personalizado,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              tipo_campo_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="tipoNegocio_campo_personalizado"
          label="Tipo Negócio"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            ...tiposNegocios.map((tipoNegocio: any) => ({
              label: tipoNegocio.nome_tipo_negocio,
              value: tipoNegocio.id_tipo_negocio,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              tipoNegocio_campo_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="lojas_campo_personalizado"
          label="Lojas"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todas" },
            ...lojas.map((loja: any) => ({
              label: loja.nome_loja,
              value: loja.id_loja,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              lojas_campo_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="obrigatorio_campo_personalizado"
          label="Obrigatório"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            { label: "Sim", value: 1 },
            { label: "Não", value: 2 },
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              obrigatorio_campo_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="local_campo_personalizado"
          label="Local do campo"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            ...locaisCampos.map((campoPersonalizado: any) => ({
              label: campoPersonalizado.descricao_local_personalizado,
              value: campoPersonalizado.id_local_personalizado,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            const valores = e.map((v: any) => String(v.value));
            setLocalSelecionadoFiltro(valores);

            if (!valores.includes("1") && !valores.includes("*")) {
              formFiltro.setValue(
                "etapaProposta_campo_personalizado" as any,
                [],
              );
              setFiltro((prev: any) => {
                const { etapaProposta_campo_personalizado, ...resto } = prev;
                return resto;
              });
            }

            if (!valores.includes("3") && !valores.includes("*")) {
              formFiltro.setValue("etapaDocs_campo_personalizado" as any, []);
              setFiltro((prev: any) => {
                const { etapaDocs_campo_personalizado, ...resto } = prev;
                return resto;
              });
            }
            const LOCAL_PENDENCIA = locaisCampos.find(
              (l: any) =>
                l.descricao_local_personalizado ===
                "Na Finalização de Pendências",
            )?.id_local_personalizado;

            if (
              !valores.includes(String(LOCAL_PENDENCIA)) &&
              !valores.includes("*")
            ) {
              // if (!valores.includes("5")) {
              formFiltro.setValue("pendencia_campo_personalizado" as any, []);
              setFiltro((prev: any) => {
                const { pendencia_campo_personalizado, ...resto } = prev;
                return resto;
              });
            }

            if (!valores.includes("4") && !valores.includes("*")) {
              formFiltro.setValue("fluxos_documento" as any, []);
              setFiltro((prev: any) => {
                const { fluxos_documento, ...resto } = prev;
                return resto;
              });
            }

            setFiltro((prev: any) => ({
              ...prev,
              local_campo_personalizado: e,
            }));
          }}
        />
        {(localSelecionadoFiltro.includes("5") ||
          localSelecionadoFiltro.includes("*")) && (
            <InputSelectComponent
              name="pendencia_campo_personalizado"
              label="Pendência"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todas" },
                ...pendencias
                  .filter(
                    (a: any) => ![3, 4, 5, 6].includes(Number(a.id_pendencia)),
                  )
                  .map((pendencia: any) => ({
                    label: pendencia.nome_pendencia,
                    value: pendencia.id_pendencia,
                  })),
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  pendencia_campo_personalizado: e,
                }));
              }}
            />
          )}
        {(localSelecionadoFiltro.includes("3") ||
          localSelecionadoFiltro.includes("*")) && (
            <InputSelectComponent
              name="etapaDocs_campo_personalizado"
              label="Documento"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...documentosComCampos.map((documento: any) => ({
                  label: documento.nome_documento_personalizado,
                  value: documento.id_documento_personalizado,
                })),
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  etapaDocs_campo_personalizado: e,
                }));
              }}
            />
          )}
        {(localSelecionadoFiltro.includes("4") ||
          localSelecionadoFiltro.includes("*")) && (
            <InputSelectComponent
              name="fluxos_documento"
              label="Fluxos"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...funis
                  .filter((funil: any) => {
                    if (
                      tipoNegocio.some((a: any) => a.value === "*") ||
                      tipoNegocio.length === 0
                    )
                      return true;
                    const hasAnyValue = funil.tipo_negocio_funil
                      .split(",")
                      .some((tipo: string) =>
                        tipoNegocio
                          ?.map((t: any) => String(t.value))
                          .includes(tipo),
                      );
                    return funil.id_funil != "0" && hasAnyValue;
                  })
                  .sort((a: any, b: any) =>
                    a.titulo_funil.localeCompare(b.titulo_funil, undefined, {
                      numeric: true,
                    }),
                  )
                  .map((etapa: any) => ({
                    label: etapa.titulo_funil,
                    value: etapa.id_funil,
                  })),
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  fluxos_documento: e,
                }));
              }}
            />
          )}
        {(localSelecionadoFiltro.includes("1") ||
          localSelecionadoFiltro.includes("*")) && (
            <InputSelectComponent
              name="etapaProposta_campo_personalizado"
              label="Etapa da Proposta"
              formulario={formFiltro}
              isMulti
              options={[
                { value: "*", label: "Todas" },
                ...etapasPropostaComCampos.map((etapa: any) => ({
                  label: etapa.descricao_proposta_personalizado,
                  value: etapa.descricao_proposta_personalizado,
                })),
              ]}
              width="flex-1 min-w-[200px]"
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  etapaProposta_campo_personalizado: e,
                }));
              }}
            />
          )}
        <InputSelectComponent
          name="perfisEditar_campo_personalizado"
          label="Perfis que podem editar"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            ...perfis.map((perfil: any) => ({
              label: perfil.nome_perfil,
              value: perfil.id_perfil,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              perfisEditar_campo_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="perfisVisualizar_campo_personalizado"
          label="Perfis que podem visualizar"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            ...perfis.map((perfil: any) => ({
              label: perfil.nome_perfil,
              value: perfil.id_perfil,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              perfisVisualizar_campo_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="status_campo_personalizado"
          label="Status"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            { label: "Ativo", value: 1 },
            { label: "Inativo", value: 0 },
          ]}
          width="flex-1 min-w-[200px]"
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              status_campo_personalizado: e,
            }));
          }}
        />
      </div>
      <ReactTable
        columns={columns}
        listFunction={fakeList}
        data={data}
        idCol="id_campo_personalizado"
        isActiveCol="status_campo_personalizado"
        canEdit
        canDesactive
        canDelete
        deleteFunction={deletarCampoPersonalizado}
        formatFunction={formatFunction}
        editFunction={handleEditCamposPersonalizados}
        createFunction={handleCadastrarCampos}
        pageName="Campos Personalizados"
        actionButtons={(
          data: any,
          updateTable: any,
          setIsLoading: any,
          { idCol, pageName, editFunction }: any,
        ) => {
          const buttons = [];
          buttons.push({
            className: `navButton  bg-historicoNotas text-white`,
            onClick: (e: any) => {
              const rowData: any = data;
              const newData: any = {};
              newData[idCol] = rowData[idCol];
              handleSweetAlert(
                {
                  icon: "question",
                  title: "Atenção",
                  html: `Excluir o campo <b>${rowData.nome_campo_personalizado} </b>?`,
                },
                () => {
                  setIsLoading(true);
                  deletarCampoPersonalizado({ [idCol]: rowData[idCol] })
                    .then(() => updateTable())
                    .finally(() => setIsLoading(false));
                },
              );
            },
            content: <MdDelete />,
          });
          return buttons;
        }}
        Form={CustomForm}
      />
    </Container>
  ) : (
    <div className="flex justify-center w-full">
      <LoaderSun />
    </div>
  );
};

export default CamposPersonalizadosComponent;