"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";

type BuyCreditsModalProps = {
  package?: {
    title: string;
    price: string;
    credits: number;
    isLastPurchased?: boolean;
  };
};

const currentBalance = 200;

export default function BuyCreditsModal({
  package: selectedPackage,
}: BuyCreditsModalProps) {
  const { closeModal, openModal } = useModal();

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

  const handleCheckout = () => {
    openModal("THANK_YOU_PAYMENT", {
      packageName: `${selectedPackage?.title ?? "Starter"} Pack`,
      licenseKey: "AIX-4P92-KM28-RT71",
    });
  };

  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="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>
  );
}