/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable no-unsafe-optional-chaining */
/* eslint-disable @typescript-eslint/no-use-before-define */
import { useEffect, useState } from "react";

import { CardListItem } from "@/components/widget/payment/card-list/card-list-item";
import { InstallmentList } from "@/components/widget/payment/installment-list/installment-list";
import { PayPreferences } from "@/components/widget/payment/pay-preferences/pay-preferences";
import { useCoreSummaryCtx } from "@/features/core/summary/context/core-summary-context";
import { usePayment } from "@/features/modules/hotel/payment/hooks/use-hotel-payment";
import { useLocale } from "@/hooks/useLocale";
import {
  useGetMasterpassCidssRulesQuery,
  useGetMasterpassInstallmentsMutation,
} from "@/services/eva-booking/payment/payment.service";
import { useDeleteCardMutation } from "@/services/masterpass/delete-card/delete-card.service";
import { useListManagementMutation } from "@/services/masterpass/list-management/list-management.service";
import { useMasterpassStore } from "@/store/masterpass-store/use-masterpass-store";

import { useMasterpass } from "../hooks/use-check-masterpass";
import { MasterpassLoading } from "./masterpass-loading";

interface CardType {
  Name: string;
  PromtCpin: string;
  Value1: string;
  Value2: string;
  IsMasterPassMember: string;
  CardStatus: string;
  BankIca: string;
  LoyaltyCode: string;
  ProductName: string;
  UniqueId: string;
  EftCode: string;
}

