import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import NavItem from "@/pages/CXESCFG001/NavItem";
import { listarFunilParalelo } from "@/requests/CRM/kanban";
import { listarCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { listarPendencias } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarLinhaPendencias } from "@/requests/CRUD/LinhaPendencias/listarLinhaPendencias";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import * as yup from "yup";
import ConfiguracoesAutomacoesEtapa from "./ConfiguracoesAutomacoesEtapa";
import ConfiguracoesBasicasEtapa from "./ConfiguracoesBasicasEtapa";
import ConfiguracoesNotificacoesEtapa, {
  ParadoNotificacao,
} from "./ConfiguracoesNotificacoesEtapa";
import ConfiguracoesRegrasEtapa from "./ConfiguracoesRegrasEtapa";

const csvParaLista = (valor: any): string[] =>
  typeof valor === "string"
    ? valor
        .split(",")
        .map((item) => item.trim())
        .filter(Boolean)
    : Array.isArray(valor)
      ? valor.map((item) => String(item))
      : [];

interface IFormLockEtapasProps {
  onSubmitFunction: (data: FieldValues) => void;
  listOther: any;
  defaultValues?: any;
  children: any;
  corListaKanban?: any;
}

const FormLockEtapas = ({
  onSubmitFunction,
  listOther,
  defaultValues,
  corListaKanban,
  children,
}: IFormLockEtapasProps) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [selectedFunilDestiny, setSelectedFunilDestiny] = useState<any>("");
  const [locksCamposPersonalizadosEdit, setLocksCamposPersonalizadosEdit] =
    useState<string[]>(
      defaultValues ? defaultValues.camposPersonalizadosEditLock : [],
    );

  const [locksId, setLocksId] = useState<Record<string, string[]>>(
    defaultValues ? defaultValues.locks : [],
  );
  const [locksResponsaveisId, setLocksResponsaveisId] = useState<string[]>(
    defaultValues ? defaultValues.locks_responsaveis : [],
  );

  // const [locksRetrocessoId, setLocksRetrocessoId] = useState<string[]>(
  //   defaultValues ? defaultValues.locks_retrocesso : []
  // );
  const [locksRetrocessoId, setLocksRetrocessoId] = useState<
    Record<string, string[]>
  >(defaultValues?.locks_retrocesso ?? {});

  const [camposPersonalizados, setCamposPersonalizados] = useState<any>([]);

  const [moverParaNenhuma, setMoverParaNenhuma] = useState<boolean>(
    defaultValues
      ? defaultValues.permite_mover_cards_etapa_funil == "0"
      : false,
  );

  const [selectedAction, setSelectedAction] = useState<any>("");

  const [etapas, setEtapas] = useState<any[]>([]);

  const [funisParalelos, setFunisParalelos] = useState<any[]>(
    defaultValues ? defaultValues.anexosLock : [],
  );

  const [notificacoesEmail, setNotificacoesEmail] = useState<any[]>(
    defaultValues ? JSON.parse(defaultValues.notificaces_email) : [],
  );

  const [diasParadoNotificacao, setDiasParadoNotificacao] = useState<
    number | null
  >(
    defaultValues?.dias_parado_notificacao
      ? Number(defaultValues.dias_parado_notificacao)
      : null,
  );

  // Item 06: a notificação de "negócio parado" tem destinatários, tipo e modelo
  // próprios, gravados em colunas de etapas_funil.
  const [paradoNotificacao, setParadoNotificacao] = useState<ParadoNotificacao>(
    {
      papeis: csvParaLista(defaultValues?.parado_papeis_notificacao),
      canais: csvParaLista(defaultValues?.parado_canais_notificacao),
      modelo_email_id: defaultValues?.parado_modelo_email_id ?? null,
      modelo_whatsapp_id: defaultValues?.parado_modelo_whatsapp_id ?? null,
      modelo_central_id: defaultValues?.parado_modelo_central_id ?? null,
      email_personalizado: defaultValues?.parado_email_personalizado ?? null,
      usuarios_personalizados:
        defaultValues?.parado_usuarios_personalizados ?? null,
    },
  );

  const [locksPendencias, setLocksPendencias] = useState<
    Record<string, string[]>
  >(defaultValues?.locksPendencias ?? {});
  const [locksAnexos, setLocksAnexos] = useState<Record<string, string[]>>(
    defaultValues?.anexosLock ?? {},
  );
  const [locksDocsPersonalizados, setLocksDocsPersonalizados] = useState<
    Record<string, string[]>
  >(defaultValues?.documentosLock ?? {});
  const [locksCamposPersonalizados, setLocksCamposPersonalizados] = useState<
    Record<string, string[]>
  >(defaultValues?.camposPersonalizadosLock ?? {});
  const [listCanSendFor, setListCanSendFor] = useState<
    Record<string, string[]>
  >(defaultValues?.movimEntreEtapas ?? {});
  const [permissoesLocks, setPermissoesLocks] = useState<
    Record<string, string[]>
  >(defaultValues?.locksPermissoes ?? {});
  const [moverParaQualquer, setMoverParaQualquer] = useState<any>(false);
  const [navMenus, setNavMenus] = useState<
    {
      name: string;
      component: (() => JSX.Element) | any;
      selected?: boolean;
    }[]
  >([]);

  const [allPendencias, setAllPendencias] = useState([]);
  const [linhaPendencias, setLinhaPendencias] = useState([]);
  const {
    dadosFunil,
    locks,
    locksRetrocesso,
    categoriasAnexos,
    todosKanbans: funis,
    categoriaslocksPermissoes,
    documentosPersonalizados,
    locksResponsaveis,
  } = useKanbanContext();
  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  useEffect(() => {
    listarPendencias().then((a: any) => {
      setAllPendencias(a);
    });
    listarLinhaPendencias().then(setLinhaPendencias);
  }, []);
  // Sem dias informados a etapa não notifica negócio parado, então a
  // configuração é limpa junto para não sobrar destinatário órfão no banco.
  function configuracaoParadoParaColunas() {
    const notifica = Number(diasParadoNotificacao) > 0;

    return {
      parado_papeis_notificacao: notifica
        ? paradoNotificacao.papeis.join(",")
        : null,
      parado_canais_notificacao: notifica
        ? paradoNotificacao.canais.join(",")
        : null,
      parado_modelo_email_id: notifica
        ? paradoNotificacao.modelo_email_id
        : null,
      parado_modelo_whatsapp_id: notifica
        ? paradoNotificacao.modelo_whatsapp_id
        : null,
      parado_modelo_central_id: notifica
        ? paradoNotificacao.modelo_central_id
        : null,
      parado_email_personalizado: notifica
        ? paradoNotificacao.email_personalizado
        : null,
      parado_usuarios_personalizados: notifica
        ? paradoNotificacao.usuarios_personalizados
        : null,
    };
  }

  function onSubmitFormLocks(data: any) {
    data = {
      ...data,
      id_etapa_funil: defaultValues?.id_etapa_funil,
      locks: locksId,
      locks_responsaveis: locksResponsaveisId,
      pendenciasLock: locksPendencias,
      anexosLock: locksAnexos,
      locksPermissoes: permissoesLocks,
      locks_retrocesso: locksRetrocessoId,
      documentosLock: locksDocsPersonalizados,
      camposPersonalizadosLock: locksCamposPersonalizados,
      camposPersonalizadosEditLock: locksCamposPersonalizadosEdit,
      listCanSendFor: listCanSendFor,
      notificacoesEmail: notificacoesEmail,
      dias_parado_notificacao: diasParadoNotificacao,
      permite_mover_cards_etapa_funil: moverParaNenhuma == false,
      ...configuracaoParadoParaColunas(),
    };

    return onSubmitFunction(data);
  }

  useEffect(() => {
    // Só executa se tivermos dados da etapa e funis carregados
    if (defaultValues?.id_etapa_funil && funis.length > 0) {
      listarCamposPersonalizados().then((res) => {
        // Buscar dados da etapa atual
        const etapaAtual = funis
          .map((funil) => funil.listas_kanban)
          .flat()
          .find(
            (etapa: any) =>
              etapa.id_etapa_funil == defaultValues.id_etapa_funil,
          );

        if (!etapaAtual) {
          console.warn("Etapa atual não encontrada");
          setCamposPersonalizados([]);
          return;
        }

        const funilAtual = funis.find(
          (funil) => funil.id_funil == etapaAtual.grupo_etapa_funil,
        );

        if (!funilAtual) {
          console.warn("Funil atual não encontrado");
          setCamposPersonalizados([]);
          return;
        }

        // Filtrar campos usando lógica similar à verificarConformidade
        const camposDisponiveis = res.filter((campo: any) => {
          // Verificar se o campo está ativo
          if (campo.status_campo_personalizado != "1") {
            return false;
          }

          // Verificar se é um campo de kanban (local 4)
          if (campo.local_campo_personalizado !== "4") {
            return false;
          }

          // Verificar se o campo está configurado para o funil atual
          const isOnFunnel =
            !campo.fluxos?.length ||
            campo.fluxos.some(
              (fluxo: any) =>
                fluxo.fluxo_etapas_campo_personalizado == "*" ||
                fluxo.fluxo_etapas_campo_personalizado == funilAtual.id_funil,
            );

          if (!isOnFunnel) {
            return false;
          }

          // Verificar se alguma etapa anterior do mesmo fluxo tem permissão de edição
          const etapasAnterioresComPermissao = funilAtual.listas_kanban.filter(
            (etapa: any) => {
              const indexEtapaAtual = parseInt(
                etapaAtual.index_etapa_funil || etapaAtual.index_lista_kanban,
              );
              const indexEtapaComparacao = parseInt(
                etapa.index_etapa_funil || etapa.index_lista_kanban,
              );

              const isAnterior = indexEtapaComparacao < indexEtapaAtual;

              if (!isAnterior) return false;

              // Verificar se a etapa anterior pode editar o campo usando a mesma lógica da verificarConformidade
              const canEdit =
                !campo.fluxos?.length ||
                campo.fluxos.some(
                  (fluxo: any) =>
                    (fluxo.fluxo_etapas_campo_personalizado == "*" ||
                      fluxo.fluxo_etapas_campo_personalizado ==
                        funilAtual.id_funil) &&
                    (fluxo.editar_etapas_campo_personalizado == "*" ||
                      fluxo.editar_etapas_campo_personalizado
                        ?.split(",")
                        ?.includes(etapa.id_etapa_funil.toString())),
                );

              return canEdit;
            },
          );

          const permitir = etapasAnterioresComPermissao.length > 0;
          return permitir;
        });

        setCamposPersonalizados(camposDisponiveis);
      });
    } else {
      // Se não há defaultValues, limpa a lista (caso de nova etapa)
      setCamposPersonalizados([]);
    }
  }, [defaultValues?.id_etapa_funil, funis]);
  useEffect(() => {
    setNavMenus([
      {
        name: "Básicas",
        component: ConfiguracoesBasicasEtapa,
        // () => (
        //   <ConfiguracoesBasicasEtapa
        //     form={form}
        //     defaultValues={defaultValues}
        //     dadosFunil={dadosFunil}
        //   />
        // )
        selected: true,
      },
      {
        name: "Regras",
        component: ConfiguracoesRegrasEtapa,
        // () => (
        //   <ConfiguracoesRegrasEtapa
        //     defaultValues={defaultValues}
        //     locks={locks}
        //     locksId={locksId}
        //     setLocksId={setLocksId}
        //     categoriasAnexos={categoriasAnexos}
        //     locksAnexos={locksAnexos}
        //     setLocksAnexos={setLocksAnexos}
        //     categoriaslocksPermissoes={categoriaslocksPermissoes}
        //     moverParaQualquer={moverParaQualquer}
        //     setMoverParaQualquer={setMoverParaQualquer}
        //     // handleChangeMoveToAll={handleChangeMoveToAll}
        //     listOther={listOther}
        //     listCanSendFor={listCanSendFor}
        //     setListCanSendFor={setListCanSendFor}
        //   />
        // )
        selected: false,
      },
      {
        name: "Automações",
        component: ConfiguracoesAutomacoesEtapa,
        selected: false,
      },
      {
        name: "Notificações",
        component: ConfiguracoesNotificacoesEtapa,
        selected: false,
      },
    ]);
  }, []);
  const atualizarListaFunisParalelos = async () => {
    const res = await listarFunilParalelo();

    const infoFunilParalelo = res.filter(
      (funil: any) =>
        funil.id_funil_origem == defaultValues?.id_funil &&
        funil.etapa_funil_paralelo == defaultValues?.id_etapa_funil,
    );

    const automacoes = infoFunilParalelo.map((i: any) => ({
      acao_funil_paralelo: i.acao_funil_paralelo ?? "nenhuma",
      tipo_negocio_funil_paralelo:
        i.tipo_negocio_funil_paralelo != null
          ? Number(i.tipo_negocio_funil_paralelo)
          : undefined,
      funil_destino:
        i.id_funil_destino != null ? String(i.id_funil_destino) : undefined,
      etapa_destino_funil_paralelo:
        i.etapa_destino_funil_paralelo != null
          ? String(i.etapa_destino_funil_paralelo)
          : undefined,
    }));
    defaultValues.automacoes = automacoes;
    // IMPORTANTE: usar reset para atualizar o FieldArray do filho
    form.reset(
      {
        ...form.getValues(),
        automacoes,
      },
      {
        keepDirtyValues: true, // opcional
        keepErrors: true, // opcional
      },
    );

    // se precisar do funil para a aba de etapas no modo “single tipo”
    const funilDest = automacoes?.[0]?.funil_destino ?? "";
    setSelectedFunilDestiny(String(funilDest));
  };

  useEffect(() => {
    setEtapas([...funis.map((funil) => funil.listas_kanban).flat()]);
  }, [funis]);

  // const listarFunis = () => {
  //   listarTodosKanbans().then((res) => setFunis(res));
  // };

  const SelectedComponent = navMenus.find((menu) => menu.selected)?.component;

  const handleMenuItemClick = (index: number) => {
    setNavMenus((prevNavMenus) =>
      prevNavMenus.map((nav, i) => ({
        ...nav,
        selected: index < 1000 && i === index,
      })),
    );
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmitFormLocks)}
      className="flex flex-col text-black dark:text-[#dfdddd]"
    >
      <InputGroup className="justify-center">
        <div className="flex flex-row items-center gap-2">
          <div className="whitespace-nowrap">
            Nome da etapa <span className="text-error">*</span>:
          </div>
          <Input
            name="titulo_etapa_funil"
            formulario={form}
            defaultValue={defaultValues && defaultValues["title"]}
            required
            error="Dê um nome para a etapa"
          />
        </div>
        <div className="flex flex-row items-center gap-2">
          <div className="whitespace-nowrap">Validade (dias):</div>
          <Input
            name="validade_etapa_funil"
            // className="border rounded-md pl-3 dark:bg-form-input h-10"
            mascara="numerico"
            formulario={form}
            defaultValue={
              (defaultValues && defaultValues["validade_etapa_funil"]) || "1"
            }
          />
        </div>
      </InputGroup>
      <div>
        <div className="flex flex-row divide-x-2">
          <ul className="list-none w-[300px] top-1 ">
            {navMenus?.map((menu, index) => (
              <NavItem
                selected={menu.selected}
                index={index}
                arrayLength={navMenus.length}
                onClick={() => handleMenuItemClick(index)}
                key={`${menu.name}_${index}`}
              >
                {menu.name}
              </NavItem>
            ))}
          </ul>
          <section className="overflow-x-auto w-4/5 p-3 bg-white dark:bg-black  overflow-y-auto">
            <div className="flex flex-col h-full">
              {SelectedComponent && (
                <div>
                  <div className="w-full flex flex-row justify-center">
                    <div className="p-2 text-title-sm font-bold">
                      {navMenus.find((menu) => menu.selected == true)?.name}
                    </div>
                  </div>
                  <div className="max-h-[70vh] relative">
                    <SelectedComponent
                      form={form}
                      locksPendencias={locksPendencias}
                      defaultValues={defaultValues}
                      dadosFunil={dadosFunil}
                      allPendencias={allPendencias}
                      linhaPendencias={linhaPendencias}
                      //
                      locks={locks}
                      locksId={locksId}
                      setLocksId={setLocksId}
                      locksRetrocesso={locksRetrocesso}
                      locksRetrocessoId={locksRetrocessoId}
                      setLocksRetrocessoId={setLocksRetrocessoId}
                      categoriasAnexos={categoriasAnexos}
                      locksAnexos={locksAnexos}
                      setLocksAnexos={setLocksAnexos}
                      id_etapa_funil={defaultValues?.id_etapa_funil}
                      setLocksCamposPersonalizadosEdit={
                        setLocksCamposPersonalizadosEdit
                      }
                      locksResponsaveis={locksResponsaveis}
                      setLocksResponsaveisId={setLocksResponsaveisId}
                      setLocksPendencias={setLocksPendencias}
                      lockResponsaveisId={locksResponsaveisId}
                      locksCamposPersonalizadosEdit={
                        locksCamposPersonalizadosEdit
                      }
                      notificacoesEmail={notificacoesEmail}
                      setNotificacoesEmail={setNotificacoesEmail}
                      diasParadoNotificacao={diasParadoNotificacao}
                      setDiasParadoNotificacao={setDiasParadoNotificacao}
                      paradoNotificacao={paradoNotificacao}
                      setParadoNotificacao={setParadoNotificacao}
                      moverParaQualquer={moverParaQualquer}
                      setMoverParaQualquer={setMoverParaQualquer}
                      camposPersonalizados={camposPersonalizados}
                      locksCamposPersonalizados={locksCamposPersonalizados}
                      setLocksCamposPersonalizados={
                        setLocksCamposPersonalizados
                      }
                      // handleChangeMoveToAll={handleChangeMoveToAll}
                      listOther={listOther}
                      listCanSendFor={listCanSendFor}
                      setListCanSendFor={setListCanSendFor}
                      categoriaslocksPermissoes={categoriaslocksPermissoes}
                      permissoesLocks={permissoesLocks}
                      setPermissoesLocks={setPermissoesLocks}
                      documentosPersonalizados={documentosPersonalizados}
                      setLocksDocsPersonalizados={setLocksDocsPersonalizados}
                      locksDocsPersonalizados={locksDocsPersonalizados}
                      //
                      selectedAction={selectedAction}
                      setSelectedAction={setSelectedAction}
                      funis={funis}
                      selectedFunilDestiny={selectedFunilDestiny}
                      setSelectedFunilDestiny={setSelectedFunilDestiny}
                      etapas={etapas}
                      //
                      atualizarListaFunisParalelos={
                        atualizarListaFunisParalelos
                      }
                    />
                  </div>
                </div>
              )}
            </div>
          </section>
        </div>
      </div>
      {children}
    </form>
  );
};

export default FormLockEtapas;