import { useState } from "react";
import PackageCard from "./PackageCard";
import usePackagesFetch from "../../../hooks/features/packages/usePackagesFetch";

export type PackageItem = {
  title: string;
  price: string;
  credits: number;
  isLastPurchased?: boolean;
};

const packages: PackageItem[] = [
  { title: "Starter", price: "$10", credits: 100, isLastPurchased: true },
  { title: "Standard", price: "$25", credits: 300 },
  { title: "Pro", price: "$50", credits: 700 },
  { title: "Elite", price: "$75", credits: 1000 },
  { title: "Business", price: "$120", credits: 1800 },
  { title: "Premium", price: "$199", credits: 3000 },
  { title: "Enterprise", price: "$299", credits: 5000 },
  { title: "Ultra", price: "$499", credits: 10000 },
];

export function BuyPackageSection() {
  const [showAll, setShowAll] = useState(false);
  const visiblePackages = showAll ? packages : packages.slice(0, 4);
  const { packages: data, loading, error, isError } = usePackagesFetch();

  if (loading) {
    return (
      <div className="rounded-2xl p-4 glass-card-v2 sm:p-5 md:p-7.5">
        <div className="relative z-10">
          <div className="mb-6 flex items-center justify-between gap-4">
            <div className="h-8 w-40 animate-pulse rounded-md bg-gray-200" />

            <div className="h-6 w-20 animate-pulse rounded-md bg-gray-200" />
          </div>

          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            {Array.from({ length: 4 }).map((_, index) => (
              <div
                key={index}
                className="rounded-xl border border-gray-100 p-5"
              >
                <div className="mb-4 h-6 w-24 animate-pulse rounded bg-gray-200" />

                <div className="mb-3 h-10 w-20 animate-pulse rounded bg-gray-200" />

                <div className="mb-6 h-4 w-16 animate-pulse rounded bg-gray-200" />

                <div className="h-10 w-full animate-pulse rounded-lg bg-gray-200" />
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (isError) {
    return <div>Error</div>;
  }

  console.log("REs: ", data);

  return (
    <div className="rounded-2xl p-4 glass-card-v2 sm:p-5 md:p-7.5">
      <div className="relative z-10">
        <div className="mb-6 flex items-center justify-between gap-4">
          <h2 className="font-heading text-xl font-semibold text-heading md:text-2xl">
            Buy Package
          </h2>

          <button
            type="button"
            onClick={() => setShowAll((prev) => !prev)}
            className="cursor-pointer font-body text-base font-medium text-link-1 underline"
          >
            {showAll ? "Show Less" : "View All"}
          </button>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {visiblePackages.map((item) => (
            <PackageCard key={item.title} item={item} />
          ))}
        </div>
      </div>
    </div>
  );
}