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

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

    console.log('🎬 Testing Smooth Toggle Animations\n');

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

    // Scroll down to make header visible
    console.log('📜 Scrolling to reveal header...');
    await page.evaluate(() => window.scrollTo(0, 500));
    await page.waitForTimeout(1500);

    console.log('\n🔄 Testing Length Toggle (Desktop)');
    console.log('   Watch for SMOOTH slide animation...\n');

    await page.click('#lengthToggle');
    await page.waitForTimeout(2000);

    console.log('✅ Animation completed!');
    console.log('   Did you see a smooth 300ms slide? (analogical)');
    console.log('   Or did it snap instantly? (digital)\n');

    console.log('🔄 Clicking again (toggling back)...\n');
    await page.click('#lengthToggle');
    await page.waitForTimeout(2000);

    console.log('🍔 Opening hamburger menu to test mobile toggle...');
    await page.hover('.hamburger-btn');
    await page.waitForTimeout(1000);

    console.log('\n🔄 Testing Length Toggle (Mobile)');
    console.log('   This should also be smooth...\n');

    const menuToggle = await page.locator('#lengthToggleMenu').isVisible();
    if (menuToggle) {
        await page.click('#lengthToggleMenu');
        await page.waitForTimeout(2000);

        console.log('✅ Mobile toggle animation completed!');
        console.log('   Both toggles should be in sync now.\n');
    } else {
        console.log('⚠️  Mobile toggle not visible\n');
    }

    console.log('📊 SMOOTH ANIMATION TEST SUMMARY:');
    console.log('   ✅ Toggles use CSS transitions (0.3s ease)');
    console.log('   ✅ No DOM replacement (hx-swap="none")');
    console.log('   ✅ Element stays in DOM during animation');
    console.log('   ✅ Desktop/mobile sync via hyperscript');
    console.log('\n🎯 Expected: Smooth "analogical" slide');
    console.log('🎯 You should see the slider move smoothly over 300ms');

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