#!/usr/bin/env node

/**
 * Test fixed button sizes at different zoom levels
 */

import { chromium } from 'playwright';

async function testButtonSizes() {
    console.log('🧪 Testing Fixed Button Sizes at Different Zoom Levels\n');

    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
    const page = await context.newPage();

    try {
        await page.goto('http://localhost:1999/?lang=en', { waitUntil: 'networkidle' });
        await page.waitForTimeout(2000);

        const zoomSlider = page.locator('#zoom-slider');
        await zoomSlider.waitFor({ state: 'visible' });

        // Test at different zoom levels
        const zoomLevels = [25, 100, 175];
        const results = {};

        for (const zoomLevel of zoomLevels) {
            console.log(`\n📏 Testing at ${zoomLevel}% zoom...`);

            // Set zoom level
            await zoomSlider.fill(zoomLevel.toString());
            await page.waitForTimeout(500);

            // Measure button sizes
            const backToTop = await page.locator('#back-to-top').boundingBox();
            const infoButton = await page.locator('#info-button').boundingBox();
            const shortcutsButton = await page.locator('#shortcuts-button').boundingBox();

            results[zoomLevel] = {
                backToTop: backToTop ? Math.round(backToTop.width) : 0,
                infoButton: infoButton ? Math.round(infoButton.width) : 0,
                shortcutsButton: shortcutsButton ? Math.round(shortcutsButton.width) : 0
            };

            console.log(`   Back-to-top: ${results[zoomLevel].backToTop}px`);
            console.log(`   Info button: ${results[zoomLevel].infoButton}px`);
            console.log(`   Shortcuts button: ${results[zoomLevel].shortcutsButton}px`);
        }

        // Check if sizes are consistent
        console.log('\n' + '='.repeat(60));
        console.log('📊 BUTTON SIZE CONSISTENCY CHECK');
        console.log('='.repeat(60));

        const baseSize = results[100];
        let allConsistent = true;

        for (const [zoomLevel, sizes] of Object.entries(results)) {
            if (zoomLevel === '100') continue;

            const backTopDiff = Math.abs(sizes.backToTop - baseSize.backToTop);
            const infoDiff = Math.abs(sizes.infoButton - baseSize.infoButton);
            const shortcutsDiff = Math.abs(sizes.shortcutsButton - baseSize.shortcutsButton);

            const maxDiff = Math.max(backTopDiff, infoDiff, shortcutsDiff);

            if (maxDiff <= 2) {
                console.log(`✅ ${zoomLevel}% zoom: Buttons stay consistent (max diff: ${maxDiff}px)`);
            } else {
                console.log(`❌ ${zoomLevel}% zoom: Buttons changed size (max diff: ${maxDiff}px)`);
                allConsistent = false;
            }
        }

        console.log('='.repeat(60));

        if (allConsistent) {
            console.log('✅ SUCCESS: Fixed buttons maintain consistent size at all zoom levels!');
        } else {
            console.log('❌ FAIL: Fixed buttons change size with zoom level');
        }

        console.log('\n⏸️  Browser will stay open for 5 seconds for manual verification...');
        await page.waitForTimeout(5000);

    } catch (error) {
        console.error('\n❌ Test failed:', error.message);
    } finally {
        await browser.close();
        console.log('\n✅ Test completed\n');
    }
}

testButtonSizes();