/**
 * Simple Mobile Optimization Test Script
 * 
 * Tests basic mobile functionality without full Playwright setup
 * Run with: node test-mobile-optimization.js
 */

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

async function testMobileOptimizations() {
    console.log('🚀 Starting Mobile Optimization Tests...\n');
    
    const browser = await chromium.launch({ headless: false });
    
    try {
        // Test mobile viewports
        const viewports = [
            { name: 'iPhone SE', width: 320, height: 568 },
            { name: 'iPhone 12', width: 375, height: 667 }
        ];
        
        for (const viewport of viewports) {
            console.log(`📱 Testing ${viewport.name} (${viewport.width}x${viewport.height})`);
            
            const page = await browser.newPage();
            await page.setViewportSize(viewport);
            
            // Test registration page mobile optimization
            console.log('  🔍 Testing registration page...');
            await page.goto('https://upskill-staging.measurequick.com/trainer/registration/', { 
                waitUntil: 'networkidle' 
            });
            
            // Check if mobile responsive CSS is loaded
            const mobileCSS = await page.$('link[href*="hvac-mobile-responsive.css"]');
            if (mobileCSS) {
                console.log('  ✅ Mobile responsive CSS loaded');
            } else {
                console.log('  ❌ Mobile responsive CSS not found');
            }
            
            // Check form input sizes (should be 44px+ for touch)
            const inputs = await page.$$('input[type="text"], input[type="email"], select');
            if (inputs.length > 0) {
                const firstInput = inputs[0];
                const boundingBox = await firstInput.boundingBox();
                if (boundingBox && boundingBox.height >= 44) {
                    console.log('  ✅ Form inputs are touch-friendly');
                } else {
                    console.log('  ❌ Form inputs too small for touch');
                }
            }
            
            // Take screenshot
            await page.screenshot({ 
                path: `screenshots/mobile-test-${viewport.name.toLowerCase().replace(' ', '-')}.png`,
                fullPage: true 
            });
            console.log(`  📸 Screenshot saved for ${viewport.name}`);
            
            await page.close();
        }
        
        // Test dashboard table responsiveness
        console.log('\n📊 Testing dashboard table responsiveness...');
        const page = await browser.newPage();
        await page.setViewportSize({ width: 320, height: 568 });
        
        // For staging, use staging URL
        await page.goto('https://upskill-staging.measurequick.com/trainer/dashboard/', { 
            waitUntil: 'networkidle' 
        });
        
        // Check if events table exists and is responsive
        const eventsTable = await page.$('.hvac-events-table-wrapper .events-table');
        if (eventsTable) {
            const tableRows = await page.$$('.events-table tbody tr');
            if (tableRows.length > 0) {
                const firstRow = tableRows[0];
                const displayStyle = await firstRow.evaluate(el => 
                    window.getComputedStyle(el).display
                );
                
                if (displayStyle === 'block') {
                    console.log('  ✅ Table rows converted to card layout on mobile');
                } else {
                    console.log('  ❌ Table rows not converted to card layout');
                }
            }
        }
        
        await page.screenshot({ 
            path: 'screenshots/mobile-dashboard-test.png',
            fullPage: true 
        });
        console.log('  📸 Dashboard mobile screenshot saved');
        
        await page.close();
        
    } catch (error) {
        console.error('❌ Test failed:', error.message);
    } finally {
        await browser.close();
    }
    
    console.log('\n✨ Mobile optimization tests completed!');
    console.log('📁 Check screenshots/ directory for visual verification');
}

// Run the test
testMobileOptimizations();