"use client";

import Link from "next/link";
import CreditsCard from "../../../../../components/dashboard/packages/CreditsCard";
import { BuyPackageSection } from "../../../../../components/dashboard/packages/PackageBuySection";
import LicenseKeyCard from "../../../../../components/dashboard/packages/LicenseCard";
import useFetchCreditSummary from "../../../../../hooks/features/dashboard/useFetchCreditSummary";
import SomethingWentWrong from "../../../../../components/SomethingWentWrong";
import CustomLink from "../../../../../components/ui/CustomLink";

export default function PackagesPage() {
  const { creditSummary, loading, error } = useFetchCreditSummary();

  if (loading) {
    return <PackagesPageSkeleton />;
  }

  const isNewUser = creditSummary?.lastPurchasedPackage === null;

  return (
    <div className="container-k">
      <div className="mb-6 2xl:mb-10">
        <div className="mb-3 xl:mb-5 2xl:mb-7.5 flex items-center gap-3 font-body text-sm  xl:text-xl">
          <CustomLink href="/dashboard" className="text-heading">
            Dashboard
          </CustomLink>
          <span>/</span>
          <span className="font-semibold text-link-1">Packages</span>
        </div>

        <h1 className="font-heading text-2xl xl:text-2xl font-medium text-heading 2xl:text-[40px] 2xl:leading-12.5">
          Packages
        </h1>

        <p className="mt-1 md:mt-1.5 xl:mt-2 2xl:mt-2.5 text-sm md:text-base text-text xl:text-lg 2xl:text-xl 2xl:leading-7">
          Use credits anytime. No expiry. No limits
        </p>
      </div>

      <div className="mb-6 grid gap-6 lg:grid-cols-2">
        {error ? (
          <SomethingWentWrong
            variant="section"
            title="Unable to load credits"
            description="Your credit summary is unavailable right now, but you can still manage your packages and API key."
            onRetry={() => window.location.reload()}
            buttonText=""
          />
        ) : !isNewUser ? (
          <CreditsCard creditSummary={creditSummary} />
        ) : null}
        <LicenseKeyCard />
      </div>

      <BuyPackageSection />
    </div>
  );
}

function PackagesPageSkeleton() {
  return (
    <div className="animate-pulse container-k">
      {/* Breadcrumb */}
      <div className="mb-6 2xl:mb-10">
        <div className="mb-5 flex items-center gap-3 lg:mb-7.5">
          <div className="h-5 w-24 rounded bg-gray-200" />
          <div className="h-4 w-4 rounded bg-gray-200" />
          <div className="h-5 w-20 rounded bg-gray-200" />
        </div>

        {/* Heading */}
        <div className="h-10 w-48 rounded bg-gray-200" />

        {/* Description */}
        <div className="mt-3 space-y-2">
          <div className="h-5 w-96 max-w-full rounded bg-gray-200" />
          <div className="h-5 w-64 rounded bg-gray-200" />
        </div>
      </div>

      {/* Credits & License Cards */}
      <div className="mb-6 grid gap-6 lg:grid-cols-2">
        {/* Credits Card */}
        <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
          <div className="mb-8 flex items-center justify-between">
            <div className="h-7 w-40 rounded bg-gray-200" />

            <div className="flex 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-4 flex items-end justify-between">
            <div className="h-10 w-44 rounded bg-gray-200" />
            <div className="h-5 w-28 rounded bg-gray-200" />
          </div>

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

        {/* License Key Card */}
        <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
          <div className="flex items-center justify-between">
            <div className="h-7 w-40 rounded bg-gray-200" />
            <div className="h-8 w-24 rounded-full bg-gray-200" />
          </div>

          <div className="mt-8 space-y-3">
            <div className="h-5 w-full rounded bg-gray-200" />
            <div className="h-5 w-5/6 rounded bg-gray-200" />
          </div>

          <div className="mt-8 h-12 w-36 rounded-full bg-gray-200" />
        </div>
      </div>

      {/* Buy Package Section */}
      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="mb-8 h-8 w-56 rounded bg-gray-200" />

        <div className="grid gap-6 lg:grid-cols-3">
          {Array.from({ length: 3 }).map((_, index) => (
            <div key={index} className="rounded-2xl border border-gray-200 p-6">
              <div className="mb-6 h-7 w-28 rounded bg-gray-200" />

              <div className="mb-3 h-10 w-24 rounded bg-gray-200" />
              <div className="mb-6 h-5 w-36 rounded bg-gray-200" />

              <div className="space-y-3">
                <div className="h-4 w-full rounded bg-gray-200" />
                <div className="h-4 w-5/6 rounded bg-gray-200" />
                <div className="h-4 w-2/3 rounded bg-gray-200" />
              </div>

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