import { test, expect } from '@playwright/test';

const LANDSCAPE_VIEWPORTS = [
  { name: 'small-landscape', width: 1024, height: 600 },
  { name: 'tablet-landscape', width: 1280, height: 800 },
  { name: 'large-landscape', width: 1366, height: 768 },
];

for (const viewport of LANDSCAPE_VIEWPORTS) {
  test(`viewport matrix: ${viewport.name}`, async ({ page }) => {
    await page.setViewportSize({ width: viewport.width, height: viewport.height });
    await page.goto('http://localhost:3000/');

    await page.getByRole('button', { name: 'Neues Spiel starten' }).click();

    // Step 1: ensure keyboard-sized viewport still keeps controls usable.
    await page.getByLabel('Name Spieler 1').fill('Alpha');
    await page.setViewportSize({
      width: viewport.width,
      height: Math.max(360, viewport.height - Math.floor(viewport.height * 0.35)),
    });
    const nextButton = page.getByRole('button', { name: 'Weiter' });
    await nextButton.scrollIntoViewIfNeeded();
    await expect(nextButton).toBeVisible();
    await nextButton.click();

    // Step 2: keep reduced height and verify progression still works.
    await page.getByLabel('Name Spieler 2').fill('Beta');
    await page.getByRole('button', { name: 'Weiter' }).click();
    await page.getByRole('button', { name: 'Überspringen' }).click();

    // Restore full landscape viewport for remaining wizard steps.
    await page.setViewportSize({ width: viewport.width, height: viewport.height });

    await page.getByRole('button', { name: '8-Ball' }).click();
    await page.getByRole('button', { name: 'Weiter' }).click();
    await page.getByRole('button', { name: '5' }).click();
    await page.getByRole('button', { name: 'Weiter' }).click();
    await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
    await page.getByRole('button', { name: 'Weiter' }).click();
    await page.getByRole('button', { name: 'Zuerst: Alpha' }).click();
    await page.getByRole('button', { name: 'Weiter' }).click();

    await expect(page.getByRole('button', { name: /Aktueller Punktestand für Alpha/i })).toBeVisible();
    await expect(page.getByRole('button', { name: /Aktueller Punktestand für Beta/i })).toBeVisible();
  });
}