// Rôle : vérifie la réservation hybride, le redimensionnement et le mode mobile du drawer toolbox.
import { test, expect } from "@playwright/test";

async function openDrawer(page) {
  const trigger = page.getByRole("button", { name: "Afficher la toolbox", exact: true });
  await expect(trigger).toBeVisible();
  await trigger.click();
  await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toHaveAttribute("aria-pressed", "true");
  const drawer = page.locator("#toolbox-drawer");
  await expect(drawer.locator(".drawer-panel")).toBeVisible();
  return drawer;
}

async function resizeDrawer(page, deltaX) {
  const handle = page.locator(".drawer-resize-handle");
  const bounds = await handle.boundingBox();
  await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
  await page.mouse.down();
  await page.mouse.move(bounds.x + bounds.width / 2 + deltaX, bounds.y + bounds.height / 2);
  await page.mouse.up();
}

test("drawer reserves 700px while additional width overlays the page", async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 900 });
  await page.goto("/#/games/mhwilds/monsters");

  const drawer = await openDrawer(page);
  const panel = drawer.locator(".drawer-panel");
  const shell = page.locator(".app-shell");
  const contentShell = page.locator(".content-shell");
  const main = page.locator(".content-shell > main");
  const sidebar = page.locator(".sidebar");
  await expect(shell).toHaveClass(/toolbox-drawer-open/);
  await expect(sidebar).toHaveAttribute("data-variant", "compact");
  await expect(sidebar).toHaveCSS("width", "72px");
  await expect(drawer.locator(".drawer-backdrop")).toHaveCount(0);

  const contentBounds = await contentShell.boundingBox();
  const initialPanelBounds = await panel.boundingBox();
  const initialMainBounds = await main.boundingBox();
  const topbarBounds = await page.locator(".topbar").boundingBox();
  expect(initialPanelBounds.width).toBeCloseTo(700, 0);
  expect(initialPanelBounds.x).toBeCloseTo(contentBounds.x + contentBounds.width - 700, 0);
  expect(topbarBounds.x + topbarBounds.width).toBeCloseTo(1280, 0);

  const search = page.locator(".nds-filter-search input").first();
  await search.fill("rath");
  await expect(search).toHaveValue("rath");
  await expect(panel).toBeVisible();

  await resizeDrawer(page, -100);
  await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(800, 0);
  const expandedPanelBounds = await panel.boundingBox();
  const expandedMainBounds = await main.boundingBox();
  expect(expandedPanelBounds.x).toBeCloseTo(initialPanelBounds.x - 100, 0);
  expect(expandedMainBounds.x).toBeCloseTo(initialMainBounds.x, 0);
  expect(expandedMainBounds.width).toBeCloseTo(initialMainBounds.width, 0);
  expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(1280);

  await resizeDrawer(page, 300);
  await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(700, 0);

  await resizeDrawer(page, -100);
  await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(800, 0);
  await drawer.getByRole("button", { name: "Fermer", exact: true }).click();
  await expect(drawer).toHaveCount(0);
  await expect(page.getByRole("button", { name: "Afficher la toolbox", exact: true })).toHaveAttribute("aria-pressed", "false");
  await expect(sidebar).not.toHaveAttribute("data-variant");
  await expect(sidebar).toHaveCSS("width", "248px");
  const reopenedDrawer = await openDrawer(page);
  await expect.poll(async () => (await reopenedDrawer.locator(".drawer-panel").boundingBox()).width).toBeCloseTo(700, 0);
});

test("drawer becomes a non-resizable full-width overlay below 700px", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 900 });
  await page.goto("/#/games/mhwilds/monsters");

  const drawer = await openDrawer(page);
  const panel = drawer.locator(".drawer-panel");
  const bounds = await panel.boundingBox();
  expect(bounds.x).toBeCloseTo(0, 0);
  expect(bounds.width).toBeCloseTo(390, 0);
  await expect(drawer.locator(".drawer-resize-handle")).toHaveCSS("display", "none");
  expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
});