import { test, expect } from '@playwright/test';
import { skipPlayer3 } from '../helpers/wizard';

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();

    await page.getByRole('button', { name: 'Name für Spieler 1 eingeben' }).click();
    await page.setViewportSize({
      width: viewport.width,
      height: Math.max(360, viewport.height - Math.floor(viewport.height * 0.35)),
    });
    const player1Dialog = page.getByRole('dialog');
    const player1Input = page.locator('#player1-input');
    await expect(player1Input).toBeFocused();
    await player1Input.fill('Alpha');
    const confirmButton = player1Dialog.getByRole('button', { name: 'Übernehmen' });
    await confirmButton.scrollIntoViewIfNeeded();
    await expect(confirmButton).toBeVisible();
    await confirmButton.click();
    await expect(player1Dialog).toBeHidden();

    await page.getByRole('button', { name: 'Name für Spieler 2 eingeben' }).click();
    const player2Dialog = page.getByRole('dialog');
    const player2Input = page.locator('#player2-input');
    await expect(player2Input).toBeFocused();
    await player2Input.fill('Beta');
    await player2Dialog.getByRole('button', { name: 'Übernehmen' }).click();
    await expect(player2Dialog).toBeHidden();
    await skipPlayer3(page);

    await page.setViewportSize({ width: viewport.width, height: viewport.height });

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

    await expect(
      page.getByRole('button', { name: 'Punkt für Alpha. Aktueller Stand: 0' }),
    ).toBeVisible();
    await expect(
      page.getByRole('button', { name: 'Punkt für Beta. Aktueller Stand: 0' }),
    ).toBeVisible();
  });
}