"use client";

export interface SubscriptionPaymentSuccessDialogProps {
  open: boolean;
  subscriptionType: "vip" | "topup";
  onClose: () => void;
}

export function SubscriptionPaymentSuccessDialog({
  open,
  subscriptionType,
  onClose,
}: SubscriptionPaymentSuccessDialogProps) {
  if (!open) return null;

  const content =
    subscriptionType === "topup"
      ? "Your coins have been added to your wallet successfully."
      : "Your VIP membership has been activated successfully.";

  return (
    <div
      className="fixed inset-0 z-80 flex items-center justify-center bg-[rgba(0,0,0,0.45)] pb-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-bottom,0))] pl-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-left,0))] pr-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-right,0))] pt-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-top,0))]"
      role="alertdialog"
      aria-modal="true"
      aria-labelledby="subscription-payment-success-title"
    >
      <div className="w-full max-w-(--dialog-max-width,380px) rounded-(--responsive-card-radius,32px) bg-(--color-page-background,#ffffff) px-(--responsive-card-padding,20px) pb-(--responsive-card-padding,20px) pt-(--responsive-card-padding-lg,28px) text-center shadow-[0_18px_40px_rgba(0,0,0,0.16)]">
        <div
          className="mb-(--page-section-gap,16px) inline-flex size-[clamp(52px,10.741vw,58px)] items-center justify-center rounded-full bg-[linear-gradient(135deg,#ff67e0_0%,#f657a0_100%)] text-[clamp(28px,5.926vw,32px)] font-bold leading-none text-white shadow-[0_8px_18px_rgba(247,89,168,0.28)]"
          aria-hidden="true"
        >
          ✓
        </div>
        <h2
          id="subscription-payment-success-title"
          className="m-0 mb-[clamp(7px,1.481vw,8px)] text-(length:--responsive-page-title,22px) font-bold leading-[1.2] text-text-foreground"
        >
          Payment successful
        </h2>
        <p className="m-0 text-(length:--responsive-body,14px) leading-normal text-[#393939]">
          {content}
        </p>
        <button
          type="button"
          className="mt-(--page-section-gap-lg,22px) min-h-(--responsive-control-height,48px) w-full cursor-pointer rounded-full border-0 bg-[linear-gradient(269deg,#ff67e0_0%,rgba(254,104,224,0.5)_20%,rgba(252,105,223,0.79)_66%,#f96ade_100%),linear-gradient(#f657a0,#f657a0)] text-(length:--responsive-body,16px) font-bold text-white shadow-[0_5px_7px_rgba(247,89,168,0.31)] active:translate-y-px"
          onClick={onClose}
        >
          OK
        </button>
      </div>
    </div>
  );
}
