import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { listarTodosKanbans } from "@/requests/CRM/kanban";
import { gravarCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { obterClienteLinksun } from "@/requests/CRUD/ClienteLinksun/obterCliente";
import { listarEmpresasTerceirizadas } from "@/requests/CRUD/EmpresasTerceirizadas/listarEmpresasTerceirizadas";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarTodosCargos } from "@/requests/CRUD/Perfil/listarPerfil";
import { listarPerfis } from "@/requests/CRUD/Perfil/listarPerfis";
import { cadastrarUsuario } from "@/requests/CRUD/Usuario/cadastrarUsuario";
import { editarUsuario } from "@/requests/CRUD/Usuario/editarUsuario";
import { listarTodosUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { resetarSenhaUsuario } from "@/requests/CRUD/Usuario/resetarSenhaUsuario";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import { Settings } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { FieldValues } from "react-hook-form";
import { IoMdRefresh } from "react-icons/io";
import { MdOutlineToggleOff, MdOutlineToggleOn } from "react-icons/md";
import { toast } from "react-toastify";
import FormUsuario from "./FormUsuario";

type MaxAcrescDesc = {
  maxAcrescimo: string[];
  maxDesconto: string[];
};

const UsuarioComponent = () => {
  const [lojas, setLojas] = useState<any[]>([]);
  const { valuesSession, usuario, obterDadosUsuario } = useAuth();
  const formFiltro = GetForm();
  const { session } = valuesSession();
  const perfilUsuario = session.perfil_usuario;
  const idEmpresa = session.id_empresa_usuario;
  const sigla = session.sigla;
  const [perfis, setPerfis] = useState<any[]>([]);
  const [cargos, setCargos] = useState<any[]>([]);
  const [filtro, setFiltro] = useState<any>({});
  const [empresasTerceirizadas, setEmpresasTerceirizadas] = useState<any[]>([]);
  const [todosFunis, setTodosFunis] = useState<any[]>([]);
  const [usuariosCadastro, setUsuariosCadastro] = useState<any[]>([]);

  const [maxAcrescDesc, setMaxAcrescDesc] = useState<MaxAcrescDesc[]>([
    { maxAcrescimo: [], maxDesconto: [] },
  ]);

  const [totalUsuContrato, setTotalUsuContrato] = useState(0);
  const [totalUsuCadastro, setTotalUsuCadastro] = useState(0);
  const id_usuario = session.id_usuario;
  // function filtrarPorMultiSelecao(
  //   row: any,
  //   columnId: string,
  //   filterValue: any[]
  // ) {
  //   if (!row.original[columnId]) {
  //     return true;
  //   }
  //   if (
  //     filterValue?.length == 0 ||
  //     filterValue
  //       .map((f: any) => f.label)
  //       .some((s: any) => s.label === row.original[columnId]) ||
  //     filterValue.some(
  //       (optionSelected) =>
  //         optionSelected.value == "*" ||
  //         optionSelected.label == row.original[columnId]
  //     )
  //   ) {
  //     return true;
  //   }

  //   return false;
  // }
  function filtrarPorMultiSelecao(
    row: any,
    columnId: string,
    filterValue: any[]
  ) {
    // Sem filtro ou com "Todos" -> passa
    if (!Array.isArray(filterValue) || filterValue.length === 0) return true;
    if (filterValue.some((opt) => opt?.value === "*" || opt?.label === "*"))
      return true;

    const normalize = (v: any) =>
      String(v ?? "")
        .toLowerCase()
        .normalize("NFD")
        .replace(/\p{Diacritic}/gu, "")
        .trim();

    const toTokens = (value: any): string[] => {
      if (Array.isArray(value)) return value.map(normalize).filter(Boolean);
      if (typeof value === "string")
        return value
          .split(",")
          .map((s) => s.replace(/\s+/g, " ")) // normaliza espaços
          .map(normalize)
          .filter(Boolean);
      return [normalize(value)].filter(Boolean);
    };

    // Preferir label; se não houver, usa value
    const selectedTokens = filterValue
      .filter((opt) => opt && opt.value !== "*" && opt.label !== "*")
      .map((opt) => normalize(opt.label ?? opt.value));

    if (selectedTokens.length === 0) return true;

    const cellValue = row?.original?.[columnId];
    if (cellValue == null || cellValue === "") return false;

    const rowTokens = toTokens(cellValue);

    // OR: basta conter pelo menos UMA das opções selecionadas
    return selectedTokens.some((t) => rowTokens.includes(t));
  }
  const columns = [
    {
      header: "Código",
      accessorKey: "id_usuario",
    },
    {
      header: "Nome",
      accessorKey: "nome_usuario",
    },
    {
      header: "Cargo",
      accessorKey: "cargo_perfil",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Supervisor",
      accessorKey: "supervisor_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Perfil",
      accessorKey: "perfil_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Lojas",
      accessorKey: "loja_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Login",
      accessorKey: "login_usuario",
    },
    {
      header: "E-mail",
      accessorKey: "email_usuario",
    },
    {
      header: "Telefone 1",
      accessorKey: "telefone1_usuario",
    },
    {
      header: "Loja Padrão",
      accessorKey: "loja_padrao_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Fluxo Favorito",
      accessorKey: "funil_favorito_usuario",
    },
    {
      header: "Máximo de Acréscimo (%)",
      accessorKey: "max_acrescimo_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Máximo de Desconto (%)",
      accessorKey: "max_desconto_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Permite Editar Orientações/Inclinações",
      accessorKey: "edita_orientacao_inclinacao_modulos_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Permite Mostrar Quadro Lucros x Custos",
      accessorKey: "visualiza_lucro_custos_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Visualiza Custos Extras",
      accessorKey: "visualiza_custos_extras_proposta_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Visualiza Valores da Precificação",
      accessorKey: "visualiza_pecificacao_proposta_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Visualiza Custo do Kit",
      accessorKey: "visualiza_custo_kit_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    // visualiza_max_acrescimo_proposta_usuario
    // visualiza_max_desconto_proposta_usuario
    // permite_ver_historico_operacional_usuario
    // permite_alterar_valor_componente_kit_proposta_usuario
    {
      header: "Visualiza Valores das Comissões",
      accessorKey: "visualiza_comissoes_proposta_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Visualiza Valor Max Acrescimo",
      accessorKey: "visualiza_max_acrescimo_proposta_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Visualiza Valor Max Desconto",
      accessorKey: "visualiza_max_desconto_proposta_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Visualiza Valores Operacionais no Histórico",
      accessorKey: "permite_ver_historico_operacional_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Permite Editar Valor Unitário de um Item no Kit da Proposta",
      accessorKey: "permite_alterar_valor_componente_kit_proposta_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Permite alterar Conta da Instituição Financeira",
      accessorKey: "permite_alterar_conta_bancaria_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Permite informar Cálculo Capacidade Módulos",
      accessorKey: "permite_informar_calculo_capacidade_modulos_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Mostrar botão de Mover Card na Pesquisa",
      accessorKey: "mostrar_botao_mover_card_pesquisa_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Permite informar o valor da Comissão",
      accessorKey: "permite_informar_valor_comissao_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Comissionado",
      accessorKey: "comissionado_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Status",
      accessorKey: "status_usuario",
      filterFn: filtrarPorMultiSelecao,
    },
  ];

  useEffect(() => {
    listarLojas().then((res) => {
      setLojas(res);
    });
    listarTodosKanbans().then((res) => {
      setTodosFunis(res);
    });
    listarTodosCargos().then((res) => {
      setCargos(res);
    });
    listarPerfis().then(setPerfis);
    listarEmpresasTerceirizadas().then(setEmpresasTerceirizadas);
  }, []);

  useEffect(() => {
    setFiltro((prev: any) => ({
      ...prev,
      status_usuario: [
        {
          label: "Ativo",
          value: "1",
        },
      ],
    }));
    obterClienteLinksun(session.sigla).then((res) => {
      setTotalUsuContrato(res.usuarios_licenca_linksun);
    });
  }, []);

  const getRandomColor = () => {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  async function formatarListaUsuarios(arr: any) {
    let perfisList: any[] = [];
    if (perfis[0] == undefined) {
      perfisList = await listarPerfis().then((res) => {
        setPerfis(res);
        return res;
      });
    } else {
      perfisList = perfis;
    }
    const todosCargos = await listarTodosCargos();
    const todasLojas = await listarLojas(session.id_usuario);
    const usuariosAtivos = arr.filter(
      (e: any) =>
        e.status_usuario == "Ativo" &&
        e.perfil_usuario != "1000" &&
        e.id_usuario !== "1"
    ).length;
    setTotalUsuCadastro(usuariosAtivos);

    return arr.map((e: any) => {
      const supervisorId = String(e["supervisor_usuario"] ?? "").trim();
      if (supervisorId === "0") {
        e["supervisor_usuario"] = "Sem Supervisor";
      } else if (supervisorId === "") {
        e["supervisor_usuario"] = "Não Informado";
      } else {
        e["supervisor_usuario"] =
          arr.find(
            (usuario: any) => String(usuario.id_usuario) === supervisorId
          )?.nome_usuario || "Não Informado";
      }

      e["comissionado_usuario"] = !["2"].includes(e["cargo_perfil"])
        ? e["comissionado_usuario"] == "1"
          ? "Sim"
          : "Não"
        : "Sim";
      e["perfil_usuario"] = perfisList.find(
        (perfil: any) => perfil.id_perfil == e["perfil_usuario"]
      )?.nome_perfil;
      e["cargo_perfil"] = todosCargos.find(
        (cargo: any) => cargo.id_cargo == e["cargo_perfil"]
      )?.nome_cargo;
      e["loja_usuario"] = todasLojas
        .filter((loja: any) =>
          e["loja_usuario"]?.split(",").includes(loja.id_loja.toString())
        )
        .map((loja: any) => loja.nome_loja)
        .join(",");
      e["max_acrescimo_usuario"] = `${e["max_acrescimo_usuario"]}%`;
      e["max_desconto_usuario"] = `${e["max_desconto_usuario"]}%`;
      e["edita_orientacao_inclinacao_modulos_usuario"] =
        e["edita_orientacao_inclinacao_modulos_usuario"] == "1" ? "Sim" : "Não";
      e["visualiza_lucro_custos_usuario"] =
        e["visualiza_lucro_custos_usuario"] == "1" ? "Sim" : "Não";
      e["visualiza_custos_extras_proposta_usuario"] =
        e["visualiza_custos_extras_proposta_usuario"] == "1" ? "Sim" : "Não";
      e["visualiza_pecificacao_proposta_usuario"] =
        e["visualiza_pecificacao_proposta_usuario"] == "1" ? "Sim" : "Não";
      e["visualiza_custo_kit_usuario"] =
        e["visualiza_custo_kit_usuario"] == "1" ? "Sim" : "Não";
      e["loja_padrao_usuario"] = todasLojas.find(
        (loja: any) => loja.id_loja == e["loja_padrao_usuario"]
      )?.nome_loja;

      e["funil_favorito_usuario"] = todosFunis.find(
        (funil: any) => funil.id_funil == e["funil_favorito_usuario"]
      )?.titulo_funil;
      e["visualiza_comissoes_proposta_usuario"] =
        e["visualiza_comissoes_proposta_usuario"] == "1" ? "Sim" : "Não";
      e["visualiza_max_acrescimo_proposta_usuario"] =
        e["visualiza_max_acrescimo_proposta_usuario"] == "1" ? "Sim" : "Não";
      e["visualiza_max_desconto_proposta_usuario"] =
        e["visualiza_max_desconto_proposta_usuario"] == "1" ? "Sim" : "Não";
      e["permite_ver_historico_operacional_usuario"] =
        e["permite_ver_historico_operacional_usuario"] == "1" ? "Sim" : "Não";
      e["permite_alterar_valor_componente_kit_proposta_usuario"] =
        e["permite_alterar_valor_componente_kit_proposta_usuario"] == "1"
          ? "Sim"
          : "Não";
      e["permite_alterar_conta_bancaria_usuario"] =
        e["permite_alterar_conta_bancaria_usuario"] == "1" ? "Sim" : "Não";
      e["permite_informar_calculo_capacidade_modulos_usuario"] =
        e["permite_informar_calculo_capacidade_modulos_usuario"] == "1"
          ? "Sim"
          : "Não";
      e["mostrar_botao_mover_card_pesquisa_usuario"] =
        e["mostrar_botao_mover_card_pesquisa_usuario"] == "1" ? "Sim" : "Não";
      e["permite_informar_valor_comissao_usuario"] =
        e["permite_informar_valor_comissao_usuario"] == "1" ? "Sim" : "Não";
      e["visualiza_valor_base_proposta_usuario"] =
        e["visualiza_valor_base_proposta_usuario"] == "1" ? "Sim" : "Não";
      return e;
    });
  }
  const onSubmitFunction = async (data: FieldValues) => {
    const camposPersonalizadosSearch: Record<string, any> = {};

    Object.entries(data).forEach(([key, value]) => {
      if (
        key.endsWith("_campo_personalizado") &&
        (typeof value === "string" ||
          (Array.isArray(value) && value.every((v) => typeof v === "string")))
      ) {
        camposPersonalizadosSearch[key] = value;
        delete data[key];
      }
    });
    const dados = {
      data: camposPersonalizadosSearch,
      id_usuario: id_usuario,
    };

    const randomBackgroundColor = getRandomColor();
    data["sigla"] = sigla;
    data["empresa_usuario"] = idEmpresa || 1;

    // Mantém distinção entre "Sem Supervisor" (0) e "Não Informado" (vazio).
    const supervisorValue = (data as any)["supervisor_usuario"];
    if (supervisorValue === undefined || supervisorValue === null) {
      (data as any)["supervisor_usuario"] = "";
    } else if (typeof supervisorValue === "object") {
      (data as any)["supervisor_usuario"] = String(
        supervisorValue?.value ?? ""
      ).trim();
    } else {
      (data as any)["supervisor_usuario"] = String(supervisorValue).trim();
    }

    data["loja_usuario"] = data["loja_usuario"].join(",");
    if (data["cargo_perfil"] == "2") {
      data["comissionado_usuario"] = "1";
    }
    delete data["cargo_perfil"];

    return cadastrarUsuario({ ...data, corAvatar: randomBackgroundColor }).then(
      async (resUsuario) => {
        if (Object.keys(camposPersonalizadosSearch).length > 0) {
          await gravarCamposPersonalizados(dados);
        }
        if (usuario?.id_usuario) {
          await obterDadosUsuario(usuario?.id_usuario);
        }
        return resUsuario;
      }
    );
  };

  const refreshFunction = async (data: any) => {
    resetarSenhaUsuario(data);
  };

  const onEdifFunction = async (data: FieldValues) => {
    const camposPersonalizadosSearch: Record<string, any> = {};

    Object.entries(data).forEach(([key, value]) => {
      if (
        key.endsWith("_campo_personalizado") &&
        (typeof value === "string" ||
          (Array.isArray(value) && value.every((v) => typeof v === "string")))
      ) {
        camposPersonalizadosSearch[key] = value;
        delete data[key];
      }
    });
    const dados = {
      data: camposPersonalizadosSearch,
      id_usuario: id_usuario,
      coleta_id: data.id_usuario,
    };

    if (data["loja_usuario"]) {
      data["loja_usuario"] = data["loja_usuario"].join(",");
    }
    if (data["cargo_perfil"] == "2") {
      data["comissionado_usuario"] = "1";
    }
    delete data["cargo_perfil"];

    if ("status_usuario" in data) {
      const isInativando =
        data.status_usuario === false ||
        data.status_usuario === 0 ||
        data.status_usuario === "0";

      const isAtivando =
        data.status_usuario === true ||
        data.status_usuario === 1 ||
        data.status_usuario === "1";

      if (isInativando) {
        data.status_usuario = "0";
      } else if (isAtivando) {
        data.status_usuario = "1";
      } else {
        delete data.status_usuario;
      }
    }

    return editarUsuario(data).then(async (resUsuario) => {
      if (Object.keys(camposPersonalizadosSearch).length > 0) {
        await gravarCamposPersonalizados(dados);
      }
      if (usuario?.id_usuario) {
        await obterDadosUsuario(usuario?.id_usuario);
      }
      return resUsuario;
    });
  };

  const disabledFields = ["senha_usuario"];

  // const listarFuncao = async () => {
  //   return await listarTodosUsuarios();
  // };

  useEffect(() => {
    listarTodosUsuarios({ id_usuario: usuario?.id_usuario }).then((res) => {
      setUsuariosCadastro(res || []);

      const maxAcrescimo: any[] = Array.from(
        new Set(
          res.map(
            (u: any) => u.max_acrescimo_usuario?.toString().trim() || "0.00"
          )
        )
      ).sort((a, b) => Number(a) - Number(b));

      const maxDesconto: any[] = Array.from(
        new Set(
          res.map(
            (u: any) => u.max_desconto_usuario?.toString().trim() || "0.00"
          )
        )
      ).sort((a, b) => Number(a) - Number(b));

      setMaxAcrescDesc([{ maxAcrescimo, maxDesconto }]);
    });
  }, []);

  const opcoesSupervisorFiltro = useMemo(() => {
    const cargoSupervisor = cargos.find(
      (cargo: any) =>
        String(cargo?.nome_cargo || "")
          .toLowerCase()
          .trim() === "supervisor"
    );

    if (!cargoSupervisor) {
      return [];
    }

    const lojasSelecionadas = Array.isArray(filtro?.loja_usuario)
      ? filtro.loja_usuario
      : [];

    const idsLojasSelecionadas = lojasSelecionadas
      .map((item: any) => String(item?.value ?? "").trim())
      .filter((id: string) => id && id !== "*");

    const filtrarPorLoja = idsLojasSelecionadas.length > 0;

    const supervisores = (usuariosCadastro || [])
      .filter(
        (usuario: any) =>
          String(usuario?.cargo_perfil ?? "") ===
          String(cargoSupervisor.id_cargo)
      )
      .filter((usuario: any) => {
        if (!filtrarPorLoja) return true;

        const lojasUsuario = String(usuario?.loja_usuario ?? "")
          .split(",")
          .map((id: string) => id.trim())
          .filter(Boolean);

        return lojasUsuario.some((idLoja: string) =>
          idsLojasSelecionadas.includes(idLoja)
        );
      })
      .map((usuario: any) => ({
        value: String(usuario.id_usuario),
        label: usuario.nome_usuario,
      }));

    const semDuplicados = supervisores.filter(
      (option: any, index: number, arr: any[]) =>
        arr.findIndex((item: any) => item.value === option.value) === index
    );

    return semDuplicados.sort((a: any, b: any) =>
      String(a.label).localeCompare(String(b.label), "pt-BR")
    );
  }, [cargos, filtro?.loja_usuario, usuariosCadastro]);

  const CustomForm = useCallback(
    (props: any) => (
      <FormUsuario
        {...props}
        lojas={lojas}
        cargos={cargos}
        perfis={perfis}
        atingiuTotalUsuario={totalUsuCadastro >= totalUsuContrato}
        empresasTerceirizadas={empresasTerceirizadas}
      />
    ),
    [
      cargos,
      lojas,
      perfis,
      totalUsuCadastro,
      totalUsuContrato,
      empresasTerceirizadas,
    ]
  );

  return (
    <>
      <h2 className="text-xl max-sm:text-sm font-bold mb-4">
        Cadastro de Usuários
      </h2>
      <div>
        <InputGroup className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
          <InputSelectComponent
            name="cargo_perfil"
            label="Cargos"
            formulario={formFiltro}
            isMulti
            options={[
              { value: "*", label: "Todos" },
              ...cargos.map((cargo) => ({
                value: cargo.id_cargo,
                label: cargo.nome_cargo,
              })),
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({ ...prev, cargo_perfil: e }));
            }}
          />
          <InputSelectComponent
            name="perfil_usuario"
            label="Perfis"
            formulario={formFiltro}
            isMulti
            options={[
              { value: "*", label: "Todos" },
              ...perfis.map((element) => ({
                value: element.id_perfil,
                label: element.nome_perfil,
              })),
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({ ...prev, perfil_usuario: e }));
            }}
          />
          <InputSelectComponent
            name="loja_usuario"
            label="Lojas"
            formulario={formFiltro}
            isMulti
            options={[
              { value: "*", label: "Todas" },
              ...lojas?.map((loja: any) => ({
                value: loja.id_loja,
                label: loja.nome_loja,
              })),
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({ ...prev, loja_usuario: e }));
            }}
          />
          <InputSelectComponent
            name="supervisor_usuario"
            label="Supervisor"
            formulario={formFiltro}
            isMulti
            options={[
              { value: "*", label: "Todos" },
              { value: "0", label: "Sem Supervisor" },
              { value: "__NAO_INFORMADO__", label: "Não Informado" },
              ...opcoesSupervisorFiltro,
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({ ...prev, supervisor_usuario: e }));
            }}
          />
          <InputSelectComponent
            name="status_usuario"
            label="Status"
            isMulti
            formulario={formFiltro}
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Inativo",
                value: "0",
              },
              {
                label: "Ativo",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({ ...prev, status_usuario: e }));
            }}
            defaultValue={"1"}
          />
          <InputSelectComponent
            name="comissionado_usuario"
            label="Comissionado"
            isMulti
            formulario={formFiltro}
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                comissionado_usuario: e,
              }));
            }}
          />
          <InputSelectComponent
            name="edita_orientacao_inclinacao_modulos_usuario"
            label="Edita Orientações/Inclinações"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                edita_orientacao_inclinacao_modulos_usuario: e,
              }));
            }}
          />

          <InputSelectComponent
            name="visualiza_custos_extras_proposta_usuario"
            label="Visualiza Custos Extras"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                visualiza_custos_extras_proposta_usuario: e,
              }));
            }}
          />
          <InputSelectComponent
            name="visualiza_pecificacao_proposta_usuario"
            label="Visualiza Valores da Precificação"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                visualiza_pecificacao_proposta_usuario: e,
              }));
            }}
          />
          <InputSelectComponent
            name="visualiza_comissoes_proposta_usuario"
            label="Visualiza Valores das Comissões"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                visualiza_comissoes_proposta_usuario: e,
              }));
            }}
          />
          <InputSelectComponent
            name="visualiza_custo_kit_usuario"
            label="Visualiza Custo do Kit"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                visualiza_custo_kit_usuario: e,
              }));
            }}
          />

          <InputSelectComponent
            name="visualiza_max_acrescimo_proposta_usuario"
            label="Visualiza Max. Acrescimo na Proposta"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                visualiza_max_acrescimo_proposta_usuario: e,
              }));
            }}
          />
          <InputSelectComponent
            name="visualiza_max_desconto_proposta_usuario"
            label="Visualiza Max. Desconto na Proposta"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                visualiza_max_desconto_proposta_usuario: e,
              }));
            }}
          />
          <InputSelectComponent
            name="permite_ver_historico_operacional_usuario"
            label="Permite Visualizar Historico Operacional"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                permite_ver_historico_operacional_usuario: e,
              }));
            }}
          />
          <InputSelectComponent
            name="permite_alterar_valor_componente_kit_proposta_usuario"
            label="Permite Editar Valor Unitário de um item"
            formulario={formFiltro}
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              {
                label: "Não",
                value: "0",
              },
              {
                label: "Sim",
                value: "1",
              },
            ]}
            width="flex-1 min-w-[200px]"
            onChange={(e: any) => {
              setFiltro((prev: any) => ({
                ...prev,
                permite_alterar_valor_componente_kit_proposta_usuario: e,
              }));
            }}
          />
        </InputGroup>

        <Accordion type="single" className="mb-4" collapsible>
          <AccordionItem value="filtros">
            <AccordionTrigger className="text-sm pl-4 justify-center hover:text-black">
              <span className="flex items-center gap-2">
                <Settings size={17} /> Filtros Avançados
              </span>
            </AccordionTrigger>
            <AccordionContent>
              <InputGroup className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
                <InputSelectComponent
                  name="max_acrescimo_usuario"
                  label="Máximo de Acréscimo (%)"
                  formulario={formFiltro}
                  isMulti
                  options={[
                    { value: "*", label: "Todos" },
                    ...(maxAcrescDesc[0]?.maxAcrescimo || []).map(
                      (valor: string) => ({
                        value: valor,
                        label: `${valor}%`,
                      })
                    ),
                  ]}
                  width="flex-1 min-w-[200px]"
                  onChange={(e: any) => {
                    setFiltro((prev: any) => ({
                      ...prev,
                      max_acrescimo_usuario: e,
                    }));
                  }}
                />

                <InputSelectComponent
                  name="max_desconto_usuario"
                  label="Máximo de Desconto (%)"
                  formulario={formFiltro}
                  isMulti
                  options={[
                    { value: "*", label: "Todos" },
                    ...(maxAcrescDesc[0]?.maxDesconto || []).map(
                      (valor: string) => ({
                        value: valor,
                        label: `${valor}%`,
                      })
                    ),
                  ]}
                  width="flex-1 min-w-[200px]"
                  onChange={(e: any) => {
                    setFiltro((prev: any) => ({
                      ...prev,
                      max_desconto_usuario: e,
                    }));
                  }}
                />

                <InputSelectComponent
                  name="permite_alterar_conta_bancaria_usuario"
                  label="Permite alterar Conta da Instituição Financeira"
                  formulario={formFiltro}
                  isMulti
                  options={[
                    { label: "Todos", value: "*" },
                    { label: "Não", value: "0" },
                    { label: "Sim", value: "1" },
                  ]}
                  width="flex-1 min-w-[200px]"
                  onChange={(e: any) => {
                    setFiltro((prev: any) => ({
                      ...prev,
                      permite_alterar_conta_bancaria_usuario: e,
                    }));
                  }}
                />

                <InputSelectComponent
                  name="permite_informar_calculo_capacidade_modulos_usuario"
                  label="Permite informar Cálculo Capacidade Módulos"
                  formulario={formFiltro}
                  isMulti
                  options={[
                    { label: "Todos", value: "*" },
                    { label: "Não", value: "0" },
                    { label: "Sim", value: "1" },
                  ]}
                  width="flex-1 min-w-[200px]"
                  onChange={(e: any) => {
                    setFiltro((prev: any) => ({
                      ...prev,
                      permite_informar_calculo_capacidade_modulos_usuario: e,
                    }));
                  }}
                />

                <InputSelectComponent
                  name="mostrar_botao_mover_card_pesquisa_usuario"
                  label="Mostrar botão de Mover Card na Pesquisa"
                  formulario={formFiltro}
                  isMulti
                  options={[
                    { label: "Todos", value: "*" },
                    { label: "Não", value: "0" },
                    { label: "Sim", value: "1" },
                  ]}
                  width="flex-1 min-w-[200px]"
                  onChange={(e: any) => {
                    setFiltro((prev: any) => ({
                      ...prev,
                      mostrar_botao_mover_card_pesquisa_usuario: e,
                    }));
                  }}
                />

                <InputSelectComponent
                  name="permite_informar_valor_comissao_usuario"
                  label="Permite informar o valor da Comissão"
                  formulario={formFiltro}
                  isMulti
                  options={[
                    { label: "Todos", value: "*" },
                    { label: "Não", value: "0" },
                    { label: "Sim", value: "1" },
                  ]}
                  width="flex-1 min-w-[200px]"
                  onChange={(e: any) => {
                    setFiltro((prev: any) => ({
                      ...prev,
                      permite_informar_valor_comissao_usuario: e,
                    }));
                  }}
                />
              </InputGroup>
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        <div className="flex flex-col max-sm:text-xs max-sm:my-3 max-sm:text-center justify-center items-center w-full">
          <div className="w-[50%] max-sm:w-[85%] bg-stroke rounded-full border-2 border-black shadow-lg">
            <div
              className={`h-6 rounded-full text-white text-center transition-width duration-1000 ${
                (totalUsuCadastro / totalUsuContrato) * 100 > 80
                  ? "bg-meta-1"
                  : (totalUsuCadastro / totalUsuContrato) * 100 > 50
                    ? "bg-warning"
                    : "bg-primary"
              }`}
              style={{
                width: `${(totalUsuCadastro / totalUsuContrato) * 100}%`,
              }}
            >
              <span>
                {((totalUsuCadastro / totalUsuContrato) * 100).toFixed(2)}%
              </span>
            </div>
          </div>
          Atualmente você está utilizando {totalUsuCadastro} de{" "}
          {totalUsuContrato} usuários contratados.
        </div>

        <ReactTable
          columns={columns}
          createFunction={onSubmitFunction}
          listFunction={async (p) => {
            const response = await listarTodosUsuarios({
              ...p,
              id_usuario: usuario?.id_usuario,
            });
            setUsuariosCadastro(response || []);
            return response;
          }}
          formatFunction={formatarListaUsuarios}
          idCol="id_usuario"
          manualFilters={true}
          isActiveCol="status_usuario"
          actionButtons={(
            rowData: any,
            updateTable: any,
            setIsLoading: any,
            {
              idCol,
              isActive,
              isActiveCol,
              pageName,
              editFunction,
              listData,
              rowOriginal,
            }
          ) => [
            {
              className: `navButton ${isActive ? "buttonSuccess" : "buttonDanger"} transition-all duration-300`,

              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 () => {
                    if (isActive) {
                      const parametros = await listarParametros();
                      if (
                        String(parametros?.usuarioResponsavelLead_parametro) ===
                        String(rowData[idCol])
                      ) {
                        toast.error(
                          "Operação não permitida! O usuário está atrelado como responsável de Lead Marketing",
                        );
                        return;
                      }
                    }

                    return editFunction({
                      [idCol]: rowData[idCol],
                      [isActiveCol]: !isActive,
                    }).then(() => updateTable());
                  }
                );
              },
              content:
                isActive &&
                rowData["cargo_perfil"] ==
                  cargos.find((cargo) => cargo.id_cargo == "-1").nome_cargo &&
                listData.filter(
                  (usuario: any) =>
                    usuario["cargo_perfil"] == "-1" &&
                    usuario[isActiveCol] == "1"
                ).length == 1 ? undefined : isActive ? (
                  <MdOutlineToggleOn />
                ) : (
                  <MdOutlineToggleOff />
                ),
            },
            {
              className: "bg-success text-white",
              onClick: (e: any) => {
                handleSweetAlert(
                  {
                    icon: "question",
                    title: "Restaurar Senha",
                    html: `Tem certeza que deseja <b>Restaurar</b> a senha do usuário <b>${rowData.nome_usuario} </b>?`,
                  },
                  () => {
                    setIsLoading(true);
                    refreshFunction(rowData)
                      .then(() => updateTable())
                      .finally(() => setIsLoading(false));
                  }
                );
              },
              content: <IoMdRefresh />,
            },
          ]}
          canEdit
          editFunction={onEdifFunction}
          Form={CustomForm}
          modalWidth="sm:w-[60%]"
          disabledFields={disabledFields}
          pageName="Usuário"
          filters={filtro}
        />
      </div>
    </>
  );
};

export default UsuarioComponent;