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

import { PaymentLaunchDialogs } from "../payment-launch-dialogs";

const hiddenLaunch = {
  handleEzpayCancel: vi.fn(),
  handleEzpayConfirm: vi.fn(),
  handleQrisClose: vi.fn(),
  handleStripeClose: vi.fn(),
  handleStripeConfirmed: vi.fn(),
  isConfirmingEzpay: false,
  qrisErrorMessage: null,
  qrisPayment: null,
  qrisStatus: null,
  shouldShowEzpayConfirmDialog: false,
  shouldShowQrisDialog: false,
  shouldShowStripeDialog: false,
  stripeClientSecret: null,
};

describe("PaymentLaunchDialogs", () => {
  it("renders nothing when neither payment dialog is active", () => {
    expect(
      renderToStaticMarkup(
        <PaymentLaunchDialogs
          currentOrderId={null}
          externalCheckoutAnalyticsKey="payment.external_checkout"
          ezpayDescription="Continue to payment."
          launch={hiddenLaunch}
        />,
      ),
    ).toBe("");
  });

  it("renders the shared Ezpay confirmation content", () => {
    const html = renderToStaticMarkup(
      <PaymentLaunchDialogs
        currentOrderId="order-123"
        externalCheckoutAnalyticsKey="tip.external_checkout"
        ezpayDescription="Your coffee order is ready."
        launch={{
          ...hiddenLaunch,
          isConfirmingEzpay: true,
          shouldShowEzpayConfirmDialog: true,
        }}
      />,
    );

    expect(html).toContain('role="alertdialog"');
    expect(html).toContain("Continue to payment?");
    expect(html).toContain("Your coffee order is ready.");
    expect(html).toContain("Order No. order-123");
    expect(html).toContain('data-analytics-key="tip.external_checkout"');
    expect(html).toContain("Opening...");
  });

  it("renders an accessible QRIS dialog with display cents and order status", () => {
    const html = renderToStaticMarkup(
      <PaymentLaunchDialogs
        currentOrderId="order-id-qris"
        externalCheckoutAnalyticsKey="tip.external_checkout"
        ezpayDescription="Scan QRIS to finish the payment."
        launch={{
          ...hiddenLaunch,
          qrisPayment: {
            qrData: "00020101021226670016COM.NOBUBANK.WWW",
            orderId: "order-id-qris",
            amountCents: 5_000_000,
            currency: "IDR",
          },
          qrisStatus: "pending",
          shouldShowQrisDialog: true,
        }}
      />,
    );

    expect(html).toContain('role="dialog"');
    expect(html).toContain("Scan to pay with QRIS");
    expect(html).toContain("QRIS payment QR code");
    expect(html).toContain("Order No. order-id-qris");
    expect(html).toContain("Rp");
    expect(html).toContain("50.000");
    expect(html).toContain("Waiting for payment");
  });

  it("shows QRIS failure state and handles empty QR data safely", () => {
    const html = renderToStaticMarkup(
      <PaymentLaunchDialogs
        currentOrderId="order-id-qris"
        externalCheckoutAnalyticsKey="payment.external_checkout"
        ezpayDescription="Scan QRIS to finish the payment."
        launch={{
          ...hiddenLaunch,
          qrisErrorMessage: "Payment failed or was cancelled.",
          qrisPayment: {
            qrData: "",
            orderId: "order-id-qris",
            amountCents: 5_000_000,
            currency: "IDR",
          },
          qrisStatus: "failed",
          shouldShowQrisDialog: true,
        }}
      />,
    );

    expect(html).toContain("QRIS data is unavailable");
    expect(html).toContain("Payment failed or was cancelled.");
    expect(html).toContain("Close");
  });
});