"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 { Package } from "../../../hooks/features/packages/usePackagesFetch";
import useCreateCheckoutSession from "../../../hooks/features/packages/order/useCreateCheckoutSession";

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

const currentBalance = 200;

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

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

  const handleCheckout = async () => {
    try {
      await handleCheckoutSession({
        orderId: orderId,
        packageName: selectedPackage?.name ?? "",
      });

      // openModal("THANK_YOU_PAYMENT", {
      //   packageName: `${selectedPackage?.name ?? "Starter"} Pack`,
      //   licenseKey: "AIX-4P92-KM28-RT71",
      // });
    } 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-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-base text-text md: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-base font-medium text-link md:text-lg">
            {currentBalance} Credits
          </p>
        </div>
      </div>

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

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

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

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

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

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

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