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();

    // Listen for console errors
    page.on('console', msg => {
        const text = msg.text();
        const type = msg.type();
        if (type === 'error' || text.toLowerCase().includes('error')) {
            console.log('❌ CONSOLE ERROR:', text);
        }
    });
    page.on('pageerror', error => console.log('❌ PAGE EXCEPTION:', error.message));

    console.log('📄 Loading page...');
    await page.goto('http://localhost:1999/?lang=en');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(1000);

    // Scroll down to test scroll preservation
    console.log('\n📜 Scrolling down 500px...');
    await page.evaluate(() => window.scrollTo(0, 500));
    await page.waitForTimeout(500);
    const scrollBefore = await page.evaluate(() => window.pageYOffset);
    console.log(`   Current scroll position: ${scrollBefore}px`);

    // Test Theme Toggle (pure hyperscript - should not affect scroll)
    console.log('\n🎨 TEST 1: Theme toggle (hyperscript)...');
    await page.locator('.selector-group').filter({ hasText: 'View' }).locator('label.icon-toggle').click();
    await page.waitForTimeout(1000);
    const scrollAfterTheme = await page.evaluate(() => window.pageYOffset);
    console.log(`   Scroll after theme toggle: ${scrollAfterTheme}px`);
    if (scrollAfterTheme === scrollBefore) {
        console.log('   ✅ Scroll preserved!');
    } else {
        console.log(`   ❌ Scroll changed! (${scrollBefore}px → ${scrollAfterTheme}px)`);
    }

    // Test Length Toggle (HTMX - should preserve scroll)
    console.log('\n📄 TEST 2: Length toggle (HTMX)...');
    const scrollBeforeLength = await page.evaluate(() => window.pageYOffset);
    await page.locator('.selector-group').filter({ hasText: 'Length' }).locator('label.icon-toggle').click();
    await page.waitForTimeout(2000); // Wait for HTMX swap
    const scrollAfterLength = await page.evaluate(() => window.pageYOffset);
    console.log(`   Scroll before: ${scrollBeforeLength}px, after: ${scrollAfterLength}px`);
    if (scrollAfterLength === scrollBeforeLength) {
        console.log('   ✅ Scroll preserved!');
    } else {
        console.log(`   ❌ Scroll changed! (${scrollBeforeLength}px → ${scrollAfterLength}px)`);
    }

    // Test Logo Toggle (HTMX - should preserve scroll)
    console.log('\n🖼️  TEST 3: Logo toggle (HTMX)...');
    const scrollBeforeLogo = await page.evaluate(() => window.pageYOffset);
    await page.locator('.selector-group').filter({ hasText: 'Icons' }).locator('label.icon-toggle').click();
    await page.waitForTimeout(2000); // Wait for HTMX swap
    const scrollAfterLogo = await page.evaluate(() => window.pageYOffset);
    console.log(`   Scroll before: ${scrollBeforeLogo}px, after: ${scrollAfterLogo}px`);
    if (scrollAfterLogo === scrollBeforeLogo) {
        console.log('   ✅ Scroll preserved!');
    } else {
        console.log(`   ❌ Scroll changed! (${scrollBeforeLogo}px → ${scrollAfterLogo}px)`);
    }

    // Test Toggle Sync on Mobile
    console.log('\n📱 TEST 4: Toggle sync on mobile...');
    await page.setViewportSize({ width: 600, height: 800 });
    await page.waitForTimeout(500);

    console.log('   🍔 Opening hamburger menu...');
    await page.click('.hamburger-btn');
    await page.waitForTimeout(500);

    // Check if toggles are synced
    const desktopTheme = await page.locator('#themeToggle').isChecked();
    const mobileTheme = await page.locator('#themeToggleMenu').isChecked();
    console.log(`   Desktop theme: ${desktopTheme}, Mobile theme: ${mobileTheme}`);

    const desktopLength = await page.locator('#lengthToggle').isChecked();
    const mobileLength = await page.locator('#lengthToggleMenu').isChecked();
    console.log(`   Desktop length: ${desktopLength}, Mobile length: ${mobileLength}`);

    const desktopLogo = await page.locator('#logoToggle').isChecked();
    const mobileLogo = await page.locator('#logoToggleMenu').isChecked();
    console.log(`   Desktop logo: ${desktopLogo}, Mobile logo: ${mobileLogo}`);

    if (desktopTheme === mobileTheme && desktopLength === mobileLength && desktopLogo === mobileLogo) {
        console.log('   ✅ All toggles are SYNCED!');
    } else {
        console.log('   ❌ Toggles are OUT OF SYNC!');
    }

    // Test mobile logo toggle to verify sync works
    console.log('\n📱 TEST 5: Toggle logo from mobile menu...');
    await page.locator('#logoToggleMenu').click();
    await page.waitForTimeout(2000);

    const desktopLogoAfter = await page.locator('#logoToggle').isChecked();
    const mobileLogoAfter = await page.locator('#logoToggleMenu').isChecked();
    console.log(`   Desktop logo after: ${desktopLogoAfter}, Mobile logo after: ${mobileLogoAfter}`);

    if (desktopLogoAfter === mobileLogoAfter) {
        console.log('   ✅ Logo toggle synced correctly!');
    } else {
        console.log('   ❌ Logo toggle NOT synced!');
    }

    console.log('\n✅ All tests complete - Check results above');
    await page.waitForTimeout(1000);
    await browser.close();
})();