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

async function testMobileMenu() {
    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext({
        viewport: { width: 375, height: 667 }
    });
    const page = await context.newPage();
    
    try {
        console.log('🔍 Testing Mobile Menu Specifically...');
        
        // Login first
        await page.goto('http://localhost:3001/login');
        await page.waitForLoadState('networkidle');
        
        await page.fill('input[type="email"]', 'tmartinez@gmail.com');
        await page.fill('input[type="password"]', 'Skittles@420');
        await page.click('button[type="submit"]');
        
        await page.waitForURL('**/dashboard', { timeout: 10000 });
        await page.waitForLoadState('networkidle');
        
        // Switch to mobile viewport
        await page.setViewportSize({ width: 375, height: 667 });
        await page.waitForTimeout(500);
        
        console.log('📱 Mobile viewport set - looking for mobile menu...');
        
        // Look specifically for the mobile menu button
        const mobileMenuSelectors = [
            '#mobile-menu-btn',
            'button#mobile-menu-btn',
            '[id="mobile-menu-btn"]',
            '.md\\:hidden button', // Escaped CSS selector for md:hidden
            'nav button[class*="md:hidden"]'
        ];
        
        let mobileMenuFound = false;
        let workingSelector = null;
        
        for (const selector of mobileMenuSelectors) {
            try {
                const element = await page.$(selector);
                if (element) {
                    const isVisible = await element.isVisible();
                    console.log(`✅ Found element with selector: ${selector}, visible: ${isVisible}`);
                    
                    if (isVisible) {
                        mobileMenuFound = true;
                        workingSelector = selector;
                        break;
                    }
                }
            } catch (e) {
                console.log(`❌ Selector failed: ${selector} - ${e.message}`);
            }
        }
        
        if (mobileMenuFound) {
            console.log(`🎉 Mobile menu button found with selector: ${workingSelector}`);
            
            // Take screenshot before clicking
            await page.screenshot({ path: 'mobile-menu-before-click.png', fullPage: true });
            
            // Click the mobile menu button
            await page.click(workingSelector);
            await page.waitForTimeout(500);
            
            // Take screenshot after clicking
            await page.screenshot({ path: 'mobile-menu-after-click.png', fullPage: true });
            
            // Check if mobile menu is now visible
            const mobileMenu = await page.$('#mobile-menu');
            if (mobileMenu) {
                const isMenuVisible = await mobileMenu.isVisible();
                console.log(`📋 Mobile menu visibility after click: ${isMenuVisible}`);
            }
            
            console.log('✅ Mobile menu test completed successfully!');
        } else {
            console.log('❌ Mobile menu button not found or not visible');
            
            // List all buttons to debug
            console.log('🔍 All buttons found on page:');
            const allButtons = await page.$$('button');
            for (let i = 0; i < allButtons.length; i++) {
                const button = allButtons[i];
                const text = await button.textContent();
                const classes = await button.getAttribute('class');
                const id = await button.getAttribute('id');
                const isVisible = await button.isVisible();
                console.log(`Button ${i}: id="${id}", classes="${classes}", text="${text}", visible=${isVisible}`);
            }
        }
        
    } catch (error) {
        console.error('❌ Test error:', error);
    } finally {
        await browser.close();
    }
}

testMobileMenu().catch(console.error);