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 { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { editarLoja } from "@/requests/CRUD/Lojas/editarLoja";
import { obterLoja } from "@/requests/CRUD/Lojas/obterLoja";
import { cadastrarPoliticaPreco } from "@/requests/CRUD/PoliticasPreco/cadastrarPoliticaPreco";
import {
  editaCfgPoliticaPreco,
  editarPoliticaPreco,
  excluirPolitica,
  inativarPoliticaPreco,
} from "@/requests/CRUD/PoliticasPreco/editarPoliticaPreco";
import { listarPoliticasPreco } from "@/requests/CRUD/PoliticasPreco/listarPoliticasPreco";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarTiposTelhados } from "@/requests/CRUD/TiposTelhados/listarTiposTelhados";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { FormatFields } from "@/utils";
import { Link, Power, X } from "lucide-react";
import { useEffect, useState } from "react";
import { MdDelete } from "react-icons/md";
import Swal from "sweetalert2";
import FormPoliticaPreco from "./FormPoliticaPreco";

export interface IPoliticaPreco {
  header: string;
  accessorKey?: string;
  className?: string;
  rowSpan?: number;
  columns?: {
    header: string;
    accessorKey: string;
    mascara?:
      | "telefone"
      | "data"
      | "cep"
      | "cpf"
      | "cnpj"
      | "numero"
      | "numeroPreciso"
      | "numerico"
      | "letras"
      | "letrasNumeros"
      | "mesAno"
      | "hora"
      | string;
    type?: "select" | "multiSelect";
    options?: any[];
  }[];
}

