import { expect, test } from "@playwright/test";

import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { paidImageMessageId } from "@e2e/fixtures/test-data";
import {
  clearBrowserState,
  defaultCharacterChatPath,
  dismissChatInterruptions,
  expectInsufficientCreditsDialog,
  expectVipChatSubscriptionUrl,
  signInWithEmailAndOpenChat,
} from "@e2e/fixtures/test-helpers";

const paidImageOverlayUrl = new RegExp(
  `${defaultCharacterChatPath}\\?image=${paidImageMessageId}$`,
);

test.beforeEach(async ({ baseURL, context, page }) => {
  await clearBrowserState(context, page, baseURL);
  await mockCoreApis(page, {
    paidImageInsufficientCreditsFlow: true,
  });
});

test("user sees insufficient credits when unlocking a paid image from fullscreen and can navigate to subscription", async ({
  page,
}) => {
  await signInWithEmailAndOpenChat(page);
  await dismissChatInterruptions(page);

  const paidImageButton = page.getByRole("button", {
    name: "Open image in fullscreen",
  }).last();
  await expect(paidImageButton).toBeVisible({ timeout: 10_000 });

  await paidImageButton.click();
  await expect(page).toHaveURL(paidImageOverlayUrl);

  const lockedImageDialog = page.getByRole("dialog", {
    name: "Locked fullscreen image",
  });
  await expect(lockedImageDialog).toBeVisible();

  const unlockRequestPromise = page.waitForRequest(
    "**/api/chat/unlock-private",
  );
  await lockedImageDialog
    .getByRole("button", { name: "Unlock high-definition large image" })
    .click();

  const unlockRequest = await unlockRequestPromise;
  expect(unlockRequest.method()).toBe("POST");
  expect(unlockRequest.postDataJSON()).toMatchObject({
    messageId: paidImageMessageId,
  });

  const insufficientCreditsDialog = await expectInsufficientCreditsDialog(page);
  await insufficientCreditsDialog
    .getByRole("button", { name: "Top up now" })
    .click();

  await expectVipChatSubscriptionUrl(page);
});