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

const BASE_URL = 'http://localhost:5173';

test.describe('Exhaustive Component Playground Tests', () => {
  test('every component in playground should render without console errors', async ({ page }) => {
    const errors: string[] = [];
    page.on('console', msg => {
      if (msg.type() === 'error') errors.push(msg.text());
    });

    await page.goto(`${BASE_URL}/playground`);
    await page.waitForLoadState('networkidle');

    const select = page.locator('select#component-select');
    await expect(select).toBeVisible();

    const optionCount = await select.locator('option').count();
    // The first option is '-- Select a Component --', so we iterate from index 1
     for (let i = 1; i < optionCount; i++) {
       const optionName = await select.locator('option').nth(i).textContent();
       if (!optionName) continue;

       console.log(`Testing component: ${optionName}`);
       
       // Select the component
       await select.selectOption({ index: i });
       
       // Wait for potential re-renders and data fetching (even if mocked)
       await page.waitForTimeout(500); 
       // Allow some time for useEffects and async mock injections to settle
       await page.waitForLoadState('networkidle').catch(() => {});

       // Log the current HTML to debug why footer is missing
       const html = await page.content();
       console.log(`Current HTML length: ${html.length}`);
       if (!html.includes('id="playground-footer"')) {
         console.log('CRITICAL: id="playground-footer" not found in HTML');
       }

       // Check if any errors were logged during the selection and render
       if (errors.length > 0) {
         // We check if the errors are actually related to the current component selection
         // For simplicity in this exhaustive test, any console error is a failure.
         throw new Error(`Console errors detected while rendering ${optionName}: ${errors.join(', ')}`);
       }

       // Verify footer updated correctly
       const footer = page.locator('#playground-footer');
       await expect(footer).toBeVisible();
       await expect(footer).toContainText(optionName);
     }

    expect(errors.length).toBe(0);
  });
});