#!/usr/bin/env node

import { chromium } from 'playwright';

const MOBILE_VIEWPORT = { width: 375, height: 667 };

(async () => {
    const browser = await chromium.launch({ headless: true });
    const context = await browser.newContext({
        viewport: MOBILE_VIEWPORT,
        ignoreHTTPSErrors: true
    });
    const page = await context.newPage();

    console.log('🧪 Testing Mobile Button Opacity (Should be Full - No Transparency)\n');

    await page.goto('http://localhost:1999/?lang=en&view=extended');
    await page.waitForLoadState('networkidle');

    // Check button opacities and backgrounds
    const buttons = {
        download: await page.locator('.download-btn'),
        print: await page.locator('.print-friendly-btn'),
        shortcuts: await page.locator('.shortcuts-btn'),
        info: await page.locator('.info-button'),
        backToTop: await page.locator('.back-to-top'),
        theme: await page.locator('.color-theme-switcher')
    };

    console.log('📊 Button Opacity Check:\n');

    for (const [name, button] of Object.entries(buttons)) {
        const styles = await button.evaluate(el => {
            const computed = window.getComputedStyle(el);
            const bg = computed.backgroundColor;

            // Extract rgba values
            const match = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
            const alpha = match && match[4] ? parseFloat(match[4]) : 1.0;

            return {
                background: bg,
                opacity: computed.opacity,
                alpha: alpha
            };
        });

        const isFullOpacity = styles.alpha === 1.0 && parseFloat(styles.opacity) === 1.0;

        console.log(`${name}:`);
        console.log(`  • Background: ${styles.background}`);
        console.log(`  • Opacity: ${styles.opacity}`);
        console.log(`  • Alpha: ${styles.alpha}`);
        console.log(`  • Full opacity: ${isFullOpacity ? '✅' : '❌'}\n`);
    }

    await page.screenshot({
        path: 'tests/screenshots/mobile-buttons-full-opacity.png',
        fullPage: true
    });
    console.log('📸 Screenshot: tests/screenshots/mobile-buttons-full-opacity.png\n');

    await browser.close();
})();