import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { listarEtiquetas, listarFluxos } from "@/requests/CRM/kanban";
import { listarTodosCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarOrigemCliente } from "@/requests/CRUD/Cliente/cadastroCliente";
import { listarEtapasFunis } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarIndicadores } from "@/requests/CRUD/Indicadores/listarIndicadores";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarMotivoNegocioPerdido } from "@/requests/CRUD/NegociosPerdido/listarMotivoNegocioPerdido";
import { listarTodosTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/listarTiposEdificacao";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { IValueLabel } from "@/types/formInterfaces";
import { GetForm } from "@/utils";
import { formatLabelTipoEdificacao } from "@/utils/formatTipoEdificacao";
import { parseISO } from "date-fns";
import { Settings } from "lucide-react";
import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "react-toastify";
interface ICliente {
  nome_cliente: string;
  id_cliente: string;
}

const FormularioRelatorioPerdas = ({
  origin,
  filterValues,
  pendencias,
  cidades,
  setFilterValues,
  onSubmit,
  children,
}: {
  origin: string;
  cidades?: any[];
  pendencias?: any[];
  filterValues?: any;
  setFilterValues?: (values: any) => void;
  onSubmit?: (values: any) => void;
  children?: ReactNode;
}) => {
  const { handleSubmit, ...form } = GetForm();
  const { clientes, businessFilters, setBusinessFilters } = useKanbanContext();
  const [allFilterData, setAllFilterData] = useState<any>([]);
  const [tipoNegocio, setTiposNegocio] = useState<any[]>([]);
  const [tiposEdificacao, setTiposEdificacao] = useState<IValueLabel[]>([]);
  const [classificacoes, setClassificacoes] = useState<any[]>([]);
  const { valuesSession, usuario, perfil } = useAuth();
  const { session } = valuesSession();
  const [etapas, setEtapas] = useState<any>([]);
  const [fluxos, setFluxos] = useState<any>([]);
  const [motivosNegociosPerdidos, setMotivosNegociosPerdidos] = useState<any>(
    [],
  );
  const [camposPersonalizados, setCamposPersonalizados] = useState<any[]>([]);
  const [tipo_dias_parado, setTipo_dias_parado] = useState<any>(">=");

  useEffect(() => {
    listarTiposNegocios().then((res) => setTiposNegocio(res));
    listarTodosTiposEdificacao().then((res) =>
      setTiposEdificacao(
        res.map((tipo: any) => ({
          label: formatLabelTipoEdificacao(tipo),
          value: `${tipo.id_tipo_edificacao}`,
        })),
      ),
    );
    listarClassificacoes().then((res) => setClassificacoes(res));
    listarTodosCamposPersonalizados().then((res) => setCamposPersonalizados(res));
  }, []);

  useEffect(() => {
    if (usuario) {
      Promise.all([
        listarLojas(),
        listarOrigemCliente(),
        listarEtapasFunis(),
        listarMotivoNegocioPerdido(),
        listarFluxos(),
        listarUsuarios(session.id_loja_usuario),
        listarEtiquetas(),
        listarIndicadores(),
      ]).then(
        ([
          lojasRes,
          origemCliente,
          etapas,
          motivosNegocios,
          fluxos,
          usuariosRes,
          etiquetasRes,
          indicadoresRes,
        ]) => {
          const idsLojaUsuario = usuario?.loja_usuario
            .split(",")
            .map((id: any) => id.trim());
          setEtapas([
            ...etapas,
            ...motivosNegociosPerdidos.map((m: any) => ({
              id_etapa_funil: m.id_perdido,
              grupo_etapa_funil: 0,
              titulo_etapa_funil: m.motivo_perdido,
            })),
          ]);
          setMotivosNegociosPerdidos(motivosNegocios);
          setFluxos(fluxos);
          setAllFilterData((prevData: any) => ({
            ...prevData,
            Usuarios: usuariosRes,
            Origem: origemCliente,
            Etiquetas: etiquetasRes,
            Lojas: lojasRes.filter((loja: any) =>
              idsLojaUsuario?.includes(loja.id_loja),
            ),
            Indicadores: indicadoresRes,
          }));
        },
      );
    }
  }, [usuario]);
  const tipoPessoaOptions = [
    { value: "F", label: "Física" },
    { value: "J", label: "Jurídica" },
  ];
  const formatDate = (date: Date) => date.toISOString().split("T")[0];
  useEffect(() => {
    if (origin !== "relatorio") return;
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
    const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);

    form.setValue("dataI_cancelamento_negocio_filtro", formatDate(firstDay));
    form.setValue("dataF_cancelamento_negocio_filtro", formatDate(lastDay));
  }, [origin]);
  const validarPeriodo = (inicio?: string, fim?: string) => {
    if (!inicio || !fim) return true;
    return parseISO(inicio) <= parseISO(fim);
  };
  const submitFilters = (values: any) => {
    values["considera_consumo_filtro"] = consideraConsumoFiltro ? "1" : "0";
    if (consideraConsumoFiltro) {
      if (naoInformado) {
        values["nao_informado_filtro"] = naoInformado;
      }
    }

    if (origin === "relatorio") {
      if (
        !values["dataI_cancelamento_negocio_filtro"] ||
        !values["dataF_cancelamento_negocio_filtro"]
      ) {
        toast.warning("Informe o período de cancelamento!");
        return;
      }
    }

    if (
      !validarPeriodo(
        values["dataI_negocio_filtro"],
        values["dataF_negocio_filtro"],
      ) ||
      !validarPeriodo(
        values["dataI_proposta_filtro"],
        values["dataF_proposta_filtro"],
      ) ||
      !validarPeriodo(
        values["dataI_cancelamento_negocio_filtro"],
        values["dataF_cancelamento_negocio_filtro"],
      ) ||
      !validarPeriodo(
        values["dataI_finalizacao_negocio_filtro"],
        values["dataF_finalizacao_negocio_filtro"],
      )
    ) {
      toast.warning(`Data início não pode ser maior que data fim!`);
      return;
    }

    const vlrI_Potencia = +values["min_potencia_filtro"];
    const vlrF_Potencia = +values["max_potencia_filtro"];
    if (vlrI_Potencia && vlrF_Potencia && vlrI_Potencia > vlrF_Potencia) {
      toast.warning(`Potência início não pode ser maior que potência fim!`);
      return;
    }

    const vlrI_Valor = +values["min_valor_filtro"];
    const vlrF_Valor = +values["max_valor_filtro"];
    if (vlrI_Valor && vlrF_Valor && vlrI_Valor > vlrF_Valor) {
      toast.warning(`Valor início não pode ser maior que valor fim!`);
      return;
    }

    const vlrI_Consumo = +values["min_consumo_filtro"];
    const vlrF_Consumo = +values["max_consumo_filtro"];
    if (vlrI_Consumo && vlrF_Consumo && vlrI_Consumo > vlrF_Consumo) {
      toast.warning(`Consumo início não pode ser maior que consumo fim!`);
      return;
    }

    if (consideraConsumoFiltro) {
      // ✅ NOVO BLOCO – valida consumo médio
      const consumoMedioInicial = parseFloat(
        values["de_consumo_negocio_filtro"],
      );
      const consumoMedioFinal = parseFloat(
        values["ate_consumo_negocio_filtro"],
      );

      if (
        !isNaN(consumoMedioInicial) &&
        !isNaN(consumoMedioFinal) &&
        consumoMedioInicial > consumoMedioFinal
      ) {
        toast.warning("Consumo médio inicial não pode ser maior que o final!");
        return;
      }
    } else {
      delete values["de_consumo_negocio_filtro"];
      delete values["ate_consumo_negocio_filtro"];
    }

    if (values["qtd_dias_parado"]) {
      values["tipo_dias_parado"] = tipo_dias_parado;
    }

    if (
      origin === "relatorio" ||
      origin === "relatorio-negocios" ||
      origin == "relatorio-negocios-cards" ||
      origin == "relatorio-negocios-follow-ups" ||
      origin == "relatorio-negocios-campos-personalizados"
    ) {
      setFilterValues?.(values); // atualiza o state
      onSubmit?.(values); // executa callback com valores corretos
    } else {
      setBusinessFilters(values);
    }

    toast.success("Filtros aplicados com sucesso!");
  };
  const [consideraConsumoFiltro, setConsideraConsumoFiltro] = useState(false);
  const [naoInformado, setNaoInformado] = useState(false);

  const handleClearFilters = () => {
    const filtrosLimpos = Object.keys(businessFilters).reduce(
      (acc: any, key) => {
        acc[key] = Array.isArray(businessFilters[key]) ? [] : ""; // Limpa arrays e strings
        form.setValue(key, acc[key]);

        return acc;
      },
      {},
    );

    form.reload();

    setBusinessFilters(filtrosLimpos);

    toast.success("Filtros limpos com sucesso!");
  };

  const statusSelecionado = (form.watch("status_filtro" as any) || []).map(
    (e: any) => String(e.value),
  );

  const todosStatus =
    statusSelecionado.length === 0 || statusSelecionado.includes("*");

  const somenteCancelados =
    !todosStatus &&
    statusSelecionado.includes("100") &&
    !statusSelecionado.includes("0") &&
    !statusSelecionado.includes("2");

  const fluxoPerdas = fluxos.find(
    (f: any) => f.titulo_funil?.trim() === "02-FLUXO DE PERDAS",
  );
  const fluxosFiltrados = somenteCancelados
    ? fluxos.filter((f: any) => f.titulo_funil?.trim() === "02-FLUXO DE PERDAS")
    : fluxos;

  const fluxosSelecionados = (form.watch("fluxos_filtro" as any) || []).map(
    (e: any) => String(e.value),
  );

  const etapasFiltradas = useMemo(() => {
    // Status Cancelado
    if (somenteCancelados) {
      return motivosNegociosPerdidos.map((m: any) => ({
        id_etapa_funil: m.id_perdido,
        grupo_etapa_funil: 0,
        titulo_etapa_funil: m.motivo_perdido,
      }));
    }

    // // Status Todos
    // if (todosStatus) {
    //   return etapas;
    // }

    // Comportamento atual
    if (fluxosSelecionados.length === 0 || fluxosSelecionados.includes("*")) {
      return etapas;
    }

    return etapas.filter((etapa: any) =>
      fluxosSelecionados.includes(String(etapa.grupo_etapa_funil)),
    );
  }, [fluxosSelecionados, etapas, somenteCancelados, motivosNegociosPerdidos]);

  const prevSomenteCancelados = useRef(false);

  useEffect(() => {
    if (somenteCancelados && fluxoPerdas) {
      form.setValue("fluxos_filtro", [
        {
          value: fluxoPerdas.id_funil,
          label: fluxoPerdas.titulo_funil,
        },
      ]);
    } else if (prevSomenteCancelados.current && !somenteCancelados) {
      form.setValue("fluxos_filtro", [{ value: "*", label: "Todos" }]);
    }

    prevSomenteCancelados.current = somenteCancelados;
  }, [somenteCancelados, fluxoPerdas]);
  return (
    <form key={form.key} onSubmit={handleSubmit(submitFilters)}>
      {allFilterData.length == undefined && perfil ? (
        <>
          <div
            className=" mt-5 pr-2 pb-5"
          // style={{ maxHeight: "calc(100vh - 140px)" }}
          >
            <Accordion type="single" className="mb-8" collapsible>
              <AccordionItem value="filtros">
                <AccordionTrigger className="text-sm pl-4 justify-center hover:text-black">
                  <span className="flex items-center gap-2">
                    <Settings size={17} /> Filtros Cliente
                  </span>
                </AccordionTrigger>
                <AccordionContent>
                  <InputGroup>
                    <InputSelectComponent
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      // width="w-[100%]"
                      skipEffect
                      removeDocumentBody={
                        origin !== "relatorio" &&
                        origin !== "relatorio-negocios"
                      }
                      isMulti
                      name="loja_cliente"
                      defaultValue={
                        allFilterData["Lojas"].length > 1
                          ? "*"
                          : session.loja_padrao_usuario
                      }
                      disabled={
                        allFilterData["Lojas"].length ==
                        session.loja_usuario?.split(",").length
                      }
                      options={[
                        { value: String("*"), label: "Todos" },
                        ...allFilterData["Lojas"]?.map((loja: any) => ({
                          label: loja.nome_loja,
                          value: loja.id_loja,
                        })),
                      ]}
                      label="Loja Cliente"
                    />
                    <InputSelectComponent
                      formulario={form}
                      name="responsavel_cliente"
                      label="Responsável Cliente"
                      dynamic
                      isMulti
                      options={[
                        { value: "*", label: "Todos" },
                        ...allFilterData["Usuarios"]
                          ?.filter(
                            (vendedor: any) =>
                              vendedor.comissionado_usuario == "1",
                          )
                          .map((e: any) => ({
                            value: e.id_usuario,
                            label: e.nome_usuario,
                          })),
                      ]}
                      defaultValue={"*"}
                    />
                    <InputSelectComponent
                      formulario={form}
                      name="cidade_cliente"
                      label="Cidade do Cliente"
                      isMulti
                      options={[
                        { value: "*", label: "Todas" },
                        ...cidades!.map((e: any) => ({
                          value: `${e.nome_cidade}`,
                          label: `${e.nome_cidade} - ${e.estado_cidade}`,
                        })),
                      ]}
                      defaultValue={"*"}
                    />
                    <InputSelectComponent
                      formulario={form}
                      name="origem_cliente"
                      label="Origem Cliente"
                      isMulti
                      options={[
                        { value: "*", label: "Todos" },
                        ...allFilterData["Origem"].map((e: any) => {
                          return {
                            value: e.id_origem_cliente,
                            label: e.nome_origem_cliente,
                          };
                        }),
                      ]}
                      defaultValue={"*"}
                    />
                    <InputSelectComponent
                      formulario={form}
                      name="tipoPessoa_cliente"
                      label="Tipo Pessoa Cliente"
                      isMulti
                      options={[
                        { value: "*", label: "Todos" },
                        ...tipoPessoaOptions.map((e: any) => {
                          return {
                            value: e.value,
                            label: e.label,
                          };
                        }),
                      ]}
                      defaultValue={"*"}
                    />
                    <InputSelectComponent
                      name="status_cliente"
                      label="Status Cliente"
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      skipEffect
                      isMulti
                      formulario={form}
                      defaultValue={"*"}
                      options={[
                        { value: String("*"), label: "Todos" },
                        { value: "1", label: "Ativo" },
                        { value: "0", label: "Inativo" },
                      ]}
                    />
                    <InputSelectComponent
                      name="indicador_cliente"
                      label="Indicador"
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      skipEffect
                      isMulti
                      formulario={form}
                      defaultValue={"*"}
                      options={[
                        { value: String("*"), label: "Todos" },
                        ...allFilterData["Indicadores"].map((e: any) => {
                          return {
                            value: e.id_indicador,
                            label: e.nome_indicador,
                          };
                        }),
                      ]}
                    />
                  </InputGroup>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
            <Accordion type="single" className="mb-8" collapsible>
              <AccordionItem value="filtros">
                <AccordionTrigger className="text-sm pl-4 justify-center hover:text-black">
                  <span className="flex items-center gap-2">
                    <Settings size={17} /> Filtros Negócio
                  </span>
                </AccordionTrigger>
                <AccordionContent>
                  <div
                    className="pr-2 pb-5"
                  // style={{ maxHeight: "calc(100vh - 140px)" }}
                  >
                    <InputGroup>
                      <Input
                        name="numNegocio_filtro"
                        label="Nº do Negócio"
                        textSize="text-sm"
                        labelSize="text-md"
                        formulario={form}
                        mascara="numerico"
                        defaultValue={
                          businessFilters &&
                          businessFilters["numNegocio_filtro"]
                        }
                      />
                      {origin.includes("relatorio-negocios") && (
                        <InputSelectComponent
                          name="status_filtro"
                          label="Status"
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          skipEffect
                          isMulti
                          formulario={form}
                          defaultValue={
                            (["relatorio", "relatorio-negocios"].some(
                              (e) => origin == e,
                            ) &&
                              "*") ||
                            (["relatorio-negocios-cards"].some((e) =>
                              origin.includes(e),
                            ) &&
                              "0,2") ||
                            (businessFilters &&
                              businessFilters.cliente_filtro?.join(","))
                          }
                          options={[
                            { value: String("*"), label: "Todos" },
                            { value: "0", label: "Em aberto" },
                            { value: "2", label: "Concluído" },
                            { value: "100", label: "Cancelado" },
                          ]}
                        />
                      )}

                      <InputSelectComponent
                        name="cliente_filtro"
                        label="Cliente"
                        textSize="text-sm"
                        labelSize="text-md"
                        width="w-[100%]"
                        removeDocumentBody={
                          origin !== "relatorio" &&
                          origin !== "relatorio-negocios"
                        }
                        skipEffect
                        isMulti
                        formulario={form}
                        defaultValue={
                          (["relatorio", "relatorio-negocios"].some((e) =>
                            origin.includes(e),
                          ) &&
                            "*") ??
                          (businessFilters &&
                            businessFilters.cliente_filtro?.join(","))
                        }
                        options={[
                          { value: String("*"), label: "Todos" },
                          ...clientes?.map<IValueLabel>(
                            (cliente: ICliente) => ({
                              label: cliente.nome_cliente,
                              value: cliente.id_cliente,
                            }),
                          ),
                        ]}
                      />
                      <InputSelectComponent
                        name="tipo_negocio_filtro"
                        label="Tipo de Negócio"
                        textSize="text-sm"
                        labelSize="text-md"
                        width="w-[100%]"
                        removeDocumentBody={
                          origin !== "relatorio" &&
                          origin !== "relatorio-negocios"
                        }
                        skipEffect
                        isMulti
                        defaultValue={
                          (["relatorio", "relatorio-negocios"].some((e) =>
                            origin.includes(e),
                          ) &&
                            "*") ??
                          (businessFilters &&
                            businessFilters.tipo_negocio_filtro?.join(","))
                        }
                        formulario={form}
                        options={[
                          { value: String("*"), label: "Todos" },
                          ...tipoNegocio.map((e: any) => ({
                            value: e.id_tipo_negocio,
                            label: e.nome_tipo_negocio,
                          })),
                        ]}
                      />
                      <InputSelectComponent
                        name="tipoEdificacao_filtro"
                        label="Tipo de Edificação"
                        textSize="text-sm"
                        labelSize="text-md"
                        width="w-[100%]"
                        removeDocumentBody={
                          origin !== "relatorio" &&
                          origin !== "relatorio-negocios"
                        }
                        skipEffect
                        isMulti
                        defaultValue={
                          (["relatorio", "relatorio-negocios"].some((e) =>
                            origin.includes(e),
                          ) &&
                            "*") ??
                          (businessFilters &&
                            businessFilters.tipoEdificacao_filtro?.join(","))
                        }
                        formulario={form}
                        options={[
                          { value: String("*"), label: "Todos" },
                          { value: "vazio", label: "Vazio" },
                          ...tiposEdificacao,
                        ]}
                      />
                      <InputSelectComponent
                        name="classificacao_filtro"
                        label="Classificação do Negócio"
                        textSize="text-sm"
                        labelSize="text-md"
                        width="w-[100%]"
                        removeDocumentBody={
                          origin !== "relatorio" &&
                          origin !== "relatorio-negocios"
                        }
                        skipEffect
                        isMulti
                        defaultValue={
                          (["relatorio", "relatorio-negocios"].some((e) =>
                            origin.includes(e),
                          ) &&
                            "*") ??
                          (businessFilters &&
                            businessFilters.classificacao_filtro?.join(","))
                        }
                        formulario={form}
                        options={[
                          { value: String("*"), label: "Todos" },
                          ...classificacoes
                            .filter((e: any) => e.status_classificacao == 1)
                            .map((e: any) => ({
                              value: e.id_classificacao,
                              label: e.nome_classificacao,
                            })),
                          { value: "0", label: "Não Informado" },
                        ]}
                      />
                      {/* {origin === "relatorio-negocios" && ( */}
                      <>
                        <InputSelectComponent
                          name="fluxos_filtro"
                          label="Fluxos"
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          disabled={somenteCancelados}
                          // removeDocumentBody={origin !== "relatorio" && origin !== "relatorio-negocios"}
                          skipEffect
                          isMulti
                          defaultValue={
                            [
                              "relatorio",
                              "relatorio-negocios",
                              "relatorio-negocios-cards",
                              "relatorio-negocios-follow-ups",
                              "relatorio-negocios-campos-personalizados",
                            ].includes(
                              origin,
                            ) && "*"
                          }
                          formulario={form}
                          options={[
                            ...(!somenteCancelados
                              ? [{ value: "*", label: "Todos" }]
                              : []),
                            // { value: String("*"), label: "Todos" },
                            ...fluxosFiltrados
                              .sort((a: any, b: any) => {
                                const numA = parseInt(
                                  a.titulo_funil.match(/^(\d+)/)?.[1] || "9999",
                                );
                                const numB = parseInt(
                                  b.titulo_funil.match(/^(\d+)/)?.[1] || "9999",
                                );

                                return numA - numB;
                              })
                              .map((e: any) => ({
                                ...e,
                                value: e.id_funil,
                                label: e.titulo_funil,
                              })),
                          ]}
                        />
                        <InputSelectComponent
                          name="etapas_fluxo_filtro"
                          label="Etapas"
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          // removeDocumentBody={origin !== "relatorio" && origin !== "relatorio-negocios"}
                          // skipEffect
                          isMulti
                          defaultValue={
                            [
                              "relatorio",
                              "relatorio-negocios",
                              "relatorio-negocios-cards",
                              "relatorio-negocios-follow-ups",
                              "relatorio-negocios-campos-personalizados",
                            ].includes(
                              origin,
                            ) && "*"
                          }
                          formulario={form}
                          options={[
                            { value: "*", label: "Todos" },
                            ...((form?.cleanValues?.fluxos_filtro == "*"
                              ? fluxosFiltrados
                              : form?.watch("fluxos_filtro")
                            )?.map((f: any) => ({
                              label: f.titulo_funil,
                              options: etapasFiltradas
                                ?.filter(
                                  (e: any) =>
                                    !f.id_funil || e.grupo_etapa_funil == f.id_funil,
                                )
                                .map((e: any) => ({
                                  value: e.id_etapa_funil,
                                  label: e.titulo_etapa_funil,
                                })),
                            })) || []),
                            // ...etapasFiltradas.map((e: any) => ({
                            //   value: e.id_etapa_funil,
                            //   label: e.titulo_etapa_funil,
                            // })),
                          ]}
                        />
                      </>
                      {/* )} */}

                      {/* </InputGroup>
                    <InputGroup> */}
                      <InputSelectComponent
                        formulario={form}
                        textSize="text-sm"
                        labelSize="text-md"
                        width="w-[100%]"
                        skipEffect
                        removeDocumentBody={
                          origin !== "relatorio" &&
                          origin !== "relatorio-negocios"
                        }
                        isMulti
                        name="loja_filtro"
                        disabled={
                          allFilterData["Lojas"].length ==
                          session.loja_usuario?.split(",").length
                        }
                        defaultValue={
                          allFilterData["Lojas"].length > 1
                            ? "*"
                            : session.loja_padrao_usuario
                        }
                        options={[
                          { value: String("*"), label: "Todos" },
                          ...allFilterData["Lojas"]?.map((loja: any) => ({
                            label: loja.nome_loja,
                            value: loja.id_loja,
                          })),
                        ]}
                        label="Loja"
                      />
                    </InputGroup>
                    {/* <Accordion type="single" className="mb-8" collapsible>
                      <AccordionItem value="filtros">
                        <AccordionTrigger className="text-sm pl-4 justify-center hover:text-black">
                          <span className="flex items-center gap-2">
                            <Settings size={17} /> Filtros Avançados
                          </span>
                        </AccordionTrigger>
                        <AccordionContent> */}
                    <div className="text-sm py-2">
                      <strong>
                        {origin.includes("relatorio-negocios")
                          ? "Filtros de Datas do Período:"
                          : "Filtros de Datas por:"}
                      </strong>
                    </div>
                    <InputGroup>
                      <div className="p-4 my-2 mb-4 w-full relative border border-black/30 rounded-md">
                        <InputGroup>
                          <Input
                            label="Data de Criação do Negócio De"
                            name="dataI_negocio_filtro"
                            formulario={form}
                            type="date"
                            // width="w-[100%]"
                            defaultValue={
                              businessFilters &&
                              businessFilters["dataI_negocio_filtro"]
                            }
                          />
                          <Input
                            label="Até"
                            name="dataF_negocio_filtro"
                            formulario={form}
                            type="date"
                            // width="w-[100%]"
                            defaultValue={
                              businessFilters &&
                              businessFilters["dataF_negocio_filtro"]
                            }
                          />
                          {/* </InputGroup>
                        <InputGroup> */}
                          <Input
                            label="Data do Cancelamento De"
                            name="dataI_cancelamento_negocio_filtro"
                            formulario={form}
                            type="date"
                            required={origin === "relatorio"}
                            // width="w-[100%]"
                            defaultValue={
                              businessFilters &&
                              businessFilters[
                              "dataI_cancelamento_negocio_filtro"
                              ]
                            }
                          />
                          <Input
                            label="Até"
                            name="dataF_cancelamento_negocio_filtro"
                            formulario={form}
                            type="date"
                            required={origin === "relatorio"}
                            // width="w-[100%]"
                            defaultValue={
                              businessFilters &&
                              businessFilters[
                              "dataF_cancelamento_negocio_filtro"
                              ]
                            }
                          />
                          {/* </InputGroup> */}
                          {/* {origin === "relatorio-negocios" && ( */}
                          {/* <InputGroup> */}
                          <Input
                            label="Data de Finalização do Negócio De"
                            name="dataI_finalizacao_negocio_filtro"
                            formulario={form}
                            type="date"
                            // width="w-[100%]"
                            defaultValue={
                              businessFilters &&
                              businessFilters[
                              "dataI_finalizacao_negocio_filtro"
                              ]
                            }
                          />
                          <Input
                            label="Até"
                            name="dataF_finalizacao_negocio_filtro"
                            formulario={form}
                            type="date"
                            // width="w-[100%]"
                            defaultValue={
                              businessFilters &&
                              businessFilters[
                              "dataF_finalizacao_negocio_filtro"
                              ]
                            }
                          />
                        </InputGroup>
                        {/* )} */}
                      </div>

                      {/* )} */}
                    </InputGroup>
                    <InputGroup>
                      <InputSelectComponent
                        formulario={form}
                        name="cidade_filtro"
                        label="Cidade da Instalação"
                        isMulti
                        options={[
                          { value: "*", label: "Todas" },
                          ...cidades!.map((e: any) => ({
                            value: `${e.nome_cidade}`,
                            label: `${e.nome_cidade} - ${e.estado_cidade}`,
                          })),
                        ]}
                        defaultValue={"*"}
                      />
                      {pendencias && (
                        <InputSelectComponent
                          formulario={form}
                          name="pendencia_filtro"
                          label="Status Linha da Pendência"
                          isMulti
                          options={[
                            { value: "*", label: "Todas" },
                            ...pendencias!.map((e: any) => ({
                              value: `${e.id_pendencia}`,
                              label: `${e.nome_pendencia}`,
                            })),
                          ]}
                          defaultValue={"*"}
                        />
                      )}

                      {origin.includes("relatorio-negocios") && (
                        <fieldset
                          className={`border w-full border-black/30 p-2 rounded-md ${!consideraConsumoFiltro && "bg-black-2/5 dark:bg-black-2/20"}`}
                        >
                          <legend className="p-1 bg-white dark:bg-form-strokedark rounded-lg">
                            <label className="flex items-center gap-2 cursor-pointer select-none">
                              <input
                                type="checkbox"
                                checked={consideraConsumoFiltro}
                                onChange={(e) =>
                                  setConsideraConsumoFiltro(e.target.checked)
                                }
                                className="w-4 h-4 accent-black"
                              />
                              <span className="font-medium text-sm">
                                Considerar Consumo
                              </span>
                            </label>
                          </legend>
                          <div className="flex justify-center mb-2 gap-2">
                            <label className="flex items-center gap-2 cursor-pointer select-none">
                              <input
                                type="checkbox"
                                checked={naoInformado}
                                onChange={(e) =>
                                  setNaoInformado(e.target.checked)
                                }
                                className="w-4 h-4 accent-black"
                                disabled={!consideraConsumoFiltro}
                              />
                              <span className="font-medium text-sm">
                                Consumo Não informado
                              </span>
                            </label>
                          </div>

                          <div className="flex gap-3">
                            <Input
                              label="De Consumo (com % Aumento)"
                              name="de_consumo_negocio_filtro"
                              formulario={form}
                              required
                              mascara="numero"
                              defaultValue={"0"}
                              width="w-[100%]"
                              disabled={naoInformado || !consideraConsumoFiltro}
                            />
                            <Input
                              label="Até Consumo (com % Aumento)"
                              name="ate_consumo_negocio_filtro"
                              formulario={form}
                              required
                              mascara="numero"
                              width="w-[100%]"
                              defaultValue={"99.999.999,99"}
                              disabled={naoInformado || !consideraConsumoFiltro}
                            />
                          </div>
                        </fieldset>
                      )}

                      {origin.includes("relatorio-negocios-cards") && (
                        <Input
                          name="qtd_dias_parado"
                          // label="Qtd dias parado"
                          label={
                            <div className="flex flex-row gap-1">
                              <div>Qtd dias parado</div>
                              <div className="flex flex-row gap-1">
                                <div className="text-blue-500">
                                  {tipo_dias_parado == "="
                                    ? `(igual)`
                                    : tipo_dias_parado == "<="
                                      ? `(menor ou igual)`
                                      : `(maior ou igual)`}
                                </div>
                                <div className="flex flex-row gap-1">
                                  <div
                                    className="p-1 border border-black-3 rounded-sm cursor-pointer h-fit leading-none shadow-1"
                                    onClick={() => setTipo_dias_parado("=")}
                                  >
                                    {"="}
                                  </div>
                                  <div
                                    className="p-1 border border-black-3 rounded-sm cursor-pointer h-fit leading-none shadow-1"
                                    onClick={() => setTipo_dias_parado("<=")}
                                  >
                                    {"≤"}
                                  </div>
                                  <div
                                    className="p-1 border border-black-3 rounded-sm cursor-pointer h-fit leading-none shadow-1"
                                    onClick={() => setTipo_dias_parado(">=")}
                                  >
                                    {"≥"}
                                  </div>
                                </div>
                              </div>
                            </div>
                          }
                          formulario={form}
                          mascara="numerico"
                          defaultValue={"0"}
                          width="w-fit"
                        />
                      )}
                    </InputGroup>
                    <div className="p-9   my-2 mb-4 relative border border-black/30 rounded-md">
                      <span className="absolute -top-3 font-semibold text-black bg-white px-3 left-9">
                        Responsáveis
                      </span>
                      <InputGroup>
                        <InputSelectComponent
                          formulario={form}
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          skipEffect
                          isMulti
                          removeDocumentBody={
                            origin !== "relatorio" &&
                            origin !== "relatorio-negocios"
                          }
                          name="responsavel_filtro"
                          defaultValue={
                            (["relatorio", "relatorio-negocios"].includes(
                              origin,
                            ) &&
                              "*") ??
                            (businessFilters &&
                              businessFilters.responsavel_filtro?.join(","))
                          }
                          options={[
                            { value: "", label: "Não Informado" },
                            { value: String("*"), label: "Todos" },
                            ...allFilterData["Usuarios"]?.map((user: any) => ({
                              label: user.nome_usuario,
                              value: user.id_usuario,
                            })),
                          ]}
                          label="Quem gerou"
                          menuPositionFixed
                        />
                        <InputSelectComponent
                          formulario={form}
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          skipEffect
                          isMulti
                          removeDocumentBody={
                            origin !== "relatorio" &&
                            origin !== "relatorio-negocios"
                          }
                          name="administrativo_filtro"
                          defaultValue={
                            (["relatorio", "relatorio-negocios"].some((e) =>
                              origin.includes(e),
                            ) &&
                              "*") ??
                            (businessFilters &&
                              businessFilters.administrativo_filtro?.join(","))
                          }
                          options={[
                            { value: "", label: "Não Informado" },
                            { value: String("*"), label: "Todos" },
                            ...allFilterData["Usuarios"]
                              ?.filter(
                                (user: any) =>
                                  user.cargo_perfil == "1" ||
                                  user.cargo_perfil == "4" ||
                                  user.cargo_perfil == "-1",
                              )
                              ?.map((user: any) => ({
                                label: user.nome_usuario,
                                value: user.id_usuario,
                              })),
                          ]}
                          label="Administrador"
                          menuPositionFixed
                        />

                        {/* </InputGroup>
                    <InputGroup> */}
                        <InputSelectComponent
                          formulario={form}
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          isMulti
                          skipEffect
                          removeDocumentBody={
                            origin !== "relatorio" &&
                            origin !== "relatorio-negocios"
                          }
                          name="vendedor_filtro"
                          defaultValue={
                            perfil?.cargo_perfil == 2 ? usuario.id_usuario : "*"
                          }
                          disabled={
                            perfil?.visualiza_todos_contatos_perfil != "1"
                          }
                          options={[
                            { value: "", label: "Não Informado" },

                            { value: String("*"), label: "Todos" },
                            ...allFilterData["Usuarios"]
                              ?.filter(
                                (user: any) => user.comissionado_usuario == "1",
                              )
                              ?.map((user: any) => ({
                                label: user.nome_usuario,
                                value: user.id_usuario,
                              })),
                          ]}
                          label="Vendedor"
                          menuPositionFixed
                        />
                        <InputSelectComponent
                          formulario={form}
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          isMulti
                          removeDocumentBody={
                            origin !== "relatorio" &&
                            origin !== "relatorio-negocios"
                          }
                          skipEffect
                          name="preVendedor_filtro"
                          defaultValue={
                            perfil.cargo_perfil == 3 ? usuario.id_usuario : "*"
                          }
                          disabled={
                            perfil?.visualiza_todos_contatos_perfil != "1"
                          }
                          options={[
                            { value: "", label: "Não Informado" },

                            { value: String("*"), label: "Todos" },
                            ...allFilterData["Usuarios"]
                              ?.filter((user: any) => user.cargo_perfil == "3")
                              ?.map((user: any) => ({
                                label: user.nome_usuario,
                                value: user.id_usuario,
                              })),
                          ]}
                          label="Pré-Vendedor"
                          menuPositionFixed
                        />
                      </InputGroup>
                      <InputGroup>
                        <InputSelectComponent
                          formulario={form}
                          isMulti
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          removeDocumentBody={
                            origin !== "relatorio" &&
                            origin !== "relatorio-negocios"
                          }
                          skipEffect
                          name="tecnico_filtro"
                          defaultValue={
                            perfil.cargo_perfil == 5 ? usuario.id_usuario : "*"
                          }
                          disabled={
                            perfil?.visualiza_todos_contatos_perfil != "1"
                          }
                          options={[
                            { value: "", label: "Não Informado" },

                            { value: String("*"), label: "Todos" },
                            ...allFilterData["Usuarios"]
                              ?.filter((user: any) => user.cargo_perfil == "5")
                              ?.map((user: any) => ({
                                label: user.nome_usuario,
                                value: user.id_usuario,
                              })),
                          ]}
                          label="Técnico"
                          menuPositionFixed
                        />
                        <InputSelectComponent
                          formulario={form}
                          isMulti
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          removeDocumentBody={
                            origin !== "relatorio" &&
                            origin !== "relatorio-negocios"
                          }
                          skipEffect
                          name="instalador_filtro"
                          defaultValue={
                            perfil.cargo_perfil == 6 ? usuario.id_usuario : "*"
                          }
                          disabled={
                            perfil?.visualiza_todos_contatos_perfil != "1"
                          }
                          options={[
                            { value: "", label: "Não Informado" },

                            { value: String("*"), label: "Todos" },
                            ...allFilterData["Usuarios"]
                              ?.filter((user: any) => user.cargo_perfil == "6")
                              ?.map((user: any) => ({
                                label: user.nome_usuario,
                                value: user.id_usuario,
                              })),
                          ]}
                          label="Instalador"
                          menuPositionFixed
                        />
                        <InputSelectComponent
                          formulario={form}
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          skipEffect
                          isMulti
                          removeDocumentBody={
                            origin !== "relatorio" &&
                            origin !== "relatorio-negocios"
                          }
                          name="gerente_filtro"
                          defaultValue={"*"}
                          disabled={
                            perfil?.visualiza_todos_contatos_perfil != "1"
                          }
                          options={[
                            { value: "", label: "Não Informado" },

                            { value: String("*"), label: "Todos" },
                            ...allFilterData["Usuarios"]
                              ?.filter(
                                (user: any) =>
                                  user.cargo_perfil == "1" ||
                                  user.cargo_perfil == "4",
                              )
                              ?.map((user: any) => ({
                                label: user.nome_usuario,
                                value: user.id_usuario,
                              })),
                          ]}
                          label="Gerente"
                          menuPositionFixed
                        />
                        <InputSelectComponent
                          formulario={form}
                          textSize="text-sm"
                          labelSize="text-md"
                          width="w-[100%]"
                          skipEffect
                          isMulti
                          removeDocumentBody={
                            origin !== "relatorio" &&
                            origin !== "relatorio-negocios"
                          }
                          defaultValue={
                            perfil.cargo_perfil == 7 ? usuario.id_usuario : "*"
                          }
                          disabled={
                            perfil?.visualiza_todos_contatos_perfil != "1"
                          }
                          name="supervisor_filtro"
                          options={[
                            { value: "", label: "Não Informado" },

                            { value: String("*"), label: "Todos" },
                            ...allFilterData["Usuarios"]
                              ?.filter((user: any) => user.cargo_perfil == "7")
                              ?.map((user: any) => ({
                                label: user.nome_usuario,
                                value: user.id_usuario,
                              })),
                          ]}
                          label="Supervisor"
                          menuPositionFixed
                        />
                      </InputGroup>
                    </div>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>

            {origin.includes("relatorio-negocios-follow-ups") && (
              <div className="p-9   my-2 mb-4 relative border border-black/30 rounded-md">
                <span className="absolute -top-3 font-semibold text-black bg-white px-3 left-9">
                  Follow-up
                </span>
                <InputGroup>
                  <InputSelectComponent
                    name="responsavel_follow_up_filtro"
                    label="Responsável"
                    formulario={form}
                    isMulti
                    textSize="text-sm"
                    labelSize="text-md"
                    width="w-[100%]"
                    removeDocumentBody={true}
                    skipEffect
                    defaultValue={"*"}
                    options={[
                      { value: "0", label: "Não é Necessário" },
                      { value: String("*"), label: "Todos" },
                      ...allFilterData["Usuarios"]?.map((user: any) => ({
                        label: user.nome_usuario,
                        value: user.id_usuario,
                      })),
                    ]}
                    menuPositionFixed
                  />
                  <InputSelectComponent
                    name="criador_follow_up_filtro"
                    label="Quem criou"
                    formulario={form}
                    isMulti
                    textSize="text-sm"
                    labelSize="text-md"
                    width="w-[100%]"
                    removeDocumentBody={true}
                    skipEffect
                    defaultValue={"*"}
                    options={[
                      { value: "0", label: "Não Informado" },
                      { value: String("*"), label: "Todos" },
                      ...allFilterData["Usuarios"]?.map((user: any) => ({
                        label: user.nome_usuario,
                        value: user.id_usuario,
                      })),
                    ]}
                    menuPositionFixed
                  />
                  <InputSelectComponent
                    name="status_follow_up_filtro"
                    label="Status"
                    formulario={form}
                    // isMulti
                    textSize="text-sm"
                    labelSize="text-md"
                    width="w-[100%]"
                    removeDocumentBody={true}
                    skipEffect
                    defaultValue={"*"}
                    options={[
                      { value: String("*"), label: "Todos" },
                      { value: "0", label: "Pendente" },
                      { value: "1", label: "Concluído" },
                    ]}
                    menuPositionFixed
                  />
                  <InputSelectComponent
                    name="c_anexos_follow_up_filtro"
                    label="Com Anexos"
                    formulario={form}
                    // isMulti
                    textSize="text-sm"
                    labelSize="text-md"
                    width="w-[100%]"
                    removeDocumentBody={true}
                    skipEffect
                    defaultValue={"*"}
                    options={[
                      { value: String("*"), label: "Todos" },
                      { value: "1", label: "Sim" },
                      { value: "0", label: "Não" },
                    ]}
                    menuPositionFixed
                  />
                </InputGroup>
                {origin.includes("relatorio-negocios-follow-ups") && (
                  <InputGroup>
                    <Input
                      label="Data de Inclusão Follow-up De"
                      name="dataI_follow_up_filtro"
                      formulario={form}
                      type="date"
                      // width="w-[100%]"
                      defaultValue={
                        businessFilters &&
                        businessFilters["dataI_follow_up_filtro"]
                      }
                    />
                    <Input
                      label="Até"
                      name="dataF_follow_up_filtro"
                      formulario={form}
                      type="date"
                      // width="w-[100%]"
                      defaultValue={
                        businessFilters &&
                        businessFilters["dataF_follow_up_filtro"]
                      }
                    />
                  </InputGroup>
                )}
              </div>
            )}

            {origin.includes("relatorio-negocios-campos-personalizados") && (
              <div className="p-9   my-2 mb-4 relative border border-black/30 rounded-md">
                <span className="absolute -top-3 font-semibold text-black bg-white px-3 left-9">
                  Campos Personalizados
                </span>
                <InputGroup>
                  <InputSelectComponent
                    name="campos_personalizados_filtro"
                    label="Lista de Campos Personalizados"
                    formulario={form}
                    isMulti
                    textSize="text-sm"
                    labelSize="text-md"
                    width="w-[100%]"
                    removeDocumentBody={true}
                    skipEffect
                    defaultValue={"*"}
                    options={[
                      { value: String("*"), label: "Todos" },
                      ...camposPersonalizados?.map((campo: any) => ({
                        label: `${campo.id_campo_personalizado} - ${campo.nome_campo_personalizado}`,
                        value: campo.id_campo_personalizado,
                      })),
                    ]}
                    menuPositionFixed
                  />
                  <InputSelectComponent
                    name="usuario_alterou_campo_personalizado_filtro"
                    label="Usuário que Alterou"
                    formulario={form}
                    isMulti
                    textSize="text-sm"
                    labelSize="text-md"
                    width="w-[100%]"
                    removeDocumentBody={true}
                    skipEffect
                    defaultValue={"*"}
                    options={[
                      { value: "0", label: "Não Informado" },
                      { value: String("*"), label: "Todos" },
                      ...allFilterData["Usuarios"]?.map((user: any) => ({
                        label: user.nome_usuario,
                        value: user.id_usuario,
                      })),
                    ]}
                    menuPositionFixed
                  />
                  <InputSelectComponent
                    name="status_campo_personalizado_filtro"
                    label="Status"
                    formulario={form}
                    textSize="text-sm"
                    labelSize="text-md"
                    width="w-[100%]"
                    removeDocumentBody={true}
                    skipEffect
                    defaultValue={"*"}
                    options={[
                      { value: String("*"), label: "Todos" },
                      { value: "1", label: "Ativos" },
                      { value: "0", label: "Inativos" },
                    ]}
                    menuPositionFixed
                  />
                </InputGroup>
                <InputGroup>
                  <Input
                    label="Data de Inclusão Campo Personalizado De"
                    name="dataI_campo_personalizado_filtro"
                    formulario={form}
                    type="date"
                    defaultValue={
                      businessFilters &&
                      businessFilters["dataI_campo_personalizado_filtro"]
                    }
                  />
                  <Input
                    label="Até"
                    name="dataF_campo_personalizado_filtro"
                    formulario={form}
                    type="date"
                    defaultValue={
                      businessFilters &&
                      businessFilters["dataF_campo_personalizado_filtro"]
                    }
                  />
                </InputGroup>
              </div>
            )}
            {/* </AccordionContent>
              </AccordionItem>
            </Accordion> */}
            {children}
          </div>
        </>
      ) : (
        <div className="flex items-center justify-center h-[700px] py-2 px-5">
          <LoaderSun size={20} />
        </div>
      )}
    </form>
  );
};

export default FormularioRelatorioPerdas;