#!/usr/bin/env node

import { chromium } from 'playwright';

async function test() {
    const browser = await chromium.launch({ headless: true });

    console.log('Testing scroll behavior with JavaScript implementation...\n');

    // Desktop test
    const ctx = await browser.newContext({ viewport: { width: 1278, height: 800 } });
    const page = await ctx.newPage();
    await page.goto('http://localhost:1999/?lang=en');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(500);

    // Check console for init message
    page.on('console', msg => {
        if (msg.text().includes('Scroll behavior')) console.log('Console:', msg.text());
    });

    console.log('1. Initial state:');
    let state = await page.evaluate(() => ({
        hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
        scrollY: window.scrollY
    }));
    console.log(`   ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);

    console.log('\n2. Scroll DOWN 500px:');
    await page.evaluate(() => window.scrollTo(0, 500));
    await page.waitForTimeout(300);
    state = await page.evaluate(() => ({
        hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
        scrollY: window.scrollY
    }));
    console.log(`   ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);
    console.log(state.hidden ? '   ✅ Bar hidden' : '   ❌ Bar should be hidden!');

    console.log('\n3. Scroll UP to 300px:');
    await page.evaluate(() => window.scrollTo(0, 300));
    await page.waitForTimeout(300);
    state = await page.evaluate(() => ({
        hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
        scrollY: window.scrollY
    }));
    console.log(`   ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);
    console.log(!state.hidden ? '   ✅ Bar visible' : '   ❌ Bar should be visible!');

    await ctx.close();

    // Mobile test
    console.log('\n4. Mobile (375px) - scroll down:');
    const mobileCtx = await browser.newContext({
        viewport: { width: 375, height: 667 },
        userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)',
        hasTouch: true
    });
    const mobilePage = await mobileCtx.newPage();
    await mobilePage.goto('http://localhost:1999/?lang=en');
    await mobilePage.waitForLoadState('networkidle');
    await mobilePage.waitForTimeout(500);

    await mobilePage.evaluate(() => window.scrollTo(0, 500));
    await mobilePage.waitForTimeout(300);
    state = await mobilePage.evaluate(() => ({
        hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
        transform: getComputedStyle(document.querySelector('.action-bar')).transform
    }));
    console.log(`   Hidden class: ${state.hidden}, Transform: ${state.transform}`);
    const isVisible = !state.hidden || state.transform === 'none' || state.transform.includes('0, 0)');
    console.log(isVisible ? '   ✅ Bar visible on mobile' : '   ❌ Bar should stay visible!');

    await mobileCtx.close();
    await browser.close();
    console.log('\nDone.');
}

test().catch(console.error);