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

test('debug typeahead', async ({ page }) => {
  // Navigate to transactions page
  await page.goto('/transaction2');
  await page.waitForSelector('table tbody tr');
  
  // Click edit
  const editButton = page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').first();
  await editButton.click();
  
  await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
  await page.click('button:has-text("Transaction Actions")');
  await page.waitForSelector('text=Transaction Actions', { state: 'visible' });
  await page.click('button:has-text("Manual")');
  await page.waitForSelector('#account-grid-body');
  
  // Switch to percentage mode
  await page.locator('input[name="step-params[amount-mode]"][value="%"]').click();
  await page.waitForResponse(response => 
    response.url().includes('/toggle-amount-mode') && response.status() === 200
  );
  await page.waitForTimeout(200);
  
  // Click New account
  await page.click('text=New account');
  await page.waitForTimeout(500);
  
  // Find the typeahead
  const row = page.locator('#account-grid-body tbody tr').nth(0);
  const typeaheadContainer = row.locator('div.relative[x-data*="baseUrl"]').first();
  const typeaheadTrigger = typeaheadContainer.locator('a[x-ref="input"]').first();
  
  // Click to open dropdown
  await typeaheadTrigger.click();
  await page.waitForTimeout(500);
  
  // Take a screenshot to see what's on screen
  await page.screenshot({ path: '/tmp/typeahead-debug.png' });
  
  // Find all tippy dropdowns
  const tippies = page.locator('div[id^="tippy"]');
  console.log('Number of tippy elements:', await tippies.count());
  
  // Get HTML of first tippy
  if (await tippies.count() > 0) {
    const html = await tippies.first().innerHTML();
    console.log('First tippy HTML:', html.substring(0, 1000));
  }
  
  // Try to find search input
  const searchInputs = page.locator('input[type="text"]');
  console.log('Number of text inputs:', await searchInputs.count());
  
  // Find visible text inputs
  for (let i = 0; i < Math.min(await searchInputs.count(), 10); i++) {
    const input = searchInputs.nth(i);
    const isVisible = await input.isVisible().catch(() => false);
    console.log(`Input ${i}: visible=${isVisible}`);
  }
  
  // Type in the search input
  const searchInput = page.locator('div[id^="tippy"] input[type="text"]').first();
  await searchInput.fill('Test');
  await page.waitForTimeout(1000);
  
  // Take another screenshot
  await page.screenshot({ path: '/tmp/typeahead-debug-2.png' });
  
  // Check for dropdown options
  const options = page.locator('div[id^="tippy"] .dropdown-options a');
  console.log('Number of dropdown options:', await options.count());
  
  // Get HTML of dropdown options
  if (await options.count() > 0) {
    for (let i = 0; i < Math.min(await options.count(), 3); i++) {
      const html = await options.nth(i).innerHTML();
      console.log(`Option ${i}:`, html);
    }
  }
  
  // Also check if there are any li elements
  const lis = page.locator('div[id^="tippy"] li');
  console.log('Number of li elements:', await lis.count());
});