import { test } from '@playwright/test';

test('capture trading panel screenshot', async ({ page }) => {
  // Navigate to event detail
  await page.goto('/events/1', { waitUntil: 'networkidle' });
  await page.waitForTimeout(3000);

  // Take screenshot
  await page.screenshot({ path: 'test-results/event-detail.png', fullPage: true });

  // Check the spread values being used
  const spreadInfo = await page.evaluate(() => {
    // Look for the spread grid to understand the range
    const spreadGridCells = document.querySelectorAll('.grid button');
    const spreads: string[] = [];
    spreadGridCells.forEach(cell => {
      const text = cell.textContent;
      if (text && (text.includes('+') || text.includes('-') || text.match(/^\\d/))) {
        spreads.push(text.substring(0, 10));
      }
    });

    // Check order book sections
    const orderBookContainer = document.querySelector('.col-span-3');
    const aboveSection = orderBookContainer?.querySelectorAll('.flex-1.overflow-y-auto')[0];
    const belowSection = orderBookContainer?.querySelectorAll('.flex-1.overflow-y-auto')[1];

    // Count rows in each section
    const aboveRows = aboveSection?.querySelectorAll('button').length || 0;
    const belowRows = belowSection?.querySelectorAll('button').length || 0;

    // Get the official spread from the header
    const officialSpreadElement = document.querySelector('.text-3xl.font-bold');
    const officialSpread = officialSpreadElement?.textContent;

    return {
      officialSpread,
      aboveRowCount: aboveRows,
      belowRowCount: belowRows,
      aboveSectionHTML: aboveSection?.innerHTML?.substring(0, 500) || 'not found',
      belowSectionHTML: belowSection?.innerHTML?.substring(0, 500) || 'not found',
    };
  });

  console.log('Spread info:', JSON.stringify(spreadInfo, null, 2));
});