import { expect, type Page, test } from "@playwright/test";
import { captureScreenshot, completeOnboarding, openUserSettings, rpc, signup } from "./helpers";

const LOOK = "oo1:c=F4A7B9;sp=cat;la=soft;ck=pink;ew=round;hd=chef";

async function useAppearance(page: Page, appearance: "light" | "dark") {
  const settings = await openUserSettings(page);
  await settings.getByTestId(`ui-appearance-${appearance}`).click();
  await expect(page.locator("html")).toHaveAttribute("data-theme", appearance);
  await settings.getByRole("button", { name: "Close user settings" }).click();
  await expect(settings).toBeHidden();
}

test("a bot offers a new look and wears it once accepted", async ({ page }, testInfo) => {
  const stamp = Date.now();
  await signup(page, `look-suggestion-${stamp}@rakazo.test`, "password12", "Look Suggestion");
  await completeOnboarding(page);

  await page.getByPlaceholder(/Message/).fill("Show me a new look.");
  await page.keyboard.press("Enter");

  const card = page.getByTestId("thread-card");
  await expect(card).toBeVisible({ timeout: 60_000 });
  await expect(card).toContainText("New look");
  await expect(card).toContainText("Ready for recipe nights.");
  await expect(card.locator(".rakazo-bot-avatar")).toHaveCount(1);
  const looks = async () =>
    (await rpc<Array<{ color: string }>>(page, "bots/list", {})).map((bot) => bot.color);
  expect(await looks()).not.toContain(LOOK);

  await useAppearance(page, "light");
  await card.scrollIntoViewIfNeeded();
  await captureScreenshot(page, testInfo, "look-suggestion-light");
  await useAppearance(page, "dark");
  await card.scrollIntoViewIfNeeded();
  await captureScreenshot(page, testInfo, "look-suggestion-dark");

  await card.getByRole("button", { name: "Accept" }).click();
  await expect(card.getByTestId("card-suggestion-status")).toContainText("Done", {
    timeout: 60_000,
  });
  await expect.poll(looks, { timeout: 30_000 }).toContain(LOOK);
});