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

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

async function login(page) {
  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);
}

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

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

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

  // ==================== GAMES HUB ====================
  console.log('\n=== GAMES HUB ===');
  await page.goto(BASE + '/games', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1500);
  await page.screenshot({ path: path.join(DIR, '01-games-hub-desktop.png') });
  console.log('✓ 01-games-hub-desktop.png');

  // ==================== LUDO ====================
  console.log('\n=== LUDO ===');

  // Ludo local 4P
  await page.goto(BASE + '/ludo-game?mode=local&players=4', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2500);
  await page.screenshot({ path: path.join(DIR, '02-ludo-local-4p.png') });
  console.log('✓ 02-ludo-local-4p.png');

  // Ludo vs bot - roll dice
  await page.goto(BASE + '/ludo-game?mode=bot&bots=1&difficulty=medium', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2500);
  const ludoRoll = await page.$('.ludo-roll-btn, #ludo-roll-btn');
  if (ludoRoll && await ludoRoll.isVisible()) {
    await ludoRoll.click();
    await page.waitForTimeout(1500);
  }
  await page.screenshot({ path: path.join(DIR, '03-ludo-bot-rolled.png') });
  console.log('✓ 03-ludo-bot-rolled.png');

  // Ludo mobile
  await mobile.goto(BASE + '/ludo-game?mode=bot&bots=1&difficulty=easy', { waitUntil: 'networkidle', timeout: 15000 });
  await mobile.waitForTimeout(2500);
  const ludoMRoll = await mobile.$('.ludo-roll-btn, #ludo-roll-btn');
  if (ludoMRoll && await ludoMRoll.isVisible()) {
    await ludoMRoll.click();
    await mobile.waitForTimeout(1500);
  }
  await mobile.screenshot({ path: path.join(DIR, '04-ludo-mobile-bot.png') });
  console.log('✓ 04-ludo-mobile-bot.png');

  // ==================== DOMINO ====================
  console.log('\n=== DOMINO ===');

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

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

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

  // ==================== BACKGAMMON ====================
  console.log('\n=== BACKGAMMON ===');

  // Backgammon bot easy
  await page.goto(BASE + '/backgammon-game?mode=bot&difficulty=easy', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(3000);
  await page.screenshot({ path: path.join(DIR, '08-backgammon-bot-start.png') });
  console.log('✓ 08-backgammon-bot-start.png');

  // Click a white checker and show selection
  const bgClicked = await page.evaluate(() => {
    const pts = document.querySelectorAll('.bg-point');
    for (let p of pts) {
      if (p.querySelector('.bg-checker--white')) {
        p.click();
        return p.dataset.point;
      }
    }
    return null;
  });
  await page.waitForTimeout(600);
  await page.screenshot({ path: path.join(DIR, '09-backgammon-selected.png') });
  console.log('✓ 09-backgammon-selected.png (point ' + bgClicked + ')');

  // Click valid target to make a move
  const moved = await page.evaluate(() => {
    const valid = document.querySelector('.bg-point--valid');
    if (valid) { valid.click(); return valid.dataset.point; }
    return null;
  });
  await page.waitForTimeout(2000);
  await page.screenshot({ path: path.join(DIR, '10-backgammon-moved.png') });
  console.log('✓ 10-backgammon-moved.png (to ' + moved + ')');

  // Backgammon local
  await page.goto(BASE + '/backgammon-game?mode=local', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2500);
  await page.screenshot({ path: path.join(DIR, '11-backgammon-local.png') });
  console.log('✓ 11-backgammon-local.png');

  // Backgammon mobile
  await mobile.goto(BASE + '/backgammon-game?mode=bot&difficulty=medium', { waitUntil: 'networkidle', timeout: 15000 });
  await mobile.waitForTimeout(3000);
  await mobile.screenshot({ path: path.join(DIR, '12-backgammon-mobile.png') });
  console.log('✓ 12-backgammon-mobile.png');

  // ==================== LOBBIES ====================
  console.log('\n=== LOBBIES ===');

  await page.goto(BASE + '/ludo', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1000);
  await page.screenshot({ path: path.join(DIR, '13-ludo-lobby.png') });
  console.log('✓ 13-ludo-lobby.png');

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

  await page.goto(BASE + '/backgammon', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1000);
  await page.screenshot({ path: path.join(DIR, '15-backgammon-lobby.png') });
  console.log('✓ 15-backgammon-lobby.png');

  await browser.close();
  console.log('\n✅ All game screenshots complete!');
})();
