"use client";

import Image from "next/image";
import { FiX } from "react-icons/fi";

import Button from "../../ui/Button";
import { useModal } from "../../../lib/modal-system/ModalContext";
import useCreateCheckoutSession from "../../../hooks/features/packages/order/useCreateCheckoutSession";
import { useAppSelector } from "../../../hooks/useAppRedux";

export type BuyCreditsPackage = {
  uuid: string;
  name: string;
  credits: number;
  price: number;
};

type BuyCreditsModalProps = {
  package?: BuyCreditsPackage;
  orderId: string;
};

export default function BuyCreditsModal({
  package: selectedPackage,
  orderId,
}: BuyCreditsModalProps) {
  const { closeModal, openModal } = useModal();
  const { handleCheckoutSession, loading: checkoutLoading } =
    useCreateCheckoutSession();

  const { balance } = useAppSelector((state) => state.user.user);

  const addOnCredits = selectedPackage?.credits ?? 100;
  const price = selectedPackage?.price ?? "$10";

  const currentBalance = balance ?? 0;

  const newBalance = currentBalance + addOnCredits;

  const handleCheckout = async () => {
    try {
      await handleCheckoutSession({
        orderId: orderId,
        packageName: selectedPackage?.name ?? "",
      });
    } catch (error) {
      console.error("Error creating checkout session:", error);
    }
  };

  return (
    <div className="relative">
      <div className="mb-8 flex items-center justify-between gap-4">
        <h2 className="font-heading text-lg xl:text-xl 2xl:text-2xl font-semibold text-heading">
          Buy Credits
        </h2>

        <button
          type="button"
          onClick={closeModal}
          className="cursor-pointer flex h-6 w-6 items-center justify-center rounded-full border-2 border-link-1 text-link-1"
        >
          <FiX size={14} strokeWidth={3} />
        </button>
      </div>

      <div className="flex items-center justify-between gap-4 rounded-xl border border-[#D9C2FF] bg-[#FBF7FF] px-4 py-4">
        <p className="font-body text-sm md:text-base text-text xl:text-lg">
          Current Balance
        </p>

        <div className="flex items-center gap-2">
          <Image
            src="/images/credits-icon.svg"
            alt="Credits"
            width={24}
            height={24}
          />

          <p className="font-body text-sm md:text-base font-medium text-link xl:text-lg">
            {currentBalance} Credits
          </p>
        </div>
      </div>

      <div className="mt-4 xl:mt-8 rounded-xl border border-[#D9C2FF] bg-[#FBF7FF] p-3 md:p-4">
        <div className="flex items-center justify-between gap-4">
          <p className="font-body text-sm md:text-base text-text xl:text-lg">Add-on</p>

          <p className="font-body text-sm md:text-base font-medium text-[#00A35C] xl:text-lg">
            +{addOnCredits} Credits
          </p>
        </div>

        <div className="mt-2 md:mt-4 flex items-center justify-between gap-4">
          <p className="font-body text-sm md:text-base text-text xl:text-lg">
            New balance
          </p>

          <p className="font-body text-sm md:text-base font-semibold text-heading xl:text-lg">
            {newBalance} Credits
          </p>
        </div>
      </div>

      <div className="mt-4 xl:mt-8 flex items-center justify-between gap-4">
        <p className="font-body text-base font-medium text-text md:text-lg">
          Total Price
        </p>

        <p className="font-body text-xl font-semibold text-heading md:text-2xl">
          ${price}
        </p>
      </div>

      <Button
        className="mt-8 w-full"
        onClick={handleCheckout}
        loading={checkoutLoading}
      >
        Proceed to Checkout
      </Button>
    </div>
  );
}
