#!/usr/bin/env node
import { chromium } from 'playwright';

(async () => {
  console.log('🔍 Testing Hyperscript Parse Fix\n');
  console.log('═'.repeat(60));

  const browser = await chromium.launch({
    headless: false,
    args: ['--disable-http-cache', '--disable-cache']
  });

  const context = await browser.newContext({
    ignoreHTTPSErrors: true
  });

  const page = await context.newPage();

  // Track all errors
  const errors = [];
  page.on('console', msg => {
    if (msg.type() === 'error') {
      const text = msg.text();
      errors.push(text);
      console.log('  ❌ [ERROR]', text);
    }
  });

  page.on('pageerror', err => {
    errors.push(err.message);
    console.log('  ❌ [PAGE ERROR]', err.message);
  });

  // Load page with cache-busting
  const url = `http://localhost:1999/?lang=en&_=${Date.now()}`;
  console.log(`📄 Loading: ${url}\n`);

  try {
    await page.goto(url, { waitUntil: 'networkidle', timeout: 10000 });
  } catch (e) {
    console.log('⚠️  Navigation timeout (server may be starting)');
    console.log('   Error:', e.message);
    await browser.close();
    process.exit(1);
  }

  await page.waitForTimeout(3000);

  console.log('\n' + '═'.repeat(60));
  console.log('TEST RESULTS');
  console.log('═'.repeat(60) + '\n');

  // 1. Check for parse errors
  const parseErrors = errors.filter(e =>
    e.includes('Expected') ||
    e.includes('found') ||
    e.toLowerCase().includes('parse')
  );

  console.log('1. PARSE ERRORS:');
  if (parseErrors.length === 0) {
    console.log('   ✅ NONE - Parse fix successful!\n');
  } else {
    console.log('   ❌ FOUND:', parseErrors.length);
    parseErrors.forEach(e => console.log('      -', e));
    console.log('');
  }

  // 2. Check hyperscript loaded
  const hsLoaded = await page.evaluate(() => typeof window._hyperscript !== 'undefined');
  console.log('2. HYPERSCRIPT LIBRARY:', hsLoaded ? '✅ LOADED' : '❌ NOT LOADED\n');

  // 3. Check functions._hs file structure
  const fileAnalysis = await page.evaluate(async () => {
    try {
      const response = await fetch('/static/hyperscript/functions._hs');
      const text = await response.text();

      // Count if/else vs separate if blocks
      const hasIfElse = /if currentScroll > 300[\s\S]*?else[\s\S]*?end/.test(text);
      const hasSeparateIfs = /if currentScroll > 300[\s\S]*?end[\s\S]*?if currentScroll <= 300/.test(text);

      return {
        size: text.length,
        hasHandleScroll: text.includes('def handleScroll()'),
        hasIfElse: hasIfElse,
        hasSeparateIfs: hasSeparateIfs,
        hasAtBottom: text.includes('if isAtBottom') && text.includes('if not isAtBottom')
      };
    } catch (e) {
      return { error: e.message };
    }
  });

  console.log('3. FILE STRUCTURE:');
  console.log('   - Size:', fileAnalysis.size, 'bytes');
  console.log('   - Has handleScroll():', fileAnalysis.hasHandleScroll ? '✅' : '❌');
  console.log('   - Uses SEPARATE if blocks:', fileAnalysis.hasSeparateIfs ? '✅ (CORRECT)' : '❌');
  console.log('   - Uses if/else:', fileAnalysis.hasIfElse ? '❌ (OLD BROKEN)' : '✅');
  console.log('   - Has at-bottom blocks:', fileAnalysis.hasAtBottom ? '✅' : '❌');
  console.log('');

  // 4. Test scroll behavior
  console.log('4. TESTING SCROLL BEHAVIOR:');

  // Scroll to top first
  await page.evaluate(() => window.scrollTo(0, 0));
  await page.waitForTimeout(500);

  let btnState = await page.evaluate(() => {
    const btn = document.querySelector('#back-to-top');
    return {
      exists: !!btn,
      display: window.getComputedStyle(btn).display
    };
  });
  console.log('   - At top (scroll=0): button display =', btnState.display, btnState.display === 'none' ? '✅' : '❌');

  // Scroll down
  await page.evaluate(() => window.scrollTo(0, 500));
  await page.waitForTimeout(500);

  btnState = await page.evaluate(() => {
    const btn = document.querySelector('#back-to-top');
    return {
      display: window.getComputedStyle(btn).display
    };
  });
  console.log('   - At 500px: button display =', btnState.display, btnState.display === 'flex' ? '✅' : '❌');

  console.log('\n' + '═'.repeat(60));

  // Final verdict
  const success = parseErrors.length === 0 &&
                  fileAnalysis.hasSeparateIfs &&
                  !fileAnalysis.hasIfElse &&
                  hsLoaded;

  if (success) {
    console.log('✅ SUCCESS: All tests passed!');
    console.log('\n   Parse error is FIXED by using separate if blocks');
    console.log('   instead of if/else, matching the working version');
    console.log('   from git commit 1f7757c');
  } else {
    console.log('⚠️  ISSUES DETECTED:');
    if (parseErrors.length > 0) console.log('   - Parse errors still present');
    if (fileAnalysis.hasIfElse) console.log('   - Still using if/else (needs separate ifs)');
    if (!hsLoaded) console.log('   - Hyperscript library not loaded');
  }

  console.log('═'.repeat(60));
  console.log('\n💡 Browser kept open for manual verification');
  console.log('   Press Ctrl+C to exit\n');

  await new Promise(() => {});
})();