import { expect, test } from "@playwright/test";
import { login } from "./hub.ts";

// оболочка с боковой панелью (#69)
test("панель на месте после прокрутки доски до низа", async ({ page }) => {
  await page.setViewportSize({ width: 1600, height: 600 });
  await login(page);
  await expect(page.locator(".board .card[data-key]").first()).toBeVisible();
  const y = await page.evaluate(() => { window.scrollTo(0, document.documentElement.scrollHeight); return window.scrollY; });
  expect(y).toBeGreaterThan(100);
  const side = page.getByRole("complementary", { name: "Панель приложения" });
  await expect(side.getByRole("link", { name: "Задачи" })).toBeInViewport();
  await expect(side.getByRole("button", { name: "Обновить из Jira" })).toBeInViewport();
  expect((await side.boundingBox())!.y).toBe(0);
});

test("свёрнутая панель переживает перезагрузку, доска шире", async ({ page }) => {
  await login(page);
  const wrap = page.locator(".wrap");
  await expect(wrap).toBeVisible();
  const before = (await wrap.boundingBox())!.width;
  await page.getByRole("button", { name: "Свернуть панель" }).click();
  await page.reload();
  await expect(page.getByRole("button", { name: "Развернуть панель", exact: true })).toBeVisible();
  await expect.poll(async () => (await wrap.boundingBox())!.width).toBeGreaterThan(before + 150);
  await page.getByRole("link", { name: "Задачи" }).click();
  await expect(page).toHaveURL(/\/app\/issues\?project=AWPCA$/);
  await page.getByRole("button", { name: "Развернуть панель", exact: true }).click();
  await expect(page.getByRole("button", { name: "Свернуть панель" })).toBeVisible();
});

test("390 px: «Меню» открывает панель, «Задачи» закрывает её и открывает список; без горизонтальной прокрутки", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 800 });
  await login(page);
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
  await page.getByRole("button", { name: "Меню" }).click();
  const side = page.getByRole("complementary", { name: "Панель приложения" });
  await expect(side).toBeVisible();
  await side.getByRole("link", { name: "Задачи" }).click();
  await expect(page).toHaveURL(/\/app\/issues\?project=AWPCA$/);
  await expect(side).toHaveCount(0);
  await expect(page.getByTestId("page-issues")).toBeVisible();
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
});

test("C-1: на средних ширинах страница не шире окна — «Задачи» на 1280, доска на 1000 прокручивается сама", async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 800 });
  await login(page, "/app/issues");
  await expect(page.locator("table.issue-table tbody tr").first()).toBeVisible();
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(1280);
  await page.setViewportSize({ width: 1000, height: 800 });
  await page.getByRole("link", { name: "Доска связей" }).click();
  await expect(page.locator(".board .card[data-key]").first()).toBeVisible();
  await page.getByRole("button", { name: "По датам" }).click();
  await expect(page.locator(".dcol").first()).toBeVisible();
  await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(1000);
  await expect(page.getByRole("button", { name: /Проблемы/ })).toBeInViewport();
  const wrap = page.locator(".wrap");
  expect(await wrap.evaluate((el) => el.scrollWidth > el.clientWidth)).toBe(true);   // доска шире своей рамки — прокрутка внутри
});