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", "persistent-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("selected household stays active after refreshing on settings and home pages", async ({ page }) => {
  await seedAuthStorage(page);
  await mockConfig(page);

  const households = [
    { id: 1, name: "Alpha Home", role: "owner" },
    { id: 2, name: "Bravo Home", role: "admin" },
  ];

  const storesByHousehold = {
    1: [{ id: 101, name: "Costco", is_default: true }],
    2: [{ id: 201, name: "Trader Joe's", is_default: true }],
  };

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

  await page.route("**/stores/household/*", async (route) => {
    const householdId = Number(route.request().url().split("/").pop());
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify(
        storesByHousehold[householdId as keyof typeof storesByHousehold] ?? []
      ),
    });
  });

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

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

  await page.route("**/households/*/members", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify([{ id: 1, username: "persistent-user", role: "owner" }]),
    });
  });

  await page.goto("/");

  await expect(page.getByRole("button", { name: "Alpha Home" })).toBeVisible();

  await page.getByRole("button", { name: "Alpha Home" }).click();
  await page.getByRole("button", { name: "Bravo Home" }).click();

  await expect(page.getByRole("button", { name: "Bravo Home" })).toBeVisible();
  await expect.poll(() => page.evaluate(() => localStorage.getItem("activeHouseholdId"))).toBe("2");

  await page.goto("/settings");
  await expect(page.getByRole("button", { name: "Bravo Home" })).toBeVisible();

  await page.reload();
  await expect(page.getByRole("button", { name: "Bravo Home" })).toBeVisible();
  await expect.poll(() => page.evaluate(() => localStorage.getItem("activeHouseholdId"))).toBe("2");

  await page.goto("/");
  await expect(page.getByRole("button", { name: "Bravo Home" })).toBeVisible();
  await expect(page.getByRole("button", { name: "Trader Joe's" })).toBeVisible();
});