import { expect, test } from "../support/browser/strict-browser-test.ts";

test("switches the shell locale and keeps pseudo-locale copy within compact layout", async ({
  page,
}) => {
  await page.setViewportSize({ width: 320, height: 720 });
  await page.goto("/");

  const locale = page.getByRole("combobox", { name: "언어" });
  await locale.selectOption("en-US");
  await expect(page.locator("html")).toHaveAttribute("lang", "en-US");
  await expect(page.locator("html")).toHaveAttribute("dir", "ltr");
  await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();

  await page.getByRole("combobox", { name: "Language" }).selectOption("en-XA");
  await expect(page.locator("html")).toHaveAttribute("lang", "en-XA");
  const dimensions = await page.evaluate(() => ({
    clientWidth: document.documentElement.clientWidth,
    scrollWidth: document.documentElement.scrollWidth,
  }));
  expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);
  await expect(page.getByRole("button", { name: /Ménú/ })).toBeVisible();
});

test("applies RTL to the shell and modal navigation without changing action semantics", async ({
  page,
}) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto("/");
  await page.getByRole("combobox", { name: "언어" }).selectOption("ar-EG");

  await expect(page.locator("html")).toHaveAttribute("lang", "ar-EG");
  await expect(page.locator("html")).toHaveAttribute("dir", "rtl");
  const trigger = page.getByRole("button", { name: "Menu" });
  await trigger.click();
  await expect(page.getByRole("dialog", { name: "Menu" })).toBeVisible();
  await expect(page.getByRole("navigation", { name: "Primary navigation" }))
    .toHaveCount(1);
  await page.keyboard.press("Escape");
  await expect(trigger).toBeFocused();
});