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

// The language dropdown localizes the visitor-facing chrome live (and resets to
// English on reload — selection is session-only, no persistence). Annotation
// re-rendering is covered by the unit tests (resolveStrings) + the manifest
// invariant test; here we assert the DOM behavior of the dropdown itself.

async function boot(page: Page) {
  await page.goto("/");
  // initLanguage() populates the select during startup (before media preload).
  await expect(page.locator("#lang-select option")).toHaveCount(4);
}

test("language dropdown localizes chrome and resets to English on reload", async ({ page }) => {
  await boot(page);
  const sel = page.locator("#lang-select");

  // English selected by default
  await expect(sel).toHaveValue("en");
  await expect(page.locator('[data-i18n="output.legend"]')).toHaveText("Output");
  await expect(page.locator("html")).toHaveAttribute("lang", "en");

  // switch to Spanish -> chrome changes, <html lang> updates
  await sel.selectOption("es");
  await expect(page.locator('[data-i18n="output.legend"]')).toHaveText("Salida");
  await expect(page.locator("html")).toHaveAttribute("lang", "es");

  // Japanese
  await sel.selectOption("ja");
  await expect(page.locator('[data-i18n="knobs.think"]')).toHaveText("考える");

  // reload returns to English (session-only, no persistence)
  await page.reload();
  await expect(page.locator("#lang-select")).toHaveValue("en");
  await expect(page.locator('[data-i18n="output.legend"]')).toHaveText("Output");
});
