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 { obterTransferenciasNegociosLoja } from "@/requests/CRUD/Negocios/obterTransferenciasNegocios";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { getDateTimeBrasil, GetForm } from "@/utils";
import { ArrowRight } from "lucide-react";
import { useEffect, useState } from "react";

const ConsultaTransferenciaLoja = ({
  isLoaded,
  usuarios,
  lojas,
}: {
  isLoaded: boolean;
  lojas: any[];
  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_negocios_loja",
    },
    {
      header: "Responsável",
      accessorKey: "cod_usuario_log_transferencia_negocios_loja",
    },
    {
      header: "De",
      accessorKey: "loja_origem_log_transferencia_negocios_loja",
    },
    {
      header: "Para",
      accessorKey: "loja_destino_log_transferencia_negocios_loja",
    },
    {
      header: "Tipo de Negócio",
      accessorKey: "tipo_negocio_log",
    },
    {
      header: "Descrição",
      accessorKey: "descricao_log",
    },
  ];

  const [loja, setLoja] = useState<any>();
  const [negocios, setNegocios] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [logs, setLogs] = useState<any[]>([]);
  const [tiposNegocios, setTiposNegocios] = useState<any[]>([]);

  const { isMobile } = useScreenContext();

  useEffect(() => {
    listarTiposNegocios().then(setTiposNegocios);
  }, []);

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

  async function formatLogs(logsList: any[]) {
    return logsList.map((logData) => {
      logData["cod_usuario_log_transferencia_negocios_loja"] = usuarios.find(
        (usuario) =>
          usuario.id_usuario ==
          logData["cod_usuario_log_transferencia_negocios_loja"]
      )?.nome_usuario;
      logData["loja_origem_log_transferencia_negocios_loja"] = lojas.find(
        (loja) =>
          loja.id_loja == logData["loja_origem_log_transferencia_negocios_loja"]
      )?.nome_loja;
      logData["loja_destino_log_transferencia_negocios_loja"] = lojas.find(
        (loja) =>
          loja.id_loja ==
          logData["loja_destino_log_transferencia_negocios_loja"]
      )?.nome_loja;
      logData["data_log_transferencia_negocios_loja"] = getDateTimeBrasil(
        { hour: undefined, minute: undefined, second: undefined },
        new Date(logData["data_log_transferencia_negocios_loja"])
      );
      logData["descricao_log"] =
        `Foram Transferidos ${logData["negocios_log_transferencia_negocios_loja"]?.split(",")?.length} negócios de ${logData["loja_origem_log_transferencia_negocios_loja"]} para ${logData["loja_destino_log_transferencia_negocios_loja"]} por ${logData["cod_usuario_log_transferencia_negocios_loja"]}`;
      return logData;
    });
  }

  async function submitObterTransferencias(data: any) {
    setIsSubmitting(true);
    obterTransferenciasNegociosLoja(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="responsavel"
            label="Responsável"
            options={[
              {
                label: "Nenhum",
                value: "",
              },
              ...usuarios.map((usuario) => ({
                label: usuario.nome_usuario,
                value: usuario.id_usuario,
              })),
            ]}
            formulario={formTransferencia}
          />
          <InputSelectComponent
            name="tipo_negocio"
            label="Tipo de Negócio"
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              ...tiposNegocios.map((tipo) => ({
                label: tipo.nome_tipo_negocio,
                value: tipo.id_tipo_negocio,
              })),
            ]}
            // onchange={(e: any) => {
            //   if (e?.value === "*") {
            //     formTransferencia.setValue("tipo_negocio", [
            //       {
            //         label: "Todos",
            //         value: "*",
            //       },
            //     ]);
            //   }
            // }}
            formulario={formTransferencia}
          />
          <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="loja_origem"
              label="De"
              options={[
                {
                  label: "Nenhum",
                  value: "",
                },
                ...lojas
                  .filter((lo) => lo.id_loja != loja)
                  .map((loja) => ({
                    label: loja.nome_loja,
                    value: loja.id_loja,
                  })),
              ]}
              formulario={formTransferencia}
              onChange={(e: any) => {
                setLoja(e?.value);
                if (
                  formTransferencia.control._formValues?.loja_origem?.value ==
                  e?.loja_origem
                ) {
                  formTransferencia.setValue("loja_origem", "");
                }
              }}
            />
          </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="loja_destino"
              label="Para"
              options={[
                {
                  label: "Nenhum",
                  value: "",
                },
                ...lojas
                  .filter((lo) => lo.id_loja != loja)
                  .map((loja) => ({
                    label: loja.nome_loja,
                    value: loja.id_loja,
                  })),
              ]}
              formulario={formTransferencia}
            />
          </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.negocios_log_transferencia_negocios_loja,
          //       })
          //         .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 ConsultaTransferenciaLoja;