import { redirect } from "next/navigation";
import { getTopup } from "@/actions/payment";
import CancelTopupButton from "@/components/billing/cancel-topup-button";
import ExpiryCountDown from "@/components/billing/expiry-time-countdown";
import ClientErrorMessage from "@/components/client-error-message";
import TopupToPay from "@/components/topup-to-pay";
import { Button } from "@/components/ui/button";
import { TextShimmer } from "@/components/ui/text-shimmer";
import { cn } from "@/lib/utils";
import { tryCatch } from "@/utils/tryCatch";
export default async function TopupPage({
  params,
}: {
  params: Promise<{ topupId: string }>;
}) {
  const topupId = (await params).topupId;
  const [error, topup] = await tryCatch(getTopup({ id: topupId }));
  if (error) {
    if (error.message === "Invalid token.") redirect("/auth/signin");
    return <ClientErrorMessage message={error.message} />;
  }


  return (
    <div>
      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
        <h3 className="text-sarLinkOrange text-2xl">Topup</h3>
        <div className="flex flex-col gap-4 items-end w-full">
          {!topup.is_expired && (

            <Button
              disabled
              className={cn(
                "rounded-md opacity-100! uppercase font-semibold",
                // topup?.paid
                // ? "text-green-900 bg-green-500/20"
                // : "text-inherit bg-yellow-400",
              )}
            >
              {topup?.paid ? <span>Paid</span> : <TextShimmer>Payment Pending</TextShimmer>}
            </Button>
          )}

          {!topup.paid && (
            topup.is_expired ? (
              <Button
                disabled
                className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
              >
                Topup Expired
              </Button>
            ) : (
              <CancelTopupButton topupId={topupId} />
            )
          )}
        </div>
      </div>
      {!topup.paid && (
        <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
      )}
      <div
        id="user-topup-details"
        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
      >
        <TopupToPay
          disabled={topup.paid || topup.is_expired}
          topup={topup || undefined}
        />
      </div>
    </div>
  );
}