// Rôle : vérifie les variantes horizontales compactes et avancées des filtres de jeux.
import { test, expect } from "@playwright/test";

for (const width of [1920, 900]) {
  test(`MHW compact filters keep accessible tooltips at ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 900 });
    await page.goto("/#/games/mhwilds/monsters");
    const filters = page.locator('.nds-filter-panel[data-variant="horizontal-compact"]');
    await expect(filters).toBeVisible();
    const options = filters.locator(".nds-filter-option");
    await expect(options).toHaveCount(5);
    const optionWidths = await options.evaluateAll((elements) => elements.map((element) => element.getBoundingClientRect().width));
    if (width > 1040) expect(Math.max(...optionWidths) - Math.min(...optionWidths)).toBeGreaterThan(1);
    else expect(Math.max(...optionWidths) - Math.min(...optionWidths)).toBeLessThan(1);
    const first = options.first();
    await expect(first).toHaveAttribute("aria-label", /.+/);
    await first.hover();
    await expect(page.getByRole("tooltip")).toBeVisible();
    const label = first.locator(".nds-filter-option-label");
    await expect(label).toHaveCSS("position", width <= 1040 ? "absolute" : "static");
    await first.click();
    await expect(first).toHaveAttribute("aria-pressed", "true");
    const activeBadge = page.locator(".nds-active-filter").first();
    await expect(activeBadge).toBeVisible();
    const activeBar = page.locator(".nds-active-filters");
    await expect(activeBar).toHaveCSS("border-top-style", "solid");
    await expect(activeBar).toHaveCSS("border-top-color", "rgba(246, 196, 83, 0.3)");
    await expect(activeBar).toHaveCSS("padding-top", "4px");
    await expect(activeBar).toHaveCSS("margin-bottom", "-6px");
    await expect(activeBar.locator("xpath=..")).toHaveClass(/nds-filter-panel/);
    await expect(activeBar.locator("xpath=..")).toHaveCSS("row-gap", "10px");
    const panelBox = await filters.boundingBox();
    const activeBarBox = await activeBar.boundingBox();
    expect(activeBarBox.x).toBeCloseTo(panelBox.x + 1, 0);
    expect(activeBarBox.x + activeBarBox.width).toBeCloseTo(panelBox.x + panelBox.width - 1, 0);
    expect((await activeBar.boundingBox()).height).toBeLessThanOrEqual(30);
    await activeBadge.click();
    await expect(first).toHaveAttribute("aria-pressed", "false");
    await expect(page.locator(".game-filters")).toHaveCSS("position", width <= 760 ? "static" : "sticky");
    await expect(page.locator(".game-filters")).toHaveCSS("top", width <= 760 ? "auto" : "68px");
    expect((await filters.locator(".nds-filter-search").boundingBox())?.width).toBeLessThanOrEqual(260);
    expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth <= globalThis.innerWidth)).toBe(true);
  });
}

test("Diablo advanced categories keep text visible and retain focus on Escape", async ({ page }) => {
  await page.goto("/#/games/diablo4/affixes");
  const filters = page.locator('.nds-filter-panel[data-variant="horizontal-menu"]');
  const trigger = filters.getByRole("button", { name: /^Catégories/ });
  await expect(trigger).toHaveAttribute("aria-expanded", "false");
  expect(await trigger.locator("span").first().evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true);
  await trigger.click();
  const menu = page.getByRole("dialog", { name: /^Catégories/ });
  await expect(menu).toBeVisible();
  await expect(menu.getByText("Correspondance", { exact: true })).toBeVisible();
  await expect(menu.getByRole("radio", { name: "Et", exact: true })).toHaveAttribute("aria-checked", "true");
  await expect(filters.locator(":scope > .nds-filter-group > .nds-filter-logic")).toHaveCount(0);
  await expect(menu.locator(".nds-filter-logic")).toHaveCSS("margin-bottom", "12px");
  await expect(menu.locator(".nds-filter-menu-options")).toHaveCSS("overflow-y", "visible");
  await expect(filters).toHaveCSS("overflow", "visible");
  const filtersBox = await filters.boundingBox();
  const menuBox = await menu.boundingBox();
  expect(filtersBox).not.toBeNull();
  expect(menuBox).not.toBeNull();
  expect(menuBox.y + menuBox.height).toBeGreaterThan(filtersBox.y + filtersBox.height);
  await expect(menu.getByRole("checkbox")).toHaveCount(8);
  await expect(menu.getByText("Offensif", { exact: true })).toBeVisible();
  await expect(menu.getByText("Mobilité", { exact: true })).toBeVisible();
  await menu.getByRole("checkbox", { name: "Offensif", exact: true }).check();
  await expect(trigger.locator(".nds-filter-count")).toHaveText("1");
  await expect(page.getByRole("button", { name: "Retirer le filtre Catégories : Offensif", exact: true })).toBeVisible();
  await page.keyboard.press("Escape");
  await expect(trigger).toHaveAttribute("aria-expanded", "false");
  await expect(trigger).toBeFocused();
});