import { useRouter } from "next/navigation";
import { useModal } from "../../lib/modal-system/ModalContext";
import { useAppSelector } from "../../hooks/useAppRedux";
import usePackagesFetch from "../../hooks/features/packages/usePackagesFetch";
import Button from "../ui/Button";
import SectionTitle from "./SectionTitle";
import Image from "next/image";

export default function PackagesSection() {
  const router = useRouter();
  const { openModal } = useModal();
  const { user } = useAppSelector((state) => state.user);
  const { packages, error, isError, loading } = usePackagesFetch();

  const handleBuyNow = () => {
    if (user) {
      if (!user.isVerified) {
        openModal("CHECK_EMAIL_FOR_VERIFICATION", {
          email: user.email,
        });

        return;
      }
      router.push("/dashboard/packages");
    } else {
      openModal("LOGIN", {});
    }
  };

  if (isError || (!loading && packages.length == 0)) return null;

  return (
    <section className="py-8 sm:py-10 md:py-12 2xl:py-section">
      <div className="container-k">
        <div className="grid items-start gap-10 md:grid-cols-12 md:gap-6 xl:gap-12">
          <div className="md:col-span-6">
            <SectionTitle
              badge="PACKAGES"
              title={'Choose A <span class="text-gradient">Credit Pack</span>'}
              headingClassName="mt-6 text-center md:text-left"
              className="mx-auto max-w-xl text-center md:mx-0 md:text-left"
            />

            <div className="glass-card mx-auto mt-6 max-w-155 rounded-[10px] p-5 md:mx-0">
              <h3 className="font-body text-base font-medium text-heading lg:text-xl">
                How it works?
              </h3>

              <ul className="mt-5 space-y-2">
                {[
                  "Choose a credit package that fits your needs",
                  "Complete the secure payment",
                  "Credits will be added to your account instantly",
                  "Track your credit balance from your account dashboard",
                  "Purchase credits whenever you need. No subscriptions required",
                  "Use credits anytime. No expiry. No limits",
                ].map((item) => (
                  <li
                    key={item}
                    className="flex items-center gap-2 text-base leading-none text-heading"
                  >
                    <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-[#EFE6FF] text-sm font-semibold text-link-1">
                      ✓
                    </span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {loading ? (
            <PackagesLoadingSkeleton />
          ) : (
            <div className="md:col-span-6">
              <div className="mx-auto max-w-155 overflow-hidden lg:ms-auto">
                <div className="glass-card shadow-table-head mb-1 grid grid-cols-[1fr_1fr_auto] items-center gap-4 rounded-xl border-2 p-4 text-base xl:text-lg text-text">
                  <span>Pack</span>
                  <span className="text-center"> Credits</span>
                  <span className="w-24" />
                </div>

                <div className="glass-card rounded-xl border-2 shadow-none max-h-[332px] overflow-auto scrollbar-thin-custom">
                  {packages.map((pack) => (
                    <div
                      key={pack.name}
                      className="grid grid-cols-[1fr_1fr_auto] items-center gap-4 border-b-2 border-white px-4 py-2 shadow-table-body last:border-b-0"
                    >
                      <div>
                        <p className="text-sm text-text lg:text-sm">
                          {pack.name}
                        </p>
                        <p className="font-heading text-base font-semibold text-heading lg:text-lg">
                          ${pack.price}
                        </p>
                      </div>

                      <p className="font-heading flex gap-2 items-center justify-center text-base font-semibold text-heading lg:text-lg">
                        <Image
                          src="/images/credits-icon.svg"
                          alt="Credits"
                          width={20}
                          height={20}
                          priority
                          className="h-4! w-4! md:w-4.5! md:h-4.5!"
                        />
                        {pack.credits}
                      </p>

                      <Button
                        onClick={handleBuyNow}
                        variant={"white"}
                        buttonClassName={"!shadow-none"}
                        BtnInnerclassName="py-2.5!"
                      >
                        Buy Now
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function PackagesLoadingSkeleton() {
  return (
    <div className="md:col-span-6">
      <div className="mx-auto max-w-155 overflow-hidden animate-pulse lg:ms-auto">
        {/* Header */}
        <div className="glass-card shadow-table-head mb-1 grid grid-cols-[1fr_1fr_auto] items-center gap-4 rounded-xl border-2 p-4">
          <div className="h-5 w-16 rounded bg-gray-200" />
          <div className="h-5 w-20 rounded bg-gray-200" />
          <div className="w-24" />
        </div>

        {/* Table Body */}
        <div className="glass-card rounded-xl border-2 shadow-none">
          {Array.from({ length: 3 }).map((_, index) => (
            <div
              key={index}
              className="grid grid-cols-[1fr_1fr_auto] items-center gap-4 border-b-2 border-white p-4 last:border-b-0"
            >
              {/* Pack */}
              <div>
                <div className="mb-2 h-4 w-20 rounded bg-gray-200" />
                <div className="h-7 w-24 rounded bg-gray-200" />
              </div>

              {/* Credits */}
              <div className="h-7 w-16 rounded bg-gray-200" />

              {/* Button */}
              <div className="h-11 w-24 rounded-xl bg-gray-200" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
