const puppeteer = require('puppeteer');
const AuthHelper = require('./auth_helper');

async function debugMobileUI() {
    console.log('🔍 Starting mobile UI debug test...');

    const browser = await puppeteer.launch({
        headless: process.env.HEADLESS === 'true',
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });

    try {
        const page = await browser.newPage();

        // Test mobile viewport
        await page.setViewport({
            width: 375,
            height: 667,
            isMobile: true,
            hasTouch: true
        });

        console.log('📱 Set mobile viewport (375x667)');

        // Authenticate
        console.log('🔐 Authenticating...');
        const auth = new AuthHelper(page);
        await auth.ensureAuthenticated();
        console.log('✅ Authenticated');

        // Test navigation to different pages
        const pages = [
            { url: 'http://127.0.0.1:5000/', name: 'Home' },
            { url: 'http://127.0.0.1:5000/news/', name: 'News' },
            { url: 'http://127.0.0.1:5000/settings/', name: 'Settings' }
        ];

        for (const pageInfo of pages) {
            console.log(`\n📄 Testing ${pageInfo.name}...`);
            await page.goto(pageInfo.url, { waitUntil: 'networkidle2', timeout: 10000 });

            // Check for mobile navigation (correct selector)
            const mobileNav = await page.$('.ldr-mobile-tab-bar');
            const mobileNavVisible = mobileNav ? await mobileNav.evaluate(el => {
                const style = window.getComputedStyle(el);
                return style.display !== 'none' && style.visibility !== 'hidden';
            }) : false;
            console.log(`  Mobile nav bar: ${mobileNavVisible ? '✅ Visible' : '❌ Not visible'}`);

            // Check if page content is visible
            const bodyStyle = await page.evaluate(() => {
                const body = document.body;
                const style = window.getComputedStyle(body);
                const mainContent = document.querySelector('.ldr-main-content');
                const mainStyle = mainContent ? window.getComputedStyle(mainContent) : null;
                return {
                    body: {
                        backgroundColor: style.backgroundColor,
                        color: style.color,
                        display: style.display,
                        visibility: style.visibility
                    },
                    mainContent: mainStyle ? {
                        backgroundColor: mainStyle.backgroundColor,
                        display: mainStyle.display,
                        visibility: mainStyle.visibility,
                        height: mainStyle.height
                    } : null
                };
            });

            console.log(`  Body styles:`, JSON.stringify(bodyStyle));

            // Check for any error messages
            const errors = await page.evaluate(() => {
                const errorElements = document.querySelectorAll('.error, .alert-danger, [class*="error"]');
                return Array.from(errorElements).map(el => el.textContent.trim()).filter(t => t);
            });

            if (errors.length > 0) {
                console.log(`  ⚠️ Errors found:`, errors);
            }

            // Take screenshot for debugging
            const screenshotPath = `./debug-${pageInfo.name.toLowerCase()}-mobile.png`;
            await page.screenshot({ path: screenshotPath, fullPage: true });
            console.log(`  📸 Screenshot saved: ${screenshotPath}`);
        }

        console.log('\n✅ Mobile debug test completed');

    } catch (error) {
        console.error('❌ Error:', error.message);
        throw error;
    } finally {
        await browser.close();
    }
}

debugMobileUI().catch(console.error);
