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

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

    console.log('🔍 Debugging Toggle Sync Issue\n');

    // Capture ALL console messages
    page.on('console', msg => {
        const type = msg.type();
        const text = msg.text();
        if (type === 'log') {
            console.log('  📝', text);
        } else if (type === 'error') {
            console.log('  ❌', text);
        }
    });

    await page.goto('http://localhost:1999/?lang=en');
    await page.waitForLoadState('networkidle');
    await page.evaluate(() => window.scrollTo(0, 0));
    await page.waitForTimeout(500);

    // Add debug logging to the page
    await page.evaluate(() => {
        console.log('🔧 Setting up debug listeners...');

        const desktopToggle = document.querySelector('#lengthToggle');
        const mobileToggle = document.querySelector('#lengthToggleMenu');

        desktopToggle.addEventListener('change', (e) => {
            console.log(`Desktop changed: ${e.target.checked}`);
        }, true);

        mobileToggle.addEventListener('change', (e) => {
            console.log(`Mobile changed: ${e.target.checked}`);
        }, true);
    });

    console.log('\n📱 Step 1: Click Desktop Toggle');
    const desktopLabel = page.locator('#desktop-length-toggle .icon-toggle');
    await desktopLabel.click();
    await page.waitForTimeout(1500);

    let desktopState = await page.locator('#lengthToggle').isChecked();
    let mobileState = await page.locator('#lengthToggleMenu').isChecked();
    console.log(`Result: Desktop=${desktopState}, Mobile=${mobileState}`);

    console.log('\n🍔 Step 2: Open Menu');
    const hamburger = page.locator('.hamburger-btn');
    await hamburger.click();
    await page.waitForTimeout(500);

    console.log('\n📱 Step 3: Click Mobile Toggle');
    const mobileLabel = page.locator('#mobile-length-toggle .icon-toggle');
    await mobileLabel.click();
    await page.waitForTimeout(1500);

    desktopState = await page.locator('#lengthToggle').isChecked();
    mobileState = await page.locator('#lengthToggleMenu').isChecked();
    console.log(`Result: Desktop=${desktopState}, Mobile=${mobileState}`);

    // Final check
    console.log('\n📊 Final State Check:');
    const finalDesktop = await page.evaluate(() => document.querySelector('#lengthToggle').checked);
    const finalMobile = await page.evaluate(() => document.querySelector('#lengthToggleMenu').checked);
    console.log(`   Desktop (via evaluate): ${finalDesktop}`);
    console.log(`   Mobile (via evaluate): ${finalMobile}`);
    console.log(`   Match: ${finalDesktop === finalMobile ? '✅' : '❌'}`);

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