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

test.describe('Inspect Select Component', () => {
  test('should inspect the select dropdown behavior', async ({ page }) => {
    await page.goto('/');

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

    // Click the select trigger
    const selectTrigger = page.locator('button').filter({ hasText: 'select an offense' });
    await selectTrigger.click();

    // Wait a bit for dropdown to appear
    await page.waitForTimeout(1000);

    // Take screenshot of the opened dropdown
    await page.screenshot({ path: 'debug-screenshots/select-opened.png', fullPage: true });

    // Get all elements in the viewport that contain crime names
    const allText = await page.locator('*').filter({ hasText: /theft|grief|hacking/i }).allTextContents();
    console.log('Elements with crime text:', allText);

    // Try different locators for the dropdown content
    const possibleLocators = [
      '[data-radix-select-content]',
      '[role="listbox"]',
      '.select-content',
      '[data-slot="select-content"]'
    ];

    for (const locator of possibleLocators) {
      try {
        const count = await page.locator(locator).count();
        if (count > 0) {
          console.log(`Found ${count} elements with locator: ${locator}`);
          const text = await page.locator(locator).textContent();
          console.log(`Content: ${text?.substring(0, 200)}...`);
        }
      } catch (error) {
        console.log(`Locator ${locator} failed:`, error instanceof Error ? error.message : String(error));
      }
    }

    // Get the full page HTML to inspect
    const bodyHtml = await page.locator('body').innerHTML();
    console.log('Body HTML length:', bodyHtml.length);

    // Look for any elements that might contain the dropdown
    const portalElements = await page.locator('[data-radix-portal]').count();
    console.log('Radix portal elements:', portalElements);

    if (portalElements > 0) {
      const portalContent = await page.locator('[data-radix-portal]').textContent();
      console.log('Portal content preview:', portalContent?.substring(0, 300));
    }
  });
});