import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Skeleton } from "@/components/ui/skeleton";
import { listarEtiquetas } from "@/requests/CRM/kanban";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarIndicadores } from "@/requests/CRUD/Indicadores/listarIndicadores";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarOrigens } from "@/requests/CRUD/Origens/listarOrigens";
import { listarTodosTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/listarTiposEdificacao";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { ICidade } from "@/requests/common/EstadosCidades/estadosCidades";
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 { Tooltip } from "@mui/material";
import { parseISO } from "date-fns";
import {
  ArrowUpDown,
  Briefcase,
  Calendar,
  DollarSign,
  Info,
  UserCircle,
  Users,
  type LucideIcon,
} from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { arrayTipo } from "../kanbanProjeto/negocio/FormNegocioCard";

interface ICliente {
  nome_cliente: string;
  id_cliente: string;
}

const FILTER_ACCORDION_ITEM_CLASS =
  "mb-2 overflow-hidden rounded-xl border border-slate-200/80 bg-white shadow-sm dark:border-slate-700/80 dark:bg-slate-800/30 border-b";

const FILTER_ACCORDION_TRIGGER_CLASS =
  "rounded-lg bg-slate-100/80 px-4 py-3.5 text-sm font-medium text-black transition-colors hover:bg-slate-100 hover:no-underline dark:bg-slate-700/30 dark:text-slate-200 dark:hover:bg-slate-700/45 [&>svg]:text-primary";

const FILTER_ACCORDION_CONTENT_CLASS = "px-4 pb-4";

const FILTER_INPUT_GROUP_CLASS =
  "mb-4 flex !flex-col gap-3 xl:!flex-col [&>*]:min-w-0 [&>*]:w-full [&_label.labelInputDynamic]:!whitespace-normal [&_label.labelInputDynamic]:flex-wrap [&_label.labelInputDynamic]:items-center [&_label.labelInputDynamic]:gap-x-1.5 [&_label.labelInputDynamic]:leading-snug";

function FilterCompareLabel({
  title,
  checked,
  onToggle,
  checkboxName,
  form,
}: {
  title: string;
  checked: boolean;
  onToggle: (checked: boolean) => void;
  checkboxName: string;
  form: ReturnType<typeof GetForm>;
}) {
  return (
    <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
      <span>{title}</span>
      <span className="inline-flex items-center gap-1.5 text-xs text-slate-500 dark:text-slate-400">
        <span>{checked ? "(igual)" : "(maior ou igual)"}</span>
        <Input
          name={checkboxName}
          label=""
          formulario={form}
          checked={checked}
          type="checkbox"
          onChange={(e) => onToggle(!!e?.target?.checked)}
        />
      </span>
    </div>
  );
}

const FILTER_SECTION_ICON_CLASS =
  "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary";

function FilterSectionTrigger({
  icon: Icon,
  label,
}: {
  icon: LucideIcon;
  label: string;
}) {
  return (
    <span className="flex items-center gap-2.5">
      <span className={FILTER_SECTION_ICON_CLASS}>
        <Icon size={14} />
      </span>
      {label}
    </span>
  );
}

function FilterSkeleton() {
  return (
    <div className="flex h-full min-h-0 flex-col py-4" aria-hidden="true">
      <div className="flex flex-1 flex-col gap-2">
        {Array.from({ length: 6 }).map((_, index) => (
          <Skeleton key={index} className="h-12 w-full rounded-xl" />
        ))}
      </div>
      <div className="mt-4 flex shrink-0 gap-3 border-t border-slate-200 pt-4 dark:border-slate-800">
        <Skeleton className="h-10 flex-1 rounded-lg" />
        <Skeleton className="h-10 flex-1 rounded-lg" />
      </div>
    </div>
  );
}

const KanbanFilters = ({
  origin,
  filterValues,
  setFilterValues,
  onSubmit,
  children,
}: any) => {
  const form = GetForm();

  const {
    lists,
    funil,
    listarDadosKanban,
    locks,
    pendencias_card,
    cidades,
    clientes,
    estadosFiltro,
    businessFilters,
    setBusinessFilters,
  } = useKanbanContext();

  const [filtroEstado, setFiltroEstado] = useState<any>([]);
  const [classificacoes, setClassificacoes] = useState<any[]>([]);
  const [estadoContatoSelecionado, setEstadoContatoSelecionado] = useState<any>(
    businessFilters?.estado_contato_filtro
  );
  const [estadoInstalacaoSelecionado, setEstadoInstalacaoSelecionado] =
    useState<any>(businessFilters?.estado_instalacao_filtro);
  const [allFilterData, setAllFilterData] = useState<Record<string, any>>({});
  const [isFilterDataLoaded, setIsFilterDataLoaded] = useState(false);
  const [tipoNegocio, setTiposNegocio] = useState<any[]>([]);
  const [tiposEdificacao, setTiposEdificacao] = useState<IValueLabel[]>([]);
  const [lojas, setLojas] = useState<any[]>([]);
  const { valuesSession, usuario } = useAuth();
  const { session } = valuesSession();
  const [openItems, setOpenItems] = useState([]);

  const [selectedOption, setSelectedOption] = useState(
    businessFilters?.ordenacao_filtro
  );

  const [igual_disjuntor_filtro, setIgual_disjuntor_filtro] = useState(
    businessFilters?.igual_disjuntor_filtro == "true"
  );
  const [igual_qtd_ucs_filtro, setIgual_qtd_ucs_filtro] = useState(
    businessFilters?.igual_qtd_ucs_filtro == "true"
  );
  const [igual_qtd_follow_ups_filtro, setIgual_qtd_follow_ups_filtro] =
    useState(businessFilters?.igual_qtd_follow_ups_filtro == "true");
  const [igual_dias_etapa_filtro, setIgual_dias_etapa_filtro] = useState(
    businessFilters?.igual_dias_etapa_filtro == "true"
  );

  const [origensCliente, setOrigensCliente] = useState<any[]>([]);

  useEffect(() => {
    listarTiposNegocios().then((res) => setTiposNegocio(res));
    listarTodosTiposEdificacao().then((res) =>
      setTiposEdificacao(
        res.map((tipo: any) => ({
          label: formatLabelTipoEdificacao(tipo),
          value: `${tipo.id_tipo_edificacao}`,
        }))
      )
    );
    if (funil == "0") {
      form.setValue("dataI_proposta_filtro", "");
      form.setValue("dataF_proposta_filtro", "");
    } else {
      form.setValue("dataI_cancelamento_negocio_filtro", "");
      form.setValue("dataF_cancelamento_negocio_filtro", "");
    }
    listarOrigens().then(setOrigensCliente);
  }, []);

  useEffect(() => {
    setFiltroEstado([
      { value: "*", label: "Todos" },
      ...estadosFiltro.map((estado: any) => ({
        label: `${estado.uf_estado}`,
        value: `${estado.uf_estado}`,
      })),
    ]);
    listarClassificacoes().then((classificacao) =>
      setClassificacoes([
        { label: "Todos", value: "" },
        ...classificacao
          .filter((e: any) => e.status_classificacao == 1)
          .map((y: any) => ({
            label: `${y.nome_classificacao}`,
            value: `${y.id_classificacao}`,
          })),
        { label: "Não Informado", value: "0" },
      ])
    );

    Promise.all([
      listarLojas(session.id_usuario),
      listarUsuarios(session.id_loja_usuario),
      listarEtiquetas(),
      listarIndicadores(),
    ]).then(([lojasRes, usuariosRes, etiquetasRes, indicadoresRes]) => {
      setAllFilterData((prevData) => ({
        ...prevData,
        Usuarios: usuariosRes,
        Etiquetas: etiquetasRes,
        Lojas: lojasRes,
        Indicadores: indicadoresRes,
      }));
      setIsFilterDataLoaded(true);
    });

    // setEstadoSelecionado(filtrosSelecionados?.estado_contato_filtro);
  }, []);

  const criteriosOrdenacao = [
    { label: "Data do Cadastro Crescente", value: 0 },
    { label: "Data do Cadastro Descrescente", value: 1 },
    { label: "Data da Atualização Crescente", value: 2 },
    { label: "Data da Atualização Descrescente", value: 3 },
    { label: "Ordem Alfabética", value: 4 },
  ];

  //Array de filtros
  const filterGroups = [
    ...(funil != "0"
      ? [
          {
            title: "Potencia da Proposta Aprovada",
            inputs: [
              {
                name: "min_potencia_filtro",
                label: "De",
                defaultValue: businessFilters?.min_potencia_filtro,
              },
              {
                name: "max_potencia_filtro",
                label: "Até",
                defaultValue: businessFilters?.max_potencia_filtro,
              },
            ],
          },
          {
            title: "Valor da Proposta Aprovada",
            inputs: [
              {
                name: "min_valor_filtro",
                label: "De",
                defaultValue: businessFilters?.min_valor_filtro,
              },
              {
                name: "max_valor_filtro",
                label: "Até",
                defaultValue: businessFilters?.max_valor_filtro,
              },
            ],
          },
        ]
      : [
          {
            title: "Potencia da Proposta Cancelada",
            inputs: [
              {
                name: "min_potencia_cancelados_filtro",
                label: "De",
                defaultValue: businessFilters?.min_potencia_cancelados_filtro,
              },
              {
                name: "max_potencia_cancelados_filtro",
                label: "Até",
                defaultValue: businessFilters?.max_potencia_cancelados_filtro,
              },
            ],
          },
          {
            title: "Valor da Proposta Cancelada",
            inputs: [
              {
                name: "min_valor_cancelados_filtro",
                label: "De",
                defaultValue: businessFilters?.min_valor_cancelados_filtro,
              },
              {
                name: "max_valor_cancelados_filtro",
                label: "Até",
                defaultValue: businessFilters?.max_valor_cancelados_filtro,
              },
            ],
          },
        ]),
    {
      title: "Valor da Proposta Gerada",
      inputs: [
        {
          name: "min_valor_gerados_filtro",
          label: "De",
          defaultValue: businessFilters?.min_valor_cancelados_filtro,
        },
        {
          name: "max_valor_cancelados_filtro",
          label: "Até",
          defaultValue: businessFilters?.max_valor_cancelados_filtro,
        },
      ],
    },
    {
      title: "Faixa de Consumo",
      inputs: [
        {
          name: "min_consumo_filtro",
          label: "De",
          defaultValue: businessFilters?.min_consumo_filtro,
        },
        {
          name: "max_consumo_filtro",
          label: "Até",
          defaultValue: businessFilters?.max_consumo_filtro,
        },
      ],
    },
  ];

  const handleCheckboxChange = (value: any) => {
    if (selectedOption === value) {
      setSelectedOption(null);
    } else {
      setSelectedOption(value);
    }
  };

  const currentDate = new Date().toISOString().split("T")[0];

  const submitFilters = (values: any) => {
    var dtI_Negocio = parseISO(values["dataI_negocio_filtro"]);
    var dtF_Negocio = parseISO(values["dataF_negocio_filtro"]);
    var dtI_Proposta = parseISO(values["dataI_proposta_filtro"]);
    var dtF_Proposta = parseISO(values["dataF_proposta_filtro"]);

    if (dtI_Negocio > dtF_Negocio || dtI_Proposta > dtF_Proposta) {
      toast.warning(`Data início não pode ser maior que data fim!`);
      return;
    }

    var vlrI_Potencia = +values["min_potencia_filtro"];
    var 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;
    }

    var vlrI_CancelPotencia = +values["min_potencia_cancelados_filtro"];
    var vlrF_CancelPotencia = +values["max_potencia_cancelados_filtro"];
    if (
      vlrI_CancelPotencia &&
      vlrF_CancelPotencia &&
      vlrI_CancelPotencia > vlrF_CancelPotencia
    ) {
      toast.warning(`Potência início não pode ser maior que potência fim!`);
      return;
    }

    var vlrI_Valor = +values["min_valor_filtro"];
    var 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;
    }

    var vlrI_CancelValor = +values["min_valor_cancelados_filtro"];
    var vlrF_CancelValor = +values["max_valor_cancelados_filtro"];
    if (
      vlrI_CancelValor &&
      vlrF_CancelValor &&
      vlrI_CancelValor > vlrF_CancelValor
    ) {
      toast.warning(`Valor início não pode ser maior que valor fim!`);
      return;
    }

    var vlrI_Consumo = +values["min_consumo_filtro"];
    var 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 (origin === "relatorio") {
      setFilterValues?.(values); // atualiza o state
      onSubmit?.(values); // executa callback com valores corretos
    } else {
      setBusinessFilters(values);
    }

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

  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!");
  };

  useEffect(() => {
    const itemsToOpen: any = [];

    // Verifique se "item-1" tem algum valor preenchido nos filtros
    if (
      businessFilters &&
      (businessFilters["numNegocio_filtro"] ||
        businessFilters["etapa1_filtro"] ||
        businessFilters["etiqueta_filtro"] ||
        businessFilters["urgencia_filtro"] ||
        businessFilters["cliente_filtro"]?.length > 0 ||
        businessFilters["tipo_negocio_filtro"]?.length > 0 ||
        businessFilters["loja_filtro"]?.length > 0 ||
        businessFilters["pendencia_filtro"]?.length > 0)
    ) {
      itemsToOpen.push("item-1");
    }

    // Verifique se "item-2" tem algum valor preenchido nos filtros
    if (
      businessFilters &&
      (businessFilters["estado_contato_filtro"] ||
        businessFilters["cidade_contato_filtro"]?.length > 0)
    ) {
      itemsToOpen.push("item-2");
    }

    // Verifique se "item-3" (Responsáveis) tem algum valor preenchido
    if (
      businessFilters &&
      (businessFilters["gerente_filtro"]?.length > 0 ||
        businessFilters["responsavel_filtro"]?.length > 0 ||
        businessFilters["vendedor_filtro"]?.length > 0 ||
        businessFilters["preVendedor_filtro"]?.length > 0 ||
        businessFilters["tecnico_filtro"]?.length > 0 ||
        businessFilters["instalador_filtro"]?.length > 0)
    ) {
      itemsToOpen.push("item-3");
    }

    // Verifique se "item-4" (Datas) tem algum valor preenchido
    if (
      businessFilters &&
      (businessFilters["dataI_negocio_filtro"] ||
        businessFilters["dataF_negocio_filtro"] ||
        businessFilters["dataI_proposta_filtro"] ||
        businessFilters["dataF_proposta_filtro"])
    ) {
      itemsToOpen.push("item-4");
    }

    // Verifique se "item-5" (Valores) tem algum valor preenchido
    if (
      filterGroups.some((group) =>
        group.inputs.some(
          (input) => businessFilters && businessFilters[input.name]
        )
      )
    ) {
      itemsToOpen.push("item-5");
    }

    setOpenItems(itemsToOpen);
  }, []);

  return (
    <form
      key={form.key}
      onSubmit={form.handleSubmit(submitFilters)}
      className="flex h-full min-h-0 flex-col"
    >
      {!isFilterDataLoaded ? (
        <FilterSkeleton />
      ) : (
        <>
          <div className="flex-1 overflow-x-hidden overflow-y-auto px-2 py-4">
            <Accordion
              type="multiple"
              defaultValue={openItems}
              className="space-y-0"
            >
              <AccordionItem
                value="item-1"
                className={FILTER_ACCORDION_ITEM_CLASS}
              >
                <AccordionTrigger className={FILTER_ACCORDION_TRIGGER_CLASS}>
                  <FilterSectionTrigger
                    icon={Briefcase}
                    label="Informações do Negócio"
                  />
                </AccordionTrigger>
                <AccordionContent className={FILTER_ACCORDION_CONTENT_CLASS}>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <Input
                      name="numNegocio_filtro"
                      label="Nº do Negócio"
                      textSize="text-sm"
                      labelSize="text-md"
                      formulario={form}
                      mascara="numerico"
                      defaultValue={
                        businessFilters && businessFilters["numNegocio_filtro"]
                      }
                    />
                    <InputSelectComponent
                      formulario={form}
                      skipEffect
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      removeDocumentBody
                      placeholder="Etapa"
                      name="etapa1_filtro"
                      defaultValue={
                        businessFilters && businessFilters?.etapa1_filtro
                      }
                      options={lists?.map((etapa: any) => ({
                        label: etapa.title,
                        value: etapa.id,
                      }))}
                      label="Na Etapa"
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      formulario={form}
                      skipEffect
                      textSize="text-sm"
                      width="w-[100%]"
                      labelSize="text-md"
                      removeDocumentBody
                      placeholder="Etiqueta"
                      name="etiqueta_filtro"
                      defaultValue={
                        businessFilters && businessFilters?.etiqueta_filtro
                      }
                      options={allFilterData["Etiquetas"]?.map(
                        (etiqueta: any) => ({
                          label: etiqueta.titulo_etiqueta_kanban,
                          value: etiqueta.id_etiqueta_kanban,
                        })
                      )}
                      label="Com Etiqueta"
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      formulario={form}
                      removeDocumentBody
                      labelSize="text-md"
                      textSize="text-sm"
                      placeholder="Urgencia"
                      skipEffect
                      width="w-[100%]"
                      name="urgencia_filtro"
                      defaultValue={
                        businessFilters && businessFilters?.urgencia_filtro
                      }
                      options={[
                        { value: "*", label: "Nenhuma" },
                        { value: "1", label: "Alta" },
                        { value: "2", label: "Média" },
                        { value: "3", label: "Baixa" },
                      ]}
                      label="Com Urgência"
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      name="cliente_filtro"
                      label="Cliente"
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      removeDocumentBody
                      skipEffect
                      isMulti
                      formulario={form}
                      defaultValue={
                        businessFilters &&
                        businessFilters.cliente_filtro?.join(",")
                      }
                      options={clientes?.map<IValueLabel>(
                        (cliente: ICliente) => ({
                          label: cliente.nome_cliente,
                          value: cliente.id_cliente,
                        })
                      )}
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      name="tipo_negocio_filtro"
                      label="Tipo de Negócio"
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      removeDocumentBody
                      skipEffect
                      isMulti
                      defaultValue={
                        businessFilters &&
                        businessFilters.tipo_negocio_filtro?.join(",")
                      }
                      formulario={form}
                      options={[
                        ...tipoNegocio.map((e: any) => ({
                          value: e.id_tipo_negocio,
                          label: e.nome_tipo_negocio,
                        })),
                      ]}
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      name="tipoEdificacao_filtro"
                      label="Tipo de Edificação"
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      removeDocumentBody
                      skipEffect
                      isMulti
                      defaultValue={
                        businessFilters &&
                        businessFilters.tipoEdificacao_filtro?.join(",")
                      }
                      formulario={form}
                      options={tiposEdificacao}
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      skipEffect
                      removeDocumentBody
                      isMulti
                      name="loja_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.loja_filtro?.join(",")
                      }
                      options={allFilterData["Lojas"]
                        ?.filter((loja: any) =>
                          usuario?.loja_usuario
                            ?.split(",")
                            ?.includes(loja.id_loja)
                        )
                        .map((loja: any) => ({
                          label: loja.nome_loja,
                          value: loja.id_loja,
                        }))}
                      label="Loja"
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      formulario={form}
                      skipEffect
                      removeDocumentBody
                      name="pendencia_filtro"
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      isMulti
                      defaultValue={
                        businessFilters &&
                        businessFilters.pendencia_filtro?.join(",")
                      }
                      options={locks?.map<IValueLabel>((lock: any) => ({
                        value: lock.id_lock,
                        label: lock.nome_lock,
                      }))}
                      label="Pendências de Cadastros"
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <Input
                      name="diasNaEtapa_filtro"
                      label={
                        <FilterCompareLabel
                          title="Dias na Etapa"
                          checked={igual_dias_etapa_filtro}
                          onToggle={setIgual_dias_etapa_filtro}
                          checkboxName="igual_dias_etapa_filtro"
                          form={form}
                        />
                      }
                      textSize="text-sm"
                      labelSize="text-md"
                      formulario={form}
                      mascara="numerico"
                      defaultValue={
                        businessFilters && businessFilters["diasNaEtapa_filtro"]
                      }
                    />
                    <Input
                      name="qtd_ucs_filtro"
                      label={
                        <FilterCompareLabel
                          title="Quantidade de UCS"
                          checked={igual_qtd_ucs_filtro}
                          onToggle={setIgual_qtd_ucs_filtro}
                          checkboxName="igual_qtd_ucs_filtro"
                          form={form}
                        />
                      }
                      textSize="text-sm"
                      labelSize="text-md"
                      formulario={form}
                      mascara="numerico"
                      defaultValue={
                        businessFilters && businessFilters["qtd_ucs_filtro"]
                      }
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <Input
                      name="qtd_follow_ups_filtro"
                      label={
                        <div className="flex flex-row gap-1">
                          <div>Quantidade de Follow-ups</div>
                          <div className="flex flex-row gap-1">
                            <div>
                              {igual_qtd_follow_ups_filtro
                                ? `(igual)`
                                : `(maior ou igual)`}
                            </div>
                            <div>
                              <Input
                                name="igual_qtd_follow_ups_filtro"
                                label=""
                                formulario={form}
                                checked={igual_qtd_follow_ups_filtro}
                                type="checkbox"
                                onChange={(e) =>
                                  setIgual_qtd_follow_ups_filtro(
                                    e?.target?.checked
                                  )
                                }
                              />
                            </div>
                          </div>
                        </div>
                      }
                      textSize="text-sm"
                      labelSize="text-md"
                      formulario={form}
                      mascara="numerico"
                      defaultValue={
                        businessFilters &&
                        businessFilters["qtd_follow_ups_filtro"]
                      }
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      name="classificacao_filtro"
                      label="Classificação do Negócio"
                      options={classificacoes}
                      formulario={form}
                      skipEffect
                      removeDocumentBody
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      defaultValue={
                        businessFilters && businessFilters.classificacao_filtro
                      }
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      name="tipoLigacao_filtro"
                      label="Tipo de Ligação"
                      options={arrayTipo}
                      formulario={form}
                      skipEffect
                      removeDocumentBody
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      defaultValue={
                        businessFilters && businessFilters.tipoLigacao_filtro
                      }
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      name="linha_pendencias_filtro"
                      label={
                        <span className="inline-flex flex-wrap items-center gap-1.5">
                          <span>Pendências Concluídas</span>
                          <Tooltip
                            placement="top"
                            title="Filtra pelos negócios que concluíram as pendências informadas"
                          >
                            <button
                              type="button"
                              className="inline-flex text-slate-400 transition-colors hover:text-primary"
                              onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                              }}
                            >
                              <Info size={16} />
                            </button>
                          </Tooltip>
                        </span>
                      }
                      options={pendencias_card?.map<IValueLabel>(
                        (pendencia: any) => ({
                          value: pendencia.id_pendencia,
                          label: pendencia.nome_pendencia,
                        })
                      )}
                      formulario={form}
                      skipEffect
                      removeDocumentBody
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      isMulti
                      defaultValue={
                        businessFilters &&
                        businessFilters.linha_pendencias_filtro?.join(",")
                      }
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      name="linha_pendencia_atual_filtro"
                      label="Pendência Atual"
                      options={pendencias_card?.map<IValueLabel>(
                        (pendencia: any) => ({
                          value: pendencia.id_pendencia,
                          label: pendencia.nome_pendencia,
                        })
                      )}
                      formulario={form}
                      skipEffect
                      removeDocumentBody
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      defaultValue={
                        businessFilters &&
                        businessFilters.linha_pendencia_atual_filtro
                      }
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <Input
                      name="disjuntor_filtro"
                      label={
                        <FilterCompareLabel
                          title="Disjuntor"
                          checked={igual_disjuntor_filtro}
                          onToggle={setIgual_disjuntor_filtro}
                          checkboxName="igual_disjuntor_filtro"
                          form={form}
                        />
                      }
                      formulario={form}
                      mascara="numerico"
                      textSize="text-sm"
                      labelSize="text-md"
                      defaultValue={
                        businessFilters && businessFilters.disjuntor_filtro
                      }
                    />
                    <Input
                      name="uc_filtro"
                      label={`Número da UC`}
                      textSize="text-sm"
                      labelSize="text-md"
                      formulario={form}
                      mascara="numerico"
                      defaultValue={
                        businessFilters && businessFilters["uc_filtro"]
                      }
                    />
                  </InputGroup>
                </AccordionContent>
              </AccordionItem>

              <AccordionItem
                value="item-2"
                className={FILTER_ACCORDION_ITEM_CLASS}
              >
                <AccordionTrigger className={FILTER_ACCORDION_TRIGGER_CLASS}>
                  <FilterSectionTrigger icon={Users} label="Responsáveis" />
                </AccordionTrigger>
                <AccordionContent className={FILTER_ACCORDION_CONTENT_CLASS}>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      skipEffect
                      isMulti
                      removeDocumentBody
                      name="responsavel_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.responsavel_filtro?.join(",")
                      }
                      options={[
                        { label: "Não Informado", value: "0" },
                        ...allFilterData["Usuarios"]?.map((user: any) => ({
                          label: user.nome_usuario,
                          value: user.id_usuario,
                        })),
                      ]}
                      label="Responsável quem criou"
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      skipEffect
                      isMulti
                      removeDocumentBody
                      name="administrador_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.administrador_filtro?.join(",")
                      }
                      options={[
                        { label: "Não Informado", value: "0" },
                        ...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 className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      skipEffect
                      isMulti
                      removeDocumentBody
                      name="gerente_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.gerente_filtro?.join(",")
                      }
                      options={[
                        { label: "Não Informado", value: "0" },
                        ...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
                      name="supervisor_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.supervisor_filtro?.join(",")
                      }
                      options={[
                        { label: "Não Informado", value: "0" },
                        ...allFilterData["Usuarios"]
                          ?.filter((user: any) => user.cargo_perfil == "7")
                          ?.map((user: any) => ({
                            label: user.nome_usuario,
                            value: user.id_usuario,
                          })),
                      ]}
                      label="Supervisor"
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      isMulti
                      skipEffect
                      removeDocumentBody
                      name="vendedor_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.vendedor_filtro?.join(",")
                      }
                      options={[
                        { label: "Não Informado", value: "0" },
                        ...allFilterData["Usuarios"]
                          ?.filter((user: any) => user.cargo_perfil == "2")
                          ?.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
                      skipEffect
                      name="preVendedor_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.preVendedor_filtro?.join(",")
                      }
                      options={[
                        { label: "Não Informado", value: "0" },
                        ...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 className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      formulario={form}
                      isMulti
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      removeDocumentBody
                      skipEffect
                      name="tecnico_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.tecnico_filtro?.join(",")
                      }
                      options={[
                        { label: "Não Informado", value: "0" },
                        ...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
                      skipEffect
                      name="instalador_filtro"
                      defaultValue={
                        businessFilters &&
                        businessFilters.instalador_filtro?.join(",")
                      }
                      options={[
                        { label: "Não Informado", value: "0" },
                        ...allFilterData["Usuarios"]
                          ?.filter((user: any) => user.cargo_perfil == "6")
                          ?.map((user: any) => ({
                            label: user.nome_usuario,
                            value: user.id_usuario,
                          })),
                      ]}
                      label="Instalador"
                      menuPositionFixed
                    />
                  </InputGroup>
                </AccordionContent>
              </AccordionItem>

              <AccordionItem
                value="item-3"
                className={FILTER_ACCORDION_ITEM_CLASS}
              >
                <AccordionTrigger className={FILTER_ACCORDION_TRIGGER_CLASS}>
                  <FilterSectionTrigger
                    icon={UserCircle}
                    label="Informações do Contato"
                  />
                </AccordionTrigger>
                <AccordionContent className={FILTER_ACCORDION_CONTENT_CLASS}>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      formulario={form}
                      name="estado_contato_filtro"
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      options={filtroEstado}
                      label="Estado Cliente"
                      removeDocumentBody
                      defaultValue={
                        businessFilters &&
                        businessFilters?.estado_contato_filtro
                      }
                      onChange={(e: any) =>
                        setEstadoContatoSelecionado(e?.value)
                      }
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      name="cidade_contato_filtro"
                      removeDocumentBody
                      isMulti
                      defaultValue={
                        businessFilters.cidade_contato_filtro &&
                        businessFilters?.cidade_contato_filtro.join(",")
                      }
                      options={cidades
                        ?.filter(
                          (cidade) =>
                            cidade.estado_cidade ==
                            estadosFiltro.find(
                              (estado) =>
                                estado.uf_estado == estadoContatoSelecionado
                            )?.id_estado
                        )
                        ?.map<IValueLabel>((cidade: ICidade) => ({
                          label: cidade.nome_cidade,
                          value: cidade.nome_cidade,
                        }))}
                      label="cidade Cliente"
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      formulario={form}
                      name="estado_instalacao_filtro"
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      options={filtroEstado}
                      label="Estado Instalação"
                      removeDocumentBody
                      defaultValue={
                        businessFilters &&
                        businessFilters?.estado_instalacao_filtro
                      }
                      onChange={(e: any) =>
                        setEstadoInstalacaoSelecionado(e.value)
                      }
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      name="cidade_instalacao_filtro"
                      removeDocumentBody
                      isMulti
                      defaultValue={
                        businessFilters.cidade_instalacao_filtro &&
                        businessFilters?.cidade_instalacao_filtro.join(",")
                      }
                      options={cidades
                        ?.filter(
                          (cidade) =>
                            cidade.estado_cidade ==
                            estadosFiltro.find(
                              (estado) =>
                                estado.uf_estado == estadoInstalacaoSelecionado
                            )?.id_estado
                        )
                        ?.map<IValueLabel>((cidade: ICidade) => ({
                          label: cidade.nome_cidade,
                          value: cidade.nome_cidade,
                        }))}
                      label="cidade Instalação"
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <InputSelectComponent
                      name="origem_cliente_filtro"
                      label="Origem do Contato"
                      options={origensCliente.map((res: any) => ({
                        label: `${res.nome_origem_cliente}`,
                        value: `${res.id_origem_cliente}`,
                      }))}
                      formulario={form}
                      isMulti
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      removeDocumentBody
                      defaultValue={
                        businessFilters &&
                        businessFilters?.origem_cliente_filtro?.join(",")
                      }
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      name="indicador_cliente_filtro"
                      label="Indicador do Contato"
                      options={[
                        // { value: String("*"), label: "Todos" },
                        ...allFilterData["Indicadores"].map((e: any) => {
                          return {
                            value: e.id_indicador,
                            label: e.nome_indicador,
                          };
                        }),
                      ]}
                      formulario={form}
                      // isMulti
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      removeDocumentBody
                      defaultValue={
                        businessFilters &&
                        businessFilters?.indicador_cliente_filtro
                      }
                      menuPositionFixed
                    />
                    <InputSelectComponent
                      name="tipoPessoa_cliente_filtro"
                      label="Tipo de Pessoa do Contato"
                      options={[
                        { value: "*", label: "Todos" },
                        { value: "F", label: "Física" },
                        { value: "J", label: "Jurídica" },
                      ]}
                      formulario={form}
                      // isMulti
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      removeDocumentBody
                      defaultValue={
                        businessFilters &&
                        businessFilters?.tipoPessoa_cliente_filtro
                      }
                      menuPositionFixed
                    />
                  </InputGroup>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <Input
                      name="telefone_cliente_filtro"
                      label="Telefone do Contato"
                      formulario={form}
                      mascara={"telefone"}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      defaultValue={
                        businessFilters &&
                        businessFilters?.telefone_cliente_filtro
                      }
                    />
                    <Input
                      name="email_cliente_filtro"
                      label="E-mail do Contato"
                      formulario={form}
                      textSize="text-sm"
                      labelSize="text-md"
                      width="w-[100%]"
                      defaultValue={
                        businessFilters && businessFilters?.email_cliente_filtro
                      }
                    />
                  </InputGroup>
                </AccordionContent>
              </AccordionItem>

              <AccordionItem
                value="item-4"
                className={FILTER_ACCORDION_ITEM_CLASS}
              >
                <AccordionTrigger className={FILTER_ACCORDION_TRIGGER_CLASS}>
                  <FilterSectionTrigger icon={Calendar} label="Datas" />
                </AccordionTrigger>
                <AccordionContent className={FILTER_ACCORDION_CONTENT_CLASS}>
                  {funil == "0" ? (
                    <>
                      <div className="text-base py-2">
                        <strong>Período da Perda</strong>
                      </div>
                      <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                        <Input
                          label="De"
                          name="dataI_cancelamento_negocio_filtro"
                          formulario={form}
                          type="date"
                          width="w-[100%]"
                          defaultValue={
                            businessFilters &&
                            businessFilters["dataI_cancelamento_negocio_filtro"]
                          }
                        />
                        <Input
                          label="Até"
                          name="dataF_cancelamento_negocio_filtro"
                          formulario={form}
                          type="date"
                          width="w-[100%]"
                          defaultValue={
                            businessFilters &&
                            businessFilters["dataF_cancelamento_negocio_filtro"]
                          }
                        />
                      </InputGroup>
                    </>
                  ) : (
                    <>
                      <div className="text-base py-2">
                        <strong>Aprovação da Proposta</strong>
                      </div>
                      <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                        <Input
                          label="De"
                          name="dataI_proposta_filtro"
                          formulario={form}
                          type="date"
                          width="w-[100%]"
                          defaultValue={
                            (businessFilters &&
                              businessFilters.dataI_proposta_filtro) ||
                            ""
                          }
                        />
                        <Input
                          label="Até"
                          name="dataF_proposta_filtro"
                          formulario={form}
                          type="date"
                          width="w-[100%]"
                          defaultValue={
                            (businessFilters &&
                              businessFilters.dataF_proposta_filtro) ||
                            ""
                          }
                        />
                      </InputGroup>
                    </>
                  )}
                  <div className="text-base py-2">
                    <strong>Cadastro do Negócio</strong>
                  </div>
                  <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                    <Input
                      label="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>
                </AccordionContent>
              </AccordionItem>

              <AccordionItem
                value="item-5"
                className={FILTER_ACCORDION_ITEM_CLASS}
              >
                <AccordionTrigger className={FILTER_ACCORDION_TRIGGER_CLASS}>
                  <FilterSectionTrigger icon={DollarSign} label="Valores" />
                </AccordionTrigger>
                <AccordionContent className={FILTER_ACCORDION_CONTENT_CLASS}>
                  {filterGroups.map((group, index) => (
                    <div key={index}>
                      <div className="text-base py-2">
                        <strong>{group.title}</strong>
                      </div>
                      <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                        {group.inputs.map((input, i) => (
                          <Input
                            key={i}
                            name={input.name}
                            label={input.label}
                            width="w-[100%]"
                            formulario={form}
                            mascara="numero"
                            defaultValue={input.defaultValue}
                          />
                        ))}
                      </InputGroup>
                    </div>
                  ))}
                </AccordionContent>
              </AccordionItem>
              {origin !== "relatorio" && (
                <AccordionItem
                  value="item-6"
                  className={FILTER_ACCORDION_ITEM_CLASS}
                >
                  <AccordionTrigger className={FILTER_ACCORDION_TRIGGER_CLASS}>
                    <FilterSectionTrigger
                      icon={ArrowUpDown}
                      label="Ordenação"
                    />
                  </AccordionTrigger>
                  <AccordionContent className={FILTER_ACCORDION_CONTENT_CLASS}>
                    <InputGroup className={FILTER_INPUT_GROUP_CLASS}>
                      <InputSelectComponent
                        name="ordenacao_filtro"
                        label="Ordenação Por"
                        formulario={form}
                        skipEffect
                        textSize="text-sm"
                        labelSize="text-md"
                        width="w-[100%]"
                        removeDocumentBody
                        // placeholder="Etapa"
                        defaultValue={
                          businessFilters && businessFilters?.ordenacao_filtro
                        }
                        options={[
                          { label: "Data do Negócio Crescente", value: "1" },
                          { label: "Data do Negócio Decrescente", value: "2" },
                          { label: "Data da Proposta Crescente", value: "3" },
                          { label: "Data do Proposta Decrescente", value: "4" },
                          { label: "Ordem Alfabética Crescente", value: "5" },
                          { label: "Ordem Alfabética Decrescente", value: "6" },
                          { label: "Número do Projeto Crescente", value: "7" },
                          {
                            label: "Número do Projeto Decrescente",
                            value: "8",
                          },
                        ]}
                        menuPositionFixed
                      />
                    </InputGroup>
                  </AccordionContent>
                </AccordionItem>
              )}
            </Accordion>
          </div>

          {origin !== "relatorio" && (
            <div className="flex shrink-0 gap-3 border-t border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-900">
              <Button
                type="submit"
                className="h-10 flex-1 rounded-lg bg-primary text-sm font-medium shadow-sm transition-colors duration-200 hover:bg-primary/90"
              >
                Aplicar Filtros
              </Button>
              <Button
                onClick={handleClearFilters}
                type="button"
                className="h-10 flex-1 rounded-lg border border-red-200 bg-red-50 text-sm font-medium text-red-600 shadow-sm transition-colors duration-200 hover:bg-red-100 dark:border-red-900/30 dark:bg-red-950/20 dark:text-red-300 dark:hover:bg-red-950/35"
              >
                Limpar
              </Button>
            </div>
          )}

          {children}
        </>
      )}
    </form>
  );
};

export default KanbanFilters;