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

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

    console.log('🎬 Final Toggle Test - HTMX Out-of-Band Swaps\n');

    // Monitor network requests
    page.on('response', async (response) => {
        if (response.url().includes('/toggle/')) {
            console.log(`   📡 Server response from: ${response.url()}`);
            const text = await response.text();
            const hasOOB = text.includes('hx-swap-oob="true"');
            console.log(`   ${hasOOB ? '✅' : '❌'} Out-of-band swap: ${hasOOB}`);
        }
    });

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

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

    let desktopChecked = await page.locator('#lengthToggle').isChecked();
    let mobileChecked = await page.locator('#lengthToggleMenu').isChecked();

    console.log(`\n   Desktop: ${desktopChecked}, Mobile: ${mobileChecked}`);
    console.log(`   Sync: ${desktopChecked === mobileChecked ? '✅ YES' : '❌ NO'}\n`);

    // TEST 2: Mobile toggle - but DON'T close menu
    console.log('TEST 2: Open Menu & Click Mobile Toggle (keep menu open)\n');
    const hamburger = page.locator('.hamburger-btn');
    await hamburger.click();
    await page.waitForTimeout(800);

    console.log('   Menu is now open, clicking mobile toggle...');
    const mobileLabel = page.locator('#mobile-length-toggle .icon-toggle');
    await mobileLabel.click();

    // Wait for HTMX to complete
    await page.waitForTimeout(2000);

    // Check states AFTER the swap completes
    desktopChecked = await page.locator('#lengthToggle').isChecked();
    mobileChecked = await page.locator('#lengthToggleMenu').isChecked();

    console.log(`\n   Desktop: ${desktopChecked}, Mobile: ${mobileChecked}`);
    console.log(`   Sync: ${desktopChecked === mobileChecked ? '✅ YES' : '❌ NO'}\n`);

    // TEST 3: Check if elements exist
    const desktopExists = await page.locator('#desktop-length-toggle').count();
    const mobileExists = await page.locator('#mobile-length-toggle').count();

    console.log('📊 ELEMENT CHECK:');
    console.log(`   Desktop toggle exists: ${desktopExists > 0 ? '✅' : '❌'}`);
    console.log(`   Mobile toggle exists: ${mobileExists > 0 ? '✅' : '❌'}`);

    console.log('\n🔍 DIAGNOSIS:');
    if (desktopChecked === mobileChecked) {
        console.log('   ✅ PERFECT! Both toggles are in sync!');
        console.log('   ✅ HTMX out-of-band swaps working correctly!');
        console.log('   ✅ Desktop/mobile sync via server response!');
    } else {
        console.log('   ❌ Out of sync - possible issues:');
        console.log('      1. OOB swap timing problem');
        console.log('      2. Element not found during swap');
        console.log('      3. Hyperscript executing before swap');
    }

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