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

test.describe("desktop", () => {
  test.use({ viewport: { width: 1440, height: 900 } });

  test("reload during onboarding restores Oo look and step", async ({ page }) => {
    const stamp = Date.now();
    await signup(page, `onboard-reload-${stamp}@rakazo.test`, "password12", "Reload");
    await page.waitForURL(/\/onboarding/, { timeout: 20_000 });
    await page.getByRole("button", { name: /^(Continue|Weiter)$/i }).click();
    await expect(page.getByTestId("onboarding-name-step")).toBeVisible();
    await page.getByTestId("onboarding-oo-name-input").fill("Nova");
    await page.reload();
    await expect(page.getByTestId("onboarding-name-step")).toBeVisible();
    await expect(page.getByTestId("onboarding-oo-name-input")).toHaveValue("Nova");
    await expect(page.locator('[data-onboarding-step="name"]')).toBeVisible();
  });
});

test.describe("mobile", () => {
  test.use({
    hasTouch: true,
    isMobile: true,
    viewport: { width: 390, height: 844 },
  });

  test("reload during look step keeps category progress", async ({ page }) => {
    const stamp = Date.now();
    await signup(page, `onboard-reload-m-${stamp}@rakazo.test`, "password12", "Mobile");
    await page.waitForURL(/\/onboarding/, { timeout: 20_000 });
    await expect(page.locator('[data-onboarding-step="emoji"]')).toBeVisible();
    await page.reload();
    await expect(page.locator('[data-onboarding-step="emoji"]')).toBeVisible();
    await expect(
      page.getByRole("heading", { name: /Design your Oo|Gestalte dein Oo/i }),
    ).toBeVisible();
  });
});