const PoliticaPrecoConfigComponent = ({ id_loja }: any) => {
  const [tiposNegocios, setTiposNegocios] = useState<any[]>([]);
  const [todosTiposNegocios, setTodosTiposNegocios] = useState<any[]>([]);
  const [tipoNegocioSelecionado, setTipoNegocioSelecionado] = useState("1");
  const [politicasDePreco, setPoliticasDePreco] = useState<any[]>([]);
  const [vincularPotencia, setVincularPotencia] = useState(false);
  const [confirmData, setConfirmData] = useState<any>();
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [tiposTelhados, setTiposTelhados] = useState<any[]>([]);
  const [loja, setLoja] = useState<any>();

  // Filtros
  const [filtroDistribuidor, setFiltroDistribuidor] = useState<string>("*");
  const [filtroTipoTelhado, setFiltroTipoTelhado] = useState<string>("*");
  const [filtroStatus, setFiltroStatus] = useState<string>("1");
  const [filtroTipoNegocio, setFiltroTipoNegocio] = useState<string>("*");

  const { isMobile } = useScreenContext();

  useEffect(() => {
    const carregarDados = async () => {
      try {
        const lojaData = await obterLoja({ id_loja });

        setVincularPotencia(lojaData.tipoCfg_politica_loja === "2");
        setLoja(lojaData);

        let distribuidoresArr: any[] = [];
        let tiposTelhadosArr: any[] = [];
        let tiposNegociosArr: any[] = [];
        let vincular_potencia = lojaData.tipoCfg_politica_loja === "2";

        const [
          tiposNegociosRes,
          distribuidoresRes,
          distribuidoresNativosRes,
          tiposTelhadosRes,
        ] = await Promise.all([
          listarTiposNegocios(),
          listarDistribuidores(),
          listarDistribuidoresNativos(),
          listarTiposTelhados(),
        ]);

        const tiposNegociosFiltered = tiposNegociosRes.filter((tp: any) =>
          lojaData?.tipos_negocios_loja?.split(",").includes(tp.id_tipo_negocio)
        );
        tiposNegociosArr = tiposNegociosFiltered.map((tipo: any) => ({
          ...tipo,
          value: tipo.id_tipo_negocio,
          label: tipo.nome_tipo_negocio,
        }));
        setTiposNegocios(tiposNegociosFiltered);
        setTodosTiposNegocios(tiposNegociosRes);

        distribuidoresArr = [
          ...distribuidoresRes,
          ...distribuidoresNativosRes,
        ].map((d: any) => ({
          ...d,
          value: d.id_distribuidor,
          label: d.nome_distribuidor,
        }));

        setDistribuidores([...distribuidoresRes, ...distribuidoresNativosRes]);

        tiposTelhadosArr = tiposTelhadosRes.map((t: any) => ({
          ...t,
          value: t.id_telhado,
          label: t.nome_telhado,
        }));
        setTiposTelhados(tiposTelhadosRes);

        const politicaPreco = [
          {
            header: "ID",
            accessorKey: "id_preco_politica",
            rowSpan: 2,
          },
          {
            header: "Status",
            accessorKey: "status_preco_politica",
            rowSpan: 2,
          },
          {
            header: "Variações",
            className: "bg-[#89B3D9]/[0.5]",
            columns: [
              ...(vincular_potencia
                ? [
                    {
                      header: "Faixa de Potência kW (De)",
                      accessorKey: "potencia_min_variacao_politica",
                      mascara: "numero",
                    },
                    {
                      header: "Faixa de Potência kW (Até)",
                      accessorKey: "potencia_max_variacao_politica",
                      mascara: "numero",
                    },
                  ]
                : [
                    {
                      header: "Qtd de Módulos (De)",
                      accessorKey: "qtd_modulos_min_variacao_politica",
                      mascara: "numerico",
                    },
                    {
                      header: "Qtd de Módulos (Até)",
                      accessorKey: "qtd_modulos_max_variacao_politica",
                      mascara: "numerico",
                    },
                  ]),
              {
                header: "Distribuidores",
                accessorKey: "distribuidores_variacao_politica",
                type: "multiSelect",
                options: distribuidoresArr,
              },
              {
                header: "Tipos de Telhado",
                accessorKey: "telhados_variacao_politica",
                type: "multiSelect",
                options: tiposTelhadosArr,
              },
              {
                header: "Tipos de Negócio",
                accessorKey: "tipo_negocio_politica",
                type: "multiSelect",
                options: tiposNegociosArr,
              },
            ],
          },
          {
            header: "Produto",
            className: "bg-[#BAD3D9]/[0.5]",
            columns: [
              {
                header: "% Sobre o Kit",
                accessorKey: "kit_produto_politica",
                mascara: "numero",
              },
              {
                header: "% de Lucro",
                accessorKey: "lucro_produto_politica",
                mascara: "numero",
              },
              {
                header: "% Encargos",
                accessorKey: "encargos_produto_politica",
                mascara: "numero",
              },
            ],
          },
          {
            header: "Serviço",
            className: "bg-[#F2E3B3]/[0.5]",
            columns: [
              {
                header: "Valor Fixo (R$)",
                accessorKey: "valor_fixo_servico_politica",
                mascara: "numero",
              },
              {
                header: "Mão de Obra p/ Placa (R$)",
                accessorKey: "obra_por_placa_servico_politica",
                mascara: "numero",
              },
              {
                header: "Mão de Obra por Potência kWp (R$)",
                accessorKey: "obra_por_potencia_servico_politica",
                mascara: "numero",
              },
              {
                header: "% Sobre Serviço",
                accessorKey: "porcentagem_servico_politica",
                mascara: "numero",
              },
              {
                header: "% de Lucro",
                accessorKey: "lucro_servico_politica",
                mascara: "numero",
              },
              {
                header: "% Encargos",
                accessorKey: "encargos_servico_politica",
                mascara: "numero",
              },
            ],
          },
          {
            header: "Total",
            className: "bg-[#F2D5CE]/[0.5] dark:bg-[rgb(140,14,3)]/[0.5]",
            columns: [
              {
                header: "% Sobre Total",
                accessorKey: "porcentagem_total_politica",
                mascara: "numero",
              },
              {
                header: "% de Lucro",
                accessorKey: "lucro_total_politica",
                mascara: "numero",
              },
              {
                header: "% Encargos",
                accessorKey: "encargos_total_politica",
                mascara: "numero",
              },
            ],
          },
          {
          header: "Imposto",
          className: "bg-[#E8D5CE]/[0.5]",
          columns: [
            {
              header: "Calcular Imposto Sobre o Projeto",
              accessorKey: "calcular_imposto_projeto_politica",
              type: "select",
              options: [
                { label: "Não Calcular", value: "0" },
                { label: "Calcular pelo Total Final", value: "1" },
                { label: "Calcular pelo Total Final - Custo do Kit", value: "2" },
              ],
            },
            {
              header: "% Do Imposto",
              accessorKey: "porcentagem_imposto_politica",
              mascara: "numero",
            },
          ],
        },
      ];

        setPoliticasDePreco(politicaPreco);
      } catch (err) {
        console.error(err);
      }
    };
    carregarDados();
  }, []);

  async function filterData(data: any) {
    data["loja_variacao_politica"] = id_loja;
    if (vincularPotencia) {
      data["vincular_potencia_variacao_politica"] = "1";
    } else {
      data["vincular_modulos_variacao_politica"] = "1";
    }
  }

  async function onSubmitCadastroPoliticaPreco(data: any) {
    await filterData(data);
    await filterData(data);
    return cadastrarPoliticaPreco(data);
  }

  async function onSubmitPoliticaPreco(data: any) {
    await filterData(data);
    await filterData(data);
    return editarPoliticaPreco(data);
  }

  function formatListPoliticasPreco(arr: any[]) {
    return arr.map((e: any) => {
      e["distribuidores_variacao_politica"] = distribuidores
        .filter(
          (distribuidor) =>
            e["distribuidores_variacao_politica"]
              ?.split(",")
              .includes(distribuidor.id_distribuidor) ||
            e["distribuidores_variacao_politica"] == "*"
        )
        .map((distribuidor) => distribuidor.nome_distribuidor)
        .reduce(
          (acc, curr, currIndex, arr) =>
            arr.length == distribuidores.length ? ["Todos"] : arr,
          []
        )
        .join(", ");
      e["telhados_variacao_politica"] = tiposTelhados
        .filter(
          (tipoTelhado) =>
            e["telhados_variacao_politica"]
              ?.split(",")
              .includes(tipoTelhado.id_telhado) ||
            e["telhados_variacao_politica"] == "*"
        )
        .map((tipoTelhado) => tipoTelhado.nome_telhado)
        .reduce(
          (acc, curr, currIndex, arr) =>
            arr.length == tiposTelhados.length ? ["Todos"] : arr,
          []
        )
        .join(", ");

      e["tipo_negocio_politica"] = tiposNegocios
        .filter(
          (tipoNegocio) =>
            e["tipo_negocio_politica"]
              ?.split(",")
              .includes(tipoNegocio.id_tipo_negocio) ||
            e["tipo_negocio_politica"] == "*"
        )
        .map((tipoNegocio) => tipoNegocio.nome_tipo_negocio)
        .reduce(
          (acc, curr, currIndex, arr) =>
            arr.length == tiposNegocios.length ? ["Todos"] : arr,
          []
        )
        .join(", ");

      Object.keys(e)
        .filter(
          (chave) =>
            ![
              "id_preco_politica",
              "status_preco_politica",
              "distribuidores_variacao_politica",
              "telhados_variacao_politica",
              "qtd_modulos_min_variacao_politica",
              "qtd_modulos_max_variacao_politica",
              "tipo_negocio_politica",
            ].includes(chave)
        )
        .map((chave) => {
          e[chave] = FormatFields.formatarNumero(e[chave]);
        });
      return e;
    });
  }

  /**
   * Altera o parâmetro de configuração (Módulos x Potência).
   * Se já existirem políticas cadastradas com o outro modo, avisa e exclui (desativa) antes de trocar.
   */
  async function changeParametroSelecionado(
    val: boolean | undefined = undefined
  ) {
    const novoValor = val !== undefined ? val : !vincularPotencia;
    if (vincularPotencia === novoValor) return;

    // Verifica se existem políticas cadastradas com o modo atual
    try {
      const todasPoliticas = await listarPoliticasPreco(id_loja);
      const politicasDoModoAtual = todasPoliticas.filter((e: any) =>
        vincularPotencia
          ? e.vincular_potencia_variacao_politica == "1"
          : e.vincular_modulos_variacao_politica == "1"
      );

      if (politicasDoModoAtual.length > 0) {
        handleSweetAlert(
          {
            icon: "warning",
            title: "Atenção: Políticas existentes",
            html: `
              <div>
                Existem <b>${politicasDoModoAtual.length}</b> política(s) cadastrada(s) com o modo 
                <b>${vincularPotencia ? "Potência do Sistema" : "Quantidade de Módulos"}</b>.<br/><br/>
                Ao trocar para <b>${novoValor ? "Potência do Sistema" : "Quantidade de Módulos"}</b>, 
                as políticas do modo anterior serão <b>desativadas</b>.<br/><br/>
                Deseja continuar?
              </div>
            `,
            showDenyButton: true,
            confirmButtonText: "Sim, trocar e desativar",
            denyButtonText: "Cancelar",
          },
          async () => {
            // Desativa todas as políticas do modo atual
            for (const politica of politicasDoModoAtual) {
              await inativarPoliticaPreco({
                ...politica,
                status_preco_politica: "0",
              });
            }
            alterarParametroSelecionado(novoValor);
            setConfirmData(undefined);
          }
        );
        return;
      }
    } catch (err) {
      console.error(err);
    }

    alterarParametroSelecionado(novoValor);
    setConfirmData(undefined);
  }

  function alterarParametroSelecionado(vincular_potencia: boolean) {
    setVincularPotencia(vincular_potencia);
    const data = {
      loja_variacao_politica: id_loja,
    } as any;
    if (vincular_potencia) {
      data["vincular_potencia_variacao_politica"] = "1";
    } else {
      data["vincular_modulos_variacao_politica"] = "1";
    }
    editaCfgPoliticaPreco(data);
    setPoliticasDePreco((prev: any) => {
      const newPoliticas = [...prev];
      const variacoes = newPoliticas[2];
      const variacoesCols = [...variacoes.columns];
      variacoesCols.splice(
        0,
        2,
        ...(vincular_potencia
          ? [
              {
                header: "Faixa de Potência kW (De)",
                accessorKey: "potencia_min_variacao_politica",
                mascara: "numero",
              },
              {
                header: "Faixa de Potência kW (Até)",
                accessorKey: "potencia_max_variacao_politica",
                mascara: "numero",
              },
            ]
          : [
              {
                header: "Qtd de Módulos (De)",
                accessorKey: "qtd_modulos_min_variacao_politica",
                mascara: "numerico",
              },
              {
                header: "Qtd de Módulos (Até)",
                accessorKey: "qtd_modulos_max_variacao_politica",
                mascara: "numerico",
              },
            ])
      );
      newPoliticas.splice(2, 1, { ...variacoes, columns: variacoesCols });
      return newPoliticas;
    });
  }

  // Monta a listFunction com os filtros aplicados
  const listFunctionFiltrada = async () => {
    const res = await listarPoliticasPreco(id_loja);
    return res.filter((e: any) => {
      // Filtro por modo (módulos ou potência)
      const modoOk = vincularPotencia
        ? e.vincular_potencia_variacao_politica == "1"
        : e.vincular_modulos_variacao_politica == "1";

      // Filtro por status
      const statusOk =
        filtroStatus === "*" || e.status_preco_politica == filtroStatus;

      // Filtro por distribuidor
      const distribuidorOk =
        filtroDistribuidor === "*" ||
        e.distribuidores_variacao_politica == "*" ||
        e.distribuidores_variacao_politica
          ?.split(",")
          .includes(filtroDistribuidor);

      // Filtro por tipo de telhado
      const tipoTelhadoOk =
        filtroTipoTelhado === "*" ||
        e.telhados_variacao_politica == "*" ||
        e.telhados_variacao_politica?.split(",").includes(filtroTipoTelhado);

      // Filtro por tipo de negócio
      const tipoNegocioOk =
        filtroTipoNegocio === "*" ||
        e.tipo_negocio_politica == "*" ||
        e.tipo_negocio_politica?.split(",").includes(filtroTipoNegocio);

      return (
        modoOk && statusOk && distribuidorOk && tipoTelhadoOk && tipoNegocioOk
      );
    });
  };

  const tableKey =
    Number(tipoNegocioSelecionado) +
    (vincularPotencia ? 2 : 3) +
    filtroDistribuidor +
    filtroTipoTelhado +
    filtroStatus +
    filtroTipoNegocio;

  return (
    <div className="flex flex-col gap-4">
      <div className="p-3 rounded-md relative border border-blue-400/50 bg-blue-50/30 dark:bg-blue-900/10">
        <span className="bg-white dark:bg-black px-2 absolute -top-3 text-blue-600 dark:text-blue-400 font-semibold text-sm">
          Configuração da Política de Preço
        </span>
        <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
          Selecione como as faixas das políticas serão configuradas. Ao trocar o
          modo, as políticas do modo anterior serão desativadas.
        </p>
        <div className="relative max-sm:text-xs w-fit flex flex-col justify-center">
          <div className="flex flex-row gap-1 w-fit">
            <div
              className={`flex items-center border transition duration-300 ${
                !vincularPotencia
                  ? "border-blue-500 bg-blue-100 dark:bg-blue-900/30 font-semibold"
                  : "border-gray-300 dark:border-gray-600 text-gray-400"
              } p-2 rounded-l-full rounded-r-[4px] w-44 pr-11 cursor-pointer text-end select-none`}
              onClick={() => changeParametroSelecionado(false)}
            >
              Quantidade de Módulos
            </div>
            <div
              className={`flex items-center border transition duration-300 ${
                vincularPotencia
                  ? "border-blue-500 bg-blue-100 dark:bg-blue-900/30 font-semibold"
                  : "border-gray-300 dark:border-gray-600 text-gray-400"
              } p-2 rounded-r-full rounded-l-[4px] w-44 pl-11 cursor-pointer select-none`}
              onClick={() => changeParametroSelecionado(true)}
            >
              Potência do Sistema em kW
            </div>
          </div>
          <div className="absolute h-full w-full flex flex-col justify-center items-center top-0 pointer-events-none">
            <label className="flex cursor-pointer select-none items-center justify-center pointer-events-auto">
              <div
                className="relative w-fit h-full flex flex-col justify-center items-center cursor-pointer"
                onClick={() => changeParametroSelecionado()}
              >
                <div className="h-5 w-20 rounded-full shadow-inner bg-[#E5E7EB]"></div>
                <div
                  className={`absolute flex flex-col justify-center items-center h-10 w-10 rounded-full transition duration-300 bg-white left-0 border border-blue-400 shadow ${vincularPotencia ? "transform translate-x-[100%]" : "left-0"}`}
                >
                  <span className="active">
                    <Link size={16} />
                  </span>
                </div>
              </div>
            </label>
          </div>
        </div>
      </div>

      {/* ── Filtros ── */}
      <div className="p-3 rounded-md relative border border-black/20">
        <span className="bg-white dark:bg-black px-2 absolute -top-3 font-semibold text-sm">
          Filtros
        </span>
        <div
          className={`flex flex-${isMobile ? "col" : "row"} flex-wrap gap-3`}
        >
          {/* Filtro Tipos de Negócio */}
          <div className="min-w-[180px] flex-1">
            <InputSelectComponent
              name="filtro_tipo_negocio"
              label="Tipo de Negócio"
              options={[
                { label: "Todos", value: "*" },
                ...tiposNegocios.map((tipoNegocio) => ({
                  label: tipoNegocio.nome_tipo_negocio,
                  value: tipoNegocio.id_tipo_negocio,
                })),
              ]}
              onChange={(e: any) => {
                setFiltroTipoNegocio(e?.value ?? "*");
              }}
              defaultValue="*"
              width="w-full"
            />
          </div>

          {/* Filtro Distribuidores */}
          <div className="min-w-[180px] flex-1">
            <InputSelectComponent
              name="filtro_distribuidor"
              label="Distribuidor"
              options={[
                { label: "Todos", value: "*" },
                ...distribuidores.map((d) => ({
                  label: d.nome_distribuidor,
                  value: d.id_distribuidor,
                })),
              ]}
              onChange={(e: any) => {
                setFiltroDistribuidor(e?.value ?? "*");
              }}
              defaultValue="*"
              width="w-full"
            />
          </div>

          {/* Filtro Tipo de Telhado */}
          <div className="min-w-[180px] flex-1">
            <InputSelectComponent
              name="filtro_tipo_telhado"
              label="Tipo de Telhado"
              options={[
                { label: "Todos", value: "*" },
                ...tiposTelhados.map((t) => ({
                  label: t.nome_telhado,
                  value: t.id_telhado,
                })),
              ]}
              onChange={(e: any) => {
                setFiltroTipoTelhado(e?.value ?? "*");
              }}
              defaultValue="*"
              width="w-full"
            />
          </div>

          {/* Filtro Status */}
          <div className="min-w-[150px] flex-1">
            <InputSelectComponent
              name="filtro_status"
              label="Status"
              options={[
                { label: "Todos", value: "*" },
                { label: "Ativo", value: "1" },
                { label: "Inativo", value: "0" },
              ]}
              onChange={(e: any) => {
                setFiltroStatus(e?.value ?? "1");
              }}
              defaultValue="1"
              width="w-full"
            />
          </div>
        </div>
      </div>

      {/* Precificação corretiva (apenas para tipo negócio 2) */}
      {loja && tipoNegocioSelecionado == "2" && (
        <InputSelectComponent
          name="usa_precificacao_corretiva_loja"
          label="Utilizar Precificação"
          skipEffect
          width="xl:w-[350px]"
          options={[
            { label: "Sim", value: "1" },
            { label: "Não", value: "0" },
          ]}
          onChange={(e: any) =>
            editarLoja({ id_loja, usa_precificacao_corretiva_loja: e.value })
          }
          defaultValue={loja?.usa_precificacao_corretiva_loja}
        />
      )}

      {/* ── Tabela de Políticas de Preço ── */}
      {politicasDePreco[0] != undefined && distribuidores[0] != undefined ? (
        <ReactTable
          key={tableKey}
          columns={politicasDePreco}
          listFunction={listFunctionFiltrada}
          formatFunction={formatListPoliticasPreco}
          createFunction={onSubmitCadastroPoliticaPreco}
          editFunction={onSubmitPoliticaPreco}
          Form={(props) => (
            <FormPoliticaPreco
              {...props}
              vincularPotencia={vincularPotencia}
              distribuidores={distribuidores}
              tiposTelhados={tiposTelhados}
              disabledFields={
                tipoNegocioSelecionado == "2"
                  ? [
                      "distribuidores_variacao_politica",
                      "telhados_variacao_politica",
                      "kit_produto_politica",
                      "lucro_produto_politica",
                      "encargos_produto_politica",
                    ]
                  : []
              }
              defaultValues={
                tipoNegocioSelecionado == "2"
                  ? {
                      ...props.defaultValues,
                      distribuidores_variacao_politica: "*",
                      telhados_variacao_politica: "*",
                      kit_produto_politica: "0",
                      lucro_produto_politica: "0",
                      encargos_produto_politica: "0",
                    }
                  : props.defaultValues
              }
              tiposNegocios={tiposNegocios}
              todosTiposNegocios={todosTiposNegocios}
            />
          )}
          pageName="Politica de Preço"
          idCol="id_preco_politica"
          isActiveCol="status_preco_politica"
          canEdit
          actionButtons={(
            data: any,
            updateTable: any,
            setIsLoading: any,
            { idCol, isActiveCol, pageName, editFunction, listData }: any
          ) => {
            const isAtivo =
              data[isActiveCol] === "Ativo" || data[isActiveCol] === "1";
            const podeExcluir = !isAtivo;
            return [
              {
                className: podeExcluir ? "buttonDanger" : "buttonDisabled",
                disabled: !podeExcluir,
                title: podeExcluir
                  ? "Excluir Política"
                  : "Não é possível excluir pois está ativo!",
                content: <MdDelete />,
                onClick: () => {
                  if (!podeExcluir) return;
                  Swal.fire({
                    title: "Confirmar Exclusão",
                    text: `Deseja excluir a Politica "${data["id_preco_politica"]}"? Esta ação não pode ser desfeita.`,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Sim, excluir!",
                    cancelButtonText: "Cancelar",
                  }).then((result) => {
                    if (result.isConfirmed) {
                      excluirPolitica({
                        id_preco_politica: data["id_preco_politica"],
                      }).then(() => {
                        updateTable();
                      });
                    }
                  });
                },
              },

              isAtivo
                ? {
                    className: `navButton bg-error text-white`,
                    onClick: () =>
                      handleSweetAlert(
                        {
                          icon: "warning",
                          title: `Desativar ${pageName}`,
                          html: `Tem certeza que deseja <b>Desativar</b> a faixa ${data[idCol]}?`,
                        },
                        async () =>
                          inativarPoliticaPreco({
                            ...data,
                            [isActiveCol]: "0",
                          }).then(() => updateTable())
                      ),
                    content: <X size={16} />,
                  }
                : {
                    className: `navButton bg-success text-white`,
                    onClick: () =>
                      handleSweetAlert(
                        {
                          icon: "question",
                          title: `Reativar ${pageName}`,
                          html: `Tem certeza que deseja <b>Reativar</b> a faixa ${data[idCol]}?`,
                        },
                        async () =>
                          inativarPoliticaPreco({
                            ...data,
                            [isActiveCol]: "1",
                          }).then(() => updateTable())
                      ),
                    content: <Power size={16} />,
                  },
            ];
          }}
          tableDivClassName="relative max-h-[41vh]"
        />
      ) : (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      )}
    </div>
  );
};
export default PoliticaPrecoConfigComponent;