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

async function testSettingsMobileFix() {
    console.log('🔍 Testing Settings page mobile fix...');

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

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

        // Set 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');

        // Navigate to Settings
        console.log('📄 Navigating to Settings...');
        try {
            await page.goto('http://127.0.0.1:5000/settings/', {
                waitUntil: 'domcontentloaded',
                timeout: 5000
            });
        } catch (e) {
            console.log('⚠️ Navigation timeout, but continuing...');
        }

        // Wait a bit for styles to apply
        await new Promise(resolve => setTimeout(resolve, 2000));

        // Check the actual height of main content
        const dimensions = await page.evaluate(() => {
            const mainContent = document.querySelector('.ldr-main-content');
            const settingsContainer = document.querySelector('.ldr-settings-container');
            const body = document.body;

            return {
                viewport: {
                    width: window.innerWidth,
                    height: window.innerHeight
                },
                body: {
                    scrollHeight: body.scrollHeight,
                    clientHeight: body.clientHeight,
                    offsetHeight: body.offsetHeight
                },
                mainContent: mainContent ? {
                    scrollHeight: mainContent.scrollHeight,
                    clientHeight: mainContent.clientHeight,
                    offsetHeight: mainContent.offsetHeight,
                    computedHeight: window.getComputedStyle(mainContent).height
                } : null,
                settingsContainer: settingsContainer ? {
                    scrollHeight: settingsContainer.scrollHeight,
                    clientHeight: settingsContainer.clientHeight,
                    offsetHeight: settingsContainer.offsetHeight
                } : null
            };
        });

        console.log('📏 Dimensions:');
        console.log('  Viewport:', dimensions.viewport);
        console.log('  Body:', dimensions.body);
        console.log('  Main Content:', dimensions.mainContent);
        console.log('  Settings Container:', dimensions.settingsContainer);

        // Check if height is reasonable (less than 5000px)
        const isFixed = dimensions.mainContent &&
                        parseInt(dimensions.mainContent.computedHeight) < 5000;

        console.log(isFixed ? '✅ Height issue FIXED!' : '❌ Height issue persists');

        // Take screenshot
        await page.screenshot({
            path: './settings-mobile-fixed.png',
            fullPage: false // Just viewport
        });
        console.log('📸 Screenshot saved: ./settings-mobile-fixed.png');

        // Also take a full page screenshot
        await page.screenshot({
            path: './settings-mobile-full.png',
            fullPage: true
        });
        console.log('📸 Full page screenshot saved: ./settings-mobile-full.png');

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

testSettingsMobileFix().catch(console.error);
