const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    executablePath: 'C:\\Users\\xgp\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe',
    args: ['--allow-file-access-from-files', '--disable-web-security']
  });

  const page = await browser.newPage();

  await page.goto('file:///C:/Users/xgp/projects/rrweb/index.html', {
    waitUntil: 'networkidle2',
    timeout: 120000
  });

  await new Promise(r => setTimeout(r, 2000));

  // Step 1: Start recording
  console.log('1. Starting recording...');
  await page.click('#start-btn');
  await new Promise(r => setTimeout(r, 1000));

  // Step 2: Perform actions
  console.log('2. Performing actions...');
  await page.evaluate(() => {
    document.querySelector('button[onclick="changeColor()"]').click();
    document.querySelector('button[onclick="addCounter()"]').click();
  });
  await new Promise(r => setTimeout(r, 1000));

  // Step 3: Stop recording
  console.log('3. Stopping recording...');
  await page.click('#stop-btn');
  await new Promise(r => setTimeout(r, 3000)); // Wait longer for replay to initialize

  // Step 4: Check state after recording
  console.log('4. Checking state after recording...');
  const afterRecordState = await page.evaluate(() => {
    const playBtn = document.getElementById('play-toggle-btn');
    const timeline = document.getElementById('timeline');
    const speedBtns = document.querySelectorAll('.speed-controls button');
    const exportBtn = document.querySelector('button[onclick="exportRecording()"]');
    const replayContainer = document.getElementById('replayer');
    const events = window.events || [];

    return {
      status: document.getElementById('status-bar').textContent,
      playBtnDisabled: playBtn ? playBtn.disabled : null,
      playBtnText: playBtn ? playBtn.textContent : null,
      timelineDisabled: timeline ? timeline.disabled : null,
      timelineMax: timeline ? timeline.max : null,
      timelineValue: timeline ? timeline.value : null,
      speedBtnsDisabled: Array.from(speedBtns).map(btn => btn.disabled),
      exportBtnDisabled: exportBtn ? exportBtn.disabled : null,
      eventCount: events.length,
      replayChildren: replayContainer ? replayContainer.children.length : 0,
      hasIframe: replayContainer ? !!replayContainer.querySelector('iframe') : false
    };
  });

  console.log('After Recording State:', JSON.stringify(afterRecordState, null, 2));

  // Step 5: Test if we can click buttons
  console.log('\n5. Testing button clicks...');

  if (afterRecordState.playBtnDisabled === false) {
    console.log('✓ Play button enabled, testing click...');
    await page.click('#play-toggle-btn');
    await new Promise(r => setTimeout(r, 1000));
  } else {
    console.log('✗ Play button still disabled');
  }

  if (afterRecordState.exportBtnDisabled === false) {
    console.log('✓ Export button enabled, testing click...');
    // Just check if the function exists without triggering download
    const exportWorks = await page.evaluate(() => {
      return typeof window.exportRecording === 'function' && window.events.length > 0;
    });
    console.log('✓ Export function exists and has data:', exportWorks);
  } else {
    console.log('✗ Export button still disabled');
  }

  await browser.close();
})().catch(e => {
  console.error(e);
  process.exit(1);
});