import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import ModalComponente from "@/components/Modal/ModalComponente";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarContatos } from "@/requests/CRUD/Cliente/listarClientes";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { editarParcelamento } from "@/requests/CRUD/Parcelamentos/editarParcelamento";
import { estornarPagamentoParcelamento } from "@/requests/CRUD/Parcelamentos/estornarPagamentoParcelamento";
import { listarParcelamentos } from "@/requests/CRUD/Parcelamentos/listarParcelamentos";
import { salvarPagamentoParcelamento } from "@/requests/CRUD/Parcelamentos/salvarPagamentoParcelamento";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { formatarValor, FormatFields } from "@/utils";
import { CalendarCheck, CalendarX } from "lucide-react";
import { useEffect, useState } from "react";
import FormFiltroConsultaParcelas from "./FormFiltroConsultaParcelas";
import FormPagamento from "./FormPagamento";
import FormParcela from "./FormParcela";
import RelatorioParcelas from "./RelatorioParcelas";

const statusParcelas = [
  { label: "Parcelamento Gerado, mas não aprovado o crédito", value: "0" },
  { label: "Pendente de Pagamento", value: "1" },
  { label: "Paga", value: "2" },
  { label: "Vencida", value: "3" },
];

const ConsultaParcelas = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [clientes, setClientes] = useState<any[]>([]);
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [tiposNegocios, setTiposNegocios] = useState<any[]>([]);
  const [lojas, setLojas] = useState<any[]>([]);
  const [dados, setDados] = useState<any[]>([]);
  const [filtros, setFiltros] = useState<any>();
  const [isOpenModalPagamento, setIsOpenModalPagamento] = useState<any>();
  const [pagamentoData, setPagamentoData] = useState<any>();
  const [dadosFormatados, setDadosFormatados] = useState<any[]>([]);

  const { usuario } = useAuth();

  useEffect(() => {
    // setLoading(true);
    // const fetchColetasPerdas = listarRelatorioPerdas().then(setDados);
    if (usuario) {
      Promise.all([
        listarLojas().then((res) => {
          const idsLojaUsuario = usuario?.loja_usuario
            ?.split(",")
            ?.map((id: any) => id.trim());

          const filtered = res.filter((loja: any) =>
            idsLojaUsuario?.includes(loja.id_loja.toString()),
          );

          setLojas(filtered);
        }),
        listarUsuarios(usuario?.loja_usuario).then(setUsuarios),
        listarContatos({ id_usuario: usuario?.id_usuario }).then(setClientes),
        listarTiposNegocios().then(setTiposNegocios),
      ]).then(() => setIsLoaded(true));
    }
  }, [usuario]);
  const fakeList = async (): Promise<any[]> => {
    const promise: Promise<any[]> = new Promise((resolve, reject) =>
      resolve(dados),
    );
    return promise;
  };
  const onSubmitFilter = async (value: any) => {
    setFiltros(value);
    return fetchData(value);
  };

  async function fetchData(filtrosData = filtros) {
    setIsLoading(true);

    return listarParcelamentos(filtrosData)
      .then((res) => {
        setIsLoaded(true);

        setDados(res);
      })
      .finally(() => setIsLoading(false));
  }

  const onEditParcelamento = async (data: any) => {
    return editarParcelamento(data).then(() => {
      fetchData(filtros);
    });
  };

  const columns = [
    { header: "ID", accessorKey: "id_parcelamento" },
    { header: "Status", accessorKey: "status_parcelamento" },
    { header: "Nº Projeto", accessorKey: "codNegocio_parcelamento" },
    { header: "Nome Projeto", accessorKey: "nome_negocio_coleta" },
    // { header: "Proposta", accessorKey: "codProposta_parcelamento" },
    // { header: "Contrato", accessorKey: "codContrato_parcelamento" },
    { header: "TipoNegocio", accessorKey: "codTipoNegocio_parcelamento" },
    { header: "Parcela", accessorKey: "parcela_parcelamento" },
    { header: "Data Vencimento", accessorKey: "dataVencimento_parcelamento" },
    { header: "Valor", accessorKey: "valorParcela_parcelamento" },
    { header: "Data Pagamento", accessorKey: "dataPagamento_parcelamento" },
    { header: "Loja", accessorKey: "nome_loja" },
    { header: "Cliente", accessorKey: "nome_cliente" },
    // { header: "", accessorKey: "caminho_comprovantePagamento_parcelamento" },
  ];

  const formatFunction = (arr: any) => {
    const values = arr.map((e: any) => {
      e.dataVencimento_parcelamento = e?.dataVencimento_parcelamento
        ? FormatFields.formatarDataHora(
            e?.dataVencimento_parcelamento?.split("-"),
            "dd/mm/AAAA",
          )
        : "";
      e.dataPagamento_parcelamento = e?.dataPagamento_parcelamento
        ? FormatFields.formatarDataHora(
            e?.dataPagamento_parcelamento?.split("-"),
            "dd/mm/AAAA",
          )
        : "";
      e.valorParcela_parcelamento = formatarValor(e?.valorParcela_parcelamento);
      e.codTipoNegocio_parcelamento = tiposNegocios?.find(
        (tipoNegocio) =>
          tipoNegocio?.id_tipo_negocio == e?.codTipoNegocio_parcelamento,
      )?.nome_tipo_negocio;
      e.status_parcelamento = statusParcelas?.find(
        (status) => status.value == e?.status_parcelamento,
      )?.label;
      e.codNegocio_parcelamento = e.codNegocio_parcelamento;
      return e;
    });
    setDadosFormatados(values);
    return values;
  };
  return (
    <>
      <Breadcrumb pageName="Recebimentos de Clientes" />
      <Container>
        <FormFiltroConsultaParcelas
          onSubmitFunction={onSubmitFilter}
          lojas={lojas}
          tiposNegocios={tiposNegocios}
          clientes={clientes}
          statusParcelas={statusParcelas}
        />
        {isLoaded ? (
          <ReactTable
            columns={columns}
            pageName={"Parcelas"}
            listFunction={fakeList}
            data={dados}
            formatFunction={formatFunction}
            Form={FormParcela}
            canEdit
            editFunction={onEditParcelamento}
            idCol="id_parcelamento"
            customizedComponents={[
              {
                component: "div",
                children: <RelatorioParcelas parcelas={dadosFormatados} />,
              },
            ]}
            actionButtons={(
              rowData: any,
              updateTable: any,
              setIsLoading: any,
              {
                idCol,
                isActive,
                isActiveCol,
                pageName,
                editFunction,
                listData,
                rowOriginal,
              },
            ) => [
              // {
              //   className: `navButton ${isActive ? "buttonSuccess" : "buttonDanger"} transition-all duration-300`,

              //   onClick: (e: any) => {
              //     handleSweetAlert(
              //       {
              //         icon: "warning",
              //         title: `${!isActive ? "Ativar" : "Desativar"} ${pageName}`,
              //         html: `Tem certeza que deseja <b>${!isActive ? "Ativar" : "Desativar"}</b> o registro ${rowData[idCol]}?`,
              //       },
              //       async () => {
              //         return editFunction({
              //           [idCol]: rowData[idCol],
              //           [isActiveCol]: !isActive,
              //         }).then(() => updateTable());
              //       }
              //     );
              //   },
              //   content:
              //     isActive &&
              //     rowData["cargo_perfil"] ==
              //       cargos.find((cargo) => cargo.id_cargo == "-1").nome_cargo &&
              //     listData.filter(
              //       (usuario: any) =>
              //         usuario["cargo_perfil"] == "-1" &&
              //         usuario[isActiveCol] == "1"
              //     ).length == 1 ? undefined : isActive ? (
              //       <MdOutlineToggleOn />
              //     ) : (
              //       <CalendarX />
              //     ),
              // },
              ...(["1", "2"].includes(rowOriginal?.satus_original_parcelamento)
                ? [
                    {
                      className: `navButton ${rowOriginal?.status_parcelamento == "1" ? "buttonSuccess" : "buttonDanger"} transition-all duration-300`,
                      onClick: (e: any) => {
                        handleSweetAlert(
                          {
                            icon: "question",
                            title:
                              rowOriginal?.satus_original_parcelamento == "1"
                                ? "Realizar Baixa"
                                : "Estornar Parcela",
                            html:
                              rowOriginal?.satus_original_parcelamento == "1"
                                ? `Deseja realizar a baixa desta parcela?`
                                : rowOriginal?.satus_original_parcelamento ==
                                    "2"
                                  ? `Deseja estornar esta parcela?`
                                  : "",
                          },
                          () => {
                            if (
                              rowOriginal?.satus_original_parcelamento == "1"
                            ) {
                              setIsOpenModalPagamento(true);
                              setPagamentoData(rowOriginal);
                            } else {
                              return estornarPagamentoParcelamento({
                                ...rowOriginal,
                                status_parcelamento: "1",
                                id_usuario: usuario?.id_usuario,
                              }).then(() => {
                                fetchData();
                              });
                            }
                            // setIsLoading(true);
                            // refreshFunction(rowData)
                            //   .then(() => updateTable())
                            //   .finally(() => setIsLoading(false));
                          },
                        );
                      },
                      content: (
                        <>
                          {rowOriginal?.satus_original_parcelamento == "1" ? (
                            <CalendarCheck />
                          ) : (
                            <CalendarX />
                          )}
                        </>
                      ),
                    },
                  ]
                : []),
            ]}
          />
        ) : (
          <div className="flex justify-center items-center h-96">
            <LoaderSun />
          </div>
        )}
      </Container>

      {isOpenModalPagamento && (
        <ModalComponente
          header={`Dados do Pagamento`}
          size={"md"}
          onClose={() => setIsOpenModalPagamento(false)}
          hasSaveButton={false}
          hasForm={false}
          opened={isOpenModalPagamento}
        >
          <FormPagamento
            onSubmitFunction={async (data: any) => {
              return salvarPagamentoParcelamento({
                ...pagamentoData,
                ...data,
                id_usuario: usuario?.id_usuario,
              }).then(() => {
                fetchData();
                setIsOpenModalPagamento(false);
                setPagamentoData(undefined);
              });
            }}
          >
            <div className="flex flex-row-reverse gap-3">
              <Button
                onClick={() => {
                  setIsOpenModalPagamento(false);
                  setPagamentoData(undefined);
                }}
                // className="bg-error text-white"
                variant="destructive"
              >
                Cancelar
              </Button>
              <Button loading={isLoading}>Salvar</Button>
            </div>
          </FormPagamento>
        </ModalComponente>
      )}
    </>
  );
};
export default ConsultaParcelas;