#!/usr/bin/env node

import { chromium } from 'playwright';

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

(async () => {
    const browser = await chromium.launch({ headless: true });
    const context = await browser.newContext({
        viewport: LANDSCAPE_VIEWPORT,
        userAgent: 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
        hasTouch: true
    });
    const page = await context.newPage();

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

    const mediaQueries = await page.evaluate(() => {
        return {
            viewport: {
                width: window.innerWidth,
                height: window.innerHeight,
                orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
            },
            mediaQueries: {
                'max-width-768': window.matchMedia('(max-width: 768px)').matches,
                'max-width-540': window.matchMedia('(max-width: 540px)').matches,
                'landscape': window.matchMedia('(orientation: landscape)').matches,
                'landscape-915': window.matchMedia('(max-width: 915px) and (orientation: landscape)').matches,
            },
            hamburgerButton: {
                visible: document.querySelector('.hamburger-btn') ? window.getComputedStyle(document.querySelector('.hamburger-btn')).display !== 'none' : false,
                display: document.querySelector('.hamburger-btn') ? window.getComputedStyle(document.querySelector('.hamburger-btn')).display : 'N/A'
            }
        };
    });

    console.log('Media Query Match Test:\n');
    console.log('Viewport:');
    console.log(`  • Size: ${mediaQueries.viewport.width}×${mediaQueries.viewport.height}`);
    console.log(`  • Orientation: ${mediaQueries.viewport.orientation}\n`);

    console.log('Media Queries:');
    console.log(`  • (max-width: 768px): ${mediaQueries.mediaQueries['max-width-768'] ? '✅ MATCHES' : '❌ NO MATCH'}`);
    console.log(`  • (max-width: 540px): ${mediaQueries.mediaQueries['max-width-540'] ? '✅ MATCHES' : '❌ NO MATCH'}`);
    console.log(`  • (orientation: landscape): ${mediaQueries.mediaQueries['landscape'] ? '✅ MATCHES' : '❌ NO MATCH'}`);
    console.log(`  • (max-width: 915px) and (orientation: landscape): ${mediaQueries.mediaQueries['landscape-915'] ? '✅ MATCHES' : '❌ NO MATCH'}\n`);

    console.log('Hamburger Button (should be visible in landscape):');
    console.log(`  • Visible: ${mediaQueries.hamburgerButton.visible ? '✅' : '❌'}`);
    console.log(`  • Display: ${mediaQueries.hamburgerButton.display}`);

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