import Image from "next/image";
import Button from "../ui/Button";
import { DashboardState } from "../../types/dashboard";
import Link from "next/link";
interface CreditOverviewCardProps {
  dashboardState: DashboardState;
  usedCredits: number;
  totalCredits: number;
  availableCredits: number;
}

export default function CreditOverviewCard({
  dashboardState,
  usedCredits,
  totalCredits,
  availableCredits,
}: CreditOverviewCardProps) {
  const isNewUser = dashboardState === "NEW_USER";
  const percent = totalCredits > 0 ? (usedCredits / totalCredits) * 100 : 0;

  if (isNewUser) {
    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-5">
            <div className="h-20 w-20 rounded-full gradient1 transition-all p-1">
              <span className="rounded-full bg-white flex items-center justify-center h-full w-full">
                <Image
                  src="/images/credits-icon.svg"
                  alt="Credits"
                  width={30}
                  height={30}
                />
              </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>
    );
  }

  return (
    <div className="grid gap-6 md: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 sm:!text-lg"
              >
                Buy More Credits
              </Button>
            
              <Link href="/credit-history" className="h-12.5 w-12.5 rounded-full gradient1 transition-all p-0.5 header-shadow group hover:p-1.5">
                <span className="rounded-full bg-white flex items-center justify-center h-full w-full">
                  <Image
                    src="/images/credits-icon.svg"
                    alt="Credits"
                    width={22}
                    height={22}
                  />
                </span>
              </Link>
            </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">{usedCredits}</span>
              <span className="text-base">/{totalCredits}</span>
            </p>

            <p className="font-body text-base text-heading">
              Available: <b>{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">
              Starter pack
            </h3>

            <span className="rounded-full bg-[#EFE6FD] px-2 leading-5 py-1 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">$10</p>
              <p className="mt-2 font-body text-base text-text">
                100 Credits
              </p>
            </div>

            <Button
              href="/dashboard/packages"
              variant="white"
              buttonClassName="!shadow-none"
              BtnInnerclassName="!py-3.5 !px-5 !text-lg !text-link"
            >
              Buy Again
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}