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

function seedAuthStorage(page: import("@playwright/test").Page) {
  return page.addInitScript(() => {
    localStorage.setItem("token", "test-token");
    localStorage.setItem("userId", "1");
    localStorage.setItem("role", "admin");
    localStorage.setItem("username", "new-user");
  });
}

async function mockConfig(page: import("@playwright/test").Page) {
  await page.route("**/config", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify({
        maxFileSizeMB: 20,
        maxImageDimension: 800,
        imageQuality: 85,
      }),
    });
  });
}

test("new users with no households see create and join actions instead of a loading dead-end", async ({ page }) => {
  await seedAuthStorage(page);
  await mockConfig(page);

  await page.route("**/households", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify([]),
    });
  });

  await page.goto("/");

  await expect(page.getByRole("button", { name: "Create or Join Household" })).toBeVisible();
  await expect(page.getByRole("heading", { name: "No household yet" })).toBeVisible();
  await expect(page.getByRole("button", { name: "Create Household" })).toBeVisible();
  await expect(page.getByRole("button", { name: "Join Household" })).toBeVisible();

  await page.getByRole("button", { name: "Join Household" }).click();
  await expect(page.getByLabel("Invite Code or Link")).toBeVisible();
  await page.getByRole("button", { name: "Close household dialog" }).click();

  await page.getByRole("button", { name: "Create Household" }).click();
  await expect(page.getByLabel("Household Name")).toBeVisible();
  await page.getByRole("button", { name: "Close household dialog" }).click();

  await page.goto("/manage");

  await expect(page.getByRole("heading", { name: "Manage" })).toBeVisible();
  await expect(page.getByRole("heading", { name: "No household yet" })).toBeVisible();
  await expect(page.getByRole("button", { name: "Create Household" })).toBeVisible();
  await expect(page.getByRole("button", { name: "Join Household" })).toBeVisible();
});