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

(async () => {
    const browser = await chromium.launch({ headless: false, slowMo: 400 });
    const context = await browser.newContext({
        viewport: { width: 1920, height: 1080 } // Desktop - controls visible > 900px
    });
    const page = await context.newPage();

    // Listen for console errors
    page.on('console', msg => {
        const text = msg.text();
        const type = msg.type();
        if (type === 'error' || text.toLowerCase().includes('error')) {
            console.log('❌ CONSOLE ERROR:', text);
        }
    });
    page.on('pageerror', error => console.log('❌ PAGE EXCEPTION:', error.message));

    console.log('📄 Loading page (desktop 1920px - controls visible)...');
    await page.goto('http://localhost:1999/?lang=en');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(1000);

    console.log('\n🖱️  TEST 1: Click desktop theme toggle...');
    await page.locator('.selector-group').filter({ hasText: 'View' }).locator('label.icon-toggle').click();
    await page.waitForTimeout(2000);
    console.log('✅ Desktop toggle complete - No errors!');

    console.log('\n🖱️  TEST 2: Click desktop theme toggle again (toggle back)...');
    await page.locator('.selector-group').filter({ hasText: 'View' }).locator('label.icon-toggle').click();
    await page.waitForTimeout(2000);
    console.log('✅ Desktop toggle back complete - No errors!');

    console.log('\n📱 TEST 3: Resize to mobile and test menu sync...');
    await page.setViewportSize({ width: 600, height: 800 });
    await page.waitForTimeout(500);

    console.log('🍔 Opening hamburger menu...');
    await page.click('.hamburger-btn');
    await page.waitForTimeout(500);

    console.log('🔍 Checking mobile toggle state...');
    const mobileChecked = await page.locator('#themeToggleMenu').isChecked();
    const expectedState = false; // Should be default (not clean)
    console.log(`  Mobile toggle checked: ${mobileChecked} (expected: ${expectedState})`);

    if (mobileChecked === expectedState) {
        console.log('  ✅ Toggles are SYNCED!');
    } else {
        console.log('  ❌ Toggles are OUT OF SYNC!');
    }

    console.log('\n✅ All tests complete - Check for errors above');
    await page.waitForTimeout(1000);
    await browser.close();
})();