#!/usr/bin/env node

/**
 * Comprehensive test: Info Modal Font Sizes Across Device Sizes
 * Purpose: Verify font scaling works correctly from mobile to tablet to desktop
 * Date: 2025-11-27
 */

import { launch } from 'puppeteer';

const BASE_URL = process.env.CV_TEST_URL || 'http://localhost:1999';

const VIEWPORTS = [
    { name: 'iPhone SE', width: 375, height: 667 },
    { name: 'iPhone 12 Pro', width: 390, height: 844 },
    { name: 'iPad Mini', width: 768, height: 1024 },
    { name: 'iPad Pro', width: 1024, height: 1366 },
    { name: 'Desktop', width: 1440, height: 900 }
];

async function testModalAcrossDevices() {
    console.log('🧪 Testing Info Modal Font Sizes Across Devices...\n');

    const browser = await launch({ headless: true });

    for (const viewport of VIEWPORTS) {
        const page = await browser.newPage();

        await page.setViewport({
            width: viewport.width,
            height: viewport.height,
            isMobile: viewport.width < 768
        });

        try {
            await page.goto(`${BASE_URL}?lang=en`, { waitUntil: 'networkidle0' });
            await page.waitForSelector('#info-button', { visible: true });
            await page.click('#info-button');
            await page.waitForSelector('#info-modal[open]', { visible: true, timeout: 3000 });
            await new Promise(resolve => setTimeout(resolve, 500));

            const metrics = await page.evaluate(() => {
                const getFontSize = (selector) => {
                    const element = document.querySelector(selector);
                    if (!element) return null;
                    return window.getComputedStyle(element).fontSize;
                };

                const modalRect = document.querySelector('#info-modal').getBoundingClientRect();

                return {
                    title: getFontSize('.info-modal-header h2'),
                    cvTitle: getFontSize('.info-modal-cv-title'),
                    description: getFontSize('.info-modal-description'),
                    techItem: getFontSize('.info-tech-item span'),
                    githubButton: getFontSize('.info-modal-github'),
                    modalWidth: Math.round(modalRect.width),
                    modalHeight: Math.round(modalRect.height),
                    fitsInViewport: modalRect.width <= window.innerWidth && modalRect.height <= window.innerHeight
                };
            });

            console.log(`📱 ${viewport.name} (${viewport.width}x${viewport.height})`);
            console.log(`   Title: ${metrics.title}`);
            console.log(`   CV Title: ${metrics.cvTitle}`);
            console.log(`   Description: ${metrics.description}`);
            console.log(`   Tech Items: ${metrics.techItem}`);
            console.log(`   GitHub Button: ${metrics.githubButton}`);
            console.log(`   Modal Size: ${metrics.modalWidth}x${metrics.modalHeight}`);
            console.log(`   Fits in Viewport: ${metrics.fitsInViewport ? '✅' : '❌'}`);
            console.log('');

        } catch (error) {
            console.error(`   ❌ Error testing ${viewport.name}:`, error.message);
        }

        await page.close();
    }

    await browser.close();
    console.log('✅ Test completed for all devices');
}

testModalAcrossDevices();