import { useEffect, useState } from "react";

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 { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarLixeira } from "@/requests/CRM/Lixeira/listarLixeira";
import {
  deletarAnexo,
  editarAnexo,
  listarAnexosLixeira,
} from "@/requests/CRM/kanban";
import { listarClientesConsulta } from "@/requests/CRUD/Cliente/listarClientes";
import { baixarAws } from "@/requests/common/Aws/baixarAws";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { FormatFields } from "@/utils";
import { Download } from "lucide-react";
import { FaTrash, FaTrashRestore } from "react-icons/fa";
import { toast } from "react-toastify";

const ModalLixeira = () => {
  const [anexosLixeira, setAnexosLixeira] = useState<any[]>([]);
  const [clientes, setClientes] = useState<any[]>([]);
  const [clienteSelecionado, setClienteSelecionado] = useState<any>("");
  const [isLoaded, setIsLoaded] = useState(false);
  const [isOpenConfirmType, setIsOpenConfirmType] = useState<any>(false);
  const [confirmContent, setConfirmContent] = useState<any>();
  const [diasLixeira, setDiasLixeira] = useState<any>("");
  const [canConfirm, setCanConfirm] = useState<boolean>(false);
  const [isLoadingReq, setIsLoadingReq] = useState(false);

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

  useEffect(() => {
    listarClientesConsulta().then((res) => {
      setClientes(res);
    });
    atualizarAnexosLixeira();
    listarLixeira().then((res) => setDiasLixeira(res.dias_lixeira));
  }, []);

  const formatFunction = (arr: any) => {
    return arr.map((e: any) => {
      e["data_arquivo_card"] = FormatFields.formatarDataHora(
        e["data_arquivo_card"],
      );
      e["ultimaAtualizacao_arquivo_card"] = FormatFields.formatarDataHora(
        e["ultimaAtualizacao_arquivo_card"],
      );
      e["validade"] = FormatFields.formatarDataHora(e["validade"]);
      return e;
    });
  };

  const atualizarAnexosLixeira = async () => {
    return listarAnexosLixeira().then((res) => {
      setAnexosLixeira(res);
      setIsLoaded(true);
      return res;
    });
  };

  const columns = [
    { header: "Nome do Arquivo", accessorKey: "nome_arquivo_card" },
    { header: "Nome do Cliente", accessorKey: "nome_cliente" },
    {
      header: "Exclusão Definitiva Automática",
      accessorKey: "validade",
      className: "text-error",
    },
    {
      header: "Data da Exclusão",
      accessorKey: "ultimaAtualizacao_arquivo_card",
    },
    { header: "ID", accessorKey: "id_arquivo_card" },
    { header: "ID do Negócio", accessorKey: "codCard_arquivo_card" },
    // { header: "caminho ", accessorKey: "caminho_arquivo_card" },
    {
      header: "Categoria do arquivo",
      accessorKey: "identificacao_cfg_anexo",
    },
    { header: "Data da Criação", accessorKey: "data_arquivo_card" },
    {
      header: "Usuário que Excluiu",
      accessorKey: "nome_usuario",
    },
    // { header: "status_arquivo_card", accessorKey: "status_arquivo_card" },
  ];

  return (
    <div className="flex flex-col gap-5 justify-center min-h-[324px]">
      {isLoaded ? (
        <>
          <div>
            <div className="text-lg w-full flex flex-col justify-center items-center text-error">
              {`Os arquivos serão removidos automaticamente após ${diasLixeira} dias`}
            </div>
            <InputSelectComponent
              name="cliente"
              label="Selecione um cliente para filtrar"
              options={[
                {
                  label: "Todos",
                  value: "",
                },
                ...clientes.map((cliente) => ({
                  label: cliente.nome_cliente,
                  value: String(cliente.id_cliente),
                })),
              ]}
              placeholder="Selecione uma opção"
              onChange={(e: any) => setClienteSelecionado(e.value)}
            />
          </div>
          <ReactTable
            columns={columns}
            listFunction={listarAnexosLixeira}
            formatFunction={formatFunction}
            // filter={clienteSelecionado}
            data={
              clienteSelecionado == ""
                ? anexosLixeira
                : anexosLixeira.filter(
                    (anexo) => anexo.id_cliente_card == clienteSelecionado,
                  )
            }
            actionButtons={(
              rowData: any,
              updateTable: any,
              setIsLoading: any,
            ) => [
              {
                className: "bg-success text-white",
                onClick: (e: any) => {
                  handleSweetAlert(
                    {
                      icon: "question",
                      title: "Restaurar documento",
                      html: `Tem certeza que deseja <b>restaurar</b> o documento ${rowData.nome_arquivo_card}?`,
                    },
                    () => {
                      setIsOpenConfirmType("restaurar");
                      setConfirmContent({
                        rowData,
                        updateTable,
                        setIsLoading,
                      });
                    },
                  );
                },
                content: <FaTrashRestore />,
              },
              {
                className: "bg-error text-white",
                onClick: (e: any) =>
                  handleSweetAlert(
                    {
                      icon: "question",
                      title: "Remover Permanentemente",
                      html: `Tem certeza que deseja <b>deletar permantentemente</b> o documento ${rowData.nome_arquivo_card}?`,
                    },
                    () => {
                      setIsOpenConfirmType("deletar");
                      setConfirmContent({
                        rowData,
                        updateTable,
                        setIsLoading,
                      });
                    },
                  ),
                content: <FaTrash />,
              },
              {
                className: "bg-secondary text-white",
                onClick: (e: any) => {
                  const toastPromise = new Promise((resolve, reject) => {
                    baixarAws(rowData.caminho_arquivo_card)
                      .then((res) => resolve(window.open(res)))
                      .catch((err) => {
                        reject("err");
                      });
                  });
                  return toast.promise(toastPromise, {
                    pending: {
                      render(data: any) {
                        return "Aguarde";
                      },
                    },
                    success: {
                      render(data: any) {
                        return "Download Iniciado";
                      },
                      theme: "light",
                    },
                    error: {
                      render(data: any) {
                        return "Erro ao realizar o download";
                      },
                    },
                  });
                },
                content: <Download />,
              },
            ]}
          />
        </>
      ) : (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      )}

      {isOpenConfirmType && (
        <ModalComponente
          // className="w-fit"
          defaultW="w-fit"
          hasForm={false}
          header="Confirmação"
          opened={true}
          onClose={() => setIsOpenConfirmType(false)}
          hasSaveButton={false}
        >
          <div className="flex flex-col gap-2">
            <div>
              {isOpenConfirmType == "deletar" && (
                <div>Aviso: Esta ação é irreversível</div>
              )}
              Digite {`"${isOpenConfirmType}"`} para prosseguir!
            </div>
            <Input
              name="confirm"
              onInput={(e: any) =>
                setCanConfirm(e.target.value == isOpenConfirmType)
              }
            />
            <div className="flex flex-row gap-2 flex-nowrap w-full justify-center">
              <Button
                onClick={() => setIsOpenConfirmType(false)}
                className="bg-error text-white"
              >
                Cancelar
              </Button>
              <Button
                className={`${!canConfirm && "bg-body"}`}
                disabled={!canConfirm}
                loading={isLoadingReq}
                onClick={() => {
                  const { rowData, updateTable, setIsLoading } = confirmContent;

                  setIsLoading(true);
                  setIsLoadingReq(true);

                  switch (isOpenConfirmType) {
                    case "restaurar":
                      editarAnexo({
                        id_arquivo_card: rowData.id_arquivo_card,
                        codUsuarioAtualizacao_arquivo_card: session.id_usuario,
                        status_arquivo_card: "1",
                      }).finally(() => {
                        listarDadosKanban();
                        updateTable().then((res: any) => {
                          setAnexosLixeira(res);
                          setIsLoading(false);
                          setIsLoadingReq(false);
                          setIsOpenConfirmType(false);
                        });
                      });

                      break;
                    case "deletar":
                      deletarAnexo({
                        ...rowData,
                        codUsuarioAtualizacao_arquivo_card: session.id_usuario,
                      }).finally(async () => {
                        updateTable().then((res: any) => {
                          setAnexosLixeira(res);
                          setIsLoading(false);
                          setIsLoadingReq(false);
                          setIsOpenConfirmType(false);
                        });
                      });
                      break;
                    default:
                      break;
                  }
                }}
              >
                Confirmar
              </Button>
            </div>
          </div>
        </ModalComponente>
      )}
    </div>
  );
};

export default ModalLixeira;