import Button from "@/components/Forms/Button";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  editarVisibilidade,
  gravacaoGraficosMeta,
  listarDashboardsMetas,
  listarGraficosMetas,
} from "@/requests/CRM/Metas/listarMetas";
import { FormatFields, GetForm } from "@/utils";
import { ApexOptions } from "apexcharts";
import { AnimatePresence, motion } from "framer-motion";
import { ChevronLeft, Eye, EyeOff, Settings } from "lucide-react";
import { useEffect, useState } from "react";
import Grafico, { FormatadorGrafico, TiposGrafico } from "./Grafico";

const ValueToCurrency = (value: number) => {
  return new Intl.NumberFormat("pt-BR", {
    maximumFractionDigits: 2,
  }).format(value);
};

function uniq(a: any[]): any {
  var seen: any = {};
  return a.filter(function (item) {
    return seen.hasOwnProperty(item.nivel_meta_politica)
      ? false
      : (seen[item.nivel_meta_politica] = true);
  });
}

const ItemGrafico = ({
  objetivo,
  filtrosMetas,
  nivelMeta,
  lojas,
  perfis,
  usuarios,
  tiposNegocio,
}: {
  [x: string]: any;
}) => {
  const [graficosAtualizados, setGraficosAtualizados] = useState<any[]>([]);
  const [nivelSelecionado, setNivelSelecionado] = useState<number>(0);
  const [niveisFiltrados, setNiveisFiltrados] = useState<any[]>([]);
  const [periodosFiltrados, setPeriodosFiltrados] = useState<any[]>([]);
  const [tipo, setTipo] = useState<TiposGrafico>("Barra");
  const [isLoading, setIsLoading] = useState(false);
  const { handleSubmit, ...form } = GetForm();

  let tipos: FormatadorGrafico = {
    Linha: (meta) => ({
      options: {
        chart: {
          redrawOnParentResize: true,
          type: "line",
        },
        labels: meta.data.valores.map((valor: any) => valor.intervalo),
        fill: {
          opacity: 1,
        },
      },
      series: [
        {
          name: "Meta",
          data: meta.data.valores.map((valor: any) =>
            meta.data.objetivo.includes("Valor")
              ? ValueToCurrency(valor.total)
              : meta.data.objetivo.includes("Taxa")
                ? valor.total * 100
                : valor.total,
          ),
        },
        {
          name: "Limite Crítico",
          data: meta.data.valores.map(
            () =>
              (+meta.limiteCritico_meta_politica *
                +meta.quantidade_meta_politica) /
              100,
          ),
        },
        {
          name: "Limite Aceitável",
          data: meta.data.valores.map(
            () =>
              (+meta.limiteAceitavel_meta_politica *
                +meta.quantidade_meta_politica) /
              100,
          ),
        },
      ],
    }),

    Barra: (meta) => ({
      options: {
        chart: {
          type: "bar",
        },
        xaxis: {
          categories: meta.data.valores.map((valor: any) => valor.intervalo),
        },
        fill: {
          opacity: 1,
        },
        annotations: {
          yaxis: [
            {
              y: meta.limiteCritico_meta_politica,
              borderColor: "#ff0000",
              label: {
                text: "Limite Crítico",
              },
            },
            {
              y: meta.limiteAceitavel_meta_politica,
              borderColor: "#00ff00",
              label: {
                text: "Limite Aceitável",
              },
            },
          ],
        },
      },
      series: [
        {
          name: meta.nome_meta_politica,
          data: meta.data.valores.map((valor: any) =>
            meta.data.objetivo.includes("Valor")
              ? ValueToCurrency(valor.total)
              : meta.data.objetivo.includes("Taxa")
                ? valor.total * 100
                : valor.total,
          ),
        },
        {
          name: "Limite Crítico",
          data: meta.limiteCritico_meta_politica,
        },
        {
          name: "Limite Aceitável",
          data: meta.limiteAceitavel_meta_politica,
        },
        {
          name: "Limite Crítico",
          data: meta.limiteCritico_meta_politica,
        },
        {
          name: "Limite Aceitável",
          data: meta.limiteAceitavel_meta_politica,
        },
      ],
    }),
    // Pizza: (meta) => ({
    //   options: {
    //     chart: {
    //       height: 350,
    //       type: "pie",
    //     },
    //     labels: meta.data.valores.map((valor: any) => valor.intervalo),
    //   },
    //   series: meta.data.valores.map((valor: any) =>
    //     meta.data.objetivo.includes("Valor")
    //       ? ValueToCurrency(valor.total)
    //       : meta.data.objetivo.includes("Taxa")
    //         ? Math.floor(valor.total * 100)
    //         : Math.floor(valor.total)
    //   ),
    // }),
  };
  const [seeValues, setSeeValues] = useState<any>({ id: null, status: false });
  const [msgEmpty, setMsgEmpty] = useState(false);
  const onSubmitFunction = async (data: any) => {
    setIsLoading(true);

    if (data?.lojas_meta_politica && data?.lojas_meta_politica[0] === "all") {
      data["lojas_meta_politica"] = lojas.map((e: any) => e.id_loja);
    }
    if (
      data?.tiposNegocio_meta_politica &&
      data?.tiposNegocio_meta_politica[0] === "all"
    ) {
      data["tiposNegocio_meta_politica"] = tiposNegocio.map(
        (e: any) => e.id_tipo_negocio,
      );
    }

    if (data?.perfis_meta_politica && data?.perfis_meta_politica[0] === "all") {
      data["perfis_meta_politica"] = perfis.map((e: any) => e.id_perfil);
    }

    data = {
      ...data,
      objetivo_meta_politica: objetivo.id_objetivo_meta,
      id_meta_politica: objetivo.id_meta_politica,
    };
    const dataSend = {
      ...data,
      tipo_grafico_dashboard_meta: tipo,
      id_meta_politica_dashboard_meta: objetivo.id_meta_politica,
    };

    listarGraficosMetas(data)
      .then(async (data: any) => {
        if (data && data.length > 0) {
          await gravacaoGraficosMeta(dataSend);
          setGraficosAtualizados(data);
          setShowConfig(false);
        } else {
          setMsgEmpty(true);
          setTimeout(() => {
            setMsgEmpty(false);
          }, 2000);
        }
      })
      .finally(() => {
        setIsLoading(false);
      });
  };
  const handleEditVisibility = (dados: any) => {
    const dadosUpdate = {
      id_meta_politica: dados.id,
      visivel_meta_politica: Number(dados.status),
    };
    editarVisibilidade(dadosUpdate);
  };

  const [defaultValues, setDefaultValues] = useState<any>();
  useEffect(() => {
    const map: any = {
      "1": objetivo.lojas_meta_politica,
      "2": objetivo.tiposNegocio_meta_politica,
      "3": objetivo.perfis_meta_politica,
      "4": objetivo.usuarios_meta_politica,
    };

    const data = map[objetivo.nivel_meta_politica] ?? null;

    setDefaultValues({
      nivel: objetivo.nivel_meta_politica,
      periodo: objetivo.periodo_meta_politica,
      dados: data,
    });
  }, [objetivo]);

  const [dadosGraficos, setDadosGraficos] = useState<any>();
  useEffect(() => {
    listarDashboardsMetas(
      objetivo.id_objetivo_meta,
      objetivo.id_meta_politica,
    ).then((a: any) => {
      if (!!a) {
        a.map((b: any) => {
          setPeriodosFiltrados(
            filtrosMetas.filter(
              (f: any) => f.nivel_meta_politica == b.nivel_meta_politica,
            ),
          );

          setSeeValues({
            id: b.id_meta_politica,
            status: Boolean(+b.visivel_meta_politica),
          });

          setNivelSelecionado(Number(b.nivel_meta_politica));

          setDadosGraficos({
            nivel_meta_politica: b.nivel_meta_politica,
            lojas_meta_politica: b.lojas_meta_politica,
            tiposNegocio_meta_politica: b.tiposNegocio_meta_politica,
            perfis_meta_politica: b.perfis_meta_politica.join(","),
            usuarios_meta_politica: b.usuarios_meta_politica,
            periodo_meta_politica: b.periodo_meta_politica,
            tipo_grafico_dashboard_meta: b.tipo_grafico_dashboard_meta,
          });

          setTipo(b.tipo_grafico_dashboard_meta);

          const lojaComing = b.lojas_meta_politica.split(",");

          if (lojas.every((a: any) => lojaComing.includes(a.id_loja))) {
            setDadosGraficos((prev: any) => ({
              ...prev,
              lojas_meta_politica: "all",
            }));
          }
          const tiposComing = b.tiposNegocio_meta_politica.split(",");
          if (
            tiposNegocio.every((a: any) =>
              tiposComing.includes(a.id_tipo_negocio),
            )
          ) {
            setDadosGraficos((prev: any) => ({
              ...prev,
              tiposNegocio_meta_politica: "all",
            }));
          }
          const usersComing = b.usuarios_meta_politica.split(",");
          if (usuarios.every((a: any) => usersComing.includes(a.id_usuario))) {
            setDadosGraficos((prev: any) => ({
              ...prev,
              usuarios_meta_politica: "all",
            }));
          }
          if (b?.perfis_meta_politica) {
            if (
              perfis.every((a: any) =>
                b?.perfis_meta_politica.includes(a.id_perfil),
              )
            ) {
              setDadosGraficos((prev: any) => ({
                ...prev,
                perfis_meta_politica: "all",
              }));
            }
          }
        });
        setGraficosAtualizados(a);
        setShowConfig(false);
      }
    });
  }, [objetivo]);

  const handleNivelChange = (value: any) => {
    setNivelSelecionado(Number(value));
    form.setValue("periodo_meta_politica", "");
    setPeriodosFiltrados(
      (niveisFiltrados as any).filter(
        (f: any) => f.nivel_meta_politica == value,
      ),
    );
  };
  const [defaultValue, setDefaultValue] = useState(null);
  const [defaultValuePeriodo, setDefaultValuePeriodo] = useState(null);

  useEffect(() => {
    if (niveisFiltrados.length === 1) {
      const unicoNivel = niveisFiltrados[0];

      form.setValue("nivel_meta_politica", unicoNivel.id_nivel_meta);
      setDefaultValue(unicoNivel.id_nivel_meta);
      handleNivelChange(unicoNivel.id_nivel_meta);
    }
  }, [niveisFiltrados]);

  type ConfigGrafico = {
    options: ApexOptions;
    series: ApexAxisChartSeries | ApexNonAxisChartSeries;
  };
  const formatarNumero = (val: number, dados: any): string => {
    const objetivo = dados?.[0]?.objetivo_meta_politica;
    const deveFormatarComCifrao = ["4", "6", "9"].includes(String(objetivo));
    return deveFormatarComCifrao
      ? `R$ ${
          val.toLocaleString("pt-BR", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          }) as never
        }`
      : val.toFixed(0);
  };

  // Em telas pequenas (principalmente celular na horizontal) os valores com fundo
  // branco estouravam o quadro do gráfico: reduz fonte e a "caixinha" do valor.
  const responsivoValores = [
    {
      breakpoint: 1024,
      options: {
        plotOptions: {
          bar: {
            dataLabels: { total: { style: { fontSize: "10px" } } },
          },
        },
        dataLabels: {
          style: { fontSize: "10px" },
          background: { padding: 2, borderRadius: 2, borderWidth: 0 },
        },
        yaxis: { labels: { style: { fontSize: "10px" } } },
        xaxis: { labels: { style: { fontSize: "10px" } } },
        legend: { fontSize: "11px" },
      },
    },
    {
      breakpoint: 640,
      options: {
        plotOptions: {
          bar: {
            dataLabels: { total: { style: { fontSize: "9px" } } },
          },
        },
        dataLabels: {
          style: { fontSize: "9px" },
          background: { padding: 1, borderRadius: 2, borderWidth: 0 },
        },
        yaxis: { labels: { style: { fontSize: "9px" } } },
        xaxis: { labels: { style: { fontSize: "9px" } } },
        legend: { fontSize: "10px" },
      },
    },
  ];

  const formatarBarra = (dados: any): ConfigGrafico => {
    const categorias = dados?.[0]?.data?.categories || [];
    let series = dados?.[0]?.data?.series || [];

    // Ordenar as séries de forma crescente com base no total
    series = series.sort((a: any, b: any) => {
      const totalA = a.data.reduce((acc: any, val: any) => acc + val, 0);
      const totalB = b.data.reduce((acc: any, val: any) => acc + val, 0);
      return totalA - totalB; // crescente
    });
    return {
      options: {
        plotOptions: {
          bar: {
            dataLabels: {
              total: {
                enabled: ["4", "6", "9"].includes(
                  String(dados?.[0]?.objetivo_meta_politica)
                )
                  ? seeValues.status
                  : true,
                style: {
                  fontSize: "12px",
                  fontWeight: 600,
                },
              },
            },
          },
        },
        tooltip: {
          y: {
            formatter: function (val: number) {
              return formatarNumero(val, dados);
            },
          },
        },
        dataLabels: {
          enabled: false,
          style: {
            fontSize: "10px",
          },
          background: {
            enabled: true,
            padding: 3,
            borderRadius: 2,
            borderWidth: 0,
          },
          formatter: function (val: number) {
            if (val === 0) return "";
            return formatarNumero(val, dados);
          },
        },
        responsive: responsivoValores,

        chart: {
          type: "bar",
          stacked: true, // ou false, se quiser barras separadas por responsável
        },
        xaxis: {
          categories: categorias,
        },
        yaxis: {
          labels: {
            formatter: function (val: number) {
              return formatarNumero(val, dados);
            },
            style: {
              fontSize: "11px",
            },
          },
        },
        fill: {
          opacity: 1,
        },
        annotations: {
          yaxis: [
            {
              y:
                (+dados[0].limiteCritico_meta_politica *
                  +dados[0].objetivo_meta_politica) /
                100,
              borderColor: "#ff0000",
              label: {
                text: "Limite Crítico",
                style: { fontSize: "11px" },
              },
            },
            {
              y:
                (+dados[0].limiteAceitavel_meta_politica *
                  +dados[0].objetivo_meta_politica) /
                100,

              borderColor: "#00ff00",
              label: {
                text: "Limite Aceitável",
                style: { fontSize: "11px" },
              },
            },
          ],
        },
      },
      series,
    };
  };
  const formatarPizza = (dados: any): ConfigGrafico => {
    const categories = dados?.[0]?.data?.categories || [];
    let series = dados?.[0]?.data?.series || [];
    // Caso formato padrão dovar_ backend (igual ao seu exemplo)
    if (series[0] && Array.isArray(series[0].data)) {
      return {
        options: {
          chart: { type: "pie" },
          labels: categories,
          responsive: responsivoValores,
          tooltip: {
            y: {
              formatter: function (val: number) {
                return formatarNumero(val, dados);
              },
            },
          },
        },

        series: series[0].data,
      };
    }

    // Adicione outros casos aqui se precisar...

    return {
      options: { chart: { type: "pie" }, labels: [] },
      series: [],
    };
  };

  const formatarLinha = (dados: any): ConfigGrafico => {
    const categories = dados?.[0]?.data?.categories || [];
    let series = dados?.[0]?.data?.series || [];

    return {
      options: {
        chart: {
          type: "line",
          zoom: { enabled: false },
        },
        stroke: {
          curve: "smooth",
        },
        xaxis: {
          categories,
        },
        markers: {
          size: 4,
        },
        dataLabels: {
          enabled: true,
          style: { fontSize: "11px" },
          background: {
            enabled: true,
            padding: 3,
            borderRadius: 2,
            borderWidth: 0,
          },
        },
        responsive: responsivoValores,
        tooltip: {
          shared: true,
          intersect: false,

          y: {
            formatter: function (val: number) {
              return formatarNumero(val, dados);
            },
          },
        },
      },
      series,
    };
  };

  useEffect(() => {
    if (periodosFiltrados.length === 1) {
      const unicoPeriodo = periodosFiltrados[0];

      form.setValue("periodo_meta_politica", unicoPeriodo.id_metas_periodo);
      setDefaultValuePeriodo(unicoPeriodo.id_metas_periodo);
    }
  }, [periodosFiltrados]);

  const [showConfig, setShowConfig] = useState(true);
  return (
    <>
      <div
        key={objetivo.id_objetivo_meta}
        className="rounded-md border border-stroke bg-white p-4 shadow-default dark:border-strokedark dark:bg-boxdark"
      >
        <AnimatePresence>
          {showConfig ? (
            <>
              <motion.div
                key="config"
                initial={{ opacity: 0, x: -100 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 100 }}
                transition={{ duration: 0.3 }}
                className="w-full h-full  rounded-md no-scrollbar overflow-auto"
              >
                <div className="flex justify-between">
                  <div
                    onClick={() => setShowConfig(false)}
                    className="cursor-pointer"
                  >
                    <ChevronLeft size={19} />
                  </div>
                  <h3 className="text-lg text-center font-semibold mb-4">
                    {objetivo.nome_meta_politica}
                  </h3>

                  <div></div>
                </div>

                <form onSubmit={handleSubmit(onSubmitFunction)}>
                  <div className="flex flex-col justify-center px-10 items-center gap-4 mb-5">
                    <Tabs
                      className="shadow-none"
                      defaultValue={
                        dadosGraficos?.tipo_grafico_dashboard_meta ??
                        Object.keys(tipos)[0]
                      }
                    >
                      <TabsList className="shadow-none bg-[#f4f4f5] rounded-lg">
                        {Object.keys(tipos).map((e: any, indexTipo) => (
                          <TabsTrigger
                            key={indexTipo}
                            onClick={() => setTipo(e)}
                            className="shadow-none border-none"
                            value={e}
                          >
                            {e}
                          </TabsTrigger>
                        ))}
                      </TabsList>
                    </Tabs>

                    <InputSelectComponent
                      label="Nivel da meta"
                      name={"nivel_meta_politica"}
                      formulario={form}
                      options={filtrosMetas.map((e: any) => ({
                        label: e.nome_nivel_meta,
                        value: e.id_nivel_meta,
                      }))}
                      disabled
                      onChange={(e: any) => {
                        const value = e?.target?.value || e?.value;
                        handleNivelChange(value);
                      }}
                      defaultValue={defaultValues?.nivel}
                      required
                      error="Preencha esse campo"
                    />
                    {nivelSelecionado == 1 && (
                      <InputSelectComponent
                        label="Selecione as Lojas"
                        name="lojas_meta_politica"
                        formulario={form}
                        isMulti
                        options={[
                          { value: "all", label: "Todos" },
                          ...lojas.map((e: any) => ({
                            label: e.nome_loja,
                            value: e.id_loja,
                          })),
                        ]}
                        onChange={(selectedOptions: any) => {
                          const allStoreValues = lojas.map(
                            (e: any) => e.id_tipo_negocio,
                          );

                          const selectedValues = selectedOptions.map(
                            (o: any) => o.value,
                          );
                          const hasAll = selectedValues.includes("all");

                          if (hasAll && selectedOptions.length === 1) {
                            form.setValue(
                              "lojas_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          const isAllManuallySelected =
                            selectedValues.length === lojas.length &&
                            allStoreValues.every((id: any) =>
                              selectedValues.includes(id),
                            );

                          if (isAllManuallySelected) {
                            form.setValue(
                              "lojas_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          if (hasAll && selectedValues.length > 1) {
                            const filtered = selectedOptions.filter(
                              (o: any) => o.value !== "all",
                            );
                            form.setValue(
                              "lojas_meta_politica" as never,
                              filtered as never,
                            );
                            return;
                          }

                          form.setValue(
                            "lojas_meta_politica" as never,
                            selectedOptions as never,
                          );
                        }}
                        required
                        defaultValue={
                          defaultValues?.dados ||
                          dadosGraficos?.lojas_meta_politica
                        }
                        error="Preencha esse campo"
                      />
                    )}

                    {nivelSelecionado == 2 && (
                      <InputSelectComponent
                        label="Selecione os Tipos de Negócio"
                        name="tiposNegocio_meta_politica"
                        formulario={form}
                        isMulti
                        defaultValue={
                          defaultValues?.dados ||
                          dadosGraficos?.tiposNegocio_meta_politica
                        }
                        options={[
                          { value: "all", label: "Todos" },
                          ...tiposNegocio.map((e: any) => ({
                            label: e.nome_tipo_negocio,
                            value: e.id_tipo_negocio,
                          })),
                        ]}
                        onChange={(selectedOptions: any) => {
                          const allStoreValues = tiposNegocio.map(
                            (e: any) => e.id_tipo_negocio,
                          );

                          const selectedValues = selectedOptions.map(
                            (o: any) => o.value,
                          );
                          const hasAll = selectedValues.includes("all");

                          if (hasAll && selectedOptions.length === 1) {
                            form.setValue(
                              "tiposNegocio_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          const isAllManuallySelected =
                            selectedValues.length === tiposNegocio.length &&
                            allStoreValues.every((id: any) =>
                              selectedValues.includes(id),
                            );

                          if (isAllManuallySelected) {
                            form.setValue(
                              "tiposNegocio_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          if (hasAll && selectedValues.length > 1) {
                            const filtered = selectedOptions.filter(
                              (o: any) => o.value !== "all",
                            );
                            form.setValue(
                              "tiposNegocio_meta_politica" as never,
                              filtered as never,
                            );
                            return;
                          }

                          form.setValue(
                            "tiposNegocio_meta_politica" as never,
                            selectedOptions as never,
                          );
                        }}
                        required
                        error="Preencha esse campo"
                      />
                    )}

                    {nivelSelecionado == 3 && (
                      <InputSelectComponent
                        label="Selecione os Perfis"
                        name="perfis_meta_politica"
                        formulario={form}
                        isMulti
                        defaultValue={
                          defaultValues?.dados ||
                          dadosGraficos?.perfis_meta_politica
                        }
                        options={[
                          { value: "all", label: "Todos" },
                          ...perfis.map((e: any) => ({
                            label: e.nome_perfil,
                            value: e.id_perfil,
                          })),
                        ]}
                        onChange={(selectedOptions: any) => {
                          const allStoreValues = perfis.map(
                            (e: any) => e.id_perfil,
                          );
                          const selectedValues = selectedOptions.map(
                            (o: any) => o.value,
                          );
                          const hasAll = selectedValues.includes("all");

                          if (hasAll && selectedOptions.length === 1) {
                            form.setValue(
                              "perfis_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          if (hasAll && selectedOptions.length > 1) {
                            form.setValue(
                              "perfis_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          // Se "Todos" estava selecionado e o usuário seleciona outra opção → remove "Todos"
                          const onlyAllSelected =
                            selectedOptions.find(
                              (o: any) => o.value === "all",
                            ) && selectedOptions.length > 1;
                          if (onlyAllSelected) {
                            const filtered = selectedOptions.filter(
                              (o: any) => o.value !== "all",
                            );
                            form.setValue(
                              "perfis_meta_politica" as never,
                              filtered as never,
                            );
                            return;
                          }

                          // Se todos os perfis foram selecionados manualmente → troca para "Todos"
                          const isAllManuallySelected =
                            selectedValues.length === perfis.length &&
                            allStoreValues.every((id: any) =>
                              selectedValues.includes(id),
                            );

                          if (isAllManuallySelected) {
                            form.setValue(
                              "perfis_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          // Qualquer outro caso → mantém seleção normalmente
                          form.setValue(
                            "perfis_meta_politica" as never,
                            selectedOptions as never,
                          );
                        }}
                        required
                        error="Preencha esse campo"
                      />
                    )}

                    {nivelSelecionado == 4 && (
                      <InputSelectComponent
                        label="Selecione os Usuários"
                        name="usuarios_meta_politica"
                        defaultValue={
                          defaultValues?.dados ||
                          (dadosGraficos &&
                            dadosGraficos?.usuarios_meta_politica)
                        }
                        isMulti
                        formulario={form}
                        options={[
                          { value: "all", label: "Todos" },
                          ...usuarios.map((e: any) => ({
                            label: e.nome_usuario,
                            value: e.id_usuario,
                          })),
                        ]}
                        onChange={(selectedOptions: any) => {
                          const allStoreValues = usuarios.map(
                            (e: any) => e.id_usuario,
                          );

                          const selectedValues = selectedOptions.map(
                            (o: any) => o.value,
                          );
                          const hasAll = selectedValues.includes("all");

                          if (hasAll && selectedOptions.length === 1) {
                            form.setValue(
                              "usuarios_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          const isAllManuallySelected =
                            selectedValues.length === usuarios.length &&
                            allStoreValues.every((id: any) =>
                              selectedValues.includes(id),
                            );

                          if (isAllManuallySelected) {
                            form.setValue(
                              "usuarios_meta_politica" as never,
                              [{ label: "Todos", value: "all" }] as never,
                            );
                            return;
                          }

                          if (hasAll && selectedValues.length > 1) {
                            const filtered = selectedOptions.filter(
                              (o: any) => o.value !== "all",
                            );
                            form.setValue(
                              "usuarios_meta_politica" as never,
                              filtered as never,
                            );
                            return;
                          }

                          form.setValue(
                            "usuarios_meta_politica" as never,
                            selectedOptions as never,
                          );
                        }}
                        required
                        error="Preencha esse campo"
                      />
                    )}

                    <InputSelectComponent
                      label="Período Meta"
                      name={"periodo_meta_politica"}
                      formulario={form}
                      disabled
                      options={periodosFiltrados.map((e: any) => ({
                        label: e.nome_metas_periodo,
                        value: e.id_metas_periodo,
                      }))}
                      required
                      defaultValue={
                        defaultValues?.periodo ||
                        dadosGraficos?.periodo_meta_politica
                      }
                      error="Preencha esse campo"
                    />
                  </div>

                  <div className="flex flex-col  justify-center items-center mb-5">
                    <Button className="w-1/2 " loading={isLoading}>
                      Confirmar
                    </Button>
                  </div>

                  {msgEmpty && (
                    <div className="justify-center flex">
                      <div className="w-fit justify-center text-sm flex text-white bg-[#ff0a0a] border border-[#d70000] p-2 px-7 rounded-md">
                        Sem dados para mostrar
                      </div>
                    </div>
                  )}
                </form>
              </motion.div>
              {/* </AnimatePresence> */}
            </>
          ) : (
            <motion.div
              initial={{ opacity: 0, x: -100 }}
              key="dash"
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -100 }}
              transition={{ duration: 0.2 }}
              className="w-full h-full  rounded-md no-scrollbar overflow-auto"
              // style={{ height: isMobile ? "100%" : "calc(100vh - 110px)" }}
            >
              <div className={`grid gap-4 h-full`}>
                {graficosAtualizados.map((meta, i) => (
                  <div key={i} className="mb-4">
                    <div className="flex justify-between">
                      <div></div>
                      <div className="grid self-center">
                        <h4 className="text-base font-medium mb-2 text-center">
                          {meta.nome_meta_politica.toUpperCase()}
                        </h4>
                        <h3 className="text-xs text-center font-semibold mb-4">
                          {periodosFiltrados.find(
                            (a: any) => meta.periodo_meta_politica
                          )?.nome_metas_periodo ?? ""}{" "}
                          -{" "}
                          {FormatFields.formatarDataCalendar(
                            new Date(meta.dataInicial_meta_politica)
                          )}{" "}
                          até{" "}
                          {FormatFields.formatarDataCalendar(
                            new Date(meta.dataFinal_meta_politica)
                          )}
                        </h3>
                      </div>
                      <div>
                        <div className="flex gap-3">
                          {["4", "6", "9"].includes(
                            String(meta?.objetivo_meta_politica)
                          ) &&
                            meta.tipo_grafico_dashboard_meta === "Barra" && (
                              <div
                                onClick={() => {
                                  setSeeValues({
                                    id: meta.id_meta_politica,
                                    status: seeValues.status ? false : true,
                                  });

                                  handleEditVisibility({
                                    id: meta.id_meta_politica,
                                    status: seeValues.status ? false : true,
                                  });
                                }}
                                className="cursor-pointer hover:text-primary transition-all delay-75"
                              >
                                {!seeValues.status ? (
                                  <EyeOff size={19} />
                                ) : (
                                  <Eye size={19} />
                                )}
                              </div>
                            )}
                        </div>
                        <div
                          onClick={() => setShowConfig(true)}
                          className="cursor-pointer hover:text-primary transition-all delay-75"
                        >
                          <Settings size={19} />
                        </div>
                      </div>
                    </div>
                    {graficosAtualizados[0]?.data.series.length > 0 ? (
                      <Grafico
                        tipo={tipo}
                        dados={graficosAtualizados}
                        formatar={{
                          Barra: formatarBarra,
                          Pizza: formatarPizza,
                          Linha: formatarLinha,
                        }}
                      />
                    ) : (
                      <div className="text-center h-[90%] text-lg font-semibold content-center">
                        Sem dados
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </>
  );
};

export default ItemGrafico;