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

import { SubscriptionCtaButton } from "../subscription-cta-button";
import { SubscriptionPaymentMethod } from "../subscription-payment-method";
import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
import { StripePaymentDialog } from "../stripe-payment-dialog";

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("renders SubscriptionPaymentMethod with default ordering and selection", () => {
    const html = renderToStaticMarkup(
      <SubscriptionPaymentMethod
        value="ezpay"
        defaultChannel="ezpay"
        caption="GCash by default"
        onChange={() => undefined}
      />,
    );

    expect(html).toContain('aria-labelledby="payment-method-title"');
    expect(html).toContain("Payment Method");
    expect(html).toContain("GCash by default");
    expect(html.indexOf('aria-label="GCash"')).toBeLessThan(
      html.indexOf('aria-label="Stripe"'),
    );
    const selectedButton = html.match(
      /<button[^>]*aria-pressed="true"[^>]*>/,
    )?.[0];
    expect(selectedButton).toBeDefined();
    expect(selectedButton).toContain(
      'data-analytics-key="subscription.payment_method"',
    );
    expect(selectedButton).toContain("border-[#f657a0]");
    expect(selectedButton).not.toContain("border-[rgba(246,87,160,0.18)]");
    expect(selectedButton).toContain("bg-[#fff4f9]");
    expect(selectedButton).not.toContain("bg-white");
    expect(selectedButton).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
    expect(selectedButton).toContain("-translate-y-0.5");
    expect(html).toContain("/images/subscription/gcash-logo.svg");
  });

  it("renders StripePaymentDialog fallback with Tailwind dialog utilities", () => {
    const html = renderToStaticMarkup(
      <StripePaymentDialog
        clientSecret="client-secret"
        onClose={() => undefined}
      />,
    );

    expect(html).toContain('role="alertdialog"');
    expect(html).toContain("fixed inset-0");
    expect(html).toContain("max-w-(--dialog-wide-max-width,420px)");
    expect(html).toContain("Payment unavailable");
    expect(html).toContain("bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)");
  });
});