import ModalComponente from "@/components/Modal/ModalComponente";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarDashboardsMetas } from "@/requests/CRM/Metas/listarMetas";
import { useMemo, useState } from "react";
import { FaListUl } from "react-icons/fa";
import { FaRankingStar } from "react-icons/fa6";
import DetalheNivel from "./DetalheNivel";
import DetalheQuadro from "./DetalheQuadro";

const STATUS_META: Record<string, { label: string; className: string }> = {
  "1": { label: "Planejada", className: "text-[#8e4b10] bg-[#fdf0c2]" },
  "2": { label: "Em Andamento", className: "text-[#266c94] bg-[#b4dded]" },
  "3": { label: "Atingida", className: "text-[#429e12] bg-[#e0facd]" },
  "4": { label: "Não Atingida", className: "text-[#ff0a0a] bg-[#ffc0c0]" },
  "5": { label: "Cancelada", className: "text-[#52525b] bg-[#e4e4e7]" },
};

const NIVEL_LABEL: Record<string, string> = {
  "1": "Loja",
  "2": "Tipo de Negócio",
  "3": "Perfil",
  "4": "Usuário",
};

// Item 12: campo da política de metas que guarda os ids configurados de cada nível
const NIVEL_CAMPO_META: Record<string, string> = {
  "1": "lojas_meta_politica",
  "2": "tiposNegocio_meta_politica",
  "3": "perfis_meta_politica",
  "4": "usuarios_meta_politica",
};

const PERIODO_LABEL: Record<string, string> = {
  "1": "Semanal",
  "2": "Quinzenal",
  "3": "Mensal",
  "4": "Trimestral",
  "5": "Semestral",
  "6": "Anual",
};

const LIMITE_RANKING = 10;

const formatarDataBrasileira = (data: string): string => {
  if (!data) return "-";
  const [ano, mes, dia] = String(data).split("-");
  if (!dia) return String(data);
  return `${dia}/${mes}/${ano}`;
};

const formatarMoeda = (valor: number): string =>
  Number(valor || 0).toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL",
  });

const formatarNumero = (valor: number): string =>
  Number(valor || 0).toLocaleString("pt-BR");

const Quadro = ({
  titulo,
  valor,
  cor,
  onClick,
}: {
  titulo: string;
  valor: string | number;
  cor: string;
  onClick?: () => void;
}) => (
  <div
    onClick={onClick}
    className={`group relative rounded-md border border-stroke bg-white p-4 shadow-default dark:border-strokedark dark:bg-boxdark ${
      onClick
        ? "cursor-pointer transition-colors hover:border-primary"
        : ""
    }`}
  >
    <span className="text-sm font-medium text-body dark:text-bodydark">
      {titulo}
    </span>
    <h4 className={`mt-1 text-title-md font-bold ${cor}`}>{valor}</h4>
    {onClick && (
      <span className="pointer-events-none absolute right-2 top-2 text-[10px] font-semibold text-primary opacity-0 transition-opacity group-hover:opacity-100">
        Detalhes
      </span>
    )}
  </div>
);

