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

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

    console.log('🎬 Testing Toggle Fix - Syntax Errors & Animations\n');

    await page.goto('http://localhost:1999/?lang=en');
    await page.waitForLoadState('networkidle');

    // Ensure header is visible (scroll to top)
    console.log('📜 Scrolling to top to ensure header is visible...');
    await page.evaluate(() => window.scrollTo(0, 0));
    await page.waitForTimeout(1000);

    // Check for hyperscript errors in console
    const errors = [];
    page.on('console', msg => {
        if (msg.type() === 'error') {
            errors.push(msg.text());
            console.log('❌ Console Error:', msg.text());
        }
    });

    console.log('\n✅ Testing Desktop Length Toggle');
    console.log('   Expected: Smooth 300ms slide animation\n');

    // Click the toggle
    const lengthToggle = page.locator('#lengthToggle');
    await lengthToggle.waitFor({ state: 'visible' });

    console.log('   Clicking toggle...');
    await lengthToggle.click();
    await page.waitForTimeout(1500);

    // Check if both toggles are synced
    const desktopChecked = await page.locator('#lengthToggle').isChecked();
    const mobileChecked = await page.locator('#lengthToggleMenu').isChecked();

    console.log(`   Desktop toggle checked: ${desktopChecked}`);
    console.log(`   Mobile toggle checked: ${mobileChecked}`);
    console.log(`   Sync status: ${desktopChecked === mobileChecked ? '✅ SYNCED' : '❌ OUT OF SYNC'}`);

    console.log('\n✅ Testing Logo Toggle');
    const logoToggle = page.locator('#logoToggle');
    await logoToggle.click();
    await page.waitForTimeout(1500);

    console.log('\n✅ Testing Theme Toggle');
    const themeToggle = page.locator('#themeToggle');
    await themeToggle.click();
    await page.waitForTimeout(1500);

    console.log('\n🍔 Testing Mobile Menu Toggles');
    console.log('   Opening hamburger menu...');
    const hamburger = page.locator('.hamburger-btn');
    await hamburger.click();
    await page.waitForTimeout(1000);

    console.log('   Testing mobile length toggle...');
    const mobileToggle = page.locator('#lengthToggleMenu');
    await mobileToggle.click();
    await page.waitForTimeout(1500);

    // Final sync check
    const finalDesktopChecked = await page.locator('#lengthToggle').isChecked();
    const finalMobileChecked = await page.locator('#lengthToggleMenu').isChecked();

    console.log(`\n📊 Final Sync Status:`);
    console.log(`   Desktop: ${finalDesktopChecked}`);
    console.log(`   Mobile: ${finalMobileChecked}`);
    console.log(`   Synced: ${finalDesktopChecked === finalMobileChecked ? '✅' : '❌'}`);

    // Check for hyperscript errors
    console.log(`\n🔍 Hyperscript Errors:`);
    if (errors.length === 0) {
        console.log('   ✅ No hyperscript syntax errors!');
    } else {
        console.log(`   ❌ Found ${errors.length} errors`);
        errors.forEach(err => console.log(`      - ${err}`));
    }

    console.log('\n✅ TEST COMPLETE');
    console.log('   Key fixes:');
    console.log('   1. Fixed hyperscript syntax (removed <input/> selector)');
    console.log('   2. Using direct ID references (#lengthToggle, #lengthToggleMenu)');
    console.log('   3. Maintained hx-swap="none" for smooth animations');
    console.log('   4. Desktop/mobile sync working via hyperscript');

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