/**
 * Comprehensive Mobile Navigation Test - All Pages
 * Captures screenshots of every page with the new mobile navigation
 */

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

// Test devices
const DEVICES = {
    'iPhone_14_Pro_Max': {
        width: 430,
        height: 932,
        deviceScaleFactor: 3,
        isMobile: true,
        hasTouch: true,
        userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15'
    },
    'iPhone_SE': {
        width: 375,
        height: 667,
        deviceScaleFactor: 2,
        isMobile: true,
        hasTouch: true
    },
    'iPad_Mini': {
        width: 768,
        height: 1024,
        deviceScaleFactor: 2,
        isMobile: true,
        hasTouch: true
    }
};

// All pages to test
const PAGES_TO_TEST = [
    // Auth pages (no login required)
    { path: '/auth/login', name: 'Login', requiresAuth: false },
    { path: '/auth/register', name: 'Register', requiresAuth: false },

    // Main pages (login required)
    { path: '/', name: 'Research_Home', requiresAuth: true },
    { path: '/history/', name: 'History', requiresAuth: true },
    { path: '/news/', name: 'News', requiresAuth: true },
    { path: '/subscriptions/', name: 'Subscriptions', requiresAuth: true },
    { path: '/benchmark/', name: 'Benchmark', requiresAuth: true },
    { path: '/benchmark/results/', name: 'Benchmark_Results', requiresAuth: true },
    { path: '/metrics/', name: 'Metrics', requiresAuth: true },
    { path: '/settings/', name: 'Settings', requiresAuth: true },
];

