import { chromium } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext({
    viewport: { width: 375, height: 812 }
});
const page = await context.newPage();

await page.goto('http://localhost:1999');
await page.waitForTimeout(1500);

// Scroll to show back-to-top button
await page.evaluate(() => window.scrollTo(0, 500));
await page.waitForTimeout(500);

// Take screenshot of bottom-left floating buttons area
await page.screenshot({
    path: 'tests/screenshots/button-icon-scaling-375px.png',
    clip: { x: 0, y: 600, width: 200, height: 200 }
});

// Take full page for context
await page.screenshot({
    path: 'tests/screenshots/full-page-375px.png',
    fullPage: false
});

console.log('📸 Screenshots saved to tests/screenshots/');

// Print actual sizes for verification
const sizes = await page.evaluate(() => {
    const results = [];
    const selectors = ['.cmd-k-btn', '.download-btn', '.print-friendly-btn',
                       '.fixed-btn.contact-btn', '.shortcuts-btn',
                       '.color-theme-switcher', '.info-button', '.back-to-top'];

    for (const sel of selectors) {
        const btn = document.querySelector(sel);
        if (btn) {
            const btnStyle = getComputedStyle(btn);
            const icon = btn.querySelector('iconify-icon');
            const iconStyle = icon ? getComputedStyle(icon) : null;
            results.push({
                selector: sel,
                button: Math.round(Number.parseFloat(btnStyle.width)) + 'x' + Math.round(Number.parseFloat(btnStyle.height)),
                icon: iconStyle ? Math.round(Number.parseFloat(iconStyle.width)) + 'x' + Math.round(Number.parseFloat(iconStyle.height)) : 'N/A'
            });
        }
    }
    return results;
});

console.log('\n📐 Sizes at 375px viewport:');
sizes.forEach(s => console.log('  ' + s.selector + ': button=' + s.button + ', icon=' + s.icon));

await browser.close();