const TabelaRanking = ({
  linhas,
  onNivelClick,
}: {
  linhas: any[];
  onNivelClick?: (meta: any) => void;
}) => (
  <div className="w-full overflow-x-auto">
    <table className="w-full min-w-[820px] text-left text-sm">
      <thead>
        <tr className="border-b border-stroke text-body dark:border-strokedark dark:text-bodydark">
          <th className="p-2">#</th>
          <th className="p-2">Meta</th>
          <th className="p-2">Nível</th>
          <th className="p-2">Objetivo</th>
          <th className="p-2">Período</th>
          <th className="p-2">Início da Meta</th>
          <th className="p-2">Fim da Meta</th>
          {/* Item 10: Meta antes do Realizado */}
          <th className="p-2 text-right">Meta</th>
          <th className="p-2 text-right">Realizado</th>
          <th className="p-2 text-right">% Atingido</th>
          <th className="p-2 text-center">Status</th>
        </tr>
      </thead>
      <tbody>
        {linhas.map((meta: any, index: number) => {
          const status =
            STATUS_META[String(meta.status_meta_politica)] ?? STATUS_META["2"];
          // Item 05: meta é cadastrada por usuário -> exibe meta x qtd usuários
          const metaExibida =
            meta.metaTotal ?? Number(meta.valorObjetivo_meta_politica);
          const percentual = Number(
            meta.percentualAjustado ?? meta.percentual_meta_politica,
          );
          const nivel = String(meta.nivel_meta_politica);
          const nivelLabel = NIVEL_LABEL[nivel] ?? "-";
          return (
            <tr
              key={meta.id_meta_politica}
              className="border-b border-stroke dark:border-strokedark"
            >
              <td className="p-2 font-semibold text-body dark:text-bodydark">
                {index + 1}º
              </td>
              <td className="p-2 font-medium text-black dark:text-white">
                {meta.nome_meta_politica}
              </td>
              <td className="p-2 text-body dark:text-bodydark">
                {onNivelClick && NIVEL_LABEL[nivel] ? (
                  <button
                    type="button"
                    title={`Abrir Ranking do Nível ${nivelLabel}`}
                    onClick={() => onNivelClick(meta)}
                    className="inline-flex items-center gap-1 rounded-full border border-stroke px-2 py-0.5 text-xs font-semibold text-primary hover:bg-primary hover:text-white dark:border-strokedark"
                  >
                    <FaRankingStar />
                    {nivelLabel}
                  </button>
                ) : (
                  nivelLabel
                )}
              </td>
              <td className="p-2 text-body dark:text-bodydark">
                {meta.nome_objetivo_meta ?? "-"}
              </td>
              <td className="p-2 text-body dark:text-bodydark">
                {PERIODO_LABEL[String(meta.periodo_meta_politica)] ??
                  meta.periodo_meta_politica ??
                  "-"}
              </td>
              <td className="p-2 text-body dark:text-bodydark">
                {formatarDataBrasileira(meta.dataInicial_meta_politica)}
              </td>
              <td className="p-2 text-body dark:text-bodydark">
                {formatarDataBrasileira(meta.dataFinal_meta_politica)}
              </td>
              {/* Item 10: Meta antes do Realizado */}
              <td className="p-2 text-right text-body dark:text-bodydark">
                {Number(metaExibida).toLocaleString("pt-BR")}
              </td>
              <td className="p-2 text-right text-black dark:text-white">
                {meta.realizado_meta_politica === null ||
                meta.realizado_meta_politica === undefined
                  ? "-"
                  : Number(meta.realizado_meta_politica).toLocaleString(
                      "pt-BR",
                    )}
              </td>
              <td className="p-2 text-right">
                <div className="flex flex-col items-end gap-1">
                  <span
                    className={`font-semibold ${
                      percentual >= 100 ? "text-[#429e12]" : "text-[#266c94]"
                    }`}
                  >
                    {percentual.toLocaleString("pt-BR", {
                      maximumFractionDigits: 1,
                    })}
                    %
                  </span>
                  <div className="h-1.5 w-24 overflow-hidden rounded-full bg-[#e4e4e7] dark:bg-strokedark">
                    <div
                      className={`h-full rounded-full ${
                        percentual >= 100 ? "bg-[#429e12]" : "bg-[#266c94]"
                      }`}
                      style={{
                        width: `${Math.min(percentual, 100)}%`,
                      }}
                    />
                  </div>
                </div>
              </td>
              <td className="p-2 text-center">
                <span
                  className={`inline-block whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-semibold ${status.className}`}
                >
                  {status.label}
                </span>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);

type LinhaNivel = { id: string; nome: string; meta: number; total: number };

const BarraPercentual = ({ percentual }: { percentual: number }) => (
  <div className="flex flex-col items-center gap-1">
    <span
      className={`font-semibold ${
        percentual >= 100 ? "text-[#429e12]" : "text-[#266c94]"
      }`}
    >
      {percentual.toLocaleString("pt-BR", { maximumFractionDigits: 1 })}%
    </span>
    <div className="h-1.5 w-24 overflow-hidden rounded-full bg-[#e4e4e7] dark:bg-strokedark">
      <div
        className={`h-full rounded-full ${
          percentual >= 100 ? "bg-[#429e12]" : "bg-[#266c94]"
        }`}
        style={{ width: `${Math.min(percentual, 100)}%` }}
      />
    </div>
  </div>
);

// Ranking por entidade (usuário/perfil/loja/tipo de negócio) para um objetivo.
// Item 09: vale para todos os níveis — Meta, Realizado e % Atingido.
const TabelaRankingNivel = ({
  linhas,
  nivelLabel,
  ehValor,
  ehTaxa,
  onDetalhe,
}: {
  linhas: LinhaNivel[];
  nivelLabel: string;
  ehValor: boolean;
  ehTaxa: boolean;
  onDetalhe?: (linha: LinhaNivel) => void;
}) => {
  const formatar = (valor: number): string =>
    ehTaxa
      ? `${Number(valor || 0).toLocaleString("pt-BR", {
          maximumFractionDigits: 1,
        })}%`
      : ehValor
        ? formatarMoeda(valor)
        : formatarNumero(valor);

  // Detalhe do nível em ReactTable (pesquisa, ordenação, paginação e export).
  // A posição é calculada antes, mantendo o ranking por Realizado.
  const dados = useMemo(
    () =>
      linhas.map((linha, index) => ({
        ...linha,
        posicao: `${index + 1}º`,
        percentual:
          Number(linha.meta) > 0
            ? (Number(linha.total) / Number(linha.meta)) * 100
            : 0,
      })),
    [linhas],
  );

  const colunas = useMemo(
    () => [
      { header: "#", accessorKey: "posicao" },
      {
        header: `ID ${nivelLabel}`,
        accessorKey: "id",
        cell: (info: any) => info.getValue() || "-",
      },
      { header: nivelLabel, accessorKey: "nome" },
      // Item 10: Meta antes do Realizado
      {
        header: "Meta",
        accessorKey: "meta",
        cell: (info: any) => formatar(Number(info.getValue())),
      },
      {
        header: "Realizado",
        accessorKey: "total",
        cell: (info: any) => formatar(Number(info.getValue())),
      },
      {
        header: "% Atingido",
        accessorKey: "percentual",
        cell: (info: any) => (
          <BarraPercentual percentual={Number(info.getValue())} />
        ),
      },
      // Item 07: detalhe dos registros que compõem o Realizado da linha
      {
        header: "Detalhes",
        accessorKey: "id",
        id: "detalhe",
        enableSorting: false,
        cell: ({ row }: any) =>
          onDetalhe && row.original?.id ? (
            <button
              type="button"
              title={`Ver registros de ${row.original.nome}`}
              onClick={() => onDetalhe(row.original)}
              className="inline-flex items-center gap-1 rounded-full border border-stroke px-2 py-0.5 text-xs font-semibold text-primary hover:bg-primary hover:text-white dark:border-strokedark"
            >
              <FaListUl />
              Detalhes
            </button>
          ) : (
            "-"
          ),
      },
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [nivelLabel, ehValor, ehTaxa, onDetalhe],
  );

  return (
    <ReactTable
      pageName={`Ranking do Nível ${nivelLabel}`}
      columns={colunas}
      data={dados}
      listFunction={async () => dados}
    />
  );
};

const ResumoMetas = ({
  metas,
  gerencial,
  filtros,
  lojas = [],
  tiposNegocio = [],
  perfis = [],
  usuarios = [],
}: {
  metas: any[];
  gerencial?: any;
  filtros?: any;
  lojas?: any[];
  tiposNegocio?: any[];
  perfis?: any[];
  usuarios?: any[];
}) => {
  const [detalhe, setDetalhe] = useState<{
    meta: any;
    loading: boolean;
    objetivo: string;
    linhas: LinhaNivel[];
  } | null>(null);

  // Itens 03 a 11: modal de detalhes de um quadro do QUADRO GERENCIAL
  const [detalheQuadro, setDetalheQuadro] = useState<{
    titulo: string;
    tipo: string;
  } | null>(null);

  // Item 07: modal com os registros de um registro do Ranking do Nível
  const [detalheEntidade, setDetalheEntidade] = useState<{
    meta: any;
    entidade: LinhaNivel;
  } | null>(null);

  // Itens 08 e 09: a meta é individual por registro do nível, então a Meta é
  // "Qtde do Nível x Valor Objetivo" — o back-end já devolve esses dois campos
  // (metaTotal_meta_politica / quantidadeNivel_meta_politica) e o % Atingido
  // é sempre Realizado / Meta.
  const metasCalc = useMemo(() => {
    return metas.map((m: any) => {
      const qtdNivel = Number(m.quantidadeNivel_meta_politica) || 1;
      const objetivoBase = Number(m.valorObjetivo_meta_politica) || 0;
      const metaTotal =
        Number(m.metaTotal_meta_politica) || objetivoBase * qtdNivel;
      const realizado = m.realizado_meta_politica;
      const percentualAjustado =
        realizado === null || realizado === undefined
          ? m.percentual_meta_politica
          : metaTotal > 0
            ? (Number(realizado) / metaTotal) * 100
            : 0;
      return { ...m, qtdNivel, metaTotal, percentualAjustado };
    });
  }, [metas]);

  const resumo = useMemo(() => {
    const contagem: Record<string, number> = {
      "1": 0,
      "2": 0,
      "3": 0,
      "4": 0,
      "5": 0,
    };
    let somaPercentual = 0;
    let qtdComPercentual = 0;

    metasCalc.forEach((meta: any) => {
      const status = String(meta.status_meta_politica);
      if (contagem[status] !== undefined) contagem[status] += 1;

      const percentual = meta.percentualAjustado;
      if (percentual !== null && percentual !== undefined) {
        somaPercentual += Number(percentual);
        qtdComPercentual += 1;
      }
    });

    const encerradas = contagem["3"] + contagem["4"];
    const taxaSucesso =
      encerradas > 0 ? Math.round((contagem["3"] / encerradas) * 100) : 0;
    const percentualMedio =
      qtdComPercentual > 0 ? Math.round(somaPercentual / qtdComPercentual) : 0;

    return {
      total: metasCalc.length,
      contagem,
      taxaSucesso,
      percentualMedio,
    };
  }, [metasCalc]);

  const rankeaveis = useMemo(() => {
    return [...metasCalc]
      .filter(
        (meta: any) =>
          meta.percentualAjustado !== null &&
          meta.percentualAjustado !== undefined,
      )
      .sort(
        (a: any, b: any) =>
          Number(b.percentualAjustado) - Number(a.percentualAjustado),
      );
  }, [metasCalc]);

  const ranking = useMemo(
    () => rankeaveis.slice(0, LIMITE_RANKING),
    [rankeaveis],
  );

  // Itens 03 a 11: abre o modal de detalhes de um quadro gerencial.
  const abrirDetalheQuadro = (titulo: string, tipo: string) =>
    setDetalheQuadro({ titulo, tipo });

  // Item 12: registros configurados na política de meta para o nível da meta.
  // O ranking precisa listar todos eles, inclusive os que não realizaram nada.
  const entidadesConfiguradas = (
    meta: any,
  ): { id: string; nome: string }[] => {
    const nivel = String(meta?.nivel_meta_politica);
    const campo = NIVEL_CAMPO_META[nivel];
    if (!campo) return [];

    const fonte =
      nivel === "1"
        ? { lista: lojas, idKey: "id_loja", nomeKey: "nome_loja" }
        : nivel === "2"
          ? {
              lista: tiposNegocio,
              idKey: "id_tipo_negocio",
              nomeKey: "nome_tipo_negocio",
            }
          : nivel === "3"
            ? { lista: perfis, idKey: "id_perfil", nomeKey: "nome_perfil" }
            : { lista: usuarios, idKey: "id_usuario", nomeKey: "nome_usuario" };

    const ids = String(meta?.[campo] ?? "")
      .split(",")
      .map((id: string) => id.trim())
      .filter(Boolean);

    return ids.map((id) => {
      const item = fonte.lista.find(
        (registro: any) => String(registro[fonte.idKey]) === id,
      );
      return { id, nome: item?.[fonte.nomeKey] ?? `ID ${id}` };
    });
  };

  // Ao clicar no botão de Nível, busca o detalhe da meta e monta o ranking das
  // entidades (usuário/perfil/loja/tipo de negócio) pelo objetivo.
  const abrirRankingNivel = async (meta: any) => {
    const objetivoId = meta.id_objetivo_meta ?? meta.objetivo_meta_politica;
    setDetalhe({ meta, loading: true, objetivo: "", linhas: [] });
    try {
      const res = await listarDashboardsMetas(objetivoId, meta.id_meta_politica);
      const dados = Array.isArray(res) ? res[0]?.data : null;
      const objetivoNome = dados?.objetivo ?? meta.nome_objetivo_meta ?? "";
      const series = dados?.series ?? [];
      const ehTaxa = String(objetivoNome).includes("Taxa");

      // Totais por nome de entidade vindos do gráfico da meta
      const totalPorNome = new Map<string, number>();
      series.forEach((serie: any) => {
        if (!serie?.name || serie.name === "Desconhecido") return;
        const valores = (serie.data ?? []).map((v: any) => Number(v) || 0);
        const soma = valores.reduce((a: number, b: number) => a + b, 0);
        // Taxa: média entre os períodos; demais objetivos: soma
        const total =
          ehTaxa && valores.length > 0 ? soma / valores.length : soma;
        totalPorNome.set(String(serie.name), total);
      });

      // Item 09: a meta é cadastrada uma vez na política e vale para cada
      // registro do nível, então a Meta da linha é o valor do objetivo.
      const metaEntidade = Number(meta.valorObjetivo_meta_politica) || 0;

      // Item 12: parte de tudo que está configurado na meta (zerado quando não
      // houve realização) e complementa com séries que não estejam na política.
      const configuradas = entidadesConfiguradas(meta);
      const nomesConfigurados = new Set(configuradas.map((e) => e.nome));
      const linhas: LinhaNivel[] = [
        ...configuradas.map((entidade) => ({
          id: entidade.id,
          nome: entidade.nome,
          meta: metaEntidade,
          total: totalPorNome.get(entidade.nome) ?? 0,
        })),
        ...Array.from(totalPorNome.entries())
          .filter(([nome]) => !nomesConfigurados.has(nome))
          .map(([nome, total]) => ({ id: "", nome, meta: metaEntidade, total })),
      ].sort((a, b) => b.total - a.total);

      setDetalhe({ meta, loading: false, objetivo: objetivoNome, linhas });
    } catch (error) {
      console.error("Erro ao carregar ranking do nível:", error);
      setDetalhe({ meta, loading: false, objetivo: "", linhas: [] });
    }
  };

  // O QUADRO GERENCIAL é uma visão global: continua visível mesmo quando o
  // filtro não retorna nenhuma política de meta.
  const temMetas = Boolean(metas && metas.length > 0);
  if (!temMetas && !gerencial) return null;

  const detalheNivelLabel = detalhe
    ? (NIVEL_LABEL[String(detalhe.meta?.nivel_meta_politica)] ?? "")
    : "";
  const detalheEhTaxa = String(detalhe?.objetivo ?? "").includes("Taxa");
  const detalheEhValor = String(detalhe?.objetivo ?? "").includes("Valor");

  return (
    <div className="mb-6">
      {/* Item 06 */}
      {temMetas && (
        <>
      <h2 className="mb-3 text-lg font-semibold text-black dark:text-white">
        RESUMO POR STATUS
      </h2>
      <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4 xl:grid-cols-7">
        <Quadro
          titulo="Total de Metas"
          valor={resumo.total}
          cor="text-black dark:text-white"
        />
        <Quadro
          titulo="Planejadas"
          valor={resumo.contagem["1"]}
          cor="text-[#8e4b10]"
        />
        <Quadro
          titulo="Em Andamento"
          valor={resumo.contagem["2"]}
          cor="text-[#266c94]"
        />
        <Quadro
          titulo="Atingidas"
          valor={resumo.contagem["3"]}
          cor="text-[#429e12]"
        />
        <Quadro
          titulo="Não Atingidas"
          valor={resumo.contagem["4"]}
          cor="text-[#ff0a0a]"
        />
        <Quadro
          titulo="Canceladas"
          valor={resumo.contagem["5"]}
          cor="text-[#52525b] dark:text-bodydark"
        />
        <Quadro
          titulo="Taxa de Sucesso"
          valor={`${resumo.taxaSucesso}%`}
          cor="text-[#429e12]"
        />
      </div>
        </>
      )}

      {/* Item 07 */}
      {gerencial && (
        <div className="mb-6">
          <h2 className="mb-3 text-lg font-semibold text-black dark:text-white">
            QUADRO GERENCIAL
          </h2>
          <div className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
            <Quadro
              titulo="Quantidade de Leads"
              valor={formatarNumero(gerencial.qtdLeads)}
              cor="text-black dark:text-white"
              onClick={() =>
                abrirDetalheQuadro("Detalhe - Quantidade de Leads", "leads")
              }
            />
            <Quadro
              titulo="Quantidade de Agendamentos"
              valor={formatarNumero(gerencial.qtdAgendamentos)}
              cor="text-black dark:text-white"
              onClick={() =>
                abrirDetalheQuadro(
                  "Detalhe - Agendamentos",
                  "agendamentos",
                )
              }
            />
            <Quadro
              titulo="Quantidade Propostas Geradas"
              valor={formatarNumero(gerencial.qtdPropostasGeradas)}
              cor="text-[#266c94]"
              onClick={() =>
                abrirDetalheQuadro(
                  "Detalhe - Propostas Geradas",
                  "propostasGeradas",
                )
              }
            />
            <Quadro
              titulo="Valor de Propostas Geradas"
              valor={formatarMoeda(gerencial.valorPropostasGeradas)}
              cor="text-[#266c94]"
              onClick={() =>
                abrirDetalheQuadro(
                  "Detalhe - Propostas Geradas",
                  "propostasGeradas",
                )
              }
            />
            <Quadro
              titulo="Quantidade Propostas Aprovadas"
              valor={formatarNumero(gerencial.qtdPropostasAprovadas)}
              cor="text-[#8e4b10]"
              onClick={() =>
                abrirDetalheQuadro(
                  "Detalhe - Propostas Aprovadas",
                  "propostasAprovadas",
                )
              }
            />
            <Quadro
              titulo="Valor de Propostas Aprovadas"
              valor={formatarMoeda(gerencial.valorPropostasAprovadas)}
              cor="text-[#8e4b10]"
              onClick={() =>
                abrirDetalheQuadro(
                  "Detalhe - Propostas Aprovadas",
                  "propostasAprovadas",
                )
              }
            />
            <Quadro
              titulo="Quantidade de Vendas"
              valor={formatarNumero(gerencial.qtdVendas)}
              cor="text-[#429e12]"
              onClick={() =>
                abrirDetalheQuadro("Detalhe - Vendas", "vendas")
              }
            />
            <Quadro
              titulo="Valor de Vendas"
              valor={formatarMoeda(gerencial.valorVendas)}
              cor="text-[#429e12]"
              onClick={() =>
                abrirDetalheQuadro("Detalhe - Vendas", "vendas")
              }
            />
            <Quadro
              titulo="Taxa de Conversão de Leads"
              valor={`${Number(gerencial.taxaConversaoLeads || 0).toLocaleString(
                "pt-BR",
                { maximumFractionDigits: 1 },
              )}%`}
              cor="text-[#429e12]"
              onClick={() =>
                abrirDetalheQuadro(
                  "Detalhe - Taxa de Conversão de Leads",
                  "taxaConversao",
                )
              }
            />
          </div>
        </div>
      )}

      {temMetas && (
      <div className="rounded-md border border-stroke bg-white p-4 shadow-default dark:border-strokedark dark:bg-boxdark">
        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
          <h3 className="text-lg font-semibold text-black dark:text-white">
            Ranking de Metas
          </h3>
          <span className="text-sm text-body dark:text-bodydark">
            % médio de atingimento: <b>{resumo.percentualMedio}%</b>
          </span>
        </div>

        {/* Item 05 */}
        {rankeaveis.length > LIMITE_RANKING && (
          <div className="mb-3 rounded-md border border-[#b4dded] bg-[#eaf5fb] px-3 py-2 text-sm text-[#266c94]">
            Exibindo apenas os <b>{LIMITE_RANKING} primeiros</b> de{" "}
            {rankeaveis.length} metas com resultado.
          </div>
        )}

        <TabelaRanking linhas={ranking} onNivelClick={abrirRankingNivel} />
      </div>
      )}

      <ModalComponente
        hasForm={false}
        hasSaveButton={false}
        defaultW="w-[1000px]"
        header={`Ranking do Nível ${detalheNivelLabel}`}
        opened={!!detalhe}
        onClose={() => setDetalhe(null)}
      >
        <div className="p-4">
          {detalhe?.meta && (
            <div className="mb-3 text-sm text-body dark:text-bodydark">
              Meta: <b>{detalhe.meta.nome_meta_politica}</b>
              {detalhe.objetivo ? (
                <>
                  {" "}
                  · Objetivo: <b>{detalhe.objetivo}</b>
                </>
              ) : null}
            </div>
          )}
          {detalhe?.loading ? (
            <div className="p-6 text-center text-body dark:text-bodydark">
              Carregando...
            </div>
          ) : detalhe && detalhe.linhas.length > 0 ? (
            <TabelaRankingNivel
              linhas={detalhe.linhas}
              nivelLabel={detalheNivelLabel}
              ehValor={detalheEhValor}
              ehTaxa={detalheEhTaxa}
              onDetalhe={(linha) =>
                setDetalheEntidade({ meta: detalhe.meta, entidade: linha })
              }
            />
          ) : (
            <div className="p-6 text-center text-body dark:text-bodydark">
              Nenhum dado para este nível.
            </div>
          )}
        </div>
      </ModalComponente>

      {/* Item 07: registros de um registro do Ranking do Nível, por período */}
      {detalheEntidade && (
        <DetalheNivel
          meta={detalheEntidade.meta}
          nivelLabel={detalheNivelLabel}
          entidade={detalheEntidade.entidade}
          onClose={() => setDetalheEntidade(null)}
        />
      )}

      {/* Itens 03 a 11: modal de detalhes do quadro gerencial */}
      {detalheQuadro && (
        <DetalheQuadro
          titulo={detalheQuadro.titulo}
          tipo={detalheQuadro.tipo}
          filtrosIniciais={filtros}
          lojas={lojas}
          tiposNegocio={tiposNegocio}
          perfis={perfis}
          usuarios={usuarios}
          onClose={() => setDetalheQuadro(null)}
        />
      )}
    </div>
  );
};

export default ResumoMetas;