import LoaderSun from "@/components/common/Loader/LoaderSun";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarTodosKanbans } from "@/requests/CRM/kanban";
import { cadastrarDocumentoPersonalizado } from "@/requests/CRUD/DocumentosPersonalizados/cadastrarDocumentoPersonalizado";
import { deletarDocumentoPersonalizado } from "@/requests/CRUD/DocumentosPersonalizados/deletarDocumentoPersonalizado";
import { editarDocumentoPersonalizado } from "@/requests/CRUD/DocumentosPersonalizados/editarDocumentoPersonalizado";
import { listarDocumentosPersonalizados } from "@/requests/CRUD/DocumentosPersonalizados/listarDocumentosPersonalizados";
import { listarPerfis } from "@/requests/CRUD/Perfil/listarPerfis";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { useLoja } from "@/src/contexts/lojaContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { FormatFields, GetForm } from "@/utils";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { FaLongArrowAltRight } from "react-icons/fa";
import { MdDelete, MdEdit } from "react-icons/md";
import { toast } from "react-toastify";
import FormDocumentosPersonalizados from "./FormDocumentosPersonalizados";
const DocumentosPersonalizados = ({ setDocsPersonalizados }: any) => {
  const [usuarios, setUsuarios] = useState<any>([]);
  const [tiposNegocios, setTiposNegocios] = useState<any>([]);
  const [isLoaded, setIsLoaded] = useState<any>(false);
  const [data, setData] = useState([]);

  const [funis, setFunis] = useState<any[]>([]);
  const [etapas, setEtapas] = useState<any[]>([]);
  const [perfis, setPerfis] = useState<any[]>([]);
  const [filtro, setFiltro] = useState<any>({});

  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const { docsPersonalizadosGerados } = useKanbanContext();

  const onDeleteFunction = async (newData: any) => {
    const id_documento_personalizado = { ...newData };
    return deletarDocumentoPersonalizado(id_documento_personalizado);
  };
  const { lojaAtual } = useLoja();
  const { isMobile } = useScreenContext();
  const formFiltro = GetForm();
  useEffect(() => {
    if (isMobile) {
      toast.info("Para melhor visualização gire o seu celular");
    }

    Promise.all([
      listarTodosKanbans().then((res) => {
        res = res.filter((funil: any) => funil.id_funil != "0");
        setFunis(res);
        setEtapas(res.map((funil: any) => funil.listas_kanban).flat());
      }),
      listarTiposNegocios().then(setTiposNegocios),
      listarPerfis().then((res) => setPerfis(res)),
    ]).then(() => {
      setIsLoaded(true);
    });
  }, []);
  const renderPermissoes = (permissoes: any[]) => {
    if (!permissoes || permissoes.length === 0) return null;

    const permissoesFormatadas = permissoes.map((permissao: any) => ({
      ...permissao,
      etapas_permissao_documento_personalizado:
        permissao.etapas_permissao_documento_personalizado.split(","),
      perfis_permissao_documento_personalizado:
        permissao.perfis_permissao_documento_personalizado.split(","),
    }));

    return (
      <div className="flex flex-col bg-body bg-opacity-10 rounded-md min-h-[80px]">
        <table>
          <thead>
            <tr className="text-center  dark:text-white text-sm">
              <td className="p-2 text-center">
                <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                  <strong>Fluxos</strong>
                </div>
              </td>
              <td></td>
              <td className="p-2 text-center">
                <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                  <strong>Etapas</strong>
                </div>
              </td>
              <td></td>
              <td className="p-2 text-center">
                <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                  <strong>Perfis</strong>
                </div>
              </td>
            </tr>
          </thead>
          <tbody>
            {permissoesFormatadas.map((permissao: any, index: number) => (
              <tr
                key={index}
                className={`hover:bg-primary hover:bg-opacity-20 text-xs ${index % 2 == 1 && "bg-body bg-opacity-10 dark:bg-graydark dark:bg-opacity-50 dark:hover:bg-primary dark:hover:bg-opacity-10"}`}
              >
                <td className="p-2 text-center">
                  <div className="bg-white dark:bg-black rounded p-1">
                    {permissao.funis_permissao_documento_personalizado == "*"
                      ? "Todos"
                      : funis.find(
                        (funil) =>
                          funil.id_funil ==
                          permissao.funis_permissao_documento_personalizado,
                      )?.titulo_funil}
                  </div>
                </td>
                <td className="w-0">
                  <FaLongArrowAltRight />
                </td>
                <td className="p-2 text-center">
                  <div
                    className="bg-white dark:bg-black rounded p-1"
                  >
                    {permissao.etapas_permissao_documento_personalizado.includes(
                      "*",
                    )
                      ? "Todas"
                      : etapas
                        .filter((etapa) =>
                          permissao.etapas_permissao_documento_personalizado.includes(
                            etapa.id_etapa_funil,
                          ),
                        )
                        .map((etapa) => etapa.titulo_etapa_funil)
                        .join(", ")}
                  </div>
                </td>
                <td className="w-0">
                  <FaLongArrowAltRight />
                </td>

                <td className="p-2 text-center">
                  <div className="p-2 text-center w-full">
                    <div className="bg-white dark:bg-black rounded p-1">
                      {permissao.perfis_permissao_documento_personalizado.includes(
                        "*",
                      )
                        ? "Todos"
                        : perfis
                          .filter((perfil) =>
                            permissao.perfis_permissao_documento_personalizado.includes(
                              perfil.id_perfil,
                            ),
                          )
                          .map((perfil) => perfil.nome_perfil)
                          .join(", ")}
                    </div>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  };

  const columns = [
    {
      header: "Código",
      accessorKey: "id_documento_personalizado",
    },
    {
      header: "Nome",
      accessorKey: "nome_documento_personalizado",
    },
    {
      header: "Tipo de Negócio",
      accessorKey: "nomes_tipo_negocio_documento_personalizado",
    },
    {
      header: "Data de Criação",
      accessorKey: "data_criacao_documento_personalizado",
    },
    {
      header: "Última Atualização",
      accessorKey: "ultimaAtualizacao_documento_personalizado",
    },
    ...(lojaAtual?.tipoAssintatura_loja === "1"
      ? [
          {
            header: "ID Docs",
            accessorKey: "documentId_template_documento_personalizado",
          },
        ]
      : []),

    {
      header: "Status",
      accessorKey: "status_documento_personalizado",
    },
    {
      header: "Permissões",
      accessorKey: "permissoes_documento",
      cell: ({ row }: any) => {
        const permissoes = row.original.permissoes;
        return renderPermissoes(permissoes);
      },
    },
  ];

  async function onSubmitFunction(data: FieldValues) {
    return cadastrarDocumentoPersonalizado(data).then(() => fetchData(filtro));
  }

  async function formatarListaDocumentos(arr: any) {
    let usuariosList: any[] = [];
    let tipoNegocioList: any[] = [];

    if (!tiposNegocios[0]) {
      tipoNegocioList = await listarTiposNegocios().then((res: any) => {
        setTiposNegocios(res);
        return res;
      });
    } else {
      tipoNegocioList = tiposNegocios;
    }

    if (!usuarios[0]) {
      usuariosList = await listarUsuarios(session.id_loja_usuario).then(
        (res) => {
          setUsuarios(res);
          return res;
        },
      );
    } else {
      usuariosList = usuarios;
    }

    return arr?.map((e: any) => {
      e["user_atualizacao_documento_persoanlizado"] = usuariosList.find(
        (usuario) =>
          usuario.id_usuario == e["user_atualizacao_documento_persoanlizado"],
      )?.nome_usuario;

      // e["tipo_negocio_documento_personalizado"] = tipoNegocioList.find(
      //   (negocio) =>
      //     negocio.id_tipo_negocio == e["tipo_negocio_documento_personalizado"].split(',')
      // )?.nome_tipo_negocio;

      const tipoNegocio = e["tipo_negocio_documento_personalizado"];
      const tipoNegocioIds = tipoNegocio ? tipoNegocio.split(",") : [];

      e["nomes_tipo_negocio_documento_personalizado"] =
        tipoNegocioIds?.includes("*")
          ? "Todos"
          : tipoNegocioIds
              .map((id: any) => {
                const negocio = tipoNegocioList.find(
                  (negocio) => negocio.id_tipo_negocio == id,
                );
                return negocio ? negocio.nome_tipo_negocio : null;
              })
              .filter((nome: any) => nome !== null)
              .join(", ");

      e.data_criacao_documento_personalizado = FormatFields.formatarDataHora(
        e.data_criacao_documento_personalizado,
      );
      e.ultimaAtualizacao_documento_personalizado =
        FormatFields.formatarDataHora(
          e.ultimaAtualizacao_documento_personalizado,
        );
      const permissoes = e.permissoes
        ? e.permissoes.map((permissao: any) => ({
            ...permissao,
            etapas_permissao_documento_personalizado:
              permissao.etapas_permissao_documento_personalizado.split(","),
            perfis_permissao_documento_personalizado:
              permissao.perfis_permissao_documento_personalizado.split(","),
          })) || []
        : [];
      e.permissoes_documento = (
        <div className="flex flex-col bg-body bg-opacity-10 rounded-md min-h-[80px]">
          <table>
            <thead>
              <tr className="text-center  dark:text-white text-sm">
                <td className="p-2 text-center">
                  <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                    <strong>Fluxos</strong>
                  </div>
                </td>
                <td></td>
                <td className="p-2 text-center">
                  <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                    <strong>Etapas</strong>
                  </div>
                </td>
                <td></td>
                <td className="p-2 text-center">
                  <div className="bg-[#d6dce1] dark:bg-black rounded-md">
                    <strong>Perfis</strong>
                  </div>
                </td>
              </tr>
            </thead>
            <tbody>
              {permissoes.map((permissao: any, index: number) => (
                <tr
                  key={index}
                  className={`hover:bg-primary hover:bg-opacity-20 text-xs ${index % 2 == 1 && "bg-body bg-opacity-10 dark:bg-graydark dark:bg-opacity-50 dark:hover:bg-primary dark:hover:bg-opacity-10"}`}
                >
                  <td className="p-2 text-center">
                    <div className="bg-white dark:bg-black rounded p-1">
                      {permissao.funis_permissao_documento_personalizado == "*"
                        ? "Todos"
                        : funis.find(
                            (funil) =>
                              funil.id_funil ==
                              permissao.funis_permissao_documento_personalizado,
                          )?.titulo_funil}
                    </div>
                  </td>
                  <td className="w-0">
                    <FaLongArrowAltRight />
                  </td>
                  <td className="p-2 text-center">
                    <div className="bg-white dark:bg-black rounded p-1">
                      {permissao.etapas_permissao_documento_personalizado.includes(
                        "*",
                      )
                        ? "Todas"
                        : etapas
                            .filter((etapa) =>
                              permissao.etapas_permissao_documento_personalizado.includes(
                                etapa.id_etapa_funil,
                              ),
                            )
                            .map((etapa) => etapa.titulo_etapa_funil)
                            .join(", ")}
                    </div>
                  </td>
                  <td className="w-0">
                    <FaLongArrowAltRight />
                  </td>

                  <td className="p-2 text-center">
                    <div className="p-2 text-center w-full">
                      <div className="bg-white dark:bg-black rounded p-1">
                        {permissao.perfis_permissao_documento_personalizado.includes(
                          "*",
                        )
                          ? "Todos"
                          : perfis
                              .filter((perfil) =>
                                permissao.perfis_permissao_documento_personalizado.includes(
                                  perfil.id_perfil,
                                ),
                              )
                              .map((perfil) => perfil.nome_perfil)
                              .join(", ")}
                      </div>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      );
      return e;
    });
  }
  async function fetchData(filtrosAtuais: Record<string, any> = filtro) {
    const dados = await listarDocumentosPersonalizados();

    const dadosUnicos = dados.filter(
      (item: any, index: any, self: any) =>
        index ===
        self.findIndex(
          (t: any) =>
            t.id_documento_personalizado === item.id_documento_personalizado,
        ),
    );

    const resultadoFiltrado = dadosUnicos.filter((row: any) => {
      return Object.entries(filtrosAtuais).every(
        ([chave, valoresFiltro]: [string, any[]]) => {
          if (!Array.isArray(valoresFiltro) || valoresFiltro.length === 0)
            return true;

          if (valoresFiltro.some((a: any) => a?.value === "*")) {
            return true;
          }

          const valores = valoresFiltro.map((v) =>
            typeof v === "object" ? String(v.value) : String(v),
          );

          if (chave === "funis_permissao_documento_personalizado") {
            if (row?.permissoes && row?.permissoes.length > 0) {
              row["funis_permissao_documento_personalizado"] = row.permissoes
                .map((p: any) => p.funis_permissao_documento_personalizado)
                .join(",");
            }
          }
          if (chave === "etapas_permissao_documento_personalizado") {
            if (row?.permissoes && row?.permissoes.length > 0) {
              row["etapas_permissao_documento_personalizado"] = row.permissoes
                .map((p: any) => p.etapas_permissao_documento_personalizado)
                .join(",");
            }
          }

          const valorRow = String(row[chave]);
          const valoresRow = valorRow.split(",");
          return valoresRow.some((v) => v == "*" || valores.includes(v));
        },
      );
    });

    setData(resultadoFiltrado);
  }

  useEffect(() => {
    fetchData(filtro);
  }, [filtro]);

  const fakeList = async (): Promise<any[]> => {
    const promise: Promise<any[]> = new Promise((resolve, reject) =>
      resolve(data),
    );
    return promise;
  };
  return isLoaded ? (
    <>
      <h2 className="text-xl text-center font-semibold text-black p-4">
        Documentos Personalizados
      </h2>
      <div className="flex border mb-2 p-4 rounded-md border-black/20 relative flex-row gap-2 flex-wrap pb-3">
        <span className="bg-white font-semibold text-black px-3 absolute -top-3 left-5">
          Filtro dos Documentos personalizados
        </span>
        <InputSelectComponent
          name="tipo_negocio_documento_personalizado"
          label="Tipo Negócio"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            ...tiposNegocios.map((tipoNegocio: any) => ({
              label: tipoNegocio.nome_tipo_negocio,
              value: tipoNegocio.id_tipo_negocio,
            })),
          ]}
          width="flex-1 min-w-[200px]"
          defaultValue={"*"}
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              tipo_negocio_documento_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="status_documento_personalizado"
          label="Status"
          formulario={formFiltro}
          isMulti
          options={[
            { value: "*", label: "Todos" },
            { label: "Ativo", value: 1 },
            { label: "Inativo", value: 0 },
          ]}
          width="flex-1 min-w-[200px]"
          defaultValue={"*"}
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              status_documento_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="funis_permissao_documento_personalizado"
          label="Fluxos"
          formulario={formFiltro}
          isMulti
          options={[
            { value: String("*"), label: "Todos funis" },
            ...funis
              .filter((funil: any) => {
                if (
                  filtro?.tipo_negocio_documento_personalizado?.some(
                    (a: any) => a.value === "*",
                  )
                )
                  return true;
                const hasAnyValue = funil.tipo_negocio_funil
                  .split(",")
                  .some((tipo: string) =>
                    filtro?.tipo_negocio_documento_personalizado
                      ?.map((t: any) => String(t.value))
                      .includes(tipo),
                  );

                return funil.id_funil != "0" && hasAnyValue;
              })
              ?.map((funil: any) => ({
                value: String(funil.id_funil),
                label: funil.titulo_funil,
              }))
              .sort((a: any, b: any) => a.label.localeCompare(b.label)),
          ]}
          width="flex-1 min-w-[200px]"
          defaultValue={"*"}
          onChange={(e: any) => {
            setFiltro((prev: any) => ({
              ...prev,
              funis_permissao_documento_personalizado: e,
            }));
          }}
        />
        <InputSelectComponent
          name="etapas_permissao_documento_personalizado"
          label="Etapas"
          width="flex-1 min-w-[200px]"
          formulario={formFiltro}
          defaultValue={"*"}
          options={[
            { value: String("*"), label: "Todas etapas" },
            ...etapas
              .filter((etapa: any) => {
                if (
                  filtro?.funis_permissao_documento_personalizado?.some(
                    (a: any) => a.value === "*",
                  )
                )
                  return true;

                const fluxosSelecionados =
                  filtro?.funis_permissao_documento_personalizado?.map(
                    (a: any) => Number(a.value),
                  );
                return fluxosSelecionados?.includes(
                  Number(etapa.grupo_etapa_funil),
                );
              })
              .map((etapa: any) => ({
                value: String(etapa.id_etapa_funil),
                label: etapa.titulo_etapa_funil,
              })),
          ]}
          error="Selecione uma etapa"
          // skipEffect
          isMulti
        />
      </div>
      <ReactTable
        columns={columns}
        createFunction={onSubmitFunction}
        listFunction={fakeList}
        data={data}
        formatFunction={formatarListaDocumentos}
        idCol="id_documento_personalizado"
        isActiveCol="status_documento_personalizado"
        Form={FormDocumentosPersonalizados}
        // canEdit
        canDelete
        editFunction={editarDocumentoPersonalizado}
        deleteFunction={deletarDocumentoPersonalizado}
        pageName="Documento Personalizado"
        actionButtons={(
          data: any,
          updateTable: any,
          setIsLoading: any,
          { idCol, pageName, editFunction }: any,
        ) => {
          const buttons = [];
          buttons.push({
            className: "bg-[#88b2e1] text-white",
            onClick: (e: any) => {
              setDocsPersonalizados([true, data]);
            },

            content: <MdEdit size={19} />,
          });
          buttons.push({
            className: `navButton  bg-historicoNotas text-white`,
            onClick: (e: any) => {
              const rowData: any = data;
              const newData: any = {};
              newData[idCol] = rowData[idCol];
              const isGerado = docsPersonalizadosGerados.some(
                (doc: any) =>
                  doc.codModelo_documento_gerado ==
                  rowData.id_documento_personalizado,
              );

              isGerado
                ? handleSweetAlert(
                    {
                      icon: "warning",
                      title: "Atenção",
                      html: `O documento <b>${rowData.nome_documento_personalizado} </b> não pode ser excluido, porque está sendo utilizado!`,
                      showDenyButton: false,
                      confirmButtonText: "ok",
                    },
                    () => {},
                  )
                : handleSweetAlert(
                    {
                      icon: "question",
                      title: "Atenção",
                      html: `Excluir o Documento <b>${rowData.nome_documento_personalizado} </b>?`,
                    },
                    () => {
                      setIsLoading(true);
                      onDeleteFunction({ [idCol]: rowData[idCol] })
                        .then(() => {
                          updateTable();
                          fetchData(filtro);
                        })
                        .finally(() => setIsLoading(false));
                    },
                  );
            },
            content: <MdDelete />,
          });
          return buttons;
        }}
        canDesactive
      />
    </>
  ) : (
    <div className="w-full h-[400px] flex flex-col justify-center items-center">
      <LoaderSun />
    </div>
  );
};

export default DocumentosPersonalizados;