import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { toast } from "react-toastify";
import debounce from "../../../hooks/debounce";
import usersService from "../../../services/UsersService";
import LoadingSpinner from "../../Spinners/LoadingSpinner";

/**
 * Renders a React component that displays the description and last four digits of a payment card.
 */
function ThePaymentText({ value, type }) {
  const { cardNum } = value;
  let description = value.description;
  let digits = value.digits;

  if (type === "new") {
    const firstDigit = cardNum[0];
    if (firstDigit === "4") {
      description = "Visa";
    } else if (firstDigit === "5") {
      description = "Master";
    } else {
      description = "ATM";
    }
    digits = cardNum.slice(-4);
  }

  return (
    <div className="my-2 flex items-center gap-5">
      <div className="card-details flex items-center gap-3">
        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
          {description} Card
        </h1>
        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
          Bank **************{digits}
        </p>
      </div>
    </div>
  );
}

/**
 * Renders the amount of a transaction in a specific currency.
 * @returns {JSX.Element} - The rendered component.
 */
function AmountSection({ currency, amount, country }) {
  const formattedAmount = (+amount * 0.01)?.toFixed(2);
  const gapClassName = country === "US" ? "gap-14" : "gap-4";

  return (
    <div className={`flex items-center ${gapClassName}`}>
      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
        Amount({currency})
      </h1>
      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedAmount}
      </span>
    </div>
  );
}

/**
 * Renders the transaction fee for a payment.
 * @returns {JSX.Element} - Rendered JSX displaying the transaction fee with the label "Transaction Fee".
 */
function TransactionFeeSection({ currency, fee, country }) {
  const formattedFee = (+fee).toFixed(2);
  const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";

  return (
    <div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
        Transaction Fee
      </h1>
      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedFee}
      </span>
    </div>
  );
}

/**
 * Calculates the total amount by adding the `amount` and `fee` values together.
 * Formats the total amount to two decimal places and displays it.
 * @returns {JSX.Element} - The TotalSection component.
 */
function TotalSection({ currency, amount, fee, country }) {
  const total = Number(amount) + Number(fee);
  const formattedTotal = (total * 0.01)?.toFixed(2);

  const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";

  return (
    <div className={`flex items-center ${gap}`}>
      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
        Total
      </h1>
      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedTotal}
      </span>
    </div>
  );
}

