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

async function analyzeMobileIssues() {
    const browser = await chromium.launch();
    const context = await browser.newContext({
        viewport: { width: 375, height: 812 }, // iPhone X size
        userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1'
    });
    
    const page = await context.newPage();
    
    const pages = [
        'https://upskill-staging.measurequick.com/trainer/login/',
        'https://upskill-staging.measurequick.com/trainer/registration/',
        'https://upskill-staging.measurequick.com/trainer/dashboard/',
        'https://upskill-staging.measurequick.com/trainer/profile/'
    ];
    
    const issues = [];
    
    for (const url of pages) {
        try {
            await page.goto(url, { waitUntil: 'networkidle' });
            await page.waitForTimeout(2000);
            
            // Take screenshot
            const screenshotName = url.split('/').slice(-2).join('-').replace('/', '') || 'home';
            await page.screenshot({ path: `mobile-${screenshotName}.png`, fullPage: true });
            
            // Check for horizontal scroll
            const hasHorizontalScroll = await page.evaluate(() => {
                return document.body.scrollWidth > window.innerWidth;
            });
            
            // Check font sizes
            const fontSizes = await page.evaluate(() => {
                const elements = document.querySelectorAll('*');
                const sizes = [];
                elements.forEach(el => {
                    const fontSize = window.getComputedStyle(el).fontSize;
                    if (fontSize && fontSize !== '0px') {
                        sizes.push(parseFloat(fontSize));
                    }
                });
                return sizes.filter((size, index, arr) => arr.indexOf(size) === index).sort((a, b) => b - a);
            });
            
            // Check padding issues
            const paddingIssues = await page.evaluate(() => {
                const containers = document.querySelectorAll('.hvac-page-wrapper, .container, .hvac-dashboard, .hvac-form-container');
                const issues = [];
                containers.forEach((el, i) => {
                    const styles = window.getComputedStyle(el);
                    const paddingLeft = parseFloat(styles.paddingLeft);
                    const paddingRight = parseFloat(styles.paddingRight);
                    if (paddingLeft < 10 || paddingRight < 10) {
                        issues.push({
                            element: el.className,
                            paddingLeft,
                            paddingRight
                        });
                    }
                });
                return issues;
            });
            
            // Check button sizes
            const buttonSizes = await page.evaluate(() => {
                const buttons = document.querySelectorAll('button, input[type="submit"], .hvac-button');
                const sizes = [];
                buttons.forEach(btn => {
                    const rect = btn.getBoundingClientRect();
                    sizes.push({
                        width: rect.width,
                        height: rect.height,
                        text: btn.textContent?.trim().substring(0, 20)
                    });
                });
                return sizes;
            });
            
            issues.push({
                url,
                hasHorizontalScroll,
                fontSizes: fontSizes.slice(0, 10),
                paddingIssues,
                buttonSizes: buttonSizes.filter(btn => btn.height < 44),
                timestamp: new Date().toISOString()
            });
            
        } catch (error) {
            issues.push({
                url,
                error: error.message,
                timestamp: new Date().toISOString()
            });
        }
    }
    
    await browser.close();
    
    console.log('Mobile Analysis Results:');
    console.log(JSON.stringify(issues, null, 2));
    
    return issues;
}

analyzeMobileIssues().catch(console.error);