import Image from "next/image";
import Button from "../ui/Button";
import Link from "next/link";
import { CreditSummary } from "../../hooks/features/dashboard/useFetchCreditSummary";
import { useModal } from "../../lib/modal-system/ModalContext";
import useCreatePackageOrder from "../../hooks/features/packages/order/useCreatePackageOrder";
import CustomLink from "../ui/CustomLink";

export default function CreditOverviewCard({
  creditSummary,
}: {
  creditSummary: CreditSummary;
}) {
  const { openModal } = useModal();
  const { handleCreatePackageOrder, loading } = useCreatePackageOrder();

  const handleBuy = async () => {
    try {
      const { uuid } = await handleCreatePackageOrder({
        packageId: creditSummary?.lastPurchasedPackage?.uuid,
      });
      openModal("BUY_CREDITS", {
        package: {
          uuid: creditSummary?.lastPurchasedPackage?.uuid,
          name: creditSummary?.lastPurchasedPackage?.packageName,
          credits: creditSummary?.lastPurchasedPackage?.credits,
          price: creditSummary?.lastPurchasedPackage?.amount,
        },
        orderId: uuid,
      });
    } catch (error) {
      console.error("Error buying package:", error);
    }
  };
  if (!creditSummary?.lastPurchasedPackage) {
    return <NewUserCard />;
  }

  const percent =
    creditSummary.totalCredits > 0
      ? (creditSummary.creditsSpent / creditSummary.totalCredits) * 100
      : 0;

  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="relative z-10">
          <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h3 className="font-body text-lg md:text-xl font-bold text-heading">
              Credits used
            </h3>

            <div className="flex items-center gap-3">
              <Button
                href="/dashboard/packages"
                BtnInnerclassName="!px-4 !py-3.5 !text-sm xl:!text-lg"
              >
                Buy More Credits
              </Button>

              <div className="group relative">
                <CustomLink
                  href="/credit-history"
                  className="w-11 h-11 xl:h-12.5 xl:w-12.5 rounded-full gradient1 transition-all p-0.5 header-shadow hover:p-1.5 block"
                >
                  <span className="flex h-full w-full items-center justify-center rounded-full bg-white">
                    <div className="relative h-4.5 w-4.5 2xl:h-5.5 2xl:w-5.5">
                      <Image
                        src="/images/credits-icon.svg"
                        alt="Credits"
                        fill
                        className="object-contain"
                      />
                    </div>
                  </span>
                </CustomLink>

                <div className="pointer-events-none absolute left-1/2 bottom-full mb-2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 px-3 py-1.5 text-xs font-medium text-white shadow-lg opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                  View Credit History
                  <div className="absolute left-1/2 top-full h-2 w-2 -translate-x-1/2 -translate-y-1 rotate-45 bg-gray-900" />
                </div>
              </div>
            </div>
          </div>

          <div className="mb-3 flex items-end justify-between gap-4">
            <p className="font-body text-heading">
              <Image
                src="/images/credits-icon.svg"
                alt="Credits"
                width={22}
                height={22}
                className="mr-2 inline-block"
              />
              <span className="text-3xl font-bold">
                {creditSummary.creditsSpent}
              </span>
              <span className="text-base">/{creditSummary.totalCredits}</span>
            </p>

            <p className="font-body text-base text-heading">
              Available: <b>{creditSummary.availableCredits}</b>
            </p>
          </div>

          <div className="h-1.5 overflow-hidden rounded-full bg-[#E6D7FF]">
            <div
              className="h-full rounded-full bg-link-1"
              style={{ width: `${percent}%` }}
            />
          </div>
        </div>
      </div>

      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="relative z-10 flex h-full flex-col justify-between gap-8">
          <div className="flex items-start justify-between gap-4">
            <h3 className="font-body text-lg font-bold text-heading">
              {creditSummary.lastPurchasedPackage.packageName}
            </h3>

            <span className="rounded-full bg-[#EFE6FD] px-2 leading-5 py-1 text-xs xl:text-base font-body font-medium text-link-1">
              Last Purchased
            </span>
          </div>

          <div className="flex items-end justify-between gap-4">
            <div>
              <p className="font-body text-3xl font-bold text-link-1">
                ${creditSummary.lastPurchasedPackage.amount}
              </p>
              <p className="mt-2 font-body text-base text-text">
                {creditSummary.lastPurchasedPackage.credits} Credits
              </p>
            </div>

            <Button
              variant="white"
              onClick={handleBuy}
              loading={loading}
              buttonClassName="!shadow-none"
              BtnInnerclassName="!py-3.5 !px-5 !text-sm xl:!text-lg !text-link"
            >
              Buy Again
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

function NewUserCard() {
  return (
    <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
      <div className="relative z-10 flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
        <div className="flex items-center gap-3 md:gap-5">
          <div className="h-12 w-12 min-w-12 p-0.5 md:h-20 md:w-20 rounded-full gradient1 transition-all md:p-1">
            <span className="rounded-full bg-white flex items-center justify-center h-full w-full">
              <div className="relative h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8">
                <Image
                  src="/images/credits-icon.svg"
                  alt="Credits"
                  fill
                  className="object-contain"
                />
              </div>
            </span>
          </div>

          <div>
            <h3 className="font-body text-lg font-bold text-heading md:text-xl">
              Available Credits
            </h3>

            <p className="mt-1 font-body text-lg text-text">
              <span className="text-2xl font-bold text-link-1">0</span> Credits
            </p>

            <p className="font-body text-base text-heading">
              You don’t have any credits yet.
            </p>
          </div>
        </div>

        <Button
          href="/dashboard/packages"
          BtnInnerclassName="!py-3.5 !px-5 !text-base md:!text-lg"
        >
          Buy Credits
        </Button>
      </div>
    </div>
  );
}

function CreditsOverviewSkeleton() {
  return (
    <div className="animate-pulse grid gap-6 lg:grid-cols-2">
      {/* Credits Used Card */}
      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="relative z-10">
          <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="h-7 w-40 rounded bg-gray-200" />

            <div className="flex items-center gap-3">
              <div className="h-12 w-40 rounded-full bg-gray-200" />
              <div className="h-12 w-12 rounded-full bg-gray-200" />
            </div>
          </div>

          <div className="mb-3 flex items-end justify-between gap-4">
            <div>
              <div className="h-10 w-44 rounded bg-gray-200" />
            </div>

            <div className="h-6 w-28 rounded bg-gray-200" />
          </div>

          <div className="h-1.5 w-full rounded-full bg-gray-200" />
        </div>
      </div>

      {/* Last Purchased Card */}
      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="relative z-10 flex h-full flex-col justify-between gap-8">
          <div className="flex items-start justify-between gap-4">
            <div className="h-7 w-32 rounded bg-gray-200" />
            <div className="h-8 w-32 rounded-full bg-gray-200" />
          </div>

          <div className="flex items-end justify-between gap-4">
            <div>
              <div className="h-10 w-20 rounded bg-gray-200" />
              <div className="mt-2 h-5 w-28 rounded bg-gray-200" />
            </div>

            <div className="h-12 w-36 rounded-full bg-gray-200" />
          </div>
        </div>
      </div>
    </div>
  );
}