import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ReactTable from "@/components/ReactTable/ReactTable";
import { editarIndicadores } from "@/requests/CRUD/Indicadores/editarIndicadores";
import {
  listarIndicadores,
  type ListarIndicadoresParams,
} from "@/requests/CRUD/Indicadores/listarIndicadores";
import { listarOrigens } from "@/requests/CRUD/Origens/listarOrigens";
import { listarTodosUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { getDateBrasil, GetForm } from "@/utils";
import { Search } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import FormIndicadores from "./FormIndicadores";

const ConsultaIndicadores = ({
  defaultValues,
  disabledFilters,
  ...rest
}: any) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoadingIndicadores, setIsLoadingIndicadores] = useState(false);
  const [indicadores, setIndicadores] = useState<any[]>([]);
  const [origens, setOrigens] = useState<any[]>([]);
  const [indicadoresFilter, setIndicadoresFilter] = useState<any>(
    defaultValues || {},
  );
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [tableKey, setTableKey] = useState(0);
  const [mostrarNegociosGerados, setMostrarNegociosGerados] = useState("0");

  const coreColumns = useMemo(
    () => [
      {
        header: "ID",
        accessorKey: "id_indicador",
      },
      {
        header: "Nome do Indicador",
        accessorKey: "nome_indicador",
      },
      {
        header: "Status",
        accessorKey: "status_indicador",
      },
      {
        header: "Cpf/Cnpj",
        accessorKey: "cpfCnpj_indicador",
      },
      {
        header: "Telefone",
        accessorKey: "telefone_indicador",
      },
      {
        header: "Email",
        accessorKey: "email_indicador",
      },
      {
        header: "Vendedor Responsável",
        accessorKey: "nome_responsavel",
      },
      {
        header: "Criação",
        accessorKey: "data_criacao_indicador_formatada",
      },
      {
        header: "Usuário que Criou",
        accessorKey: "nome_usuario_criou",
      },
    ],
    [],
  );

  const origemColumns = useMemo(
    () => [
      {
        header: "ID da Origem",
        accessorKey: "codOrigem_indicador",
      },
      {
        header: "Descrição da Origem",
        accessorKey: "nome_origem_cliente",
      },
      {
        header: "Tipo de Indicação",
        accessorKey: "nome_tipo_origem",
      },
    ],
    [],
  );

  const formatNegociosGeradosFields = (negocios: any[] = []) => {
    const joinField = (fn: (negocio: any) => string) =>
      negocios.map(fn).filter(Boolean).join("\n") || "";

    return {
      negocios_gerados_id: joinField((n) => String(n.id_coleta ?? "")),
      negocios_gerados_nome: joinField((n) => n.nome_negocio_coleta ?? ""),
      negocios_gerados_data: joinField((n) =>
        n.datetime_coleta
          ? getDateBrasil(undefined, n.datetime_coleta)
          : "",
      ),
      negocios_gerados_status: joinField((n) =>
        n.status_coleta == "100" ? "Cancelado" : "Ativo",
      ),
      negocios_gerados_origem: joinField((n) => n.nome_origem_cliente ?? ""),
    };
  };

  const negociosCell = (value: string) =>
    value ? (
      <span className="whitespace-pre-line text-left text-xs">{value}</span>
    ) : (
      <span className="text-gray-400">—</span>
    );

  const negociosColumns = useMemo(
    () => [
      {
        header: "Nº do Negócio",
        accessorKey: "negocios_gerados_id",
        enableSorting: false,
        cell: ({ getValue }: any) => negociosCell(getValue()),
      },
      {
        header: "Nome do Negócio",
        accessorKey: "negocios_gerados_nome",
        enableSorting: false,
        cell: ({ getValue }: any) => negociosCell(getValue()),
      },
      {
        header: "Data do Negócio",
        accessorKey: "negocios_gerados_data",
        enableSorting: false,
        cell: ({ getValue }: any) => negociosCell(getValue()),
      },
      {
        header: "Status do Negócio",
        accessorKey: "negocios_gerados_status",
        enableSorting: false,
        cell: ({ getValue }: any) => negociosCell(getValue()),
      },
      {
        header: "Origem do Cliente",
        accessorKey: "negocios_gerados_origem",
        enableSorting: false,
        cell: ({ getValue }: any) => negociosCell(getValue()),
      },
    ],
    [],
  );

  const exibirColunasOrigem =
    mostrarNegociosGerados === "1" || mostrarNegociosGerados === "2";

  const columns = useMemo(() => {
    const cols = [...coreColumns];
    if (exibirColunasOrigem) {
      cols.push(...origemColumns);
    }
    if (mostrarNegociosGerados === "1") {
      cols.push(...negociosColumns);
    }
    return cols;
  }, [
    coreColumns,
    origemColumns,
    negociosColumns,
    exibirColunasOrigem,
    mostrarNegociosGerados,
  ]);

  const { usuario, perfil } = useAuth();
  const form = GetForm();

  const FormIndicadoresConsulta = useMemo(
    () =>
      function FormIndicadoresConsulta(props: any) {
        return (
          <FormIndicadores
            {...props}
            showVendedorResponsavel
            usuarios={usuarios}
            perfil={perfil}
            usuario={usuario}
          />
        );
      },
    [usuarios, perfil, usuario],
  );

  // const fakeList = async (): Promise<any[]> => {
  //   const promise: Promise<any[]> = new Promise((resolve, reject) =>
  //     resolve(indicadores),
  //   );
  //   return promise;
  //   // return onSubmitFilter();
  // };

  async function onSubmitFilter() {
    const params: ListarIndicadoresParams = {
      ...indicadoresFilter,
      mostrar_negocios_gerados: mostrarNegociosGerados,
    };
    return listarIndicadores(params);
  }

  useEffect(() => {
    if (perfil) {
      Promise.all([
        // onSubmitFilter(
        //   perfil?.id_perfil == "1000"
        //     ? undefined
        //     : {
        //         codUsuario_indicador: usuario?.id_usuario,
        //       },
        // ),
        listarTodosUsuarios({ id_usuario: usuario?.id_usuario }).then(
          setUsuarios,
        ),
        listarOrigens().then(setOrigens),
      ]).finally(() => {
        if (!defaultValues) {
          setIndicadoresFilter({
            codUsuario_indicador:
              perfil?.visualiza_todos_contatos_perfil == "1"
                ? undefined
                : usuario?.id_usuario,
          });
        }
        setTableKey((prev) => prev + 1);
        setIsLoaded(true);
      });
    }
  }, [perfil]);

  function formatFunction(arr: any) {
    return arr.map((e: any) => {
      e.data_criacao_indicador_formatada = getDateBrasil(
        undefined,
        e.data_criacao_indicador,
      );
      e.nome_responsavel = e?.codUsuario_indicador
        ? usuarios?.find((u) => u?.id_usuario == e?.codUsuario_indicador)
            ?.nome_usuario
        : "";
      e.nome_usuario_criou = e?.codUsuarioCriou_indicador
        ? usuarios?.find((u) => u?.id_usuario == e?.codUsuarioCriou_indicador)
            ?.nome_usuario
        : "";
      e.nome_origem_cliente = e?.codOrigem_indicador
        ? origens?.find((o) => o?.id_origem_cliente == e?.codOrigem_indicador)
            ?.nome_origem_cliente
        : "";
      e.nome_tipo_origem = (
        {
          "0": "Não é Indicação",
          "1": "Indicação Controlado pela Empresa",
          "2": "Indicação Controlado pelo Vendedor",
        } as any
      )[e.indicacao_origem_cliente];

      if (mostrarNegociosGerados === "1") {
        Object.assign(
          e,
          formatNegociosGeradosFields(e.negocios_gerados || []),
        );
      }

      return e;
    });
  }

  function formatExcel({ data, originalData, columns, name }: any) {
    if (mostrarNegociosGerados !== "1") {
      return { data, columns, name };
    }

    const newData: any[] = [];

    data.forEach((row: any, index: number) => {
      const negocios = originalData[index]?.negocios_gerados || [];

      if (!negocios.length) {
        newData.push({
          ...row,
          ...formatNegociosGeradosFields([]),
        });
        return;
      }

      negocios.forEach((negocio: any) => {
        newData.push({
          ...row,
          negocios_gerados_id: String(negocio.id_coleta ?? ""),
          negocios_gerados_nome: negocio.nome_negocio_coleta ?? "",
          negocios_gerados_data: negocio.datetime_coleta
            ? getDateBrasil(undefined, negocio.datetime_coleta)
            : "",
          negocios_gerados_status:
            negocio.status_coleta == "100" ? "Cancelado" : "Ativo",
          negocios_gerados_origem: negocio.nome_origem_cliente ?? "",
        });
      });
    });

    return { data: newData, columns, name };
  }

  return (
    <>
      {!isLoaded ? (
        <div className="flex flex-col justify-center items-center w-full h-40">
          <LoaderSun />
        </div>
      ) : (
        <Container>
          <section className="mb-6 rounded-lg border border-stroke bg-gray-50/60 p-4 dark:border-strokedark dark:bg-boxdark-2/40 md:p-5">
            <div className="mb-4 border-b border-stroke pb-3 dark:border-strokedark">
              <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300">
                Filtros de consulta
              </h3>
            </div>

            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
              <Input
                name="nome_indicador"
                label="Nome do Indicador"
                formulario={form}
                labelSize="text-sm"
                onChange={(e) => {
                  setIndicadoresFilter((prev: any) => ({
                    ...prev,
                    nome_indicador: e.target.value,
                  }));
                }}
                width="w-full"
              />

              <InputSelectComponent
                name="codUsuario_indicador"
                label="Vendedor Responsável"
                formulario={form}
                labelSize="text-sm"
                options={[
                  ...(perfil?.visualiza_todos_contatos_perfil == "1"
                    ? [
                        {
                          value: "*",
                          label: "Todos",
                        },
                      ]
                    : []),
                  ...usuarios
                    ?.filter((u) =>
                      perfil?.visualiza_todos_contatos_perfil == "1"
                        ? true
                        : u?.id_usuario == usuario?.id_usuario,
                    )
                    ?.map((u: any) => ({
                      label: u?.nome_usuario,
                      value: u?.id_usuario,
                    })),
                ]}
                isMulti
                onChange={(e: any) => {
                  setIndicadoresFilter((prev: any) => ({
                    ...prev,
                    codUsuario_indicador: e
                      ?.filter((u: any) => u?.value != "*")
                      ?.map((u: any) => u?.value)
                      ?.join(","),
                  }));
                }}
                defaultValue={
                  defaultValues?.codUsuario_indicador
                    ? defaultValues?.codUsuario_indicador
                    : perfil?.visualiza_todos_contatos_perfil == "1"
                      ? "*"
                      : usuario?.id_usuario
                }
                disabled={
                  disabledFilters?.includes("codUsuario_indicador")
                    ? true
                    : perfil?.visualiza_todos_contatos_perfil != "1"
                }
                width="w-full"
              />

              <InputSelectComponent
                name="mostrar_negocios_gerados"
                label="Exibir Negócios Gerados"
                formulario={form}
                labelSize="text-sm"
                options={[
                  { value: "0", label: "Não" },
                  { value: "1", label: "Sim" },
                  { value: "2", label: "Todos" },
                ]}
                onChange={(e: any) => {
                  const value = e?.value ?? "0";
                  setMostrarNegociosGerados(value);
                  if (value !== "1") {
                    setIndicadoresFilter((prev: any) => ({
                      ...prev,
                      indicacao_origem_cliente: undefined,
                    }));
                    form.setValue("indicacao_origem_cliente", "*");
                  }
                  setTableKey((prev) => prev + 1);
                }}
                defaultValue="0"
                width="w-full"
              />

              {mostrarNegociosGerados === "1" && (
                <InputSelectComponent
                  name="indicacao_origem_cliente"
                  label="Tipo de Indicação"
                  formulario={form}
                  labelSize="text-sm"
                  options={[
                    {
                      value: "*",
                      label: "Todos",
                    },
                    {
                      value: "1",
                      label: "Indicação Controlado pela Empresa",
                    },
                    {
                      value: "2",
                      label: "Indicação Controlado pelo Vendedor",
                    },
                  ]}
                  onChange={(e: any) => {
                    setIndicadoresFilter((prev: any) => ({
                      ...prev,
                      indicacao_origem_cliente:
                        e?.value == "*" ? undefined : e?.value,
                    }));
                  }}
                  defaultValue={"*"}
                  width="w-full"
                />
              )}

              <div className="sm:col-span-2 xl:col-span-2 2xl:col-span-2">
                <p className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-200">
                  Período de criação
                </p>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <Input
                    name="inicio"
                    label="Data início"
                    formulario={form}
                    labelSize="text-sm"
                    type="date"
                    width="w-full"
                    onChange={(e: any) => {
                      setIndicadoresFilter((prev: any) => ({
                        ...prev,
                        dataI_criacao_indicador: e.target.value,
                      }));
                    }}
                  />
                  <Input
                    name="fim"
                    label="Data fim"
                    formulario={form}
                    labelSize="text-sm"
                    type="date"
                    width="w-full"
                    onChange={(e: any) => {
                      setIndicadoresFilter((prev: any) => ({
                        ...prev,
                        dataF_criacao_indicador: e.target.value,
                      }));
                    }}
                  />
                </div>
              </div>
            </div>

            <div className="mt-5 flex justify-end border-t border-stroke pt-4 dark:border-strokedark">
              <Button
                type="button"
                className="inline-flex min-w-[140px] items-center justify-center gap-2 bg-success px-6"
                onClick={() => {
                  setTableKey((prev) => prev + 1);
                }}
              >
                <Search size={16} />
                Filtrar
              </Button>
            </div>
          </section>

          {isLoadingIndicadores ? (
            <div className="flex flex-col justify-center items-center w-full h-40">
              <LoaderSun />
            </div>
          ) : (
            <div key={tableKey}>
              <ReactTable
                columns={columns}
                listFunction={onSubmitFilter}
                formatFunction={formatFunction}
                formatExcel={formatExcel}
                idCol="id_indicador"
                isActiveCol="status_indicador"
                canEdit={!defaultValues}
                canDesactive={!defaultValues}
                editFunction={editarIndicadores}
                Form={FormIndicadoresConsulta}
                pageName="Indicadores"
                actionButtons={(
                  data: any,
                  updateTable: any,
                  setIsLoading: any,
                  {
                    idCol,
                    isActive,
                    isActiveCol,
                    pageName,
                    editFunction,
                    rowOriginal,
                    openEdit,
                  }: any,
                ) => [
                  ...(rest?.setSelectedIndicador
                    ? [
                        {
                          title: "Selecionar",
                          className: `bg-transparent`,
                          onClick: (e: any) => {
                            rest?.setSelectedIndicador(rowOriginal);
                          },
                          content: (
                            <input
                              type="checkbox"
                              checked={
                                defaultValues?.selectedIndicador?.[idCol] ==
                                rowOriginal?.[idCol]
                              }
                            />
                          ),
                        },
                      ]
                    : []),
                ]}
              />
            </div>
          )}
        </Container>
      )}
    </>
  );
};

export default ConsultaIndicadores;