#!/usr/bin/env node
/**
 * Test mobile navigation on authenticated pages
 */

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

async function testAuthenticatedPages() {
    const baseUrl = 'http://127.0.0.1:5000';
    let browser;

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

        const page = await browser.newPage();
        await page.setViewport({
            width: 430,
            height: 932,
            isMobile: true,
            hasTouch: true
        });

        // Authenticate first
        const authHelper = new AuthHelper(page, baseUrl);
        await authHelper.ensureAuthenticated();
        console.log('✅ Authenticated');

        // Test pages
        const pages = [
            { path: '/', name: 'Research' },
            { path: '/history/', name: 'History' },
            { path: '/news/', name: 'News' },
            { path: '/settings/', name: 'Settings' }
        ];

        for (const pageInfo of pages) {
            console.log(`\nTesting ${pageInfo.name}...`);
            await page.goto(baseUrl + pageInfo.path, {
                waitUntil: 'domcontentloaded',
                timeout: 30000
            });

            // Check for mobile navigation
            const mobileNavInfo = await page.evaluate(() => {
                const oldNav = document.querySelector('.mobile-tab-bar');
                const newNav = document.querySelector('.ldr-mobile-bottom-nav');
                const sidebar = document.querySelector('.ldr-sidebar');

                // Check what's in the DOM
                const allNavElements = document.querySelectorAll('[class*="mobile"]');
                const navClasses = Array.from(allNavElements).map(el => el.className);

                return {
                    hasOldNav: !!oldNav,
                    hasNewNav: !!newNav,
                    sidebarVisible: sidebar ? window.getComputedStyle(sidebar).display !== 'none' : false,
                    url: window.location.href,
                    title: document.title,
                    mobileElements: navClasses,
                    bodyClasses: document.body.className
                };
            });

            console.log('  URL:', mobileNavInfo.url);
            console.log('  Old Nav (.mobile-tab-bar):', mobileNavInfo.hasOldNav ? 'YES' : 'NO');
            console.log('  New Nav (.ldr-mobile-bottom-nav):', mobileNavInfo.hasNewNav ? 'YES' : 'NO');
            console.log('  Sidebar visible:', mobileNavInfo.sidebarVisible ? 'YES' : 'NO');
            console.log('  Body classes:', mobileNavInfo.bodyClasses);
            if (mobileNavInfo.mobileElements.length > 0) {
                console.log('  Mobile elements found:', mobileNavInfo.mobileElements);
            }

            // Take screenshot
            const screenshotPath = `./test-${pageInfo.name.toLowerCase()}-mobile.png`;
            await page.screenshot({ path: screenshotPath });
            console.log('  Screenshot:', screenshotPath);
        }

        console.log('\n✅ Test complete');

    } catch (error) {
        console.error('❌ Test failed:', error);
        process.exit(1);
    } finally {
        if (browser) {
            await browser.close();
        }
    }
}

if (require.main === module) {
    testAuthenticatedPages();
}