#!/usr/bin/env node

import { chromium } from 'playwright';
import { writeFileSync } from 'fs';

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

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

    try {
        console.log('🎨 Visual Accordion Style Test\n');

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

        // Check accordion header styling
        const accordionHeader = await page.locator('.sidebar-accordion-header').first();

        const styles = await accordionHeader.evaluate(el => {
            const computed = window.getComputedStyle(el);
            return {
                background: computed.backgroundColor,
                color: computed.color,
                padding: computed.padding,
                borderRadius: computed.borderRadius,
                marginBottom: computed.marginBottom,
                borderBottom: computed.borderBottom,
                fontSize: computed.fontSize,
                fontWeight: computed.fontWeight,
                textTransform: computed.textTransform
            };
        });

        console.log('📊 Accordion Header Styles:');
        console.log(`  • Background: ${styles.background}`);
        console.log(`  • Text Color: ${styles.color}`);
        console.log(`  • Padding: ${styles.padding}`);
        console.log(`  • Border Radius: ${styles.borderRadius}`);
        console.log(`  • Margin Bottom: ${styles.marginBottom}`);
        console.log(`  • Border Bottom: ${styles.borderBottom}`);
        console.log(`  • Font Size: ${styles.fontSize}`);
        console.log(`  • Font Weight: ${styles.fontWeight}`);
        console.log(`  • Text Transform: ${styles.textTransform}`);

        // Check if matches dark theme
        const isDarkBackground = styles.background.includes('rgb(48, 48, 48)') ||
                                 styles.background.includes('#303030');
        const isLightText = styles.color.includes('rgb(204, 204, 204)') ||
                           styles.color.includes('#ccc');
        const hasNoBorderRadius = styles.borderRadius === '0px';
        const hasNoMarginBottom = styles.marginBottom === '0px';
        const isUppercase = styles.textTransform === 'uppercase';

        console.log('\n✅ Style Verification:');
        console.log(`  • Dark background (#303030): ${isDarkBackground ? '✅' : '❌'}`);
        console.log(`  • Light text (#ccc): ${isLightText ? '✅' : '❌'}`);
        console.log(`  • No border radius: ${hasNoBorderRadius ? '✅' : '❌'}`);
        console.log(`  • No margin bottom: ${hasNoMarginBottom ? '✅' : '❌'}`);
        console.log(`  • Uppercase text: ${isUppercase ? '✅' : '❌'}`);

        const allMatch = isDarkBackground && isLightText && hasNoBorderRadius &&
                         hasNoMarginBottom && isUppercase;

        console.log(`\n${allMatch ? '✅' : '❌'} Accordion style ${allMatch ? 'MATCHES' : 'DOES NOT MATCH'} CV title badges style\n`);

        // Take screenshot for visual verification
        await page.screenshot({
            path: 'tests/screenshots/accordion-mobile-styled.png',
            fullPage: true
        });
        console.log('📸 Screenshot saved to tests/screenshots/accordion-mobile-styled.png\n');

    } catch (error) {
        console.error('❌ Test failed:', error.message);
        process.exit(1);
    } finally {
        await browser.close();
    }
})();