#!/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 debug = await page.evaluate(() => {
        const page1 = document.querySelector('.page-1 .page-content');
        const computed = window.getComputedStyle(page1);

        // Check media query matches
        const landscapeMatch = window.matchMedia('(max-width: 915px) and (orientation: landscape)').matches;
        const maxWidth915 = window.matchMedia('(max-width: 915px)').matches;
        const orientationLandscape = window.matchMedia('(orientation: landscape)').matches;
        const maxWidth768 = window.matchMedia('(max-width: 768px)').matches;

        return {
            viewport: {
                width: window.innerWidth,
                height: window.innerHeight,
                ratio: window.innerWidth / window.innerHeight
            },
            mediaQueries: {
                'max-width: 915px': maxWidth915,
                'orientation: landscape': orientationLandscape,
                'max-width: 915px AND landscape': landscapeMatch,
                'max-width: 768px': maxWidth768
            },
            gridColumns: computed.gridTemplateColumns,
            bodyOverflow: window.getComputedStyle(document.body).overflowX,
            htmlOverflow: window.getComputedStyle(document.documentElement).overflowX
        };
    });

    console.log('Landscape Debug Info:\n');
    console.log('Viewport:');
    console.log(`  • Width: ${debug.viewport.width}px`);
    console.log(`  • Height: ${debug.viewport.height}px`);
    console.log(`  • Ratio: ${debug.viewport.ratio.toFixed(2)} (${debug.viewport.ratio > 1 ? 'LANDSCAPE' : 'PORTRAIT'})\n`);

    console.log('Media Query Matches:');
    Object.entries(debug.mediaQueries).forEach(([query, matches]) => {
        console.log(`  • ${query}: ${matches ? '✅ YES' : '❌ NO'}`);
    });

    console.log(`\nComputed Styles:`);
    console.log(`  • Grid columns: ${debug.gridColumns}`);
    console.log(`  • Body overflow-x: ${debug.bodyOverflow}`);
    console.log(`  • HTML overflow-x: ${debug.htmlOverflow}\n`);

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