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

async function openEditModal(page: any, transactionIndex: number = 0) {
  // 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 specified transaction
  const editButton = page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(transactionIndex);
  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 setAccountLocation(page: any, rowIndex: number, location: string) {
  const row = await findAccountRow(page, rowIndex);
  const locationSelect = row.locator('select[name*="location"]').first();
  
  // If the option doesn't exist, add it (for testing invalid locations)
  const optionExists = await locationSelect.locator(`option[value="${location}"]`).count() > 0;
  if (!optionExists) {
    await locationSelect.evaluate((el: HTMLSelectElement, value: string) => {
      const option = document.createElement('option');
      option.value = value;
      option.textContent = value;
      el.appendChild(option);
    }, location);
  }
  
  await locationSelect.selectOption(location);
  await locationSelect.dispatchEvent('change');
  await page.waitForTimeout(300);
}

async function getAccountLocation(page: any, rowIndex: number): Promise<string> {
  const row = await findAccountRow(page, rowIndex);
  const locationSelect = row.locator('select[name*="location"]').first();
  return await locationSelect.inputValue();
}

async function removeAllAccounts(page: any) {
  const allRows = page.locator('#account-grid-body tbody tr');
  const rowCount = await allRows.count();
  
  for (let i = rowCount - 1; i >= 0; i--) {
    const row = allRows.nth(i);
    const hasAccountInput = await row.locator('input[name*="transaction-account/account"]').count() > 0;
    if (hasAccountInput) {
      // Click the X button to remove (it's an <a> tag, not a <button>)
      const removeButton = row.locator('a').first();
      await removeButton.click();
      // Wait for the Alpine.js removal animation (500ms + buffer)
      await page.waitForTimeout(700);
    }
  }
}

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 Shared Location', () => {
  test('should spread Shared location to client locations on save and display correctly on reopen', async ({ page }) => {
    // Use the second transaction to avoid interfering with other tests
    const transactionIndex = 1;
    
    // Step 1: Open edit modal and add an account with Shared location
    await openEditModal(page, transactionIndex);
    
    // Add a new account row
    await addNewAccount(page);
    
    // Select the account
    await selectAccountFromTypeahead(page, 0, 'Test');
    
    // Set location to Shared
    await setAccountLocation(page, 0, 'Shared');
    
    // Set amount to $200 (the full transaction amount for the second transaction)
    await setAccountAmount(page, 0, '200');
    
    // Save the transaction
    await saveTransaction(page);
    
    // Step 2: Re-open and verify location is not "Shared" but the actual client location
    await openEditModal(page, transactionIndex);
    
    // Wait for accounts to load
    await page.waitForTimeout(500);
    
    // Get the location of the first account
    const location = await getAccountLocation(page, 0);
    
    // The location should be the actual client location ("DT" in test data), not "Shared"
    expect(location).not.toBe('Shared');
    expect(location).toBe('DT');
  });
});

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 }) => {
    // Use the third transaction to avoid interference from other tests
    await openEditModal(page, 2);
    
    // 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 $300 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);
    
    // Verify the user-friendly error message is displayed
    const errorElement = page.locator('#form-errors .error-content');
    await expect(errorElement).toBeVisible();
    const errorText = await errorElement.textContent();
    expect(errorText).toContain('The total of your expense accounts ($50.00) must equal the transaction amount ($300.00)');
  });
});

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();
  });
});