const { chromium } = require('playwright');
const path = require('path');

const BASE = 'https://el3ab-player.caprover.al-arcade.com';
const DIR = __dirname;

(async () => {
  const browser = await chromium.launch({ headless: true });

  // Desktop context
  const desktopCtx = await browser.newContext({
    viewport: { width: 1440, height: 900 },
    locale: 'ar',
  });
  const page = await desktopCtx.newPage();

  // Login
  await page.goto(BASE + '/login', { waitUntil: 'networkidle', timeout: 15000 });
  await page.evaluate(async () => {
    const res = await fetch('https://safe-supabase-kong.caprover.al-arcade.com/auth/v1/token?grant_type=password', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzM1Njg5NjAwLCJleHAiOjE4OTM0NTYwMDB9.31PF6PvP-pSrvRuQwLFptQoejR0W1A7o53lZhEbnz84'
      },
      body: JSON.stringify({ email: 'uitest@el3ab.com', password: 'UiTest2026!' })
    });
    const data = await res.json();
    if (data.access_token) {
      localStorage.setItem('el3ab_token', data.access_token);
      localStorage.setItem('el3ab_user', JSON.stringify(data.user));
    }
  });
  await page.waitForTimeout(500);

  // 1. Domino Lobby (desktop)
  await page.goto(BASE + '/domino', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1000);
  await page.screenshot({ path: path.join(DIR, 'domino-01-lobby-desktop.png'), fullPage: true });
  console.log('✓ domino-01-lobby-desktop.png');

  // 2. Domino Game - Bot 2P
  await page.goto(BASE + '/domino-game?mode=2p&type=bot&players=2&difficulty=medium', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2000);
  await page.screenshot({ path: path.join(DIR, 'domino-02-game-2p-bot.png') });
  console.log('✓ domino-02-game-2p-bot.png');

  // 3. Domino Game - 4P Teams Bot
  await page.goto(BASE + '/domino-game?mode=4p_teams&type=bot&players=4&difficulty=hard', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2000);
  await page.screenshot({ path: path.join(DIR, 'domino-03-game-4p-teams.png') });
  console.log('✓ domino-03-game-4p-teams.png');

  // 4. Domino Game - Local 2P
  await page.goto(BASE + '/domino-game?mode=2p&type=local&players=2', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1500);
  await page.screenshot({ path: path.join(DIR, 'domino-04-game-local-2p.png') });
  console.log('✓ domino-04-game-local-2p.png');

  // 5. Games Hub showing domino
  await page.goto(BASE + '/games', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1500);
  await page.screenshot({ path: path.join(DIR, 'domino-05-games-hub.png') });
  console.log('✓ domino-05-games-hub.png');

  // Mobile context
  const mobileCtx = await browser.newContext({
    viewport: { width: 390, height: 844 },
    locale: 'ar',
    isMobile: true,
  });
  const mobile = await mobileCtx.newPage();

  await mobile.goto(BASE + '/login', { waitUntil: 'networkidle', timeout: 15000 });
  await mobile.evaluate(async () => {
    const res = await fetch('https://safe-supabase-kong.caprover.al-arcade.com/auth/v1/token?grant_type=password', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzM1Njg5NjAwLCJleHAiOjE4OTM0NTYwMDB9.31PF6PvP-pSrvRuQwLFptQoejR0W1A7o53lZhEbnz84'
      },
      body: JSON.stringify({ email: 'uitest@el3ab.com', password: 'UiTest2026!' })
    });
    const data = await res.json();
    if (data.access_token) {
      localStorage.setItem('el3ab_token', data.access_token);
      localStorage.setItem('el3ab_user', JSON.stringify(data.user));
    }
  });
  await mobile.waitForTimeout(500);

  // 6. Mobile lobby
  await mobile.goto(BASE + '/domino', { waitUntil: 'networkidle', timeout: 15000 });
  await mobile.waitForTimeout(1000);
  await mobile.screenshot({ path: path.join(DIR, 'domino-06-lobby-mobile.png') });
  console.log('✓ domino-06-lobby-mobile.png');

  // 7. Mobile game
  await mobile.goto(BASE + '/domino-game?mode=2p&type=bot&players=2&difficulty=easy', { waitUntil: 'networkidle', timeout: 15000 });
  await mobile.waitForTimeout(2000);
  await mobile.screenshot({ path: path.join(DIR, 'domino-07-game-mobile.png') });
  console.log('✓ domino-07-game-mobile.png');

  // 8. Ludo game (for piece/dice fix reference)
  await page.goto(BASE + '/ludo-game?mode=bot&bots=1&difficulty=easy', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2000);
  await page.screenshot({ path: path.join(DIR, 'domino-08-ludo-reference.png') });
  console.log('✓ domino-08-ludo-reference.png (for piece/dice fix)');

  // 9. Ludo mobile
  await mobile.goto(BASE + '/ludo-game?mode=bot&bots=1&difficulty=easy', { waitUntil: 'networkidle', timeout: 15000 });
  await mobile.waitForTimeout(2000);
  await mobile.screenshot({ path: path.join(DIR, 'domino-09-ludo-mobile-ref.png') });
  console.log('✓ domino-09-ludo-mobile-ref.png');

  await browser.close();
  console.log('\nDone! All screenshots saved.');
})();
