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

import { mockCoreApis } from "../../fixtures/api-mocks";
import { paidImageMessageId } from "../../fixtures/test-data";

test.beforeEach(async ({ baseURL, context, page }) => {
  await context.clearCookies();

  const client = await context.newCDPSession(page);
  const origins = new Set([
    new URL(baseURL ?? "http://127.0.0.1:3000").origin,
    "http://127.0.0.1:3000",
    "http://localhost:3000",
  ]);
  for (const origin of origins) {
    await client
      .send("Storage.clearDataForOrigin", {
        origin,
        storageTypes: "all",
      })
      .catch(() => {});
  }

  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);

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

  await paidImageButton.click();
  await expect(page).toHaveURL(new RegExp(`/chat/image/${paidImageMessageId}$`));

  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 = page.getByRole("dialog", {
    name: "Not enough credits",
  });
  await expect(insufficientCreditsDialog).toBeVisible();
  await expect(insufficientCreditsDialog.getByText("Balance")).toBeVisible();
  await expect(insufficientCreditsDialog.getByText("Required")).toBeVisible();
  await expect(insufficientCreditsDialog.getByText("Still needed")).toBeVisible();

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

  await expect(page).toHaveURL(/\/subscription\?type=vip&returnTo=chat$/);
});

async function signInWithEmailAndOpenChat(
  page: import("@playwright/test").Page,
) {
  await page.goto("/auth");

  await page.getByRole("button", { name: /Other Sign In Options/i }).click();
  await expect(
    page.getByRole("dialog", { name: /Other sign-in options/i }),
  ).toBeVisible();

  await page.getByRole("button", { name: "Email Sign In" }).click();
  await expect(page.getByPlaceholder("Email")).toHaveValue(
    "chanwillian0@gmail.com",
  );
  await expect(page.getByPlaceholder("Password")).toHaveValue("12345678");

  await page.getByRole("button", { name: "Login" }).click();
  await expect(page).toHaveURL(/\/chat$/);
}