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

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

    console.log('🔍 Mobile Toggle Click Investigation\n');

    // Capture ALL console messages
    page.on('console', msg => {
        console.log(`  [${msg.type().toUpperCase()}]`, msg.text());
    });

    // Capture page errors
    page.on('pageerror', error => {
        console.log(`  ❌ PAGE ERROR: ${error.message}`);
    });

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

    // First click desktop to set state
    console.log('Step 1: Click Desktop (to set up state)\n');
    await page.locator('#desktop-length-toggle .icon-toggle').click();
    await page.waitForTimeout(2000);

    // Open menu
    console.log('\nStep 2: Open Hamburger Menu\n');
    await page.locator('.hamburger-btn').click();
    await page.waitForTimeout(1000);

    // Check if mobile toggle is visible and clickable
    const mobileToggle = page.locator('#mobile-length-toggle');
    const isVisible = await mobileToggle.isVisible();
    console.log(`  Mobile toggle visible: ${isVisible}`);

    const mobileInput = page.locator('#lengthToggleMenu');
    const inputVisible = await mobileInput.isVisible();
    console.log(`  Mobile input visible: ${inputVisible}`);

    // Try clicking directly on the input
    console.log('\nStep 3: Attempting to click mobile toggle label\n');
    try {
        await page.locator('#mobile-length-toggle .icon-toggle').click({timeout: 5000});
        console.log('  ✅ Click executed');
    } catch (e) {
        console.log(`  ❌ Click failed: ${e.message}`);
    }

    await page.waitForTimeout(3000);

    // Final state check
    const finalDesktop = await page.evaluate(() => document.querySelector('#lengthToggle')?.checked);
    const finalMobile = await page.evaluate(() => document.querySelector('#lengthToggleMenu')?.checked);
    console.log(`\nFinal State: Desktop=${finalDesktop}, Mobile=${finalMobile}`);

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