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

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

    console.log('🧪 Testing Toggle Visual State\n');

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

    // Take screenshot of toggles
    console.log('📸 Taking screenshot of toggle controls...');

    // Scroll to top to see header controls
    await page.evaluate(() => window.scrollTo(0, 0));
    await page.waitForTimeout(500);

    // Check if toggles are visible
    const lengthToggleVisible = await page.locator('#lengthToggle').isVisible().catch(() => false);
    const themeToggleVisible = await page.locator('#themeToggle').isVisible().catch(() => false);
    const logoToggleVisible = await page.locator('#logoToggle').isVisible().catch(() => false);

    console.log(`\n📊 Toggle Visibility:`);
    console.log(`   Length toggle: ${lengthToggleVisible ? '✅ Visible' : '❌ Hidden'}`);
    console.log(`   Theme toggle: ${themeToggleVisible ? '✅ Visible' : '❌ Hidden'}`);
    console.log(`   Logo toggle: ${logoToggleVisible ? '✅ Visible' : '❌ Hidden'}`);

    if (!lengthToggleVisible) {
        console.log(`\n⚠️  Desktop toggles are hidden (might be in hamburger menu)`);

        // Try to find hamburger menu
        const hamburgerExists = await page.locator('.hamburger-btn').count();
        console.log(`   Hamburger button exists: ${hamburgerExists > 0 ? '✅ Yes' : '❌ No'}`);

        if (hamburgerExists > 0) {
            console.log(`\n🍔 Opening hamburger menu...`);
            await page.hover('.hamburger-btn');
            await page.waitForTimeout(1000);

            const menuLengthToggle = await page.locator('#lengthToggleMenu').isVisible().catch(() => false);
            console.log(`   Mobile length toggle visible: ${menuLengthToggle ? '✅ Yes' : '❌ No'}`);

            if (menuLengthToggle) {
                console.log(`\n🔄 Testing mobile toggle...`);
                const isChecked = await page.locator('#lengthToggleMenu').isChecked();
                console.log(`   Current state: ${isChecked ? 'Long' : 'Short'}`);

                await page.click('#lengthToggleMenu');
                await page.waitForTimeout(1500);

                const isCheckedAfter = await page.locator('#lengthToggleMenu').isChecked();
                console.log(`   After click: ${isCheckedAfter ? 'Long' : 'Short'}`);
                console.log(`   Toggle changed: ${isChecked !== isCheckedAfter ? '✅ Yes' : '❌ No'}`);
            }
        }
    }

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