#!/usr/bin/env node

/**
 * Quick visual check of info modal on mobile
 */

import { launch } from 'puppeteer';

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

(async () => {
    const browser = await launch({ headless: false });
    const page = await browser.newPage();

    await page.setViewport({
        width: 375,
        height: 667,
        isMobile: true,
        hasTouch: true
    });

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

    const metrics = await page.evaluate(() => {
        const get = (sel) => {
            const el = document.querySelector(sel);
            return el ? window.getComputedStyle(el).fontSize : null;
        };
        return {
            title: get('.info-modal-header h2'),
            cvTitle: get('.info-modal-cv-title'),
            desc: get('.info-modal-description'),
            tech: get('.info-tech-item span'),
            btn: get('.info-modal-github')
        };
    });

    console.log('Mobile Font Sizes:');
    console.log('  h2 Title:', metrics.title);
    console.log('  CV Title:', metrics.cvTitle);
    console.log('  Description:', metrics.desc);
    console.log('  Tech Items:', metrics.tech);
    console.log('  GitHub Button:', metrics.btn);
    console.log('\nKeeping browser open for visual check...');
    console.log('Press Ctrl+C when done.');

    await page.screenshot({ path: '/Users/txeo/Git/yo/cv/tests/screenshots/modal-mobile-final.png' });
    console.log('Screenshot saved: tests/screenshots/modal-mobile-final.png');

    // Keep open
    await new Promise(() => {});
})();