async function testAllPages() {
    const baseUrl = process.env.TEST_BASE_URL || 'http://127.0.0.1:5000';
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
    const screenshotDir = path.join(__dirname, 'screenshots', 'mobile-nav-complete', timestamp);

    console.log('🚀 Comprehensive Mobile Navigation Test - All Pages');
    console.log('=' .repeat(60));
    console.log(`📁 Screenshots will be saved to:`);
    console.log(`   ${screenshotDir}`);
    console.log('=' .repeat(60));

    // Create screenshot directory
    await fs.mkdir(screenshotDir, { recursive: true });

    let browser;
    const results = {
        total: 0,
        success: 0,
        failed: 0,
        screenshots: []
    };

    try {
        // Check if server is running
        console.log('\n🔍 Checking server status...');
        try {
            const testFetch = await fetch(baseUrl);
            console.log('✅ Server is running\n');
        } catch (error) {
            console.error('❌ Server is not running at', baseUrl);
            console.error('   Please start the server and try again');
            return;
        }

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

        // Test each device
        for (const [deviceName, viewport] of Object.entries(DEVICES)) {
            console.log(`\n📱 Testing ${deviceName} (${viewport.width}x${viewport.height})`);
            console.log('═'.repeat(50));

            const deviceDir = path.join(screenshotDir, deviceName);
            await fs.mkdir(deviceDir, { recursive: true });

            const page = await browser.newPage();
            await page.setViewport(viewport);

            const authHelper = new AuthHelper(page, baseUrl);
            let isAuthenticated = false;

            try {
                // Test unauthenticated pages first
                for (const pageInfo of PAGES_TO_TEST.filter(p => !p.requiresAuth)) {
                    results.total++;
                    console.log(`  📄 ${pageInfo.name}...`);

                    try {
                        await page.goto(baseUrl + pageInfo.path, {
                            waitUntil: 'domcontentloaded',
                            timeout: 30000
                        });

                        // Wait for any animations
                        await new Promise(resolve => setTimeout(resolve, 1000));

                        // Capture page info
                        const pageAnalysis = await page.evaluate(() => {
                            const getMobileNavInfo = () => {
                                const nav = document.querySelector('.ldr-mobile-bottom-nav');
                                const sheet = document.querySelector('.ldr-mobile-sheet-menu');
                                const tabBar = document.querySelector('.mobile-tab-bar');
                                const sidebar = document.querySelector('.ldr-sidebar');

                                return {
                                    hasMobileNav: !!nav,
                                    navVisible: nav ? window.getComputedStyle(nav).display !== 'none' : false,
                                    hasSheet: !!sheet,
                                    hasOldTabBar: !!tabBar,
                                    sidebarHidden: sidebar ?
                                        window.getComputedStyle(sidebar).display === 'none' ||
                                        window.getComputedStyle(sidebar).transform.includes('translateX') : true,
                                    bodyClass: document.body.className
                                };
                            };

                            return {
                                title: document.title,
                                url: window.location.href,
                                viewport: {
                                    width: window.innerWidth,
                                    height: window.innerHeight
                                },
                                mobileNav: getMobileNavInfo()
                            };
                        });

                        // Take screenshot
                        const screenshotPath = path.join(deviceDir, `${pageInfo.name}.png`);
                        await page.screenshot({
                            path: screenshotPath,
                            fullPage: false
                        });

                        console.log(`    ✅ Screenshot saved`);
                        console.log(`    📊 Mobile nav: ${pageAnalysis.mobileNav.hasMobileNav ? 'Yes' : 'No'}, ` +
                                   `Visible: ${pageAnalysis.mobileNav.navVisible ? 'Yes' : 'No'}, ` +
                                   `Sidebar hidden: ${pageAnalysis.mobileNav.sidebarHidden ? 'Yes' : 'No'}`);

                        results.success++;
                        results.screenshots.push({
                            device: deviceName,
                            page: pageInfo.name,
                            path: screenshotPath,
                            analysis: pageAnalysis
                        });

                    } catch (error) {
                        console.log(`    ❌ Failed: ${error.message}`);
                        results.failed++;
                    }
                }

                // Now authenticate and test protected pages
                console.log(`  🔐 Authenticating...`);
                await authHelper.ensureAuthenticated();
                isAuthenticated = true;
                console.log(`  ✅ Authenticated`);

                // Test authenticated pages
                for (const pageInfo of PAGES_TO_TEST.filter(p => p.requiresAuth)) {
                    results.total++;
                    console.log(`  📄 ${pageInfo.name}...`);

                    try {
                        await page.goto(baseUrl + pageInfo.path, {
                            waitUntil: 'domcontentloaded',
                            timeout: 30000
                        });

                        // Wait for any animations
                        await new Promise(resolve => setTimeout(resolve, 1000));

                        // Analyze page
                        const pageAnalysis = await page.evaluate(() => {
                            const getMobileNavInfo = () => {
                                const nav = document.querySelector('.ldr-mobile-bottom-nav');
                                const sheet = document.querySelector('.ldr-mobile-sheet-menu');
                                const tabBar = document.querySelector('.mobile-tab-bar');
                                const sidebar = document.querySelector('.ldr-sidebar');

                                return {
                                    hasMobileNav: !!nav,
                                    navVisible: nav ? window.getComputedStyle(nav).display !== 'none' : false,
                                    hasSheet: !!sheet,
                                    hasOldTabBar: !!tabBar,
                                    sidebarHidden: sidebar ?
                                        window.getComputedStyle(sidebar).display === 'none' ||
                                        window.getComputedStyle(sidebar).transform.includes('translateX') : true,
                                    bodyClass: document.body.className
                                };
                            };

                            return {
                                title: document.title,
                                url: window.location.href,
                                viewport: {
                                    width: window.innerWidth,
                                    height: window.innerHeight
                                },
                                mobileNav: getMobileNavInfo()
                            };
                        });

                        // Take screenshot
                        const screenshotPath = path.join(deviceDir, `${pageInfo.name}.png`);
                        await page.screenshot({
                            path: screenshotPath,
                            fullPage: false
                        });

                        console.log(`    ✅ Screenshot saved`);
                        console.log(`    📊 Mobile nav: ${pageAnalysis.mobileNav.hasMobileNav ? 'Yes' : 'No'}, ` +
                                   `Visible: ${pageAnalysis.mobileNav.navVisible ? 'Yes' : 'No'}, ` +
                                   `Sidebar hidden: ${pageAnalysis.mobileNav.sidebarHidden ? 'Yes' : 'No'}`);

                        results.success++;
                        results.screenshots.push({
                            device: deviceName,
                            page: pageInfo.name,
                            path: screenshotPath,
                            analysis: pageAnalysis
                        });

                    } catch (error) {
                        console.log(`    ❌ Failed: ${error.message}`);
                        results.failed++;
                    }
                }

                // Test sheet menu if mobile nav exists
                if (viewport.width <= 767) {
                    console.log(`  🎯 Testing sheet menu...`);

                    try {
                        // Go back to home
                        await page.goto(baseUrl, { waitUntil: 'domcontentloaded' });

                        // Try to open sheet menu
                        const sheetOpened = await page.evaluate(() => {
                            const moreBtn = document.querySelector('.mobile-nav-tab[data-tab-id="more"]');
                            if (moreBtn) {
                                moreBtn.click();
                                return true;
                            }
                            return false;
                        });

                        if (sheetOpened) {
                            await new Promise(resolve => setTimeout(resolve, 500));

                            // Take screenshot with sheet open
                            const sheetScreenshotPath = path.join(deviceDir, 'Sheet_Menu_Open.png');
                            await page.screenshot({
                                path: sheetScreenshotPath,
                                fullPage: false
                            });

                            console.log(`    ✅ Sheet menu screenshot saved`);
                            results.screenshots.push({
                                device: deviceName,
                                page: 'Sheet_Menu_Open',
                                path: sheetScreenshotPath
                            });
                        }
                    } catch (error) {
                        console.log(`    ⚠️  Could not test sheet menu: ${error.message}`);
                    }
                }

            } catch (error) {
                console.error(`  ❌ Device test failed: ${error.message}`);
            } finally {
                await page.close();
            }
        }

        // Generate summary report
        console.log('\n' + '═'.repeat(60));
        console.log('📊 TEST SUMMARY');
        console.log('═'.repeat(60));
        console.log(`Total pages tested: ${results.total}`);
        console.log(`Successful: ${results.success}`);
        console.log(`Failed: ${results.failed}`);
        console.log(`\n📁 Screenshots saved to:`);
        console.log(`   ${screenshotDir}`);

        // Create an index HTML file for easy viewing
        const indexHtml = `<!DOCTYPE html>
<html>
<head>
    <title>Mobile Navigation Screenshots - ${timestamp}</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #1a1a2e;
            color: #fff;
            padding: 20px;
        }
        h1 { color: #6e4ff6; }
        .device-section {
            margin: 40px 0;
            padding: 20px;
            background: #0f0f1e;
            border-radius: 10px;
        }
        .screenshots {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .screenshot {
            background: #2a2a3e;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
        }
        .screenshot img {
            max-width: 100%;
            border-radius: 4px;
            border: 1px solid #333;
        }
        .screenshot h3 {
            margin: 10px 0 5px;
            color: #6e4ff6;
            font-size: 14px;
        }
        .info {
            font-size: 12px;
            color: #888;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Mobile Navigation Test Results</h1>
    <p>Generated: ${new Date().toLocaleString()}</p>
    ${Object.keys(DEVICES).map(device => `
        <div class="device-section">
            <h2>${device} (${DEVICES[device].width}x${DEVICES[device].height})</h2>
            <div class="screenshots">
                ${results.screenshots
                    .filter(s => s.device === device)
                    .map(s => `
                        <div class="screenshot">
                            <h3>${s.page.replace(/_/g, ' ')}</h3>
                            <img src="${device}/${s.page}.png" alt="${s.page}">
                            ${s.analysis ? `
                                <div class="info">
                                    Nav: ${s.analysis.mobileNav.hasMobileNav ? '✅' : '❌'} |
                                    Visible: ${s.analysis.mobileNav.navVisible ? '✅' : '❌'} |
                                    Sidebar Hidden: ${s.analysis.mobileNav.sidebarHidden ? '✅' : '❌'}
                                </div>
                            ` : ''}
                        </div>
                    `).join('')}
            </div>
        </div>
    `).join('')}
</body>
</html>`;

        const indexPath = path.join(screenshotDir, 'index.html');
        await fs.writeFile(indexPath, indexHtml);

        console.log(`\n🌐 View all screenshots in browser:`);
        console.log(`   file://${indexPath}`);

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

// Run if executed directly
if (require.main === module) {
    testAllPages();
}

module.exports = { testAllPages };
