#!/usr/bin/env node

import { chromium } from 'playwright';

const DESKTOP_VIEWPORT = { width: 1278, height: 800 };

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

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

    // Scroll to Page 2
    await page.evaluate(() => {
        const page2 = document.querySelector('.page-2');
        if (page2) {
            page2.scrollIntoView();
        }
    });

    await page.waitForTimeout(500);

    const page2Debug = await page.evaluate(() => {
        const page2 = document.querySelector('.page-2');
        const pageContent = page2?.querySelector('.page-content');
        const sidebarRight = page2?.querySelector('.cv-sidebar-right');
        const accordion = sidebarRight?.querySelector('.sidebar-accordion');
        const actualContent = sidebarRight?.querySelector('.actual-content');
        const accordionContent = sidebarRight?.querySelector('.sidebar-accordion-content');

        const sidebarRect = sidebarRight?.getBoundingClientRect();
        const accordionRect = accordion?.getBoundingClientRect();

        return {
            page2Exists: !!page2,
            pageContentGrid: pageContent ? window.getComputedStyle(pageContent).gridTemplateColumns : 'N/A',

            sidebarRight: {
                exists: !!sidebarRight,
                display: sidebarRight ? window.getComputedStyle(sidebarRight).display : 'N/A',
                visibility: sidebarRight ? window.getComputedStyle(sidebarRight).visibility : 'N/A',
                width: sidebarRect ? Math.round(sidebarRect.width) : 0,
                height: sidebarRect ? Math.round(sidebarRect.height) : 0,
                backgroundColor: sidebarRight ? window.getComputedStyle(sidebarRight).backgroundColor : 'N/A',
            },

            accordion: {
                exists: !!accordion,
                open: accordion?.hasAttribute('open'),
                height: accordionRect ? Math.round(accordionRect.height) : 0,
                display: accordion ? window.getComputedStyle(accordion).display : 'N/A',
            },

            actualContent: {
                exists: !!actualContent,
                display: actualContent ? window.getComputedStyle(actualContent).display : 'N/A',
                opacity: actualContent ? window.getComputedStyle(actualContent).opacity : 'N/A',
                height: actualContent ? Math.round(actualContent.getBoundingClientRect().height) : 0,
            },

            accordionContent: {
                exists: !!accordionContent,
                display: accordionContent ? window.getComputedStyle(accordionContent).display : 'N/A',
                opacity: accordionContent ? window.getComputedStyle(accordionContent).opacity : 'N/A',
                height: accordionContent ? Math.round(accordionContent.getBoundingClientRect().height) : 0,
            }
        };
    });

    console.log('Page 2 Right Sidebar Debug:\n');

    console.log('Page Content Grid:');
    console.log(`  • Grid columns: ${page2Debug.pageContentGrid}\n`);

    console.log('Right Sidebar:');
    console.log(`  • Exists: ${page2Debug.sidebarRight.exists ? '✅' : '❌'}`);
    console.log(`  • Display: ${page2Debug.sidebarRight.display}`);
    console.log(`  • Visibility: ${page2Debug.sidebarRight.visibility}`);
    console.log(`  • Size: ${page2Debug.sidebarRight.width}×${page2Debug.sidebarRight.height}px`);
    console.log(`  • Background: ${page2Debug.sidebarRight.backgroundColor}\n`);

    console.log('Accordion:');
    console.log(`  • Exists: ${page2Debug.accordion.exists ? '✅' : '❌'}`);
    console.log(`  • Display: ${page2Debug.accordion.display}`);
    console.log(`  • Open: ${page2Debug.accordion.open ? 'YES' : 'NO'}`);
    console.log(`  • Height: ${page2Debug.accordion.height}px\n`);

    console.log('Actual Content Wrapper:');
    console.log(`  • Exists: ${page2Debug.actualContent.exists ? '✅' : '❌'}`);
    console.log(`  • Display: ${page2Debug.actualContent.display}`);
    console.log(`  • Opacity: ${page2Debug.actualContent.opacity}`);
    console.log(`  • Height: ${page2Debug.actualContent.height}px\n`);

    console.log('Accordion Content:');
    console.log(`  • Exists: ${page2Debug.accordionContent.exists ? '✅' : '❌'}`);
    console.log(`  • Display: ${page2Debug.accordionContent.display}`);
    console.log(`  • Opacity: ${page2Debug.accordionContent.opacity}`);
    console.log(`  • Height: ${page2Debug.accordionContent.height}px\n`);

    await page.screenshot({
        path: 'tests/screenshots/page-2-sidebar-debug.png',
        fullPage: false
    });
    console.log('Screenshot saved: tests/screenshots/page-2-sidebar-debug.png');

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