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

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

test.describe('Component Playground', () => {
  test('playground route loads and shows component selector', async ({ page }) => {
    // Listen for console errors
    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');

    // Take screenshot immediately after load to see what is actually there
    await page.screenshot({ path: 'playground_debug_load.png' });

    if (errors.length > 0) {
      console.log('Console errors detected:', errors);
    }

    // Check heading using a more flexible approach
    const heading = page.getByRole('heading', { name: /Component Playground/i });
    await expect(heading).toBeVisible();

    // Check if dropdown exists and is visible
    const select = page.locator('select#component-select');
    await expect(select).toBeVisible();

    // Check if it has options (besides the placeholder)
    const optionCount = await select.locator('option').count();
    expect(optionCount).toBeGreaterThan(1);

    // Take screenshot for visual confirmation
    await page.screenshot({ path: 'playground_loaded.png' });
  });

  test('selecting a component renders it', async ({ page }) => {
    await page.goto(`${BASE_URL}/playground`);
    await page.waitForLoadState('networkidle');

    const select = page.locator('select#component-select');
    
    // Select 'StatusBanner' (assuming it is the first one in registry after placeholder)
    await select.selectOption({ label: 'StatusBanner' });

    // Check if the main area is no longer showing "No component selected"
    const emptyState = page.locator('text=No component selected');
    await expect(emptyState).not.toBeVisible();

    // Verify footer shows correct component name
    const footer = page.locator('footer');
    await expect(footer).toContainText('StatusBanner');

    // Take screenshot of rendered component
    await page.screenshot({ path: 'playground_component_rendered.png' });
  });
});