"use client";

import {
  listarDocumentosPersonalizados,
  listarEtapasPropostaCampoPersonalizado,
  listarOpcoesBanco,
} from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";

import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import { Button } from "@/components/ui/button";
import { listarPendencias } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { useAuth } from "@/src/contexts/authContext";
import { useLojaAtual } from "@/src/contexts/lojaContext";
import { GetForm } from "@/utils";
import { Tooltip } from "@mui/material";
import { Database, Info, Plus, PlusIcon, Trash } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";
import DatabaseOptions from "./DatabaseOptions";
import FluxoCampoPersonalizado from "./FluxoCampoPersonalizado";
1;
export type KeysSelectTable = {
  name?: string;
  db_name?: string;
  status?: string;
  distribuidorOrigem?: string;
  item_kit?: string | number;
};
const FormCamposPersonalizados = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  tipoCamposPersonalizados = [],
  tiposNegocios = [],
  lojas = [],
  camposPersonalizados = [],
  funis = [],
  perfis = [],
  etapasFluxos = [],
  ...rest
}: any) => {
  const [handleSubmits, setHandleSubmits] = useState<any[]>([]);
  const { handleSubmit, reset, ...form } = GetForm();
  const [lojaAtual, setLojaAtual] = useLojaAtual();
  const { usuario } = useAuth();
  const [lojasSelecionadas, setLojasSelecionadas] = useState<any>([]);
  const [requiredFieldsPendencia, setRequiredFieldsPendencia] =
    useState<boolean>(false);
  const [fluxos, setFluxos] = useState<any[]>(
    (defaultValues &&
      defaultValues.fluxos?.map((f: any, idx: number) => ({
        ...f,
        _id: f._id || `fluxo-${Date.now()}-${idx}`,
      }))) ||
      [],
  );
  const [radioOptions, setRadioOptions] = useState<
    { label: string; default_radio_personalizado: boolean }[]
  >(
    defaultValues["descricao_radio_personalizado"]?.filter(
      (field: any) =>
        field.codCampo_radio_personalizado ===
        defaultValues["id_campo_personalizado"],
    ) ?? [{ label: "", default: false }],
  );

  const [fileExtensions, setFileExtensions] = useState<string[]>([]);
  const [itensChecklist, setItensChecklist] = useState<any[]>(
    defaultValues["descricao_checklist_personalizado"]?.filter(
      (field: any) =>
        field.codCampo_checklist_personalizado ===
        defaultValues["id_campo_personalizado"],
    ) ?? [],
  );
  const [opcoesMultiSelecao, setOpcoesMultiSelecao] = useState<
    { id_multiselecao_personalizado: number | null; descricao_multiselecao_personalizado: string }[]
  >(
    defaultValues["descricao_multiselecao_personalizado"]
      ?.filter(
        (field: any) =>
          field.codCampo_multiselecao_personalizado ===
          defaultValues["id_campo_personalizado"],
      )
      ?.map((field: any) => ({
        id_multiselecao_personalizado: field.id_multiselecao_personalizado ?? null,
        descricao_multiselecao_personalizado:
          field.descricao_multiselecao_personalizado ?? "",
      })) ?? [],
  );
  const [etapasProposta, setEtapasProposta] = useState<any>([]);
  const [documentosPersonalizados, setDocumentosPersonalizados] = useState<any>(
    [],
  );
  const [localSelecionado, setLocalSelecionado] = useState<string | null>(
    defaultValues["local_campo_personalizado"] ?? null,
  );
  const [requiredFieldsProposal, setRequiredFieldsProposal] =
    useState<boolean>(false);
  const [databaseComing, setDatabaseComing] = useState(false);
  const [requiredFieldsDocs, setRequiredFieldsDocs] = useState<boolean>(false);
  const [requiredFieldsObrigatorio, setRequiredFieldsObrigatorio] =
    useState<boolean>(false);
  const [tipoCampoSelecionado, setTipoCampoSelecionado] = useState<
    string | null
  >(defaultValues["tipo_campo_personalizado"] ?? null);
  const [pendencias, setPendencias] = useState<any>([]);

  const [tipoNegocio_campo_personalizado, setTipoNegocio_campo_personalizado] =
    useState(defaultValues && defaultValues.tipoNegocio_campo_personalizado);

  // Adicionar este useEffect para popular lojasSelecionadas quando lojas carregarem
  useEffect(() => {
    if (lojas?.length === 0) return;

    if (!defaultValues?.lojas_campo_personalizado) {
      const lojasMapeadas = lojas.map((loja: any) => ({
        value: loja.id_loja,
        label: loja.nome_loja,
        tipos_negocios_loja: loja.tipos_negocios_loja,
      }));

      return setLojasSelecionadas(lojasMapeadas);
    }

    // Evita sobrescrever se o usuário já interagiu
    if (lojasSelecionadas.length > 0) return;
    const lojasPadrao = defaultValues.lojas_campo_personalizado;

    if (
      lojasPadrao === "*" ||
      (Array.isArray(lojasPadrao) && lojasPadrao.includes("*"))
    ) {
      setLojasSelecionadas([{ value: "*", label: "Todas" }]);
      return;
    }

    const ids = Array.isArray(lojasPadrao)
      ? lojasPadrao.map(String)
      : String(lojasPadrao)
          .split(",")
          .map((id: string) => id.trim());

    const lojasMapeadas = lojas
      .filter((loja: any) => ids.includes(String(loja.id_loja)))
      .map((loja: any) => ({
        value: loja.id_loja,
        label: loja.nome_loja,
        tipos_negocios_loja: loja.tipos_negocios_loja,
      }));

    setLojasSelecionadas(lojasMapeadas);
  }, [lojas, defaultValues]);

  useEffect(() => {
    setRequiredFieldsObrigatorio(true);
    if (localSelecionado === "1") {
      setRequiredFieldsProposal(true);
      setRequiredFieldsDocs(false);

      if (
        tipoNegocio_campo_personalizado &&
        tipoNegocio_campo_personalizado
          ?.split(",")
          ?.every((tipo: string) => ["2", "4"].includes(tipo))
      ) {
        return setEtapasProposta([
          {
            descricao_proposta_personalizado: "Dados",
            id_proposta_personalizado: "Dados",
          },
          {
            descricao_proposta_personalizado: "Custos Extras",
            id_proposta_personalizado: "Custos Extras",
          },
          {
            descricao_proposta_personalizado: "Precificação",
            id_proposta_personalizado: "Precificação",
          },
          {
            descricao_proposta_personalizado: "Observações",
            id_proposta_personalizado: "Observações",
          },
          {
            descricao_proposta_personalizado: "Forma de Pagamento",
            id_proposta_personalizado: "Forma de Pagamento",
          },
          {
            descricao_proposta_personalizado: "Resumo",
            id_proposta_personalizado: "Resumo",
          },
        ]);
      }
      if (tipoNegocio_campo_personalizado == "3") {
        return setEtapasProposta([
          {
            descricao_proposta_personalizado: "Dados da Ampliação",
            id_proposta_personalizado: "Dados da Ampliação",
          },
          {
            descricao_proposta_personalizado: "Componentes",
            id_proposta_personalizado: "Componentes",
          },
          {
            descricao_proposta_personalizado: "Custos Extras",
            id_proposta_personalizado: "Custos Extras",
          },
          {
            descricao_proposta_personalizado: "Precificação",
            id_proposta_personalizado: "Precificação",
          },
          {
            descricao_proposta_personalizado: "Observações",
            id_proposta_personalizado: "Observações",
          },
          {
            descricao_proposta_personalizado: "Resumo",
            id_proposta_personalizado: "Resumo",
          },
        ]);
      }
      listarEtapasPropostaCampoPersonalizado().then((res) =>
        setEtapasProposta(
          res.map((item: any) => ({
            ...item,
            id_proposta_personalizado: item.descricao_proposta_personalizado,
          })),
        ),
      );
    } else if (localSelecionado === "3") {
      setRequiredFieldsProposal(false);
      setRequiredFieldsDocs(true);
      listarDocumentosPersonalizados().then((res) =>
        setDocumentosPersonalizados(res),
      );
    } else if (localSelecionado === "4") {
      setRequiredFieldsObrigatorio(false);
    } else if (localSelecionado === "5") {
      setRequiredFieldsPendencia(true);
      listarPendencias().then((res) => {
        setPendencias(
          res.filter(
            (a: any) => ![3, 4, 5, 6].includes(Number(a.id_pendencia)),
          ),
        );
      });
    } else {
      setRequiredFieldsProposal(false);
      setRequiredFieldsDocs(false);
      setRequiredFieldsPendencia(false);
    }
  }, [localSelecionado, tipoNegocio_campo_personalizado]);

  const handleAddChecklistItem = () => {
    setItensChecklist((prev) => [
      ...prev,
      {
        descricao_checklist_personalizado: "",
        subOpcoes_checklist_personalizado: ",",
      },
    ]);
  };

  const handleRemoveChecklistItem = (index: number) => {
    const updatedOpcoes = itensChecklist.filter((_, i) => i !== index);

    form.setValue(
      `descricao_checklist_personalizado`,
      updatedOpcoes.map((opcao, indexOpcao) => {
        form.setValue(
          `subOption_${indexOpcao}`,
          opcao.subOpcoes_checklist_personalizado?.split(","),
        );
        return opcao?.descricao_checklist_personalizado;
      }),
    );

    setItensChecklist(updatedOpcoes);
  };

  const handleAddMultiSelecaoOption = () => {
    setOpcoesMultiSelecao((prev) => [
      ...prev,
      { id_multiselecao_personalizado: null, descricao_multiselecao_personalizado: "" },
    ]);
  };
  const handleMultiSelecaoChange = (index: number, value: string) => {
    setOpcoesMultiSelecao((prev) =>
      prev.map((item, i) =>
        i === index
          ? { ...item, descricao_multiselecao_personalizado: value }
          : item,
      ),
    );
  };
  const handleRemoveMultiSelecaoItem = (index: number) => {
    const updatedOpcoes = opcoesMultiSelecao.filter((_, i) => i !== index);

    form.setValue(`descricao_multiselecao_personalizado[${index}]`, undefined);
    form.setValue(`id_multiselecao_personalizado[${index}]`, undefined);

    setOpcoesMultiSelecao(updatedOpcoes);

    updatedOpcoes.forEach((opcao, newIndex: number) => {
      form.setValue(
        `descricao_multiselecao_personalizado[${newIndex}]`,
        opcao.descricao_multiselecao_personalizado,
      );
      form.setValue(
        `id_multiselecao_personalizado[${newIndex}]`,
        opcao.id_multiselecao_personalizado ?? undefined,
      );
    });
  };

  function adicionarFluxo() {
    setFluxos((prev) => {
      return [
        ...prev,
        {
          _id: `fluxo-${Date.now()}-${prev.length}`,
          fluxo_etapas_campo_personalizado: "",
          editar_etapas_campo_personalizado: "",
          visualizar_etapas_campo_personalizado: "",
        },
      ];
    });
  }

  function removerFluxo(fluxoId: string) {
    setFluxos((prev) => prev.filter((f) => f._id !== fluxoId));
    setHandleSubmits((prev) => {
      const index = fluxos.findIndex((f) => f._id === fluxoId);
      if (index !== -1) {
        const newSubmits = [...prev];
        newSubmits.splice(index, 1);
        return newSubmits;
      }
      return prev;
    });
  }

  const handleRemoveRadioItem = (index: number) => {
    const updatedOpcoes = radioOptions.filter((_, i) => i !== index);

    form.setValue(`descricao_radio_personalizado[${index}]`, undefined);

    setRadioOptions(updatedOpcoes);

    updatedOpcoes.forEach((value: any, newIndex: number) => {
      form.setValue(
        `descricao_radio_personalizado[${newIndex}]`,
        value.descricao_radio_personalizado,
      );
    });
  };
  const handleAddRadioOption = () => {
    setRadioOptions([
      ...radioOptions,
      { label: "", default_radio_personalizado: false },
    ]);
  };

  const handleRadioOptionChange = (index: number, value: string) => {
    const updatedOptions = [...radioOptions];
    updatedOptions[index].label = value;
    setRadioOptions(updatedOptions);
  };

  const handleSetDefaultOption = (index: number) => {
    const updatedOptions = radioOptions.map((option, i) => ({
      ...option,
      default_radio_personalizado: i === index,
    }));
    setRadioOptions(updatedOptions);
  };

  const toggleFileExtension = (extension: string) => {
    setFileExtensions((prev) =>
      prev.includes(extension)
        ? prev.filter((ext) => ext !== extension)
        : [...prev, extension],
    );
  };

  useEffect(() => {
    const formValue = form.control._formValues;
    const dynamicNames = [
      {
        id: "12",
        name: "descricao_checklist_personalizado",
        state: setOpcoesMultiSelecao,
      },
      {
        id: "5",
        name: "descricao_multiselecao_personalizado",
        state: setItensChecklist,
      },
      {
        id: "6",
        name: "descricao_radio_personalizado",
        state: setRadioOptions,
      },
    ];

    const existingKeys = dynamicNames.filter((name) => name.name in formValue);

    existingKeys.forEach((name) => {
      if (name.id != tipoCampoSelecionado) {
        delete formValue[name.name];
        name.state([]);
      }
    });
  }, [tipoCampoSelecionado]);

  useEffect(() => {
    if (defaultValues["descricao_multiselecao_personalizado"])
      opcoesMultiSelecao.forEach((value, index: number) => {
        form.setValue(
          `descricao_multiselecao_personalizado[${index}]`,
          value.descricao_multiselecao_personalizado,
        );
        form.setValue(
          `id_multiselecao_personalizado[${index}]`,
          value.id_multiselecao_personalizado ?? undefined,
        );
      });
    if (defaultValues["descricao_checklist_personalizado"])
      itensChecklist.forEach((value: any, index: number) => {
        form.setValue(
          `descricao_checklist_personalizado[${index}]`,
          value.descricao_checklist_personalizado,
        );
      });
    if (defaultValues["descricao_radio_personalizado"])
      radioOptions.forEach((value: any, index: number) => {
        form.setValue(
          `descricao_radio_personalizado[${index}]`,
          value.descricao_radio_personalizado,
        );
      });
  }, []);

  async function onSubmitFormCamposPersonalizados(e: any) {
    e.preventDefault();

    const values = form.getValues() as any;

    if (localSelecionado === "5") {
      if (
        !values.pendencia_campo_personalizado ||
        values.pendencia_campo_personalizado.length === 0
      ) {
        toast.error("Selecione ao menos uma Pendência.");
        return;
      }
    }
    return handleSubmit((data: any) => {
      // Remove o _id dos fluxos antes de enviar
      const fluxosSemId = fluxos.map(({ _id, ...rest }) => rest);
      if (data.pendencia_campo_personalizado) {
        data.pendencia_campo_personalizado =
          data?.pendencia_campo_personalizado?.join(",");
      }
      return onSubmitFunction({
        ...data,
        fluxos: fluxosSemId,
        itensChecklist,
        // Usa "" (em vez de deixar undefined) para que, ao remover a tabela
        // selecionada, o valor seja de fato limpo no banco em vez de ignorado.
        nome_tabela_campo_personalizado: selectedTable.db_name ?? "",
        status_tabela_campo_personalizado: selectedTable.status ?? "",
        origem_tabela_campo_personalizado: selectedTable.distribuidorOrigem ?? "",
        tipo_item_kit_campo_personalizado: selectedTable.item_kit ?? "",
      });
    })(e);
  }
  const [selectedTable, setSelectedTable] = useState<KeysSelectTable>({});

  const [openDatabaseOption, setOpenDatabaseOption] = useState(false);
  const handleDatabaseOptions = () => {
    setOpenDatabaseOption(true);
  };
  const tiposNegociosPermitidos = useMemo(() => {
    console.log("teste aui ", lojasSelecionadas);
    if (!lojasSelecionadas || lojasSelecionadas.length === 0) {
      return [];
    }
    console.log("usuario", usuario.loja_usuario);
    // Se selecionar "Todas", considerar todas as lojas disponíveis ao usuário
    const lojasConsideradas = lojasSelecionadas.some(
      (l: any) => l.value === "*",
    )
      ? lojas.filter((loja: any) =>
          usuario.loja_usuario.split(",").includes(String(loja.id_loja)),
        )
      : lojasSelecionadas;

    // Extrai os IDs dos tipos de negócios permitidos
    const tiposIds = lojasConsideradas.flatMap((loja: any) =>
      String(loja.tipos_negocios_loja || "")
        .split(",")
        .map((id: string) => id.trim()),
    );

    // Remove duplicidades
    const tiposIdsUnicos = [...new Set(tiposIds)];

    // Retorna apenas os tipos permitidos
    return tiposNegocios.filter((tipo: any) =>
      tiposIdsUnicos.includes(String(tipo.id_tipo_negocio)),
    );
  }, [lojasSelecionadas, lojas, tiposNegocios, usuario.loja_usuario]);
  useEffect(() => {
    if (defaultValues && defaultValues?.nome_tabela_campo_personalizado) {
      setSelectedTable({
        db_name: defaultValues?.nome_tabela_campo_personalizado,
        distribuidorOrigem: defaultValues?.origem_tabela_campo_personalizado,
        status: defaultValues?.status_tabela_campo_personalizado,
        item_kit: defaultValues?.tipo_item_kit_campo_personalizado,
      });

      setDatabaseComing(true);
    }
  }, [defaultValues]);

  const handleRemoverTabelaSelecionada = () => {
    setSelectedTable({});
    setDatabaseComing(false);
  };

  const handleGetSelectedBase = async () => {
    if (!selectedTable) return;
    await listarOpcoesBanco(JSON.stringify(selectedTable)).then((res) => {
      setDatabaseComing(true);
      setOpenDatabaseOption(false);
    });
  };
  const tipoNegocioRaw =
    form.watch("tipoNegocio_campo_personalizado" as any) ??
    (form.getValues("tipoNegocio_campo_personalizado" as any) as any);

  const tipoNegocio = useMemo(() => {
    return Array.isArray(tipoNegocioRaw)
      ? tipoNegocioRaw
      : tipoNegocioRaw
        ? [tipoNegocioRaw]
        : [];
  }, [tipoNegocioRaw]);
  const TooltipCom = (text: string) => (
    <Tooltip
      title={<div className="text-black-2">{text}</div>}
      componentsProps={{
        tooltip: {
          sx: {
            bgcolor: "#fafaf9",
            color: "black",
            fontSize: "0.75rem",
            fontFamily: "Satoshi",
            borderRadius: "0.375rem",
            maxWidth: 900,
            border: 1,
            borderColor: "#bdb9b9",
            p: 1,
          },
        },
      }}
      placement="top"
    >
      <button
        type="button"
        className="hover:text-primary cursor-pointer p-1 rounded"
      >
        <Info size={21} />
      </button>
    </Tooltip>
  );
  return (
    <>
      <form onSubmit={onSubmitFormCamposPersonalizados}>
        <InputGroup>
          <Input
            name="nome_campo_personalizado"
            label="Nome campo"
            formulario={form}
            required
            defaultValue={
              defaultValues && defaultValues["nome_campo_personalizado"]
            }
            onChange={(e: any) => {
              if (!defaultValues["id_campo_personalizado"]) {
                form.setValue(
                  "nome_relacionamento_rapido" as any,
                  e.target.value,
                );
              }
            }}
          />

          <Input
            name="ordem_campo_personalizado"
            label="Ordem na Tela"
            formulario={form}
            mascara="numerico"
            defaultValue={
              defaultValues && defaultValues["ordem_campo_personalizado"]
            }
          />

          <InputSelectComponent
            name="lojas_campo_personalizado"
            label={
              <div className="flex items-center gap-1">
                <span>Lojas</span>

                {TooltipCom(
                  "Atenção!! Aqui só mostra as lojas que estão habilitadas para usuário logado, qualquer problema fale com o Administrador do Sistema.",
                )}
              </div>
            }
            formulario={form}
            required
            options={[
              { value: "*", label: "Todas" },
              ...lojas
                ?.filter((a: any) =>
                  usuario.loja_usuario.split(",").includes(a.id_loja),
                )
                .map((loja: any) => ({
                  tipos_negocios_loja: loja.tipos_negocios_loja,
                  label: loja.nome_loja,
                  value: loja.id_loja,
                })),
            ]}
            isMulti
            onChange={(e) => {
              setLojasSelecionadas(e);
            }}
            defaultValue={defaultValues?.lojas_campo_personalizado ?? "*"}
          />
          <InputSelectComponent
            name="tipoNegocio_campo_personalizado"
            label={
              <div className="flex items-center gap-1">
                <span>Tipo negócio</span>
                {TooltipCom(
                  'Atenção!! Aqui só mostra os "Tipos de Negócios" que estão habilitados para a(s) LOJA(s) selecionadas.',
                )}
              </div>
            }
            formulario={form}
            required
            options={
              tiposNegociosPermitidos?.length > 0
                ? [
                    { value: "*", label: "Todos" },
                    ...tiposNegociosPermitidos.map((tipo: any) => ({
                      label: tipo.nome_tipo_negocio,
                      value: String(tipo.id_tipo_negocio),
                    })),
                  ]
                : []
            }
            isMulti
            defaultValue={defaultValues?.tipoNegocio_campo_personalizado ?? "*"}
            onChange={(e: any) => {
              const valoresSelecionados =
                e?.map((tipo: any) => tipo.value) || [];

              setTipoNegocio_campo_personalizado(valoresSelecionados.join(","));

              // Regra específica para "Ampliação" (id = 3)
              if (valoresSelecionados.includes("3")) {
                const ampliacao = tiposNegocios.find(
                  (t: any) => String(t.id_tipo_negocio) === "3",
                );

                if (ampliacao) {
                  const option = {
                    value: String(ampliacao.id_tipo_negocio),
                    label: ampliacao.nome_tipo_negocio,
                  };

                  form.setValue("tipoNegocio_campo_personalizado", [option]);
                  setTipoNegocio_campo_personalizado("3");
                }
              } else {
                form.setValue("tipoNegocio_campo_personalizado", e);
              }
            }}
          />
        </InputGroup>
        <InputGroup>
          <Input
            name="nome_relacionamento_rapido"
            label={
              <div className="flex flex-row gap-1">
                <div>Nome da TAG</div>
                <div className="text-sm flex flex-row gap-1">
                  <div>{'("_cp"'}</div>
                  <div>{"adicionado para identificação)"}</div>
                </div>
              </div>
            }
            formulario={form}
            required
            defaultValue={
              defaultValues &&
              defaultValues["nome_relacionamento_rapido"]?.split("_cp")?.[0]
            }
          />
          <InputSelectComponent
            name="perfisEditar_campo_personalizado"
            label="Perfis que podem editar"
            formulario={form}
            options={[
              { value: "*", label: "Todos" },
              ...perfis?.map((perfil: any) => ({
                label: perfil.nome_perfil,
                value: perfil.id_perfil,
              })),
            ]}
            isMulti
            defaultValue={
              defaultValues && defaultValues["perfisEditar_campo_personalizado"]
            }
          />
          <InputSelectComponent
            name="perfisVisualizar_campo_personalizado"
            label="Perfis que podem visualizar"
            formulario={form}
            options={[
              { value: "*", label: "Todos" },
              ...perfis?.map((perfil: any) => ({
                label: perfil.nome_perfil,
                value: perfil.id_perfil,
              })),
            ]}
            isMulti
            defaultValue={
              defaultValues &&
              defaultValues["perfisVisualizar_campo_personalizado"]
            }
          />
        </InputGroup>
        <InputGroup>
          <InputSelectComponent
            name="local_campo_personalizado"
            label={
              <div className="flex items-center gap-1">
                <span>Local do campo</span>
                {tipoNegocio.some((t: any) => t.value === "*") &&
                  TooltipCom(
                    'Atenção!! Quando colocado o "tipo de negócio" com a opção Todos, não será permitido criar o campo personalizado com o Local do Campo=> "Na Fila de Pendências" e "Geração da Proposta", pois os status da linha de pendência e etapas da proposta dependem do tipo do negócio escolhido.',
                  )}
              </div>
            }
            formulario={form}
            required
            options={camposPersonalizados
              ?.filter((local: any) => {
                const isTodosNegocio = tipoNegocio.some(
                  (t: any) => t.value === "*",
                );

                if (
                  isTodosNegocio &&
                  ["1", "5"].includes(local.id_local_personalizado)
                )
                  return false;

                if (
                  isTodosNegocio ||
                  local?.tipo_negocio_local_personalizado == "*"
                )
                  return true;

                return (
                  local?.tipo_negocio_local_personalizado ==
                  tipoNegocio_campo_personalizado
                );
              })
              ?.map((campoPersonalizado: any) => ({
                label: campoPersonalizado.descricao_local_personalizado,
                value: campoPersonalizado.id_local_personalizado, // Assume-se que "descricao" seja única
              }))}
            // FormCamposPersonalizados.tsx
            onChange={(value: any) => {
              setLocalSelecionado((prev) => {
                if (prev == "4" && value.value != "4") {
                  setFluxos([]);
                } else if (prev != "4" && value.value == "4") {
                  // ✅ Só inicializa com fluxo vazio se não houver fluxos do banco
                  setFluxos((currentFluxos) =>
                    currentFluxos.length > 0
                      ? currentFluxos
                      : [
                          {
                            _id: `fluxo-${Date.now()}-0`,
                            fluxo_etapas_campo_personalizado: "",
                            editar_etapas_campo_personalizado: "",
                            visualizar_etapas_campo_personalizado: "",
                          },
                        ],
                  );
                }
                return value.value;
              });
            }}
            defaultValue={
              defaultValues && defaultValues["local_campo_personalizado"]
            }
          />

          {localSelecionado === "1" &&
            !tipoNegocio.some((t: any) => t.value === "*") && (
              <InputSelectComponent
                name="etapaProposta_campo_personalizado"
                label="Etapa da Proposta"
                formulario={form}
                options={etapasProposta.map((etapa: any) => ({
                  label: etapa.descricao_proposta_personalizado,
                  value: etapa.id_proposta_personalizado,
                }))}
                required={requiredFieldsProposal}
                defaultValue={
                  defaultValues &&
                  defaultValues["etapaProposta_campo_personalizado"]
                }
              />
            )}

          {localSelecionado === "3" && (
            <InputSelectComponent
              name="etapaDocs_campo_personalizado"
              label="Documentos"
              formulario={form}
              options={documentosPersonalizados.map((documento: any) => ({
                label: documento.nome_documento_personalizado,
                value: documento.id_documento_personalizado,
              }))}
              required={requiredFieldsDocs}
              isMulti
              defaultValue={
                defaultValues && defaultValues["etapaDocs_campo_personalizado"]
              }
            />
          )}
          {localSelecionado !== "4" && (
            <InputSelectComponent
              name="obrigatorio_campo_personalizado"
              label="Campo obrigatório?"
              formulario={form}
              options={[
                { label: "Sim", value: 1 },
                { label: "Não", value: 2 },
              ].map((a: any) => ({
                label: a.label,
                value: a.value,
              }))}
              required={requiredFieldsObrigatorio}
              defaultValue={
                defaultValues &&
                defaultValues["obrigatorio_campo_personalizado"]
              }
            />
          )}

          <InputSelectComponent
            name="tipo_campo_personalizado"
            label="Tipo campo"
            formulario={form}
            options={tipoCamposPersonalizados?.map((tipoCampos: any) => ({
              label: tipoCampos.nome_tipo_personalizado,
              value: tipoCampos.id_tipo_personalizado,
            }))}
            onChange={(value: any) => setTipoCampoSelecionado(value.value)}
            required
            defaultValue={
              defaultValues && defaultValues["tipo_campo_personalizado"]
            }
          />
        </InputGroup>

        {localSelecionado === "4" && (
          <>
            <div className="flex gap-4 items-center">
              <h1>Fluxos</h1>

              <button
                className="flex text-sm bg-primary text-white rounded-full p-2 px-4 gap-2 items-center"
                type="button"
                onClick={adicionarFluxo}
              >
                <Plus size={12} />
                Adiciona Fluxo
              </button>
            </div>
            <div className="flex flex-col gap-2">
              {fluxos.map((fluxo, indexFluxo) => {
                // const defaultValuesFluxos = defaultValues?.fluxos?.[indexFluxo];
                return (
                  <FluxoCampoPersonalizado
                    key={fluxo._id}
                    fluxo={fluxo}
                    tipoNegocio={tipoNegocio_campo_personalizado}
                    indexFluxo={indexFluxo}
                    removerFluxo={() => removerFluxo(fluxo._id)}
                    fluxos={fluxos}
                    setFluxos={setFluxos}
                    funis={funis}
                    etapasFluxos={etapasFluxos}
                    setHandleSubmits={setHandleSubmits}
                  />
                );
              })}
            </div>
          </>
        )}
        {localSelecionado === "5" &&
          !tipoNegocio.some((t: any) => t.value === "*") && (
            <InputGroup>
              <InputSelectComponent
                name="pendencia_campo_personalizado"
                label={
                  <div className="flex items-center gap-1">
                    <span>Pendência</span>
                    <span
                      title="Atenção!! as pendencias de PROPOSTA e CONTRATOS não são mostradas, porque já existe a criação direta pelo Local do campo."
                      className="cursor-help text-blue-500"
                    >
                      <Info size={21} />
                    </span>
                  </div>
                }
                formulario={form}
                isMulti
                options={[
                  { label: "Todas", value: "*" },
                  ...pendencias
                    ?.filter((pende: any) =>
                      pende.tipoNegocio_pendencia
                        .split(",")
                        .some((d: any) =>
                          tipoNegocio_campo_personalizado?.includes(d),
                        ),
                    )
                    .map((pendencia: any) => ({
                      label: pendencia.nome_pendencia,
                      value: pendencia.id_pendencia,
                    })),
                ]}
                defaultValue={defaultValues?.pendencia_campo_personalizado}
                required={requiredFieldsPendencia}
              />
              <InputSelectComponent
                name="cadaTopico_campo_personalizado"
                label={
                  <div className="flex items-center gap-1">
                    <span>Aparece em cada Tópico?</span>
                    <span
                      title="Quando marcado 'Sim', o campo aparece em cada tópico/registro da pendência, permitindo preencher um valor diferente para cada item. Quando 'Não', aparece apenas uma vez para toda a pendência."
                      className="cursor-help text-blue-500"
                    >
                      ⓘ
                    </span>
                  </div>
                }
                formulario={form}
                options={[
                  { label: "Sim", value: 1 },
                  { label: "Não", value: 2 },
                ].map((a: any) => ({
                  label: a.label,
                  value: a.value,
                }))}
                defaultValue={defaultValues?.cadaTopico_campo_personalizado}
                required={requiredFieldsProposal}
              />
            </InputGroup>
          )}

        {tipoCampoSelecionado === "5" && (
          <>
            <button
              type="button"
              className="bg-primary flex items-center rounded-md text-white p-2"
              onClick={handleAddChecklistItem}
            >
              <PlusIcon size={15} /> Adicionar Item
            </button>

            {itensChecklist.map((item: any, index) => {
              return (
                <InputGroup className="ml-3 mt-2 flex-row" key={index}>
                  <div className="grid ">
                    <Input
                      name={`descricao_checklist_personalizado[${index}]`}
                      label={`Item ${index + 1}`}
                      formulario={form}
                      // width="w-1/3"
                      onChange={(e) =>
                        setItensChecklist((prev: any) =>
                          prev.map((item: any, i: any) =>
                            i === index
                              ? {
                                  ...item,
                                  descricao_checklist_personalizado:
                                    e.target.value,
                                }
                              : item,
                          ),
                        )
                      }
                      defaultValue={
                        defaultValues && item.descricao_checklist_personalizado
                      }
                    />
                    <label className="text-sm">Opções:</label>
                    <div className="ml-4  !text-xs flex gap-2 items-center">
                      <Input
                        formulario={form}
                        defaultValue={
                          defaultValues["descricao_checklist_personalizado"] &&
                          item.subOpcoes_checklist_personalizado?.split(",")[0]
                        }
                        mascara="letrasNumeros"
                        onChange={(e) => {
                          setItensChecklist((prev) => {
                            const newItensChecklist = [...prev];
                            newItensChecklist.splice(index, 1, {
                              ...prev[index],
                              subOpcoes_checklist_personalizado: `${e.target.value},${prev[index]?.subOpcoes_checklist_personalizado?.split(",")[1]}`,
                            });
                            return newItensChecklist;
                          });
                        }}
                        name={`subOption_${index}[0]`}
                      />
                      <Input
                        formulario={form}
                        defaultValue={
                          defaultValues &&
                          item?.subOpcoes_checklist_personalizado?.split(",")[1]
                        }
                        mascara="letrasNumeros"
                        onChange={(e) => {
                          setItensChecklist((prev) => {
                            const newItensChecklist = [...prev];
                            newItensChecklist.splice(index, 1, {
                              ...prev[index],
                              subOpcoes_checklist_personalizado: `${prev[index]?.subOpcoes_checklist_personalizado?.split(",")[0]},${e.target.value}`,
                            });
                            return newItensChecklist;
                          });
                        }}
                        name={`subOption_${index}[1]`}
                      />
                      {(item?.subOpcoes_checklist_personalizado
                        ?.split(",")[0]
                        ?.trim() ||
                        item?.subOpcoes_checklist_personalizado
                          ?.split(",")[1]
                          ?.trim()) && (
                        <div className="grid">
                          <label className="text-sm">
                            Justificativa Obrigatória?
                          </label>
                          <div className="flex items-center gap-1">
                            <label className="flex text-sm items-center gap-1">
                              <input
                                type="radio"
                                name={`justificativaObrigatoria_${index}`}
                                value="true"
                                checked={
                                  Boolean(
                                    item.obrigatorio_justificativa_checklist_personalizado,
                                  ) === true
                                }
                                onChange={() => {
                                  setItensChecklist((prev) => {
                                    const newItensChecklist = [...prev];
                                    newItensChecklist[index] = {
                                      ...prev[index],
                                      obrigatorio_justificativa_checklist_personalizado:
                                        true,
                                    };
                                    return newItensChecklist;
                                  });
                                }}
                              />
                              Sim
                            </label>
                            <label className="flex text-sm items-center gap-1">
                              <input
                                type="radio"
                                name={`justificativaObrigatoria_${index}`}
                                value="false"
                                checked={
                                  Boolean(
                                    item.obrigatorio_justificativa_checklist_personalizado,
                                  ) === false
                                }
                                onChange={() => {
                                  setItensChecklist((prev) => {
                                    const newItensChecklist = [...prev];
                                    newItensChecklist[index] = {
                                      ...prev[index],
                                      obrigatorio_justificativa_checklist_personalizado:
                                        false,
                                    };
                                    return newItensChecklist;
                                  });
                                }}
                              />
                              Não
                            </label>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                  <button
                    className="w-fit mt-[33px]"
                    type="button"
                    onClick={() => handleRemoveChecklistItem(index)}
                  >
                    <Trash color="red" />
                  </button>
                </InputGroup>
              );
            })}
          </>
        )}

        {(tipoCampoSelecionado === "12" || tipoCampoSelecionado === "13") && (
          <>
            <div className="flex gap-3">
              {!databaseComing && (
                <button
                  type="button"
                  onClick={handleAddMultiSelecaoOption}
                  className="bg-primary text-sm my-3 flex items-center rounded-md text-white p-2"
                >
                  Adicionar Opção
                </button>
              )}
              <button
                type="button"
                onClick={handleDatabaseOptions}
                className="bg-primary text-sm my-3 flex items-center rounded-md text-white p-2"
              >
                <Database size={17} />
              </button>
            </div>
            {databaseComing && (
              <div className=" mb-5 w-full flex border items-center justify-between bg-[#fff5ea] text-sm gap-2 px-4 p-4 rounded-md border-[#fcdcaa] shadow-sm">
                <div className="flex items-center gap-2">
                  <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                    <RiErrorWarningFill size={20} color="#ffb747" />
                  </div>
                  <p className="text-black">
                    Opções selecionadas vindas da tabela:{" "}
                    <b>{selectedTable.name ?? selectedTable.db_name}</b>
                  </p>
                </div>
                <button
                  type="button"
                  onClick={handleRemoverTabelaSelecionada}
                  className="flex items-center gap-1 text-danger hover:opacity-80"
                  title="Remover tabela selecionada"
                >
                  <Trash size={17} />
                </button>
              </div>
            )}
            {opcoesMultiSelecao.map((opcao, index) => {
              return (
                <InputGroup key={index}>
                  <Input
                    name={`descricao_multiselecao_personalizado[${index}]`}
                    label={`Opção ${index + 1}`}
                    width="w-1/3"
                    formulario={form}
                    onChange={(value: any) =>
                      handleMultiSelecaoChange(index, value)
                    }
                    defaultValue={opcao.descricao_multiselecao_personalizado}
                  />
                  <Input
                    type="hidden"
                    name={`id_multiselecao_personalizado[${index}]`}
                    formulario={form}
                    defaultValue={
                      opcao.id_multiselecao_personalizado ?? undefined
                    }
                  />
                  <button
                    className="w-fit mt-[33px]"
                    type="button"
                    onClick={() => handleRemoveMultiSelecaoItem(index)}
                  >
                    <Trash color="red" />
                  </button>
                </InputGroup>
              );
            })}
          </>
        )}
        {tipoCampoSelecionado === "6" && (
          <>
            <h4 className="text-black-2 text-lg">Opções de Rádio</h4>
            <button
              type="button"
              onClick={handleAddRadioOption}
              className="bg-primary my-3 text-sm flex items-center rounded-md text-white p-2"
            >
              Adicionar Opção
            </button>
            <InputGroup className="grid">
              {radioOptions.map((option: any, index) => {
                return (
                  <div className="pl-4 m-4 flex w-fit items-center" key={index}>
                    <button
                      className="w-fit  pr-5"
                      type="button"
                      onClick={() => handleRemoveRadioItem(index)}
                    >
                      <Trash size={14} color="red" />
                    </button>
                    <Input
                      type="text"
                      formulario={form}
                      width={"auto"}
                      placeholder={`Opção ${index + 1}`}
                      name={`descricao_radio_personalizado[${index}]`}
                      className="text-black-2"
                      onChange={(e) =>
                        handleRadioOptionChange(index, e.target.value)
                      }
                      defaultValue={
                        defaultValues && option.descricao_radio_personalizado
                      }
                    />
                    <input
                      type="radio"
                      name="defaultOption"
                      checked={option.default_radio_personalizado}
                      onChange={() => handleSetDefaultOption(index)}
                    />
                    {option.default_radio_personalizado == 1 && (
                      <label className="pl-2">Opção Padrão</label>
                    )}
                  </div>
                );
              })}
            </InputGroup>
          </>
        )}

        {/* Opções para campos do tipo Arquivo */}
        {tipoCampoSelecionado === "1" && (
          <InputGroup align="center" className="grid">
            <h2 className="text-black-2 text-lg">Extensões Permitidas:</h2>
            {["PDF", "Imagem", "Qualquer Tipo de Arquivo"].map((ext) => (
              <div className=" ml-4" key={ext}>
                <input
                  type="checkbox"
                  checked={fileExtensions.includes(ext)}
                  onChange={() => toggleFileExtension(ext)}
                />
                <label className="pl-2 text-black-2">{ext}</label>
              </div>
            ))}
          </InputGroup>
        )}
        <div className="w-full">
          <InputGroup align="center">
            <Button type="submit" className="px-5 mt-5">
              Salvar
            </Button>
          </InputGroup>
        </div>
      </form>
      <ModalComponente
        hasSaveButton={false}
        onClose={() => setOpenDatabaseOption(!openDatabaseOption)}
        defaultW="w-1/4"
        opened={openDatabaseOption}
      >
        <DatabaseOptions
          setSelectedTable={setSelectedTable}
          selectedTable={selectedTable}
          handleGetSelectedBase={handleGetSelectedBase}
        />
      </ModalComponente>
    </>
  );
};

export default FormCamposPersonalizados;