const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  try {
    console.log('Loading page with networkidle...');
    await page.goto('http://localhost:3000', { waitUntil: 'networkidle', timeout: 120000 });
    console.log('Page loaded');
    
    // Wait for React to render with multiple attempts
    for (let i = 0; i < 10; i++) {
      await page.waitForTimeout(1000);
      const text = await page.evaluate(() => document.body.innerText);
      if (text.length > 500) {
        console.log('React content detected, length: ' + text.length);
        break;
      }
      console.log('Wait ' + i + ', content length: ' + text.length);
    }
    
    // Try to get page info
    const html = await page.content();
    if (html.includes('Calculator') || html.includes('calculator')) {
      console.log('Found calculator reference in HTML');
    }
    
    // Check for React root
    const hasReactRoot = await page.evaluate(() => {
      return document.getElementById('root') !== null;
    });
    console.log('Has React root: ' + hasReactRoot);
    
    await page.screenshot({ path: 'debug_final.png', fullPage: true });
    console.log('Screenshot saved');
    
    // Try to interact with page
    console.log('Attempting interaction...');
    
    // Wait for any div with specific text
    const allDivs = await page.locator('div').count();
    console.log('Total divs: ' + allDivs);
    
  } catch (err) {
    console.error('Error: ' + err.message);
  } finally {
    await browser.close();
  }
})();
