const { test, expect } = require('@playwright/test');
const { openClassic } = require('./helpers/classic-fixture');
for (const layout of ['classic', 'glass-stage']) for (const width of [390, 1440]) {
  test(`${layout} settings navigation at ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 900 }); await openClassic(page);
    await page.evaluate(layout => { data.settings.layout = layout; applyAppearance(); view = { type: 'settings' }; render(); }, layout);
    await expect(page.locator('.settings-section-row').first()).toBeVisible();
    await expect(page.locator('#setQuality')).toHaveCount(1);
    if (width === 390) await expect(page.locator('#setQuality')).toBeHidden();
    await page.locator('.settings-search input').fill('default quality');
    await page.locator('.settings-results button').first().click();
    await expect(page.locator('#setQuality')).toBeVisible();
    await page.locator('#setQuality').selectOption('720p');
    expect(await page.evaluate(() => data.settings.quality)).toBe('720p');
    if (width === 390) { await page.goBack(); await expect(page.locator('.settings-overview')).toBeVisible(); await expect(page.locator('#setQuality')).toBeHidden(); }
    await page.locator('.settings-section-row[data-section="appearance"]').click();
    await expect(page.locator('#setTheme')).toBeVisible();
    await page.locator('#setTheme').selectOption('light');
    expect(await page.evaluate(() => data.settings.theme)).toBe('light');
    await expect(page.locator('#setQuality')).toHaveValue('720p');
    expect(await page.evaluate(() => sessionStorage.getItem('ytpSettingsSection'))).toBe('appearance');
    const overflow = await page.locator('.settings-browser').evaluate(el => el.scrollWidth > el.clientWidth + 1); expect(overflow).toBe(false);
  });
}
test('floating lyrics move the real view and restore it on close', async ({ page }) => {
  await page.addInitScript(() => { window.documentPictureInPicture = { requestWindow: async () => window.open('about:blank', 'lyrics-test', 'width=420,height=500') }; });
  await openClassic(page);
  const popupPromise = page.waitForEvent('popup');
  await page.locator('#stageLyricsAuto').evaluate(el => el.nextElementSibling.click());
  const popup = await popupPromise;
  await expect(popup.locator('#stageLyrics')).toBeVisible();
  await expect(popup.getByRole('button', { name: 'Play / Pause', exact: true })).toBeVisible();
  await expect(page.locator('#stageLyrics')).toHaveCount(0);
  await popup.close(); await expect(page.locator('#stageLyrics')).toHaveCount(1);
});