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('🔍 HTMX Timing & State Analysis\n');

    // Intercept and log ALL console messages
    page.on('console', msg => {
        const text = msg.text();
        if (text.includes('HTMX') || text.includes('swap') || text.includes('Toggle')) {
            console.log(`  🔧 ${text}`);
        }
    });

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

    // Inject logging into the page
    await page.evaluate(() => {
        const desktop = document.querySelector('#lengthToggle');
        const mobile = document.querySelector('#lengthToggleMenu');

        // Log all HTMX events
        document.body.addEventListener('htmx:beforeRequest', (e) => {
            const target = e.detail.elt;
            const id = target.id;
            const checked = target.checked;
            console.log(`HTMX beforeRequest: #${id} checked=${checked}`);
        });

        document.body.addEventListener('htmx:afterSwap', (e) => {
            console.log(`HTMX afterSwap completed`);
            console.log(`  Desktop: #lengthToggle checked=${document.querySelector('#lengthToggle')?.checked}`);
            console.log(`  Mobile: #lengthToggleMenu checked=${document.querySelector('#lengthToggleMenu')?.checked}`);
        });

        document.body.addEventListener('htmx:oobAfterSwap', (e) => {
            console.log(`HTMX oobAfterSwap: ${e.detail.target?.id}`);
        });
    });

    // TEST SEQUENCE
    console.log('▶ Step 1: Click Desktop Toggle\n');
    await page.locator('#desktop-length-toggle .icon-toggle').click();
    await page.waitForTimeout(2000);

    let desktopState = await page.evaluate(() => document.querySelector('#lengthToggle').checked);
    let mobileState = await page.evaluate(() => document.querySelector('#lengthToggleMenu').checked);
    console.log(`\nResult: Desktop=${desktopState}, Mobile=${mobileState}, Sync=${desktopState === mobileState ? '✅' : '❌'}\n`);

    console.log('▶ Step 2: Open Menu\n');
    await page.locator('.hamburger-btn').click();
    await page.waitForTimeout(1000);

    console.log('▶ Step 3: Click Mobile Toggle\n');
    await page.locator('#mobile-length-toggle .icon-toggle').click();
    await page.waitForTimeout(2500);

    desktopState = await page.evaluate(() => document.querySelector('#lengthToggle').checked);
    mobileState = await page.evaluate(() => document.querySelector('#lengthToggleMenu').checked);
    console.log(`\nResult: Desktop=${desktopState}, Mobile=${mobileState}, Sync=${desktopState === mobileState ? '✅' : '❌'}\n`);

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