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

test.describe('Simple Page Inspection', () => {
  test('should load page and inspect DOM', async ({ page }) => {
    await page.goto('/');

    // Wait for page to load
    await page.waitForLoadState('networkidle');

    // Take screenshot
    await page.screenshot({ path: 'debug-screenshots/page-loaded.png', fullPage: true });

    // Get page title
    const title = await page.title();
    console.log('Page title:', title);

    // Get all headings
    const headings = await page.locator('h1, h2, h3, h4').allTextContents();
    console.log('Headings:', headings);

    // Get all form elements
    const formElements = await page.locator('form input, form select, form button').allTextContents();
    console.log('Form elements text:', formElements);

    // Get the form HTML
    const formHtml = await page.locator('form').innerHTML();
    console.log('Form HTML length:', formHtml.length);

    // Save form HTML to file for inspection
    await page.evaluate((html) => {
      const blob = new Blob([html], { type: 'text/html' });
      const url = URL.createObjectURL(blob);
      console.log('Form HTML saved to blob:', url);
      return html.substring(0, 1000) + '...';
    }, formHtml);

    // Check for specific elements
    const playerNameInput = page.locator('input[id="playerName"]');
    const exists = await playerNameInput.count() > 0;
    console.log('Player name input exists:', exists);

    if (exists) {
      console.log('Player name input is visible:', await playerNameInput.isVisible());
    }

    // Get all input IDs
    const inputIds = await page.locator('input[id]').evaluateAll(inputs =>
      inputs.map(input => input.id)
    );
    console.log('Input IDs:', inputIds);

    // Get all select IDs
    const selectIds = await page.locator('select[id]').evaluateAll(selects =>
      selects.map(select => select.id)
    );
    console.log('Select IDs:', selectIds);

    // Get all button texts
    const buttonTexts = await page.locator('button').allTextContents();
    console.log('Button texts:', buttonTexts);

    // Look for crime category buttons
    const crimeButtons = await page.locator('button').filter({ hasText: /offenses/ }).allTextContents();
    console.log('Crime category buttons:', crimeButtons);
  });
});