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

test('Site builder renders different components', async ({ page }) => {
  // Login
  await page.goto('http://pixel8ed.lvh.me:5173/login');
  await page.getByPlaceholder(/username/i).fill('pixel8ed');
  await page.getByPlaceholder(/password/i).fill('starry12');
  await page.getByRole('button', { name: /sign in/i }).click();

  // Navigate to site builder
  await page.waitForTimeout(2000);
  await page.goto('http://pixel8ed.lvh.me:5173/dashboard/site-editor');
  await page.waitForTimeout(5000);

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

  // Check for component variety in the iframe
  const iframe = page.frameLocator('iframe');
  const iframeContent = await iframe.locator('body').textContent().catch(() => '');

  console.log('=== SITE BUILDER TEST ===');
  console.log('Iframe content (first 500 chars):', iframeContent?.substring(0, 500));

  // Check the Outline section for component names
  const outlineSection = page.locator('h2:has-text("Outline")').locator('..').locator('..');
  const outlineText = await outlineSection.textContent().catch(() => 'Not found');
  console.log('Outline section:', outlineText?.substring(0, 500));
});