import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarUsuario } from "@/requests/CRM/agenda";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";

import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import ModalComponente from "@/components/Modal/ModalComponente";
import {
  listarMetas,
  listarMetasExclusao,
  listarNiveldeMetas,
  listarObjetivosMetas,
  listarRelatorioMetas,
  diffMeta,
  listarPeriodosMetas,
} from "@/requests/CRM/Metas/listarMetas";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarPerfis } from "@/requests/CRUD/Perfil/listarPerfis";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import format from "date-fns/format";
import { ptBR } from "date-fns/locale";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { FaArrowRight, FaInfoCircle } from "react-icons/fa";

const LogPoliticaMetas = () => {
  const [logMetas, setLogMetas] = useState<any>([]);
  const [periodos, setPeriodos] = useState<any>([]);
  const [diff, setDiff] = useState<any>([]);
  const [diffValues, setDiffValues] = useState<any>([]);
  const [vendedores, setVendedores] = useState<any[]>([]);
  const [loaded, setLoaded] = useState(false);
  const [dataInicio, setDataInicio] = useState<any>("");
  const [dataFim, setDataFim] = useState<any>("");
  const [isLoading, setIsLoading] = useState<any>("");
  const [error, setError] = useState<any>("");
  const { valuesSession, perfil } = useAuth();
  const { session } = valuesSession();
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [lojas, setLojas] = useState<any[]>([]);

  const [perfis, setPerfis] = useState<any[]>([]);
  const [tiposNegocio, setTiposNegocio] = useState<any[]>([]);
  const [niveisMeta, setNiveisMeta] = useState<any[]>([]);
  const [objetivosMeta, setObjetivosMeta] = useState<any[]>([]);

  const [metas, setMetas] = useState<any[]>([]);
  const [metasExclusao, setMetasExclusao] = useState<any[]>([]);
  const [tipoLogSelecionado, setTipoLogSelecionado] = useState();
  const { handleSubmit, ...form } = GetForm();
  const [openModalDescricaoMeta, setOpenModalDescricaoMeta] = useState(false);
  const [metaIdSelecionado, setMetaIdSelecionado] = useState<string>("");
  const [metaSelecionada, setMetaSelecionada] = useState<any>(null);

  const hoje = new Date();
  hoje.setDate(1);
  const hojeString = hoje.toLocaleDateString("pt-BR").split("/").reverse().join("-");

  const fimMes = new Date();
  fimMes.setMonth(fimMes.getMonth() + 1);
  fimMes.setDate(0);
  const fimMesString = fimMes.toLocaleDateString("pt-BR").split("/").reverse().join("-");

  const columns = [
    {
      header: "ID",
      accessorKey: "id_meta_log",
    },
    {
      header: "Tipo do Log",
      accessorKey: "tipoLog_meta_log",
    },
    {
      header: "Data do Log",
      accessorKey: "datetime_meta_log",
    },
    {
      header: "Usuário",
      accessorKey: "user_meta_log",
    },
    {
      header: "ID politica de meta",
      accessorKey: "id_meta_politica",
    },
    {
      header: "Nome da Meta",
      accessorKey: "nome_meta_politica",
    },
  ];

  const tipoLog = [
    { label: "Inserção", value: "0" },
    { label: "Edição", value: "1" },
    { label: "Exclusão", value: "2" },
  ];

  useEffect(() => {
    listarUsuario().then((usuarios) => {
      setVendedores(usuarios);
    });
  }, []);

  useEffect(() => {
    listarMetas().then((res) => {
      setMetas(res);
    });
    listarMetasExclusao().then((res) => {
      setMetasExclusao(res);
    });
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [perfisRes, tiposNegocioRes, niveisMetaRes, objetivosMetaRes, lojasRes, periodosRes] = await Promise.all([
          listarPerfis(),
          listarTiposNegocios(),
          listarNiveldeMetas(),
          listarObjetivosMetas(),
          listarLojas(),
          listarPeriodosMetas(),
        ]);

        setPerfis(perfisRes);
        setTiposNegocio(tiposNegocioRes);
        setNiveisMeta(niveisMetaRes);
        setObjetivosMeta(objetivosMetaRes);
        setLojas(lojasRes);
        setPeriodos(periodosRes);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  const handleDataInicioChange = (e: any) => {
    setDataInicio(e.target.value);
    if (dataFim && e.target.value > dataFim) {
      setError("A data de início não pode ser maior que a data de fim.");
    } else {
      setError("");
    }
  };

  const handleDataFimChange = (e: any) => {
    setDataFim(e.target.value);
    if (dataInicio && e.target.value < dataInicio) {
      setError("A data de fim não pode ser menor que a data de início.");
    } else {
      setError("");
    }
  };

  const onSubtmitFilter = (data: FieldValues) => {
    setIsLoading(true);
    listarRelatorioMetas(data)
      .then((res) => {
        setLoaded(true);
        setLogMetas(res);
      })
      .finally(() => setIsLoading(false));
  };

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

  const formatLogs = async (arr: any) => {
    let usuariosData: any[] = [];

    if (usuarios[0] == undefined) {
      await listarUsuarios(session.id_loja_usuario).then((res) => {
        setUsuarios(res);
        usuariosData = res;
      });
    } else {
      usuariosData = usuarios;
    }

    return arr.map((e: any) => {
      if (e["descricao_meta_log"]) {
        const descriptionParts = e["descricao_meta_log"].split(", ");
        const filledParts = descriptionParts
          .map((part: string) => {
            const [key, value] = part.split(": ");

            if (!value || value === "undefined") return null;

            switch (key) {
              case "Usuario(s)":
                const userValues = value.split(",");
                const userLabels = userValues.map((val) => {
                  const user = usuariosData.find((u) => u.id_usuario === val.trim());
                  return user?.nome_usuario || val;
                });
                return `${key}: ${userLabels.join(", ")}`;

              case "Tipos de Negócio(s)":
                const tipoValues = value.split(",");
                const tipoLabels = tipoValues.map((val) => {
                  const tipo = tiposNegocio.find((t) => t.id_tipo_negocio === val.trim());
                  return tipo?.nome_tipo_negocio || val;
                });
                return `${key}: ${tipoLabels.join(", ")}`;

              case "Perfil(s)":
                const perfilValues = value.split(",");
                const perfilLabels = perfilValues.map((val) => {
                  const perfil = perfis.find((p) => p.id_perfil === val.trim());
                  return perfil?.nome_perfil || val;
                });
                return `${key}: ${perfilLabels.join(", ")}`;

              case "Loja(s)":
                const lojaValues = value.split(",");
                const lojaLabels = lojaValues.map((val) => {
                  const loja = lojas.find((l) => l.id_loja === val.trim());
                  return loja?.nome_loja || val;
                });
                return `${key}: ${lojaLabels.join(", ")}`;
              case "Nível da Meta":
                const nivelMeta = niveisMeta.find((n) => n.id_nivel_meta === value);
                return `${key}: ${nivelMeta?.nome_nivel_meta || value}`;
              case "Objetivo":
                const objetivo = objetivosMeta.find((o) => o.id_objetivo_meta === value);
                return `${key}: ${objetivo?.nome_objetivo_meta || value}`;
              case "Período":
                const periodoItem = periodos.find((p: any) => p.value === value);
                return `${key}: ${periodoItem?.label || value}`;
              default:
                return `${key}: ${value}`;
            }
          })
          .filter(Boolean);

        e["descricao_meta_log"] = filledParts.join(", ");
      }

      e["id_meta_log"] = e["id_meta_log"] || e["codPolitica_meta_log"];

      const tipoLogValue = e["tipoLog_meta_log"] || e["tipoLog_meta_log_exclusao"];
      const tipo = tipoLog.find((log) => log.value === tipoLogValue);
      e["tipoLog_meta_log"] = tipo ? tipo.label : tipoLogValue;

      const datetime = e["datetime_meta_log"] || e["datetime_meta_log_exclusao"];
      if (datetime) {
        try {
          const dataISO = new Date(datetime.replace(" ", "T"));
          e["datetime_meta_log"] = format(dataISO, "dd/MM/yyyy 'às' HH:mm", {
            locale: ptBR,
          });
        } catch {
          e["datetime_meta_log"] = datetime;
        }
      }

      e["user_meta_log"] = e["nome_usuario"];

      e["id_meta_politica"] = e["id_meta_politica"] || e["codPolitica_meta_log"];

      e["nome_meta_politica"] = e["nome_meta_politica"] || e["nome_meta_log_exclusao"];

      return e;
    });
  };

  const findMetaData = (id: string) => {
    const metaData = logMetas.find((meta: any) => meta.id_meta_politica == id || meta.codPolitica_meta_log == id);

    if (metaData) {
      const formatValor = (valor: string, objetivoId: string) => {
        if (!valor) return "";

        // Encontra o objetivo correspondente pelo ID
        const objetivo = objetivosMeta.find((obj) => obj.id_objetivo_meta == objetivoId);

        // Verifica se o objetivo foi encontrado
        if (!objetivo) return valor;

        switch (objetivo.objetivo_meta_politica_log) {
          case "0": // Máscara numérica
            return valor.replace(/\D/g, ""); // Remove tudo que não for número
          case "1": // Máscara monetária brasileira com sufixo R$
            return new Intl.NumberFormat("pt-BR", {
              style: "currency",
              currency: "BRL",
            }).format(parseFloat(valor));
          case "2": // Máscara de porcentagem com sufixo %
            return `${parseFloat(valor).toFixed(2)}%`; // Formata como porcentagem com 2 casas decimais
          default:
            return valor; // Retorna o valor original se nenhuma das condições for atendida
        }
      };

      const formatDate = (dateString: string) => {
        if (!dateString) return "Data não informada";
        const date = new Date(dateString.replace(" ", "T"));
        return format(date, "dd 'de' MMMM 'de' yyyy", { locale: ptBR });
      };

      const formatPeriodo = (periodoValue: string) => {
        const periodoMatch = periodos.find((p: any) => p.value === periodoValue);
        return periodoMatch ? periodoMatch.label : periodoValue;
      };

      const formatLojas = (lojasValue: string) => {
        if (!lojasValue) return "";
        const lojaIds = lojasValue.split(",").map((id) => id.trim());
        const matchedLojas = lojas.filter((loja) => lojaIds.includes(loja.id_loja));
        return matchedLojas.map((loja) => loja.nome_loja).join(", ");
      };

      const formatObjetivos = (objetivoValue: string) => {
        if (!objetivoValue) return "";
        const objetivo = objetivosMeta.find((obj) => obj.id_objetivo_meta === objetivoValue);
        return objetivo ? objetivo.nome_objetivo_meta : objetivoValue;
      };

      const formatNivel = (nivelValue: string) => {
        if (!nivelValue) return "";
        const nivel = niveisMeta.find((n) => n.id_nivel_meta === nivelValue);
        return nivel ? nivel.nome_nivel_meta : nivelValue;
      };

      const formatTiposNegocio = (tiposValue: string) => {
        if (!tiposValue) return "";
        const tipoIds = tiposValue.split(",").map((id) => id.trim());
        const matchedTipos = tiposNegocio.filter((tipo) => tipoIds.includes(tipo.id_tipo_negocio));
        return matchedTipos.map((tipo) => tipo.nome_tipo_negocio).join(", ");
      };

      const formatUsuarios = (usuariosValue: string) => {
        if (!usuariosValue) return "";
        const userIds = usuariosValue.split(",").map((id) => id.trim());
        const matchedUsers = usuarios.filter((user) => userIds.includes(user.id_usuario));
        return matchedUsers.map((user) => user.nome_usuario).join(", ");
      };

      const formatPerfis = (perfisValue: string) => {
        if (!perfisValue) return "";
        const perfilIds = perfisValue.split(",").map((id) => id.trim());
        const matchedPerfis = perfis.filter((perfil) => perfilIds.includes(perfil.id_perfil));
        return matchedPerfis.map((perfil) => perfil.nome_perfil).join(", ");
      };

      const formattedData = {
        ...metaData,
        dataInicial_meta_politica_log: formatDate(metaData.dataInicial_meta_politica_log),
        dataInicialal_meta_politica_log_exclusao: formatDate(metaData.dataInicial_meta_politica_log_exclusao),
        dataFinal_meta_politica_log: formatDate(metaData.dataFinal_meta_politica_log),

        dataFinal_meta_politica_log_exclusao: formatDate(metaData.dataFinal_meta_politica_log_exclusao),
        periodo_meta_politica_log: formatPeriodo(metaData.periodo_meta_politica_log),
        periodo_meta_politica_log_exclusao: formatPeriodo(metaData.periodo_meta_politica_log_exclusao),
        lojas_meta_politica_log: formatLojas(metaData.lojas_meta_politica_log),

        lojas_meta_politica_log_exclusao: formatLojas(metaData.lojas_meta_politica_log_exclusao),
        objetivo_meta_politica_log: formatObjetivos(metaData.objetivo_meta_politica_log),

        objetivo_meta_politica_log_exclusao: formatObjetivos(metaData.objetivo_meta_politica_log_exclusao),
        nivel_meta_politica_log: formatNivel(metaData.nivel_meta_politica_log),

        nivel_meta_politica_log_exclusao: formatNivel(metaData.nivel_meta_politica_log_exclusao),

        tiposNegocio_meta_politica_log: formatTiposNegocio(metaData.tiposNegocio_meta_politica_log),

        tiposNegocio_meta_politica_log_exclusao: formatTiposNegocio(metaData.tiposNegocio_meta_politica_log_exclusao),
        usuarios_meta_politica_log: formatUsuarios(metaData.usuarios_meta_politica_log),

        usuariosuarios_meta_politica_log_exclusao: formatUsuarios(metaData.usuarios_meta_politica_log_exclusao),

        perfis_meta_politica_log: formatPerfis(metaData.perfis_meta_politica_log),

        perfis_meta_politica_log_exclusao: formatPerfis(metaData.perfis_meta_politica_log_exclusao),

        valor_meta_politica_log: formatValor(metaData.valor_meta_politica_log, metaData.objetivo_meta_politica_log),

        valor_meta_politica_log_exclusao: formatValor(
          metaData.valor_meta_politica_log_exclusao,
          metaData.objetivo_meta_politica_log_exclusao
        ),
      };

      setMetaSelecionada(formattedData);
    }
  };

  useEffect(() => {
    if (!diff[0]) return;
    if (!diff[1]) return;
    const result: any = {};

    Object.keys(diff[0]).map((key) => {
      result[key] = diff[0][key] == diff[1][key];
    });

    setDiffValues(result);
  }, [diff]);

  return (
    <>
      <Breadcrumb pageName="Log de Metas" />
      <Container>
        <form onSubmit={handleSubmit(onSubtmitFilter)}>
          {error && (
            <div className="w-full flex flex-col items-center justify-center p-2">
              <span className="text-danger p-2 text-xl bg-stroke bg-opacity-70 rounded-md">{error}</span>
            </div>
          )}

          <InputGroup>
            <Input
              label="Data Inicio LOG"
              name="data_inicio_log"
              width={"xl:w-1/2"}
              defaultValue={hojeString}
              formulario={form}
              type="date"
              onChange={handleDataInicioChange}
            />
            <Input
              label="Data Fim LOG"
              name="data_fim_log"
              width={"xl:w-1/2"}
              defaultValue={fimMesString}
              formulario={form}
              type="date"
              onChange={handleDataFimChange}
            />
          </InputGroup>

          <InputGroup>
            <InputSelectComponent
              name="tipoLog_meta_log"
              label="Tipo de Log"
              width="xl:w-1/2"
              defaultValue={"*"}
              formulario={form}
              options={[{ value: "*", label: "Todos" }, ...tipoLog]}
              required
              error="Campo obrigatório"
              onChange={(value: any) => setTipoLogSelecionado(value.value)}
            />

            <InputSelectComponent
              name="id_meta_politica"
              label="Meta"
              width="xl:w-1/2"
              defaultValue={"*"}
              formulario={form}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...(tipoLogSelecionado === "2"
                  ? metasExclusao.map((e: any) => ({
                      value: e.codPolitica_meta_log,
                      label: e.nome_meta_log_exclusao,
                    }))
                  : metas.map((e: any) => ({
                      value: e.id_meta_politica,
                      label: e.nome_meta_politica,
                    }))),
              ]}
              onChange={(selectedOptions: any) => {
                const hasAllSelected = selectedOptions.some((option: any) => option.value === "*");

                if (hasAllSelected) {
                  form.setValue("id_meta_politica" as never, [{ label: "Todos", value: "*" }] as never);
                } else {
                  form.setValue("id_meta_politica" as never, selectedOptions as never);
                }
              }}
              required
              error="Preencha esse campo"
            />

            <InputSelectComponent
              name="user_meta_log"
              label="Usuário"
              width="xl:w-1/2"
              defaultValue={"*"}
              formulario={form}
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...vendedores.map((e: any) => ({
                  value: e.id_usuario,
                  label: e.nome_usuario,
                })),
              ]}
              onChange={(selectedOptions: any) => {
                const hasAllSelected = selectedOptions.some((option: any) => option.value === "*");

                if (hasAllSelected) {
                  form.setValue("user_meta_log" as never, [{ label: "Todos", value: "*" }] as never);
                } else {
                  form.setValue("user_meta_log" as never, selectedOptions as never);
                }
              }}
            />
          </InputGroup>

          <div className="flex flex-col justify-center items-center">
            <Button loading={isLoading} disabled={error}>
              Confirmar
            </Button>
          </div>
        </form>

        <div className="p-5">
          {loaded && logMetas && (
            <ReactTable
              pageName={"Consulta de Log de Metas"}
              columns={columns}
              listFunction={fakeList}
              formatFunction={formatLogs}
              // data={removeDuplicates(logMetas)}
              data={logMetas}
              idCol="id_meta_log"
              actionButtons={(rowData: any, updateTable: any, setIsLoading: any) => {
                const buttons = [];

                if (rowData.tipoLog_meta_log == "Edição") {
                  buttons.push({
                    title: "Ver Descrição",
                    className: "bg-primary text-white",
                    onClick: async () => {
                      const metaId = rowData.id_meta_politica || rowData.codPolitica_meta_log;
                      setDiff(
                        await diffMeta({
                          id_log: rowData.id_meta_log,
                        })
                      );
                      setMetaIdSelecionado(metaId);
                      findMetaData(metaId);
                      setOpenModalDescricaoMeta(true);
                    },
                    content: <FaInfoCircle />,
                  });
                }

                if (rowData.tipoLog_meta_log == "Exclusão") {
                  buttons.push({
                    title: "Ver Descrição",
                    className: "bg-primary text-white",
                    onClick: async () => {
                      const metaId = rowData.id_meta_politica || rowData.codPolitica_meta_log;
                      const result = await diffMeta({
                        id_log: rowData.id_meta_log,
                      });
                      setDiff([result]);
                      setMetaIdSelecionado(metaId);
                      findMetaData(metaId);
                      setOpenModalDescricaoMeta(true);
                    },
                    content: <FaInfoCircle />,
                  });
                }

                return buttons;
              }}
            />
          )}
        </div>
      </Container>
      <ModalComponente
        header="Informações da Meta"
        opened={openModalDescricaoMeta}
        onClose={() => setOpenModalDescricaoMeta(false)}
        hasForm={false}
        hasSaveButton={false}
      >
        <div className="grid grid-cols-1 gap-4">
          <div className="w-full">
            {metaSelecionada && diff.length > 1 ? (
              <div className="flex flex-1 flex-row gap-[8vh]">
                <div className="flex shadow-lg p-[1vh] flex-1 flex-col">
                  <div className="text-[5vh] text-center p-[3vh]">DE</div>
                  <div className={!diffValues.nome_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Nome: {diff[0].nome_meta_politica}
                  </div>
                  <div className={!diffValues.periodo_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Período:{" "}
                    {
                      periodos?.find((p: any) => p.id_metas_periodo == diff[0].periodo_meta_politica)
                        ?.nome_metas_periodo
                    }
                  </div>
                  <div className={!diffValues.objetivo_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Objetivo:{" "}
                    {
                      objetivosMeta?.find((o: any) => o.id_objetivo_meta == diff[0].objetivo_meta_politica)
                        .nome_objetivo_meta
                    }
                  </div>
                  <div className={!diffValues.valorObjetivo_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Valor Objetivo: {diff[0].valorObjetivo_meta_politica}
                  </div>
                  <div className={!diffValues.dataInicial_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Data Inicial: {diff[0].dataInicial_meta_politica}
                  </div>
                  <div className={!diffValues.dataFinal_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Data Final: {diff[0].dataFinal_meta_politica}
                  </div>
                  <div className={!diffValues.nivel_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Nível:{" "}
                    {niveisMeta?.find((nf: any) => nf.id_nivel_meta == diff[0].nivel_meta_politica).nome_nivel_meta}
                  </div>
                  <div className={!diffValues.lojas_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Lojas:{" "}
                    {diff[0].lojas_meta_politica &&
                      diff[0].lojas_meta_politica
                        ?.split(",")
                        .map((l: any) => lojas?.find((lf: any) => lf.id_loja == l).nome_loja)
                        .join(",")}
                  </div>
                  <div className={!diffValues.perfis_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Perfis:{" "}
                    {diff[0].perfis_meta_politica &&
                      diff[0].perfis_meta_politica
                        ?.split(",")
                        .map((p: any) => perfis?.find((pf: any) => pf.id_perfil == p).nome_perfil)
                        .join(",")}
                  </div>
                  <div className={!diffValues.usuarios_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Usuários:{" "}
                    {diff[0].usuarios_meta_politica &&
                      diff[0].usuarios_meta_politica
                        ?.split(",")
                        .map((u: any) => usuarios?.find((uf: any) => uf.id_usuario == u).nome_usuario)
                        .join(",")}
                  </div>
                  <div className={!diffValues.tiposNegocio_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Tipos Negócio:{" "}
                    {diff[0].tiposNegocio_meta_politica &&
                      diff[0].tiposNegocio_meta_politica
                        ?.split(",")
                        .map((tn: any) => tiposNegocio?.find((tnf: any) => tnf.id_tipo_negocio == tn).nome_tipo_negocio)
                        .join(",")}
                  </div>
                  <div className={!diffValues.quantidade_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Quantidade: {diff[0].quantidade_meta_politica}
                  </div>
                  <div className={!diffValues.limiteCritico_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Limite Crítico: {diff[0].limiteCritico_meta_politica}
                  </div>
                  <div className={!diffValues.limiteAceitavel_meta_politica ? "bg-[red] text-white pl-[1vh]" : ""}>
                    Limite Aceitavel: {diff[0].limiteAceitavel_meta_politica}
                  </div>
                </div>
                <FaArrowRight className="self-center" size={50} />
                <div className="flex shadow-lg p-[1vh] flex-1 flex-col">
                  <div className="text-[5vh] text-center p-[3vh]">PARA</div>
                  <div className={!diffValues.nome_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Nome: {diff[1].nome_meta_politica}
                  </div>
                  <div className={!diffValues.periodo_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Período:{" "}
                    {
                      periodos?.find((p: any) => p.id_metas_periodo == diff[1].periodo_meta_politica)
                        ?.nome_metas_periodo
                    }
                  </div>
                  <div className={!diffValues.objetivo_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Objetivo:{" "}
                    {
                      objetivosMeta?.find((o: any) => o.id_objetivo_meta == diff[1].objetivo_meta_politica)
                        .nome_objetivo_meta
                    }
                  </div>
                  <div className={!diffValues.valorObjetivo_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Valor Objetivo: {diff[1].valorObjetivo_meta_politica}
                  </div>
                  <div className={!diffValues.dataInicial_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Data Inicial: {diff[1].dataInicial_meta_politica}
                  </div>
                  <div className={!diffValues.dataFinal_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Data Final: {diff[1].dataFinal_meta_politica}
                  </div>
                  <div className={!diffValues.nivel_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Nível:{" "}
                    {niveisMeta?.find((nf: any) => nf.id_nivel_meta == diff[1].nivel_meta_politica).nome_nivel_meta}
                  </div>
                  <div className={!diffValues.lojas_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Lojas:{" "}
                    {diff[1].lojas_meta_politica &&
                      diff[1].lojas_meta_politica
                        ?.split(",")
                        .map((l: any) => lojas?.find((lf: any) => lf.id_loja == l).nome_loja)
                        .join(",")}
                  </div>
                  <div className={!diffValues.perfis_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Perfis:{" "}
                    {diff[1].perfis_meta_politica &&
                      diff[1].perfis_meta_politica
                        ?.split(",")
                        .map((p: any) => perfis?.find((pf: any) => pf.id_perfil == p).nome_perfil)
                        .join(",")}
                  </div>
                  <div className={!diffValues.usuarios_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Usuários:{" "}
                    {diff[1].usuarios_meta_politica &&
                      diff[1].usuarios_meta_politica
                        ?.split(",")
                        .map((u: any) => usuarios?.find((uf: any) => uf.id_usuario == u).nome_usuario)
                        .join(",")}
                  </div>
                  <div className={!diffValues.tiposNegocio_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Tipos Negócio:{" "}
                    {diff[1].tiposNegocio_meta_politica &&
                      diff[1].tiposNegocio_meta_politica
                        ?.split(",")
                        .map((tn: any) => tiposNegocio?.find((tnf: any) => tnf.id_tipo_negocio == tn).nome_tipo_negocio)
                        .join(",")}
                  </div>
                  <div className={!diffValues.quantidade_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Quantidade: {diff[1].quantidade_meta_politica}
                  </div>
                  <div className={!diffValues.limiteCritico_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Limite Crítico: {diff[1].limiteCritico_meta_politica}
                  </div>
                  <div className={!diffValues.limiteAceitavel_meta_politica ? "bg-[green] text-white pl-[1vh]" : ""}>
                    Limite Aceitavel: {diff[1].limiteAceitavel_meta_politica}
                  </div>
                </div>
              </div>
            ) : (
              metaSelecionada && (
                <div className="flex shadow-lg p-[1vh] flex-1 flex-col">
                  <div className="text-[5vh] text-center p-[3vh]">ÚLTIMA VERSÃO DA META</div>
                  <div>Nome: {diff[0].nome_meta_politica}</div>
                  <div>
                    Período:{" "}
                    {
                      periodos?.find((p: any) => p.id_metas_periodo == diff[0].periodo_meta_politica)
                        ?.nome_metas_periodo
                    }
                  </div>
                  <div>
                    Objetivo:{" "}
                    {
                      objetivosMeta?.find((o: any) => o.id_objetivo_meta == diff[0].objetivo_meta_politica)
                        .nome_objetivo_meta
                    }
                  </div>
                  <div>Valor Objetivo: {diff[0].valorObjetivo_meta_politica}</div>
                  <div>Data Inicial: {diff[0].dataInicial_meta_politica}</div>
                  <div>Data Final: {diff[0].dataFinal_meta_politica}</div>
                  <div>
                    Nível:{" "}
                    {niveisMeta?.find((nf: any) => nf.id_nivel_meta == diff[0].nivel_meta_politica).nome_nivel_meta}
                  </div>
                  <div>
                    Lojas:{" "}
                    {diff[0].lojas_meta_politica &&
                      diff[0].lojas_meta_politica
                        ?.split(",")
                        .map((l: any) => lojas?.find((lf: any) => lf.id_loja == l).nome_loja)
                        .join(",")}
                  </div>
                  <div>
                    Perfis:{" "}
                    {diff[0].perfis_meta_politica &&
                      diff[0].perfis_meta_politica
                        ?.split(",")
                        .map((p: any) => perfis?.find((pf: any) => pf.id_perfil == p).nome_perfil)
                        .join(",")}
                  </div>
                  <div>
                    Usuários:{" "}
                    {diff[0].usuarios_meta_politica &&
                      diff[0].usuarios_meta_politica
                        ?.split(",")
                        .map((u: any) => usuarios?.find((uf: any) => uf.id_usuario == u).nome_usuario)
                        .join(",")}
                  </div>
                  <div>
                    Tipos Negócio:{" "}
                    {diff[0].tiposNegocio_meta_politica &&
                      diff[0].tiposNegocio_meta_politica
                        ?.split(",")
                        .map((tn: any) => tiposNegocio?.find((tnf: any) => tnf.id_tipo_negocio == tn).nome_tipo_negocio)
                        .join(",")}
                  </div>
                  <div>Quantidade: {diff[0].quantidade_meta_politica}</div>
                  <div>Limite Crítico: {diff[0].limiteCritico_meta_politica}</div>
                  <div>Limite Aceitavel: {diff[0].limiteAceitavel_meta_politica}</div>
                </div>
              )
            )}
          </div>
        </div>
      </ModalComponente>
    </>
  );
};

export default LogPoliticaMetas;