import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";

import { stripePaymentDialogStyles } from "@/app/_components/payment/stripe-payment-dialog.styles";

import { SubscriptionCtaButton } from "../subscription-cta-button";
import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
import { SubscriptionCoinsOfferSection } from "../subscription-coins-offer-section";
import { SubscriptionVipOfferSection } from "../subscription-vip-offer-section";

describe("subscription Tailwind components", () => {
  it("renders SubscriptionCtaButton with loading state", () => {
    const html = renderToStaticMarkup(
      <SubscriptionCtaButton isLoading>Pay now</SubscriptionCtaButton>,
    );

    expect(html).toContain("min-h-[clamp(48px,9.63vw,52px)]");
    expect(html).toContain("bg-[linear-gradient(269deg");
    expect(html).toContain("animate-spin");
    expect(html).toContain("disabled");
    expect(html).toContain("Pay now");
  });

  it("renders SubscriptionPaymentSuccessDialog with topup content", () => {
    expect(
      renderToStaticMarkup(
        <SubscriptionPaymentSuccessDialog
          open={false}
          subscriptionType="vip"
          onClose={() => undefined}
        />,
      ),
    ).toBe("");

    const html = renderToStaticMarkup(
      <SubscriptionPaymentSuccessDialog
        open
        subscriptionType="topup"
        onClose={() => undefined}
      />,
    );

    expect(html).toContain('role="alertdialog"');
    expect(html).toContain("z-80");
    expect(html).toContain("Payment successful");
    expect(html).toContain("Your coins have been added");
    expect(html).toContain("bg-[linear-gradient(135deg,#ff67e0_0%,#f657a0_100%)]");
    expect(html).toContain("OK");
  });

  it("keeps Stripe dialog viewport and panel utilities", () => {
    expect(stripePaymentDialogStyles.overlay).toContain("fixed inset-0");
    expect(stripePaymentDialogStyles.dialog).toContain(
      "max-w-(--dialog-wide-max-width,420px)",
    );
    expect(stripePaymentDialogStyles.dialog).toContain("overflow-y-auto");
    expect(stripePaymentDialogStyles.dialog).toContain("overscroll-contain");
    expect(stripePaymentDialogStyles.primary).toContain(
      "bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)",
    );
  });

  it("renders most popular badges for VIP and coin plans", () => {
    const vipHtml = renderToStaticMarkup(
      <SubscriptionVipOfferSection
        plans={[
          {
            id: "vip_monthly",
            title: "Monthly",
            price: "9.99",
            currency: "usd",
            originalPrice: "19.99",
            mostPopular: true,
            isFirstRechargeOffer: true,
            firstRechargeDiscountPercent: 50,
          },
        ]}
        selectedPlanId="vip_monthly"
        onSelectPlan={() => undefined}
      />,
    );
    const coinsHtml = renderToStaticMarkup(
      <SubscriptionCoinsOfferSection
        plans={[
          {
            id: "coin_1000",
            coins: 1000,
            price: "9.99",
            currency: "US$",
            mostPopular: true,
          },
        ]}
        selectedPlanId={null}
        onSelectPlan={() => undefined}
      />,
    );

    expect(vipHtml).toContain("Most Popular");
    expect(vipHtml).toContain("50% OFF");
    expect(coinsHtml).toContain("Most Popular");
  });
});