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

// The in-game composition UX after the under-board status strip was removed:
//  - whose turn (or the final result) shows in a thin strip above the score plaques;
//  - the tiles left in the bag ride the exchange control as a badge and repeat at the foot of the
//    move table;
//  - staging a play tints its tiles on the board and shows the orange move-score badge, and the
//    confirm control sits in the rack's fixed 7th slot.
// Mock transport only: the mock has no dictionary (Game.svelte skips the local evaluator under the
// mock mode) and its network evaluator accepts any placement, so a staged tile always reads as legal.

test('in-game UX: turn strip, bag badge + table footer, staged-play highlight and score badge', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: /guest/i }).click();
  await page.getByRole('button', { name: /🎲/ }).click();
  await page.getByRole('button', { name: 'Random player' }).click();
  await page.locator('.variant').first().click();
  await page.getByRole('button', { name: /Start game/i }).click();
  // Attach the opponent deterministically, then it is the player's turn.
  await page.evaluate(() => (window as unknown as { __mock: { joinOpponent(): void } }).__mock.joinOpponent());
  await expect(page.getByText('Robo')).toBeVisible();

  // The old under-board status line is gone; a thin turn strip sits above the plaques instead.
  await expect(page.locator('.turnstrip')).toBeVisible();
  await expect(page.locator('.status')).toHaveCount(0);

  // The bag count rides the exchange control (the first tab) as a badge, and repeats at the foot of
  // the move table, out of the scrolling grid.
  await expect(page.locator('.tab').first().locator('.badge')).toBeVisible();
  await page.locator('.scoreboard').click(); // open the history drawer
  await expect(page.locator('.hbagfoot')).toContainText(/bag/i);
  await page.locator('.scoreboard').click(); // close it again

  // Stage a play: the pending tile reads as legal (green), the orange move-score badge shows on the
  // board, and the confirm control takes the rack's 7th slot.
  await page.locator('.rack .tile').first().click();
  await page.locator('[data-cell]:not(.filled)').nth(112).click(); // centre (row 7, col 7)
  await expect(page.locator('[data-cell].pending.legal')).toHaveCount(1);
  await expect(page.locator('.scorebadge')).toBeVisible();
  await expect(page.locator('.make')).toBeVisible();
});