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

(async () => {
    const browser = await chromium.launch({ headless: false, slowMo: 800 });
    const context = await browser.newContext({
        viewport: { width: 1920, height: 1080 }
    });
    const page = await context.newPage();

    // Capture console logs
    page.on('console', msg => console.log('BROWSER:', msg.text()));

    // Capture network requests
    page.on('response', response => {
        if (response.url().includes('switch-language')) {
            console.log(`\n📡 NETWORK: ${response.url()}`);
            console.log(`   Status: ${response.status()}`);
        }
    });

    console.log('📄 Loading page...\n');
    await page.goto('http://localhost:1999/?lang=en');
    await page.waitForLoadState('networkidle');

    console.log('\n🌍 Clicking Spanish button...\n');
    await page.click('button[aria-label="Español"]');
    await page.waitForTimeout(2000);

    // Check what actually happened
    const htmlAfter = await page.content();
    console.log('\n📊 Checking results:');
    console.log(`   Spanish button has 'active': ${htmlAfter.includes('selector-btn active')}`);
    console.log(`   Content has Spanish text: ${htmlAfter.includes('Competencias Técnicas')}`);

    await page.waitForTimeout(2000);
    await browser.close();
})();