import { expect, test } from './fixtures';

// The playable-slice smoke against the mock transport: guest login -> lobby shows the
// seeded active game -> open it -> the board renders committed tiles -> place a rack
// tile (tap) and see the score preview.
test('guest reaches a board and previews a placement', async ({ page }) => {
  await page.goto('/');

  await page.getByRole('button', { name: /guest/i }).click();

  await expect(page.getByText('Your turn')).toBeVisible();
  const activeRow = page.getByRole('button', { name: /Ann/ });
  await expect(activeRow).toBeVisible();
  await activeRow.click();

  // Board renders, including a committed tile from the seeded HELLO play.
  await expect(page.locator('[data-cell]').first()).toBeVisible();
  await expect(page.locator('[data-cell] .letter', { hasText: 'H' }).first()).toBeVisible();

  // Tap a rack tile, then an empty board cell -> a pending tile + score preview.
  const rackTile = page.locator('.rack .tile').first();
  await rackTile.click();
  await page.locator('[data-cell]:not(.filled)').nth(30).click();
  await expect(page.locator('[data-cell].pending')).toHaveCount(1);
  // The score preview appears where the hints count used to be.
  await expect(page.locator('.scores')).toContainText(/\d/);

  // The contextual MakeMove control (✅) appears once a tile is pending.
  await expect(page.locator('.make')).toBeVisible();
});

// The SPA pins the document so iOS/WKWebView cannot rubber-band the whole page on a vertical
// drag (the elastic bounce that fought the board's swipe-to-open-history). The native bounce
// itself is not reproducible in Playwright, so we assert the CSS contract that suppresses it.
test('the app pins the document so the page cannot rubber-band', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('button', { name: /guest/i })).toBeVisible();

  const lock = await page.evaluate(() => ({
    shell: document.documentElement.classList.contains('app-shell'),
    htmlOverflow: getComputedStyle(document.documentElement).overflowY,
    bodyPosition: getComputedStyle(document.body).position,
  }));
  expect(lock.shell).toBe(true);
  expect(lock.htmlOverflow).toBe('hidden');
  expect(lock.bodyPosition).toBe('fixed');
});