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

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

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

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

  const lockedImageCard = page.getByRole("group", {
    name: "Locked private image",
  }).last();
  await expect(lockedImageCard).toBeVisible({ timeout: 10_000 });
  await expect(lockedImageCard.locator("img")).toHaveCount(0);

  const unlockRequestPromise = page.waitForRequest(
    "**/api/chat/unlock-private",
  );
  await lockedImageCard
    .getByRole("button", { name: "Unlock private 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);
});
