const { chromium } = require('playwright');
const BASE = 'https://el3ab-player.caprover.al-arcade.com';

(async () => {
  const browser = await chromium.launch({ headless: true });
  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, locale: 'ar' });
  const page = await ctx.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));
    }
  });
  await page.waitForTimeout(500);

  await page.goto(BASE + '/ludo-game?mode=local&players=4', { waitUntil: 'networkidle', timeout: 15000 });
  await page.waitForTimeout(2000);

  // Measure the board and all base slots
  const measurements = await page.evaluate(() => {
    const board = document.querySelector('.ludo-board');
    if (!board) return { error: 'no board found' };

    const boardRect = board.getBoundingClientRect();
    const result = {
      board: { left: boardRect.left, top: boardRect.top, width: boardRect.width, height: boardRect.height },
      bases: {}
    };

    // Get each base and its slots
    ['p1', 'p2', 'p3', 'p4'].forEach(player => {
      const base = board.querySelector('.ludo-base--' + player);
      if (!base) return;
      const baseRect = base.getBoundingClientRect();
      const inner = base.querySelector('.ludo-base-inner');
      const innerRect = inner ? inner.getBoundingClientRect() : null;

      const slots = base.querySelectorAll('.ludo-base-slot');
      const slotPositions = [];
      slots.forEach(slot => {
        const slotRect = slot.getBoundingClientRect();
        // Get center of slot relative to board
        const centerX = slotRect.left + slotRect.width / 2 - boardRect.left;
        const centerY = slotRect.top + slotRect.height / 2 - boardRect.top;
        // Convert to percentage of board
        const pctX = (centerX / boardRect.width) * 100;
        const pctY = (centerY / boardRect.height) * 100;
        // Convert to coordinate system: coord = (pct - halfStep) / STEP_LENGTH
        const STEP = 6.66;
        const HALF = 3.33;
        const coordX = (pctX - HALF) / STEP;
        const coordY = (pctY - HALF) / STEP;
        slotPositions.push({
          coordX: Math.round(coordX * 100) / 100,
          coordY: Math.round(coordY * 100) / 100,
          pctX: Math.round(pctX * 100) / 100,
          pctY: Math.round(pctY * 100) / 100
        });
      });

      result.bases[player] = {
        base: {
          left: Math.round((baseRect.left - boardRect.left) / boardRect.width * 10000) / 100,
          top: Math.round((baseRect.top - boardRect.top) / boardRect.height * 10000) / 100,
          width: Math.round(baseRect.width / boardRect.width * 10000) / 100,
          height: Math.round(baseRect.height / boardRect.height * 10000) / 100
        },
        inner: innerRect ? {
          left: Math.round((innerRect.left - boardRect.left) / boardRect.width * 10000) / 100,
          top: Math.round((innerRect.top - boardRect.top) / boardRect.height * 10000) / 100,
          width: Math.round(innerRect.width / boardRect.width * 10000) / 100,
          height: Math.round(innerRect.height / boardRect.height * 10000) / 100
        } : null,
        slots: slotPositions
      };
    });

    return result;
  });

  console.log(JSON.stringify(measurements, null, 2));
  await browser.close();
})();
