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

for (const viewport of [
  { width: 1440, height: 850 },
  { width: 390, height: 650 },
]) {
  test(`assistant opens with welcome and composer in view at ${viewport.width}`, async ({
    page,
  }) => {
    await page.setViewportSize(viewport);
    await page.route("**/api/v1/ai/conversations", (route) =>
      route.fulfill({ json: [] }),
    );
    await page.route("**/api/v1/account", async (route) => {
      const response = await route.fetch();
      await route.fulfill({
        json: { ...(await response.json()), theme: "dark" },
      });
    });
    if (viewport.width === 1440)
      await page.route("**/api/v1/ai/settings", (route) =>
        route.fulfill({ json: { enabled: true, ready: true } }),
      );
    await page.goto("/");
    await page
      .getByLabel("密码", { exact: true })
      .fill("browser-test-password");
    await page.getByRole("button", { name: "进入工作空间" }).click();
    await page.evaluate(() => document.body.setAttribute("theme-mode", "dark"));
    await page.getByRole("button", { name: "切换研究助手" }).click();
    const chat = page.getByRole("complementary", { name: "AI 研究助手" });

    await expect(
      chat.getByRole("heading", { name: "从当前研究出发" }),
    ).toBeInViewport();
    await expect(
      chat.getByRole("button", { name: "发送", exact: true }),
    ).toBeInViewport();
    await expect(page.locator("body")).toHaveAttribute("theme-mode", "dark");
    await page.screenshot({
      path: `../output/playwright/ai-layout-${viewport.width}.png`,
    });
    const start = chat.getByRole("button", { name: "开始新会话", exact: true });
    expect(
      await start.evaluate((button) => {
        const outer = button.getBoundingClientRect();
        return [...button.querySelectorAll("span")].every((span) => {
          const inner = span.getBoundingClientRect();
          return inner.top >= outer.top && inner.bottom <= outer.bottom;
        });
      }),
    ).toBe(true);
    await expect(
      chat.locator(".research-ai-prompts, .research-ai-hint"),
    ).toHaveCount(0);
    expect(
      await chat.evaluate((el) => el.scrollHeight <= el.clientHeight),
    ).toBe(true);
    await chat.getByRole("button", { name: "收起研究助手" }).click();
    await page.getByRole("button", { name: "切换研究助手" }).click();
    await expect(
      chat.getByRole("heading", { name: "从当前研究出发" }),
    ).toBeInViewport();
    await page.evaluate(() =>
      document.body.setAttribute("theme-mode", "light"),
    );
    await page.screenshot({
      path: `../output/playwright/ai-layout-${viewport.width}-light.png`,
    });
  });
}