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 });
  const context = await browser.newContext({ viewport: { width: 390, height: 844 }, locale: 'ar' });
  const page = await context.newPage();

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

  // 1. Profile (stat grid fix)
  await page.goto(BASE + '/profile', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2000);
  await page.screenshot({ path: path.join(DIR, 'final-profile.png'), fullPage: true });
  console.log('1. profile');

  // 2. Games (new icons + subtitle)
  await page.goto(BASE + '/games', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1500);
  await page.screenshot({ path: path.join(DIR, 'final-games.png'), fullPage: true });
  console.log('2. games');

  // 3. Ludo game (spacing fix)
  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, 'final-ludo-game.png'), fullPage: true });
  console.log('3. ludo game');

  // 4. Chess lobby (scroll test)
  await page.goto(BASE + '/play', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1500);
  await page.screenshot({ path: path.join(DIR, 'final-chess-lobby.png'), fullPage: true });
  console.log('4. chess lobby');

  // 5. Settings (scroll below nav)
  await page.goto(BASE + '/settings', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(1500);
  await page.screenshot({ path: path.join(DIR, 'final-settings.png'), fullPage: true });
  console.log('5. settings');

  // Check for JS errors
  const errors = [];
  page.on('console', msg => { if (msg.type() === 'error') errors.push(msg.text()); });
  await page.goto(BASE + '/', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2000);
  
  // Test sound system loads
  const soundTest = await page.evaluate(() => {
    return typeof App.playSound === 'function' && typeof App.vibrate === 'function';
  });
  console.log('Sound system:', soundTest ? 'OK' : 'FAIL');
  
  if (errors.length) console.log('ERRORS:', errors);
  else console.log('No errors!');

  await browser.close();
  console.log('Done!');
})();