const MasterpassLoginScreen = () => {
  const coreSummaryCtx = useCoreSummaryCtx();
  const { masterpassState, setMasterpassData } = useMasterpassStore();
  const { paymentState } = usePayment();
  const [activeMasterpassCidssRules, setActiveMasterpassCidssRules] =
    useState(1);

  const [activeInstallmentKey, setActiveInstallmentKey] = useState("");
  const [selectCard, setSelectedCard] = useState<CardType>();
  const { t } = useLocale();
  const { CheckListManagementCardStatus } = useMasterpass();
  const useGetMasterpassInstallmentsMutationServices =
    useGetMasterpassInstallmentsMutation({
      onSuccess: (data) => {
        if (data.data.result.length > 0) {
          setActiveInstallmentKey(data.data.result[0].key);
          setMasterpassData({
            moduleName: "Hotel",
            payload: {
              ...masterpassState!.data!.payload,
              amount: data.data.result[0].totalPriceNow,
              balanceAmount: data.data.result[0].totalPriceLater,
              installmentKey: data.data.result[0].key,
              macroMerchantId: data.data.result[0].macroMerchantId,
              installmentCount: data.data.result[0].installmentCount,
              selectedCard:
                selectCard || masterpassState.data?.payload.selectedCard,
            },
          });
          setActiveInstallmentKey(data.data.result[0].key);
        }
      },
    });
  const masterpassCidssRules = useGetMasterpassCidssRulesQuery(
    {
      cartId: paymentState.payload.cartId!,
    },
    {
      onSuccess: (data) => {
        if (data.data.success) {
          useGetMasterpassInstallmentsMutationServices.mutate({
            amount:
              activeMasterpassCidssRules !== 1
                ? data.data.result.minPaymentAmount.slice(3)
                : data.data.result.totalAmount?.slice(3),
            cardNumber: masterpassState.data?.payload.selectedCard.Value1,
            cartId: paymentState.payload.cartId!,
            isDebitCard: masterpassState.data?.payload.selectedCard?.isDebit
              ? masterpassState.data?.payload.selectedCard?.isDebit
              : false,
          });
        }
      },
    },
  );
  const listManagementService = useListManagementMutation({
    onSuccess: (data) => {
      if (data.success) {
        if (data.cardList?.ListItem?.length > 0) {
          const cardList = CheckListManagementCardStatus(
            data.cardList.ListItem,
          );
          setMasterpassData({
            moduleName: "Hotel",
            payload: {
              ...masterpassState!.data!.payload,
              masterpassLoginState: true,
              cardList: cardList ?? [],
              selectedCard: cardList[0],
            },
          });
        }
      }
    },
  });
  const deleteCardServices = useDeleteCardMutation({
    onSuccess: (data) => {
      if (data.success) {
        if (data.responseCode === "") {
          listManagementService.mutate({
            referenceNo:
              masterpassState.data?.payload.masterpassUserData.referenceNumber!,
            token: masterpassState.data?.payload?.masterpassUserData.token!,
            msisdn: masterpassState.data?.payload?.masterpassUserData.msisdn!,
          });
        } else {
          setMasterpassData({
            moduleName: "Hotel",
            payload: {
              ...masterpassState!.data!.payload,
              masterpassLoginState: false,
              cardList: [],
            },
          });
        }
      } else {
        setMasterpassData({
          moduleName: "Hotel",
          payload: {
            ...masterpassState!.data!.payload,
            masterpassLoginState: false,
            cardList: [],
          },
        });
      }
    },
  });

  const handleSelectCard = (card: any) => {
    setTimeout(() => {
      useGetMasterpassInstallmentsMutationServices.mutate({
        amount:
          activeMasterpassCidssRules !== 1
            ? masterpassCidssRules.data.data.result.minPaymentAmount.slice(3)
            : masterpassCidssRules.data.data.result.totalAmount?.slice(3),
        cardNumber: card.Value1,
        cartId: paymentState.payload.cartId!,
        isDebitCard: card?.isDebit ? card?.isDebit : false,
      });
    }, 1000);
  };

  function getInstallmentList(payPreference: "minAmount" | "totalAmount") {
    useGetMasterpassInstallmentsMutationServices.mutate({
      amount:
        payPreference === "minAmount"
          ? masterpassCidssRules.data.data.result.minPaymentAmount.slice(3)
          : masterpassCidssRules.data.data.result.totalAmount?.slice(3),
      cardNumber: masterpassState.data?.payload.selectedCard.Value1,
      cartId: paymentState.payload.cartId!,
      isDebitCard: masterpassState.data?.payload.selectedCard?.isDebit
        ? masterpassState.data?.payload.selectedCard?.isDebit
        : false,
    });
  }

  useEffect(() => {
    if (useGetMasterpassInstallmentsMutationServices?.data?.data?.result) {
      masterpassCidssRules?.refetch();
    }
  }, [coreSummaryCtx?.state?.hasCouponCode]);

  return (
    <div className="flex flex-col gap-4">
      <div className="mt-6 flex flex-col gap-4">
        <span className="text-base">{t("Card Preference")}</span>
        <div className="flex gap-4 overflow-scroll">
          {masterpassState.data?.payload?.cardList?.map((item: any) => (
            <CardListItem
              key={item.Value1}
              id={item.UniqueId}
              cardNumber={item.Value1}
              cardAlias={item.Name}
              cardDate=""
              isSelected={
                selectCard
                  ? selectCard.UniqueId === item.UniqueId
                  : masterpassState.data?.payload.selectedCard.UniqueId ===
                    item.UniqueId
              }
              setSelectCardId={() => {
                handleSelectCard(item);
                setSelectedCard(item);
                setMasterpassData({
                  moduleName: "Hotel",
                  payload: {
                    ...masterpassState!.data!.payload,
                    selectedCard: item,
                  },
                });
              }}
              onDeleteCard={() => {
                deleteCardServices.mutate({
                  token:
                    masterpassState.data?.payload?.masterpassUserData.token!,
                  msisdn:
                    masterpassState.data?.payload.masterpassUserData.msisdn!,
                  accountAliasName: item.Name,
                });
              }}
            />
          ))}
        </div>
      </div>
      <div>
        {masterpassCidssRules.isLoading && <MasterpassLoading />}
        {masterpassCidssRules.isSuccess && (
          <PayPreferences
            activeMasterpassCidssRules={activeMasterpassCidssRules}
            setActiveMasterpassCidssRules={(values: number) => {
              setActiveMasterpassCidssRules(values);
              setMasterpassData({
                moduleName: "Hotel",
                payload: {
                  ...masterpassState!.data!.payload,
                  amount:
                    values !== 1
                      ? +masterpassCidssRules.data.data.result.minPaymentAmount.slice(
                          3,
                        )
                      : +masterpassCidssRules.data.data.result.totalAmount.slice(
                          3,
                        ),
                },
              });
              getInstallmentList(values !== 1 ? "minAmount" : "totalAmount");
            }}
            data={masterpassCidssRules.data.data.result}
          />
        )}
      </div>
      <div className="flex flex-col gap-4">
        <span className="text-base">{t("Installment Options")}</span>
        {useGetMasterpassInstallmentsMutationServices.isLoading && (
          <MasterpassLoading />
        )}
        {!useGetMasterpassInstallmentsMutationServices.isLoading &&
          useGetMasterpassInstallmentsMutationServices.isSuccess &&
          useGetMasterpassInstallmentsMutationServices.data?.data?.result && (
            <InstallmentList
              payableDate={
                masterpassCidssRules?.data?.data?.result?.paymentDueDate
              }
              activeMasterpassCidssRules={activeMasterpassCidssRules}
              options={
                useGetMasterpassInstallmentsMutationServices.data.data.result
              }
              onChange={(value: string) => {
                const data =
                  useGetMasterpassInstallmentsMutationServices.data.data.result.find(
                    (item: any) => item.key === value,
                  );
                setMasterpassData({
                  moduleName: "Hotel",
                  payload: {
                    ...masterpassState!.data!.payload,
                    amount: data.totalPriceNow,
                    balanceAmount: data.totalPriceLater,
                    installmentKey: value,
                    macroMerchantId: data.macroMerchantId,
                    installmentCount: data.installmentCount,
                  },
                });
                setActiveInstallmentKey(value);
              }}
              value={activeInstallmentKey}
            />
          )}
      </div>
    </div>
  );
};

export { MasterpassLoginScreen };