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

async function openEditModal(page: any) {
  // Navigate to transactions page
  await page.goto('/transaction2');
  
  // Wait for the table to load
  await page.waitForSelector('table tbody tr');
  
  // Find and click the edit button for the test transaction
  const editButton = page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').first();
  await editButton.click();
  
  // Wait for the modal to open
  await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
  await page.waitForSelector('#wizardmodal');
  
  // Click Next to go to the links step (button says "Transaction Actions")
  await page.click('button:has-text("Transaction Actions")');
  
  // Wait for the links step to load
  await page.waitForSelector('text=Transaction Actions', { state: 'visible' });
  
  // Click on "Manual" tab
  await page.click('button:has-text("Manual")');
  
  // Wait for the manual form to appear
  await page.waitForSelector('#account-grid-body');
}

let testInfoCache: any = null;

async function getTestInfo(page: any) {
  // Always fetch fresh to handle server restarts
  const response = await page.request.get('/test-info');
  testInfoCache = await response.json();
  return testInfoCache;
}

async function selectAccountFromTypeahead(page: any, rowIndex: number, accountName: string) {
  // The account search uses Solr which isn't available in tests.
  // Instead, we directly set the hidden input value via JavaScript.
  
  // Get all rows except the new-row, total, balance, and transaction total rows
  const allRows = page.locator('#account-grid-body tbody tr');
  const rowCount = await allRows.count();
  
  // Find the row that has a hidden input for account (actual account rows)
  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}`);
  }
  
  // Find the hidden input for the account
  const hiddenInput = accountRow.locator('input[type="hidden"][name*="transaction-account/account"]').first();
  
  // Get account IDs from test-info endpoint
  const testInfo = await getTestInfo(page);
  const accountKey = accountName === 'Test' ? 'test-account' : 'second-account';
  const accountId = testInfo.accounts[accountKey];
  
  if (!accountId) {
    throw new Error(`Could not find account with name ${accountName}`);
  }
  
  // Set the hidden input value and trigger change
  // Also update Alpine.js data to prevent it from overwriting our value
  await hiddenInput.evaluate((el: HTMLInputElement, value: string) => {
    // Set the DOM value
    el.value = value;
    
    // Update Alpine.js component data
    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';
    }
    
    // Also update any parent Alpine model (accountId)
    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());
  
  // Wait for any HTMX updates
  await page.waitForTimeout(300);
}

async function findAccountRow(page: any, rowIndex: number) {
  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) {
        return row;
      }
      accountRowIndex++;
    }
  }
  
  throw new Error(`Could not find account row at index ${rowIndex}`);
}

async function setAccountAmount(page: any, rowIndex: number, amount: string) {
  const row = await findAccountRow(page, rowIndex);
  const amountInput = row.locator('input[name*="transaction-account/amount"]').first();
  await amountInput.fill(amount);
  await amountInput.dispatchEvent('change');
  await page.waitForTimeout(300);
}

async function addNewAccount(page: any) {
  // Click the "New account" button
  await page.click('text=New account');
  
  // Wait for the new row to be added
  await page.waitForTimeout(500);
}

async function saveTransaction(page: any) {
  // Submit the form directly instead of clicking the button
  // The Done button might not have type="submit"
  await page.evaluate(() => {
    const form = document.querySelector('#wizard-form') as HTMLFormElement;
    if (form) {
      form.dispatchEvent(new Event('submit', { bubbles: true }));
    }
  });
  
  // Wait for the modal to close
  await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'hidden', timeout: 10000 });
}

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

async function toggleToDollarMode(page: any) {
  const dollarRadio = page.locator('input[name="step-params[amount-mode]"][value="$"]');
  await dollarRadio.click();
  
  // Wait for HTMX to swap the grid body
  await page.waitForResponse(response => 
    response.url().includes('/toggle-amount-mode') && response.status() === 200
  );
  await page.waitForTimeout(200);
}

test.describe.configure({ mode: 'serial' });

test.describe('Transaction Edit Full Workflow', () => {
  test('should code transaction with vendor using percentage, then split 50/50, then switch to dollars', async ({ page }) => {
    // Step 1: Open edit modal and code with 100% to one account
    await openEditModal(page);
    
    // Switch to percentage mode
    await toggleToPercentMode(page);
    
    // Add a new account row
    await addNewAccount(page);
    
    // Select the account
    await selectAccountFromTypeahead(page, 0, 'Test');
    
    // Set amount to 100%
    await setAccountAmount(page, 0, '100');
    
    // Save the transaction
    await saveTransaction(page);
    
    // Step 2: Re-open and split 50/50 with two accounts
    await openEditModal(page);
    
    // Note: amount-mode is UI-only state, so it resets to $ when re-opening
    // Switch back to percentage mode
    await toggleToPercentMode(page);
    
    // The existing account from step 1 should already be there
    // Change its amount from 100% to 50%
    await setAccountAmount(page, 0, '50');
    
    // Add a second account at 50%
    await addNewAccount(page);
    await selectAccountFromTypeahead(page, 1, 'Second');
    await setAccountAmount(page, 1, '50');
    
    // Save
    await saveTransaction(page);
    
    // Step 3: Re-open and verify dollar amounts
    await openEditModal(page);
    
    // The accounts should be persisted from the previous save
    // Wait for accounts to load
    await page.waitForTimeout(500);
    
    // Verify we're in dollar mode (default)
    const dollarRadio = page.locator('input[name="step-params[amount-mode]"][value="$"]');
    await expect(dollarRadio).toBeChecked();
    
    // Verify amounts are in dollars (converted from percentages on save)
    const row0 = await findAccountRow(page, 0);
    const row1 = await findAccountRow(page, 1);
    
    const amount0 = row0.locator('input[name*="transaction-account/amount"]').first();
    const amount1 = row1.locator('input[name*="transaction-account/amount"]').first();
    
    // Each should be $50.00 (or close to it)
    const val0 = await amount0.inputValue();
    const val1 = await amount1.inputValue();
    
    expect(parseFloat(val0)).toBeCloseTo(50.0, 1);
    expect(parseFloat(val1)).toBeCloseTo(50.0, 1);
    
    // Save
    await saveTransaction(page);
  });
});

test.describe('Transaction Edit Validation', () => {
  test('should show validation error when account totals do not match transaction amount', async ({ page }) => {
    await openEditModal(page);
    
    // Stay in dollar mode (default)
    // Add an account
    await addNewAccount(page);
    await selectAccountFromTypeahead(page, 0, 'Test');
    
    // Set amount to $50 (which doesn't match the $100 transaction)
    await setAccountAmount(page, 0, '50');
    
    // Try to save - this should fail because $50 != $100
    // We submit the form and expect the modal to stay open
    await page.evaluate(() => {
      const form = document.querySelector('#wizard-form') as HTMLFormElement;
      if (form) {
        form.dispatchEvent(new Event('submit', { bubbles: true }));
      }
    });
    
    // Wait a bit for the response
    await page.waitForTimeout(1000);
    
    // Modal should still be open (save failed)
    await expect(page.locator('#modal-holder[x-show="open"]')).toBeVisible();
    
    // The form should still be present
    const form = page.locator('#wizard-form');
    await expect(form).toBeVisible();
    
    // Verify the account row is still there with our $50 value
    const amountInput = page.locator('input[name*="transaction-account/amount"]').first();
    const value = await amountInput.inputValue();
    expect(parseFloat(value)).toBeCloseTo(50.0, 1);
  });
});

async function openEditModalForTransaction(page: any, description: string) {
  // Navigate to transactions page
  await page.goto('/transaction2');

  // Wait for the table to load
  await page.waitForSelector('table tbody tr');

  // Find the row with the specific description and click its edit button
  const row = page.locator('table tbody tr', { hasText: description }).first();
  const editButton = row.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').first();
  await editButton.click();

  // Wait for the modal to open
  await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
  await page.waitForSelector('#wizardmodal');

  // Click Next to go to the links step (button says "Transaction Actions")
  await page.click('button:has-text("Transaction Actions")');

  // Wait for the links step to load
  await page.waitForSelector('text=Transaction Actions', { state: 'visible' });
}

test.describe('Transaction Link Date Display', () => {
  test('should show payment date when linking to payment', async ({ page }) => {
    await openEditModalForTransaction(page, 'Transaction for payment link');

    // Click on "Link to payment" tab
    await page.click('button:has-text("Link to payment")');
    await page.waitForTimeout(500);

    // Verify the payment option shows the date
    await expect(page.locator('#payment-matches')).toContainText('Available Payments');
    await expect(page.locator('#payment-matches')).toContainText('06/14/2023');
  });

  test('should show invoice date when linking to unpaid invoice', async ({ page }) => {
    await openEditModalForTransaction(page, 'Transaction for unpaid invoice link');

    // Click on "Link to unpaid invoices" tab
    await page.click('button:has-text("Link to unpaid invoices")');
    await page.waitForTimeout(500);

    // Verify the invoice option shows the date
    await expect(page.locator('text=Available Unpaid Invoices')).toBeVisible();
    await expect(page.locator('text=UNPAID-001')).toBeVisible();
    await expect(page.locator('text=07/19/2023')).toBeVisible();
  });
});