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

async function openEditModal(page: any) {
  await page.goto('/transaction2');
  await page.waitForSelector('table tbody tr');
  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.waitForSelector('#wizardmodal');
  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');
}

async function addNewAccount(page: any) {
  await page.click('text=New account');
  await page.waitForTimeout(500);
}

async function selectAccountFromTypeahead(page: any, rowIndex: number, accountName: string) {
  const allRows = page.locator('#account-grid-body tbody tr');
  const rowCount = await allRows.count();
  
  let accountRow = null;
  let accountRowIndex = 0;
  for (let i = 0; i < rowCount; i++) {
    const row = allRows.nth(i);
    const hasAccountInput = await row.locator('input[name*="transaction-account/account"]').count() > 0;
    if (hasAccountInput) {
      if (accountRowIndex === rowIndex) {
        accountRow = row;
        break;
      }
      accountRowIndex++;
    }
  }
  
  if (!accountRow) {
    throw new Error(`Could not find account row at index ${rowIndex}`);
  }
  
  const hiddenInput = accountRow.locator('input[type="hidden"][name*="transaction-account/account"]').first();
  
  const testInfoResponse = await page.request.get('/test-info');
  const testInfo = await testInfoResponse.json();
  const accountKey = accountName === 'Test' ? 'test-account' : 'second-account';
  const accountId = testInfo.accounts[accountKey];
  
  await hiddenInput.evaluate((el: HTMLInputElement, value: string) => {
    el.value = value;
    const alpineEl = el.closest('[x-data]');
    if (alpineEl && (alpineEl as any).__x) {
      (alpineEl as any).__x.$data.value.value = parseInt(value);
      (alpineEl as any).__x.$data.value.label = 'Selected Account';
    }
    const rowEl = el.closest('tr[x-data]');
    if (rowEl && (rowEl as any).__x) {
      (rowEl as any).__x.$data.accountId = parseInt(value);
    }
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }, accountId.toString());
  
  await page.waitForTimeout(300);
}

async function setAccountAmount(page: any, rowIndex: number, amount: string) {
  const allRows = page.locator('#account-grid-body tbody tr');
  const rowCount = await allRows.count();
  
  let accountRowIndex = 0;
  for (let i = 0; i < rowCount; i++) {
    const row = allRows.nth(i);
    const hasAccountInput = await row.locator('input[name*="transaction-account/account"]').count() > 0;
    if (hasAccountInput) {
      if (accountRowIndex === rowIndex) {
        const amountInput = row.locator('input[name*="transaction-account/amount"]').first();
        await amountInput.fill(amount);
        await amountInput.dispatchEvent('change');
        await page.waitForTimeout(300);
        return;
      }
      accountRowIndex++;
    }
  }
  
  throw new Error(`Could not find account row at index ${rowIndex}`);
}

async function toggleToPercentMode(page: any) {
  const percentRadio = page.locator('input[name="step-params[amount-mode]"][value="%"]');
  await percentRadio.click();
  await page.waitForResponse(response => 
    response.url().includes('/toggle-amount-mode') && response.status() === 200
  );
  await page.waitForTimeout(200);
}

async function saveTransaction(page: any) {
  await page.click('button:has-text("Done")');
  await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'hidden', timeout: 10000 });
}

test('debug step 2', async ({ page }) => {
  // Step 1
  await openEditModal(page);
  await toggleToPercentMode(page);
  await addNewAccount(page);
  await selectAccountFromTypeahead(page, 0, 'Test');
  await setAccountAmount(page, 0, '100');
  await saveTransaction(page);
  
  console.log('Step 1 complete');
  
  // Step 2: Re-open
  await openEditModal(page);
  await toggleToPercentMode(page);
  
  // Debug: check what's in the grid
  const allRows = page.locator('#account-grid-body tbody tr');
  const rowCount = await allRows.count();
  console.log('Total rows in grid:', rowCount);
  
  for (let i = 0; i < rowCount; i++) {
    const row = allRows.nth(i);
    const hasAccountInput = await row.locator('input[name*="transaction-account/account"]').count() > 0;
    const text = await row.textContent();
    console.log(`Row ${i}: hasAccount=${hasAccountInput}, text=${text?.substring(0, 50)}`);
  }
});