function ConfirmAddFund({
  confirmCredit,
  onClose,
  walletItem,
  setConfirmCredit,
}) {
  const __confirmData = confirmCredit?.data;
  const __confirmCountry = walletItem?.country;
  const __confirmCardDetails =
    __confirmData.cardType === "prev"
      ? JSON.parse(__confirmData.card)
      : __confirmData.card;

  const apiURL = new usersService();

  const { userDetails } = useSelector((state) => state?.userDetails);

  const [requestStatus, setRequestStatus] = useState({
    message: "",
    loading: false,
    status: false,
  });

  const config = {
    public_key: __confirmData?.flutterwave_key,
    tx_ref: __confirmData?.credit_reference,
    currency: "NGN",
    amount: Number(__confirmData.amount) * 0.01,
    payment_options: "card,mobilemoney,ussd",
    customer: {
      email: userDetails.email,
      phone_number: userDetails.phone,
      name: `${userDetails.lastname} ${userDetails.firstname}`,
    },
    customizations: {
      title: "WrenchBoard",
      description: "Add Credit Payment",
      logo: "https://www.wrenchboard.com/assets/images/wrench-500-500-icon.png",
    },
  };

  const fwConfig = {
    ...config,
    text: "Proceed",
    callback: (response) => {
      debouncedSuccessPayment(); //delays the call for 5 secs

      setTimeout(() => {
        closePaymentModal();
        setConfirmCredit((prev) => ({
          ...prev,
          show: {
            awaitConfirm: { loader: false, state: false },
            acceptConfirm: { loader: false, state: true },
          },
          data: response,
        }));
      }, 1500);
    },
  };

  const onSuccessPayment = () => {
    setRequestStatus({ message: "", loading: true, status: false });
    const reqData = { tx_ref: __confirmData?.credit_reference };
    console.log("**** onSuccessPayment **** THIS WAS REACHED");
    apiURL
      .resultTopUp(reqData)
      .then((res) => {
        if (res.data.internal_return < 0) {
          setRequestStatus({
            message: "Could not finish transaction",
            loading: false,
            status: false,
          });
        }
      })
      .catch((err) => {
        setRequestStatus({
          message: "Opps! An Error Occured",
          loading: false,
          status: false,
        });

        setTimeout(() => {
          setConfirmCredit((prev) => ({
            ...prev,
            show: {
              awaitConfirm: { loader: false, state: false },
              acceptConfirm: { loader: false, state: true },
            },
            data: err,
          }));
        }, 1500);
        toast.success("Opps! something went wrong");
      });
  };

  const debouncedSuccessPayment = debounce(onSuccessPayment, 5000);

  /**
   * Handles the process of making a payment using a previously saved card.
   * Updates the state to show a loader while the payment is being processed,
   * sends a request to the server to make the payment, and updates the state with the response.
   * If the payment is successful, it also dispatches an action to reload the wallet table.
   */
  const handlePrevCard = async () => {
    try {
      // Show loader while the payment is being processed
      setConfirmCredit((prev) => ({
        ...prev,
        show: {
          acceptConfirm: { loader: true },
        },
      }));

      // Extract necessary data from confirmCredit and confirmCardDetails objects
      const { amount, credit_reference, currency } = __confirmData;
      const { card_uid } = __confirmCardDetails;

      // Create request data object with required parameters for making the payment
      const reqData = {
        amount: amount,
        card_uid,
        credit_reference,
        currency,
      };

      // Send request to server to make the payment using getPaidPrevCard method of usersService
      const res = await apiURL.getPaidPrevCard(reqData);
      const _response = res.data;

      // If internal_return value in the response is less than 0, hide the loader and return
      if (_response.internal_return < 0) {
        setConfirmCredit((prev) => ({
          ...prev,
          show: {
            awaitConfirm: { loader: false, state: false },
            acceptConfirm: { loader: false, state: true },
          },
        }));
        return;
      }

      // Update state to show the acceptConfirm state and the response data
      setTimeout(() => {
        setConfirmCredit((prev) => ({
          ...prev,
          show: {
            awaitConfirm: { loader: false, state: false },
            acceptConfirm: { loader: false, state: true },
          },
          data: _response,
        }));
      }, 1500);
    } catch (error) {
      // Handle error and hide the loader
      setConfirmCredit((prev) => ({
        ...prev,
        show: {
          awaitConfirm: { loader: false, state: false },
          acceptConfirm: { loader: false, state: true },
        },
      }));
      console.log(error);
    }
  };

  /**
   * Handles the payment process when a new card is used.
   * @async
   */
  const handleNewCard = async () => {
    try {
      // Extract necessary data from __confirmData and __confirmCardDetails
      const { amount, credit_reference, uid } = __confirmData;
      const { address, cardNum, cvv, expirationMonth, expirationYear } =
        __confirmCardDetails;

      // Set loading state to indicate payment is being processed
      setConfirmCredit((prev) => ({
        ...prev,
        show: {
          acceptConfirm: { loader: true },
        },
      }));

      // Prepare request data
      const reqData = {
        amount: amount,
        cardnumber: cardNum.replace(/\s/g, ""),
        credit_reference,
        cvc: cvv,
        description: address,
        exp_month: expirationMonth,
        exp_year: expirationYear,
        paymenttype: 100,
        uid,
      };

      // Send request to server to process payment
      const res = await apiURL.getPaidNewCard(reqData);
      const _response = res.data;

      // Handle response from server
      if (res.data.internal_return < 0) {
        // Payment could not be completed
        setConfirmCredit((prev) => ({
          ...prev,
          show: {
            awaitConfirm: { loader: false, state: false },
            acceptConfirm: { loader: false, state: true },
          },
          data: _response,
        }));
      } else {
        // Payment was successful
        setTimeout(() => {
          setConfirmCredit((prev) => ({
            ...prev,
            show: {
              awaitConfirm: { loader: false, state: false },
              acceptConfirm: { loader: false, state: true },
            },
            data: _response,
          }));
        }, 1500);
      }
    } catch (error) {
      // Handle error during payment process
      setConfirmCredit((prev) => ({
        ...prev,
        show: {
          awaitConfirm: { loader: false, state: false },
          acceptConfirm: { loader: false, state: true },
        },
      }));
      setTimeout(() => onClose, 10000);
      console.log(error);
    }
  };

  const getBack = () => {
    setConfirmCredit((prev) => ({
      ...prev,
      show: {
        awaitConfirm: { loader: false, state: false },
        acceptConfirm: { loader: false, state: false },
      },
      data: {},
    }));
  };

  return (
    <>    
      <div className="content-wrapper w-full h-[32rem]">
        <div className="w-full mb-10">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
            <div className="px-4 md:p-8 py-4 add-fund-info">
              <div className="field w-full mb-3 min-h-[45px]">
                {confirmCredit?.show?.awaitConfirm?.state && (
                  <div className="flex flex-col gap-2">
                    <AmountSection
                      currency={__confirmData?.currency}
                      amount={__confirmData?.amount}
                      country={__confirmCountry}
                    />
                    <TransactionFeeSection
                      currency={__confirmData?.currency}
                      fee={__confirmData?.fee}
                      country={__confirmCountry}
                    />
                    <TotalSection
                      currency={__confirmData?.currency}
                      amount={__confirmData?.amount}
                      fee={__confirmData?.fee}
                      country={__confirmCountry}
                    />
                    {__confirmCountry === "US" && (
                      <div className="flex items-center gap-8">
                        <label
                          htmlFor="payment"
                          className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
                        >
                          Payment Method
                        </label>
                        <span className="text-[#181c32] dark:text-white">
                          <ThePaymentText
                            value={__confirmCardDetails}
                            type={__confirmData?.cardType}
                          />
                        </span>
                      </div>
                    )}
                    <div
                      className={`${
                        __confirmCountry === "US"
                          ? "gap-[3.7rem]"
                          : "gap-[1.81rem]"
                      } flex items-center`}
                    >
                      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                        Reference No
                      </h1>
                      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
                        {__confirmData?.credit_reference}
                      </span>
                    </div>
                  </div>
                )}
              </div>
            </div>

            <div
              className={
                __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
              }
            ></div>
          </div>
        </div>
      </div>

      <div className="modal-footer-wrapper flex justify-end items-center gap-4">
        <button
          className="custom-btn bg-[#f5a430] text-black text-base"
          onClick={getBack}
        >
          Back
        </button>
        {__confirmCountry === "US" && (
          <button
            className="custom-btn btn-gradient text-white text-base"
            onClick={
              __confirmData?.cardType === "prev"
                ? handlePrevCard
                : handleNewCard
            }
          >
            {confirmCredit?.show?.acceptConfirm?.loader ? (
              <LoadingSpinner size="6" color="sky-blue" />
            ) : (
              "Proceed"
            )}
          </button>
        )}
        {__confirmCountry === "NG" && (
          <FlutterWaveButton
            {...fwConfig}
            className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
          />
        )}
      </div>
    </>
  );
}

export default ConfirmAddFund;