import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import ReactTable from "@/components/ReactTable/ReactTable";
import { obterContatos } from "@/requests/CRUD/Contatos/obterContatos";
import { obterTransferenciasContatos } from "@/requests/CRUD/Contatos/obterlogs";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { getDateTimeBrasil, GetForm } from "@/utils";
import { ArrowRight, Info } from "lucide-react";
import { useState } from "react";

const ConsultaTransferenciaContatos = ({
  isLoaded,
  usuarios,
}: {
  isLoaded: boolean;
  usuarios: any[];
}) => {
  function filtrarPorMultiSelecao(
    row: any,
    columnId: string,
    filterValue: any[],
  ) {
    if (!row.original[columnId]) {
      return true;
    }

    if (
      filterValue?.length == 0 ||
      filterValue.some(
        (optionSelected) =>
          optionSelected.value == "*" ||
          optionSelected.label == row.original[columnId],
      )
    ) {
      return true;
    }

    return false;
  }

  const columns = [
    {
      header: "Data",
      accessorKey: "data_log_transferencia_contatos",
    },
    {
      header: "Responsável",
      accessorKey: "cod_usuario_log_transferencia_contatos",
    },
    {
      header: "De",
      accessorKey: "responsavel_log_transferencia_contatos",
    },
    {
      header: "Para",
      accessorKey: "responsavel_alvo_log_transferencia_contatos",
    },
    {
      header: "Descrição",
      accessorKey: "descricao_log",
    },
  ];

  const [responsavel, setResponsavel] = useState<any>();
  const [responsavel_alvo, setResponsavel_alvo] = useState<any>();
  const [negocios, setNegocios] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [logs, setLogs] = useState<any[]>([]);

  const { isMobile } = useScreenContext();

  const { handleSubmit, ...formTransferencia } = GetForm();

  async function formatLogs(logsList: any[]) {
    return logsList.map((logData) => {
      logData["cod_usuario_log_transferencia_contatos"] = usuarios.find(
        (usuario) =>
          usuario.id_usuario ==
          logData["cod_usuario_log_transferencia_contatos"],
      )?.nome_usuario;
      logData["responsavel_log_transferencia_contatos"] = usuarios.find(
        (usuario) =>
          usuario.id_usuario ==
          logData["responsavel_log_transferencia_contatos"],
      )?.nome_usuario;
      logData["responsavel_alvo_log_transferencia_contatos"] = usuarios.find(
        (usuario) =>
          usuario.id_usuario ==
          logData["responsavel_alvo_log_transferencia_contatos"],
      )?.nome_usuario;
      logData["data_log_transferencia_contatos"] = getDateTimeBrasil(
        { hour: undefined, minute: undefined, second: undefined },
        new Date(logData["data_log_transferencia_contatos"]),
      );
      logData["descricao_log"] =
        `Foram Transferidos ${logData["contatos_log_transferencia_contatos"]?.split(",")?.length} contatos de ${logData["responsavel_log_transferencia_contatos"]} para ${logData["responsavel_alvo_log_transferencia_contatos"]}`;
      return logData;
    });
  }

  async function submitObterTransferencias(data: any) {
    setIsSubmitting(true);
    obterTransferenciasContatos(data)
      .then((res) => {
        setLogs(res);
      })
      .finally(() => setIsSubmitting(false));
  }

  return (
    <div className="flex flex-col gap-6">
      <div>
        <div
          className={`p-2 w-full flex flex-${isMobile ? "col" : "row"} justify-center gap-4`}
        >
          <InputSelectComponent
            name="usuario"
            label="Responsável"
            options={[
              {
                label: "Nenhum",
                value: "",
              },
              ...usuarios.map((usuario) => ({
                label: usuario.nome_usuario,
                value: usuario.id_usuario,
              })),
            ]}
            formulario={formTransferencia}
            onChange={(e: any) => {
              setResponsavel_alvo(e.value);
            }}
          />
          <Input
            name="data_inicial"
            label="Data Inicial"
            type="date"
            formulario={formTransferencia}
          />
          <Input
            name="data_final"
            label="Data Final"
            type="date"
            formulario={formTransferencia}
            onChange={(e: any) => {
              const dataInicial =
                formTransferencia.control._formValues.data_inicial;
              if (
                dataInicial &&
                new Date(e.target.value) <= new Date(dataInicial)
              ) {
                formTransferencia.setError("data_final" as never, {
                  type: "manual",
                  message: "A data final deve ser maior que a inicial",
                });
                formTransferencia.setValue("data_final", "");
              }
            }}
          />
        </div>
        <div className={`flex flex-${isMobile ? "col" : "row"} gap-2`}>
          <div
            className={`border p-2 flex-1 flex flex-${isMobile ? "col" : "row"} gap-2 justify-center items-center`}
          >
            <InputSelectComponent
              name="responsavel"
              label="De"
              options={[
                {
                  label: "Nenhum",
                  value: "",
                },
                ...usuarios
                  .filter((usuario) => usuario.id_usuario != responsavel_alvo)
                  .map((usuario) => ({
                    label: usuario.nome_usuario,
                    value: usuario.id_usuario,
                  })),
              ]}
              formulario={formTransferencia}
              onChange={(e: any) => {
                setResponsavel(e?.value);
                if (
                  formTransferencia.control._formValues?.responsavel_alvo
                    ?.value == e?.responsavel_alvo
                ) {
                  formTransferencia.setValue("responsavel_alvo", "");
                }
              }}
            />
          </div>

          <div
            className={`flex flex-col items-center justify-center transition-all ${isMobile ? "rotate-90" : "rotate-0"}`}
          >
            <ArrowRight
              className={`${isSubmitting && "text-success"} transition-all`}
            />
          </div>
          <div className="flex-1 p-2 border border-transparent">
            <InputSelectComponent
              name="responsavel_alvo"
              label="Para"
              options={[
                {
                  label: "Nenhum",
                  value: "",
                },
                ...usuarios
                  .filter((usuario) => usuario.id_usuario != responsavel)
                  .map((usuario) => ({
                    label: usuario.nome_usuario,
                    value: usuario.id_usuario,
                  })),
              ]}
              formulario={formTransferencia}
              onChange={(e: any) => {
                setResponsavel_alvo(e.value);
              }}
            />
          </div>
        </div>
        <div className="p-2 w-full flex flex-row justify-center border-b">
          <Button
            type="button"
            onClick={handleSubmit(submitObterTransferencias)}
            loading={isSubmitting}
          >
            Consultar
          </Button>
        </div>
      </div>
      {isLoaded ? (
        <ReactTable
          formatFunction={formatLogs}
          data={logs}
          columns={columns}
          actionButtons={(
            rowData: any,
            updateTable: any,
            setIsLoadingButton: any,
          ) => [
            {
              className: "bg-primary text-white",
              onClick: (e: any) => {
                setIsLoadingButton(true);
                setIsLoading(true);
                obterContatos({
                  contatos: rowData.contatos_log_transferencia_contatos,
                })
                  .then(setNegocios)
                  .finally(() => {
                    setIsLoadingButton(false);
                    setIsLoading(false);
                  });
              },
              content: <Info />,
            },
          ]}
        />
      ) : (
        <div className="flex flex-col justify-center items-center w-full">
          <LoaderSun />
        </div>
      )}
      <ModalComponente
        hasForm={false}
        header={`Consulta dos negócios transferidos`}
        opened={isLoading || negocios.length > 0}
        hasSaveButton={false}
        onClose={() => {
          setNegocios([]);
        }}
        className="overflow-x-hidden max-w-2xl"
      >
        <div className="p-4">
          {isLoading ? (
            <div className="flex flex-col justify-center items-center w-full h-40">
              <LoaderSun />
            </div>
          ) : (
            <div className="rounded-lg border border-gray-200 overflow-hidden shadow-sm">
              <table className="w-full select-none">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b">
                      Nº do Contato
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b">
                      Nome do Cliente
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {negocios.map((negocio, index) => (
                    <tr
                      key={index}
                      className={`hover:bg-gray-50 transition-colors ${index % 2 === 0 ? "bg-white" : "bg-gray-50"}`}
                    >
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 text-center">
                        {negocio?.id_cliente}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {negocio?.nome_cliente}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              {negocios.length === 0 && (
                <div className="p-8 text-center text-gray-500">
                  Nenhum negócio transferido encontrado
                </div>
              )}
            </div>
          )}
        </div>
      </ModalComponente>
    </div>
  );
};

export default ConsultaTransferenciaContatos;