content.js

// Xero Cash Coding Filter Extension
// Wait for the page to be fully loaded
(function() {
  'use strict';

  console.log('Xero Cash Coding Filter: Extension loaded');

  // Store filter values globally so they persist when row is re-added
  const filterState = {
    payee: '',
    reference: '',
    description: '',
    accountHasValue: false
  };

  let mutationObserver = null;

  // Wait for the DOM to be ready
  function init() {
    // Check if the required elements exist
    const showMoreButton = document.querySelector('span.text[data-automationid="Show more-button"]');
    const tableHeader = document.getElementById('ext-gen26');
    const tableBody = document.getElementById('ext-gen27');

    if (!showMoreButton || !tableHeader || !tableBody) {
      console.log('Xero Cash Coding Filter: Required elements not found, retrying...');
      setTimeout(init, 1000);
      return;
    }

    console.log('Xero Cash Coding Filter: Elements found, initializing...');
    addLoadAllButton();
    addFilterRow();
    setupMutationObserver();
  }

  // Setup MutationObserver to watch for table changes
  function setupMutationObserver() {
    const tableHeader = document.getElementById('ext-gen26');
    const tableBody = document.getElementById('ext-gen27');
    
    if (!tableHeader) {
      console.log('Xero Cash Coding Filter: Cannot setup observer - table header not found');
      return;
    }

    // Disconnect existing observer if any
    if (mutationObserver) {
      mutationObserver.disconnect();
    }

    let filterReapplyTimeout = null;

    // Create new observer
    mutationObserver = new MutationObserver((mutations) => {
      // Check if filter row still exists
      const filterRow = document.getElementById('xero-filter-row');
      
      if (!filterRow) {
        XCCFLog('Filter row was removed, re-adding...');
        // Small delay to ensure Xero has finished its updates
        setTimeout(() => {
          addFilterRow();
        }, 100);
      }
      
      // Check if table body rows were modified
      let rowsModified = false;
      for (const mutation of mutations) {
        if (mutation.target.id === 'ext-gen27' || 
            (mutation.target.closest && mutation.target.closest('#ext-gen27'))) {
          rowsModified = true;
          break;
        }
      }
      
      // Re-apply filters if rows were modified and we have active filters
      if (rowsModified && (filterState.payee || filterState.reference || filterState.description || filterState.accountHasValue)) {
        XCCFLog('Table body modified, re-applying filters...');
        
        // Debounce filter reapplication to avoid excessive calls
        if (filterReapplyTimeout) {
          clearTimeout(filterReapplyTimeout);
        }
        
        filterReapplyTimeout = setTimeout(() => {
          applyFilters();
          XCCFLog('Filters re-applied after table modification');
        }, 200);
      }
    });

    // Start observing the table header for changes
    mutationObserver.observe(tableHeader, {
      childList: true,
      subtree: true,
      attributes: false
    });
    
    // Also observe table body if it exists
    if (tableBody) {
      mutationObserver.observe(tableBody, {
        childList: true,
        subtree: true,
        attributes: false
      });
      XCCFLog('MutationObserver watching both header and body');
    } else {
      XCCFLog('MutationObserver watching header only');
    }

    XCCFLog('MutationObserver setup complete');
  }

  // Add "Load all" button next to "Show more" button
  function addLoadAllButton() {
    XCCFLog('addLoadAllButton');
    const showMoreButton = document.querySelector('span.text[data-automationid="Show more-button"]');
    if (!showMoreButton) {
      XCCFLog('addLoadAllButton: Show more button not found');
      return;
    }

    // Check if button already exists
    if (document.getElementById('xero-filter-load-all-btn')) {
      XCCFLog('addLoadAllButton: Load all button already exists');
      return;
    }

    // Find the parent container
    const showMoreContainer = showMoreButton.closest('.button');
    if (!showMoreContainer) {
      XCCFLog('addLoadAllButton: Show more container not found');
      return;
    }

    // Create the "Load all" button by cloning the "Show more" button structure
    const loadAllContainer = showMoreContainer.cloneNode(true);
    loadAllContainer.id = 'xero-filter-load-all-btn';
    
    // Update the link and text
    const link = loadAllContainer.querySelector('a');
    const span = loadAllContainer.querySelector('span.text');
    
    if (link && span) {
      // Remove href to prevent any default navigation
      link.removeAttribute('href');
      link.setAttribute('href', 'javascript:void(0);');
      
      // Use addEventListener instead of onclick for better event handling
      link.addEventListener('click', function(e) {
        XCCFLog('Load all button clicked!');
        e.preventDefault();
        e.stopPropagation();
        loadAllRows();
        return false;
      }, true); // Use capture phase to ensure our handler runs first
      
      // Also add a click listener to the span for redundancy
      span.addEventListener('click', function(e) {
        XCCFLog('Load all button span clicked!');
        e.preventDefault();
        e.stopPropagation();
        loadAllRows();
        return false;
      }, true);
      
      span.textContent = 'Load all';
      span.setAttribute('data-automationid', 'Load all-button');
      
      XCCFLog('Load all button event listeners attached');
    } else {
      XCCFLog('addLoadAllButton: Link or span not found in cloned button');
    }

    // Insert after the "Show more" button
    showMoreContainer.parentNode.insertBefore(loadAllContainer, showMoreContainer.nextSibling);
    XCCFLog('Load all button added to DOM');
  }

  // Parse the "Displaying X of Y" text
  function getDisplayCounts() {
    const totalSpan = document.querySelector('span.total');
    if (!totalSpan) {
      console.log('Xero Cash Coding Filter: Total span not found');
      return null;
    }

    const text = totalSpan.textContent;
    const match = text.match(/Displaying (\d+) of (\d+)/);
    
    if (match) {
      return {
        current: parseInt(match[1]),
        total: parseInt(match[2])
      };
    }
    
    XCCFLog('Could not parse display text: ' + text);
    return null;
  }

  // Create and show custom modal
  function showLoadingModal(totalRecords, onConfirm) {
    // Create modal overlay
    const overlay = document.createElement('div');
    overlay.id = 'xero-filter-modal-overlay';
    overlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
    `;

    // Create modal content
    const modal = document.createElement('div');
    modal.style.cssText = `
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      text-align: center;
    `;

    // Add message
    const message = document.createElement('p');
    message.style.cssText = `
      font-size: 16px;
      margin-bottom: 20px;
      color: #333;
      line-height: 1.5;
    `;
    message.innerHTML = `<strong>Loading ${totalRecords} records</strong><br><br>This might take a while - go make some tea and leave it to me! ☕`;

    // Add button
    const button = document.createElement('button');
    button.textContent = "Let's go";
    button.style.cssText = `
      background-color: #13B5EA;
      color: white;
      border: none;
      padding: 10px 30px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
    `;
    button.onmouseover = function() {
      this.style.backgroundColor = '#0E8AB8';
    };
    button.onmouseout = function() {
      this.style.backgroundColor = '#13B5EA';
    };
    button.onclick = function() {
      document.body.removeChild(overlay);
      onConfirm();
    };

    modal.appendChild(message);
    modal.appendChild(button);
    overlay.appendChild(modal);
    document.body.appendChild(overlay);
  }

  // Update the Load all button text
  function updateLoadAllButtonText(text) {
    const loadAllButton = document.querySelector('#xero-filter-load-all-btn span.text');
    if (loadAllButton) {
      loadAllButton.textContent = text;
    }
  }

  // Wait for row count to increase
  function waitForRowsToLoad(previousCount, timeout = 10000) {
    XCCFLog('waitForRowsToLoad start');
    return new Promise((resolve, reject) => {
      const startTime = Date.now();
      const pollInterval = 500; // Check every 500ms

      function checkCount() {
        const counts = getDisplayCounts();
        
        if (!counts) {
          if (Date.now() - startTime > timeout) {
            reject(new Error('Timeout: Could not read display counts'));
            return;
          }
          setTimeout(checkCount, pollInterval);
          return;
        }

        // Check if count has increased
        if (counts.current > previousCount) {
          console.log(`Xero Cash Coding Filter: Rows loaded, now at ${counts.current} of ${counts.total}`);
          resolve(counts);
        } else if (counts.current === counts.total) {
          // All rows are loaded
          console.log('Xero Cash Coding Filter: All rows loaded');
          resolve(counts);
        } else if (Date.now() - startTime > timeout) {
          reject(new Error(`Timeout: Row count did not increase from ${previousCount}`));
        } else {
          // Keep checking
          setTimeout(checkCount, pollInterval);
        }
      }

      checkCount();
    });
  }

  // Function to load all rows by repeatedly clicking "Show more"
  function loadAllRows() {
    XCCFLog('Starting to load all rows...');
        
    // First, check the filter-matches-toggle checkbox
    const filterCheckbox = document.getElementById('filter-matches-toggle');
    if (filterCheckbox && !filterCheckbox.checked) {
      filterCheckbox.click();
      console.log('Xero Cash Coding Filter: Checked filter-matches-toggle');
    }

    // Get initial counts
    const initialCounts = getDisplayCounts();
    if (!initialCounts) {
      console.error('Xero Cash Coding Filter: Could not get initial counts');
      alert('Error: Could not read the number of records. Please try again.');
      return;
    }

    console.log(`Xero Cash Coding Filter: Initial counts - ${initialCounts.current} of ${initialCounts.total}`);

    // Check if all rows are already loaded
    if (initialCounts.current >= initialCounts.total) {
      console.log('Xero Cash Coding Filter: All rows already loaded');
      alert('All rows are already loaded!');
      return;
    }

    // Function to actually start loading
    function startLoading() {
      updateLoadAllButtonText('Loading...');
      
      async function clickShowMoreWithWait() {
        try {
          while (true) {
            const counts = getDisplayCounts();
            
            if (!counts) {
              console.error('Xero Cash Coding Filter: Could not get counts');
              updateLoadAllButtonText('Load all');
              alert('Error: Lost track of row counts. Please try again.');
              return;
            }

            // Update progress
            updateLoadAllButtonText(`Loading... ${counts.current}/${counts.total}`);

            // Check if we're done
            if (counts.current >= counts.total) {
              console.log('Xero Cash Coding Filter: All rows loaded!');
              updateLoadAllButtonText('Load all');
              alert(`Success! All ${counts.total} rows have been loaded.`);
              return;
            }

            // Find and click the "Show more" button
            XCCFLog('=== SHOW MORE CLICK START ===');
            const showMoreButton = document.querySelector('span.text[data-automationid="Show more-button"]');
            if (!showMoreButton) {
              XCCFLog('ERROR: Show more button span not found');
              updateLoadAllButtonText('Load all');
              alert('Error: Show more button not found. Please try again.');
              return;
            }
            XCCFLog('Show more button span found: ' + showMoreButton.textContent);

            const link = showMoreButton.closest('a');
            if (!link) {
              XCCFLog('ERROR: Show more link not found');
              updateLoadAllButtonText('Load all');
              alert('Error: Show more link not found. Please try again.');
              return;
            }
            XCCFLog('Show more link found');

            // Check if button is disabled
            const buttonContainer = link.closest('.button');
            if (!buttonContainer) {
              XCCFLog('WARNING: Button container not found');
            } else {
              XCCFLog('Button container found, classes: ' + buttonContainer.className);
              if (buttonContainer.classList.contains('disabled')) {
                XCCFLog('Show more button is DISABLED, waiting...');
                await new Promise(resolve => setTimeout(resolve, 1000));
                continue;
              }
            }

            // Record current count before clicking
            const currentCount = counts.current;
            XCCFLog(`Attempting to click Show more (currently at ${currentCount} of ${counts.total})`);

            // Try multiple click methods
            let clickSuccess = false;
            
            // Method 1: Direct click on link
            try {
              XCCFLog('Method 1: Trying link.click()');
              link.click();
              clickSuccess = true;
              XCCFLog('Method 1: link.click() executed');
            } catch (error) {
              XCCFLog('Method 1 ERROR: ' + error.message);
            }
            
            // Method 2: Direct click on span
            try {
              XCCFLog('Method 2: Trying showMoreButton.click()');
              showMoreButton.click();
              clickSuccess = true;
              XCCFLog('Method 2: showMoreButton.click() executed');
            } catch (error) {
              XCCFLog('Method 2 ERROR: ' + error.message);
            }
            
            // Method 3: Dispatch MouseEvent on link
            try {
              XCCFLog('Method 3: Dispatching MouseEvent on link');
              const mouseDownEvent = new MouseEvent('mousedown', {
                view: window,
                bubbles: true,
                cancelable: true
              });
              const mouseUpEvent = new MouseEvent('mouseup', {
                view: window,
                bubbles: true,
                cancelable: true
              });
              const clickEvent = new MouseEvent('click', {
                view: window,
                bubbles: true,
                cancelable: true
              });
              link.dispatchEvent(mouseDownEvent);
              link.dispatchEvent(mouseUpEvent);
              link.dispatchEvent(clickEvent);
              clickSuccess = true;
              XCCFLog('Method 3: MouseEvents dispatched on link');
            } catch (error) {
              XCCFLog('Method 3 ERROR: ' + error.message);
            }
            
            // Method 4: Dispatch MouseEvent on span
            try {
              XCCFLog('Method 4: Dispatching MouseEvent on span');
              const mouseDownEvent = new MouseEvent('mousedown', {
                view: window,
                bubbles: true,
                cancelable: true
              });
              const mouseUpEvent = new MouseEvent('mouseup', {
                view: window,
                bubbles: true,
                cancelable: true
              });
              const clickEvent = new MouseEvent('click', {
                view: window,
                bubbles: true,
                cancelable: true
              });
              showMoreButton.dispatchEvent(mouseDownEvent);
              showMoreButton.dispatchEvent(mouseUpEvent);
              showMoreButton.dispatchEvent(clickEvent);
              clickSuccess = true;
              XCCFLog('Method 4: MouseEvents dispatched on span');
            } catch (error) {
              XCCFLog('Method 4 ERROR: ' + error.message);
            }
            
            // Method 5: Click on button container
            if (buttonContainer) {
              try {
                XCCFLog('Method 5: Trying buttonContainer.click()');
                buttonContainer.click();
                clickSuccess = true;
                XCCFLog('Method 5: buttonContainer.click() executed');
              } catch (error) {
                XCCFLog('Method 5 ERROR: ' + error.message);
              }
            }
            
            if (!clickSuccess) {
              XCCFLog('ERROR: All click methods failed!');
              updateLoadAllButtonText('Load all');
              alert('Error: Could not click Show more button. Please try again.');
              return;
            }
            
            XCCFLog('=== SHOW MORE CLICK END ===');

            // Wait for rows to load
            try {
              await waitForRowsToLoad(currentCount);
              
              // Add a small delay between successful loads (1-2 seconds)
              const delay = 1000 + Math.random() * 1000; // Random delay between 1-2 seconds
              await new Promise(resolve => setTimeout(resolve, delay));
              
            } catch (error) {
              console.error('Xero Cash Coding Filter: Error waiting for rows:', error);
              updateLoadAllButtonText('Load all');
              alert(`Error: ${error.message}. Loaded ${counts.current} of ${counts.total} rows.`);
              return;
            }
          }
        } catch (error) {
          XCCFLog('Unexpected error: ' + error);
          updateLoadAllButtonText('Load all');
          alert('An unexpected error occurred. Please try again.');
        }
      }

      clickShowMoreWithWait();
    }

    // Show modal if more than 300 records, otherwise start immediately
    if (initialCounts.total > 300) {
      showLoadingModal(initialCounts.total, startLoading);
    } else {
      startLoading();
    }
  }

  // Add filter row to the table header
  function addFilterRow() {
    const tableHeader = document.getElementById('ext-gen26');
    if (!tableHeader) {
      XCCFLog('addFilterRow: table header not found');
      return;
    }

    const headerTable = tableHeader.querySelector('table');
    if (!headerTable) {
      XCCFLog('addFilterRow: header table not found');
      return;
    }

    const thead = headerTable.querySelector('thead');
    if (!thead) {
      XCCFLog('addFilterRow: thead not found');
      return;
    }

    // Check if filter row already exists
    if (document.getElementById('xero-filter-row')) {
      XCCFLog('addFilterRow: filter row already exists');
      return;
    }

    const headerRow = thead.querySelector('tr.x-grid3-hd-row');
    if (!headerRow) {
      XCCFLog('addFilterRow: header row not found');
      return;
    }

    // Create filter row
    const filterRow = document.createElement('tr');
    filterRow.id = 'xero-filter-row';
    filterRow.className = 'x-grid3-hd-row xero-filter-row';

    // Get all header cells
    const headers = headerRow.querySelectorAll('td');
    
    headers.forEach((header, index) => {
      const filterCell = document.createElement('td');
      filterCell.className = header.className;
      filterCell.style.cssText = header.style.cssText;

      const cellDiv = document.createElement('div');
      cellDiv.className = 'x-grid3-hd-inner';
      cellDiv.style.cssText = header.querySelector('.x-grid3-hd-inner')?.style.cssText || '';

      // Determine which column this is
      const columnClass = Array.from(header.classList).find(c => c.startsWith('x-grid3-td-'));
      
      if (columnClass === 'x-grid3-td-checker') {
        // Checkbox column - add "Select all filtered" checkbox
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = 'xero-filter-select-all';
        checkbox.className = 'xero-filter-checkbox';
        checkbox.title = 'Select all filtered items';
        checkbox.addEventListener('change', function(e) {
          e.stopPropagation();
          selectAllFiltered(this.checked);
        }, false);
        cellDiv.appendChild(checkbox);
      } else if (columnClass === 'x-grid3-td-colDate') {
        // Date column - add "Filter:" text and "Clear" button
        cellDiv.style.display = 'flex';
        cellDiv.style.alignItems = 'center';
        cellDiv.style.justifyContent = 'flex-end';
        cellDiv.style.gap = '8px';
        cellDiv.style.paddingRight = '10px';
        
        const filterLabel = document.createElement('span');
        filterLabel.textContent = 'Filter:';
        filterLabel.style.fontWeight = 'bold';
        
        const clearButton = document.createElement('button');
        clearButton.textContent = 'Clear';
        clearButton.id = 'xero-filter-clear-btn';
        clearButton.className = 'xero-filter-clear-button';
        clearButton.style.cssText = `
          padding: 2px 8px;
          font-size: 11px;
          cursor: pointer;
          background-color: #f0f0f0;
          border: 1px solid #ccc;
          border-radius: 3px;
          font-weight: normal;
        `;
        
        // Hover effects
        clearButton.addEventListener('mouseenter', function() {
          this.style.backgroundColor = '#e0e0e0';
        }, false);
        
        clearButton.addEventListener('mouseleave', function() {
          this.style.backgroundColor = '#f0f0f0';
        }, false);
        
        // Click handler to clear all filters
        clearButton.addEventListener('click', function(e) {
          e.stopPropagation();
          e.preventDefault();
          
          XCCFLog('=== CLEAR BUTTON CLICKED ===');
          
          // Clear all text input filters
          const payeeInput = document.querySelector('.xero-filter-input[data-column="payee"]');
          const referenceInput = document.querySelector('.xero-filter-input[data-column="reference"]');
          const descriptionInput = document.querySelector('.xero-filter-input[data-column="description"]');
          const accountHasValueCheckbox = document.getElementById('xero-filter-account-has-value');
          const selectAllCheckbox = document.getElementById('xero-filter-select-all');
          
          if (payeeInput) {
            XCCFLog('Clearing Payee filter (was: "' + payeeInput.value + '")');
            payeeInput.value = '';
          }
          if (referenceInput) {
            XCCFLog('Clearing Reference filter (was: "' + referenceInput.value + '")');
            referenceInput.value = '';
          }
          if (descriptionInput) {
            XCCFLog('Clearing Description filter (was: "' + descriptionInput.value + '")');
            descriptionInput.value = '';
          }
          if (accountHasValueCheckbox) {
            XCCFLog('Clearing Account "Has value" filter (was: ' + accountHasValueCheckbox.checked + ')');
            accountHasValueCheckbox.checked = false;
          }
          if (selectAllCheckbox) {
            XCCFLog('Unchecking "Select all filtered" checkbox');
            selectAllCheckbox.checked = false;
          }
          
          // Reset filter state
          XCCFLog('Resetting filter state object');
          filterState.payee = '';
          filterState.reference = '';
          filterState.description = '';
          filterState.accountHasValue = false;
          
          // Apply filters (which will show all rows since filters are empty)
          XCCFLog('Applying filters (all rows should now be visible)');
          applyFilters();
          
          XCCFLog('=== CLEAR BUTTON COMPLETE ===');
        }, false);
        
        cellDiv.appendChild(filterLabel);
        cellDiv.appendChild(clearButton);
      } else if (columnClass === 'x-grid3-td-colPayee') {
        // Add filter input for Payee
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'xero-filter-input';
        input.placeholder = 'Filter...';
        input.dataset.column = 'payee';
        input.value = filterState.payee;
        
        // Use event listeners instead of inline handlers to prevent event bubbling
        input.addEventListener('input', function(e) {
          e.stopPropagation();
          filterState.payee = this.value;
          applyFilters();
        }, false);
        
        input.addEventListener('click', function(e) {
          e.stopPropagation();
        }, false);
        
        cellDiv.appendChild(input);
      } else if (columnClass === 'x-grid3-td-colReference') {
        // Add filter input for Reference
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'xero-filter-input';
        input.placeholder = 'Filter...';
        input.dataset.column = 'reference';
        input.value = filterState.reference;
        
        input.addEventListener('input', function(e) {
          e.stopPropagation();
          filterState.reference = this.value;
          applyFilters();
        }, false);
        
        input.addEventListener('click', function(e) {
          e.stopPropagation();
        }, false);
        
        cellDiv.appendChild(input);
      } else if (columnClass === 'x-grid3-td-colDescription') {
        // Add filter input for Description
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'xero-filter-input';
        input.placeholder = 'Filter...';
        input.dataset.column = 'description';
        input.value = filterState.description;
        
        input.addEventListener('input', function(e) {
          e.stopPropagation();
          filterState.description = this.value;
          applyFilters();
        }, false);
        
        input.addEventListener('click', function(e) {
          e.stopPropagation();
        }, false);
        
        cellDiv.appendChild(input);
      } else if (columnClass === 'x-grid3-td-colAccount') {
        // Add "Has value" checkbox for Account
        const checkboxContainer = document.createElement('div');
        checkboxContainer.style.cssText = 'display: flex; align-items: center; gap: 5px;';
        
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = 'xero-filter-account-has-value';
        checkbox.className = 'xero-filter-checkbox';
        checkbox.checked = filterState.accountHasValue;
        
        checkbox.addEventListener('change', function(e) {
          e.stopPropagation();
          filterState.accountHasValue = this.checked;
          XCCFLog('Account "Has value" filter: ' + (this.checked ? 'ENABLED' : 'DISABLED'));
          applyFilters();
        }, false);
        
        checkbox.addEventListener('click', function(e) {
          e.stopPropagation();
        }, false);
        
        const label = document.createElement('label');
        label.htmlFor = 'xero-filter-account-has-value';
        label.textContent = 'Has value';
        label.style.cssText = 'cursor: pointer; font-size: 11px; white-space: nowrap;';
        label.addEventListener('click', function(e) {
          e.stopPropagation();
        }, false);
        
        checkboxContainer.appendChild(checkbox);
        checkboxContainer.appendChild(label);
        cellDiv.appendChild(checkboxContainer);
      }
      // For all other columns, leave empty

      filterCell.appendChild(cellDiv);
      filterRow.appendChild(filterCell);
    });

    // Insert filter row as the first row in thead
    thead.insertBefore(filterRow, headerRow);
    XCCFLog('Filter row added successfully');
    
    // Apply filters if any exist
    if (filterState.payee || filterState.reference || filterState.description || filterState.accountHasValue) {
      applyFilters();
    }
  }

  // Apply filters to the table
  function applyFilters() {
    const tableBody = document.getElementById('ext-gen27');
    if (!tableBody) return;

    // Get filter values from state
    const filters = {};
    if (filterState.payee) filters.payee = filterState.payee.toLowerCase().trim();
    if (filterState.reference) filters.reference = filterState.reference.toLowerCase().trim();
    if (filterState.description) filters.description = filterState.description.toLowerCase().trim();

    // Get all rows
    const rows = tableBody.querySelectorAll('.x-grid3-row');
    
    let accountHasValueFilteredCount = 0;
    let totalVisibleBeforeAccountFilter = 0;
    
    rows.forEach(row => {
      let visible = true;

      // Check each filter
      for (const [column, filterValue] of Object.entries(filters)) {
        let cellValue = '';
        
        if (column === 'payee') {
          const cell = row.querySelector('.x-grid3-td-colPayee .x-grid3-cell-inner');
          cellValue = cell ? cell.textContent.toLowerCase().trim() : '';
        } else if (column === 'reference') {
          const cell = row.querySelector('.x-grid3-td-colReference .x-grid3-cell-inner');
          cellValue = cell ? cell.textContent.toLowerCase().trim() : '';
        } else if (column === 'description') {
          const cell = row.querySelector('.x-grid3-td-colDescription .x-grid3-cell-inner');
          cellValue = cell ? cell.textContent.toLowerCase().trim() : '';
        }

        // AND logic - all filters must match
        if (!cellValue.includes(filterValue)) {
          visible = false;
          break;
        }
      }
      
      // If still visible after text filters, check Account "Has value" filter
      if (visible && filterState.accountHasValue) {
        totalVisibleBeforeAccountFilter++;
        
        const accountCell = row.querySelector('.x-grid3-td-colAccount .x-grid3-cell-inner');
        const accountValue = accountCell ? accountCell.textContent.trim() : '';
        
        // Only show rows that have a value in the Account column
        if (!accountValue || accountValue === '') {
          visible = false;
          accountHasValueFilteredCount++;
        }
      }

      // Show or hide the row
      if (visible) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    });

    // Uncheck the "select all" checkbox when filters change
    const selectAllCheckbox = document.getElementById('xero-filter-select-all');
    if (selectAllCheckbox) {
      selectAllCheckbox.checked = false;
    }

    // Log filter results
    let logMessage = 'Filters applied';
    if (filterState.accountHasValue) {
      logMessage += ` - Account "Has value" filter: ${accountHasValueFilteredCount} rows filtered out of ${totalVisibleBeforeAccountFilter} visible rows`;
    }
    XCCFLog(logMessage);
  }

  // Select all filtered items
  function selectAllFiltered(checked) {
    XCCFLog('=== SELECT ALL FILTERED START ===');
    XCCFLog('Checkbox state: ' + (checked ? 'CHECKED' : 'UNCHECKED'));
    
    const tableBody = document.getElementById('ext-gen27');
    if (!tableBody) {
      XCCFLog('ERROR: Table body not found!');
      return;
    }
    XCCFLog('Table body found: ' + tableBody.id);

    const rows = tableBody.querySelectorAll('.x-grid3-row');
    XCCFLog('Total rows found: ' + rows.length);
    
    let visibleCount = 0;
    let hiddenCount = 0;
    let clickedCount = 0;
    let alreadyInCorrectState = 0;
    
    rows.forEach((row, index) => {
      // Only check/uncheck visible rows
      const isVisible = row.style.display !== 'none';
      
      if (!isVisible) {
        hiddenCount++;
        return; // Skip hidden rows
      }
      
      visibleCount++;
      XCCFLog(`Row ${index}: VISIBLE`);
      
      // Try multiple methods to find the checkbox
      let checkbox = row.querySelector('.x-grid3-row-checker');
      if (!checkbox) {
        // Try alternative selectors
        checkbox = row.querySelector('div[class*="checker"]');
      }
      if (!checkbox) {
        checkbox = row.querySelector('td.x-grid3-td-checker div');
      }
      
      if (!checkbox) {
        XCCFLog(`Row ${index}: ERROR - Checkbox not found!`);
        XCCFLog(`Row ${index}: Row HTML: ` + row.innerHTML.substring(0, 200));
        return;
      }
      
      XCCFLog(`Row ${index}: Checkbox found - ${checkbox.className}`);
      
      // Check current state
      const isChecked = row.classList.contains('x-grid3-row-selected');
      XCCFLog(`Row ${index}: Current state: ${isChecked ? 'SELECTED' : 'NOT SELECTED'}`);
      XCCFLog(`Row ${index}: Desired state: ${checked ? 'SELECTED' : 'NOT SELECTED'}`);
      
      // Only click if state needs to change
      if (checked && !isChecked) {
        XCCFLog(`Row ${index}: CLICKING to SELECT`);
        
        // Try multiple click methods
        try {
          // Method 1: Direct click
          checkbox.click();
          XCCFLog(`Row ${index}: Direct click executed`);
          
          // Method 2: Dispatch MouseEvent (as backup)
          const clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true
          });
          checkbox.dispatchEvent(clickEvent);
          XCCFLog(`Row ${index}: MouseEvent dispatched`);
          
          clickedCount++;
        } catch (error) {
          XCCFLog(`Row ${index}: ERROR clicking - ${error.message}`);
        }
      } else if (!checked && isChecked) {
        XCCFLog(`Row ${index}: CLICKING to DESELECT`);
        
        try {
          // Method 1: Direct click
          checkbox.click();
          XCCFLog(`Row ${index}: Direct click executed`);
          
          // Method 2: Dispatch MouseEvent (as backup)
          const clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true
          });
          checkbox.dispatchEvent(clickEvent);
          XCCFLog(`Row ${index}: MouseEvent dispatched`);
          
          clickedCount++;
        } catch (error) {
          XCCFLog(`Row ${index}: ERROR clicking - ${error.message}`);
        }
      } else {
        XCCFLog(`Row ${index}: Already in correct state, skipping`);
        alreadyInCorrectState++;
      }
    });

    XCCFLog('=== SELECT ALL FILTERED SUMMARY ===');
    XCCFLog(`Total rows: ${rows.length}`);
    XCCFLog(`Visible rows: ${visibleCount}`);
    XCCFLog(`Hidden rows: ${hiddenCount}`);
    XCCFLog(`Clicked: ${clickedCount}`);
    XCCFLog(`Already in correct state: ${alreadyInCorrectState}`);
    XCCFLog('=== SELECT ALL FILTERED END ===');
  }

  // Add SaveAndReconcile button listener
  function setupSaveAndReconcileListener() {
    XCCFLog('Setting up SaveAndReconcile button listener...');
    
    // Try to find the button
    const saveAndReconcileButton = document.getElementById('SaveAndReconcile');
    
    if (!saveAndReconcileButton) {
      XCCFLog('SaveAndReconcile button not found, will retry...');
      setTimeout(setupSaveAndReconcileListener, 2000);
      return;
    }
    
    XCCFLog('SaveAndReconcile button found!');
    
    // Add click listener
    saveAndReconcileButton.addEventListener('click', function(e) {
      XCCFLog('=== SAVE AND RECONCILE CLICKED ===');
      
      // Clear all filter inputs
      const payeeInput = document.querySelector('.xero-filter-input[data-column="payee"]');
      const referenceInput = document.querySelector('.xero-filter-input[data-column="reference"]');
      const descriptionInput = document.querySelector('.xero-filter-input[data-column="description"]');
      const accountHasValueCheckbox = document.getElementById('xero-filter-account-has-value');
      
      if (payeeInput) {
        XCCFLog('Clearing Payee filter (was: "' + payeeInput.value + '")');
        payeeInput.value = '';
      }
      if (referenceInput) {
        XCCFLog('Clearing Reference filter (was: "' + referenceInput.value + '")');
        referenceInput.value = '';
      }
      if (descriptionInput) {
        XCCFLog('Clearing Description filter (was: "' + descriptionInput.value + '")');
        descriptionInput.value = '';
      }
      if (accountHasValueCheckbox) {
        XCCFLog('Clearing Account "Has value" filter (was: ' + accountHasValueCheckbox.checked + ')');
        accountHasValueCheckbox.checked = false;
      }
      
      // Reset filter state
      XCCFLog('Resetting filter state object');
      filterState.payee = '';
      filterState.reference = '';
      filterState.description = '';
      filterState.accountHasValue = false;
      
      // Apply filters (which will show all rows since filters are empty)
      XCCFLog('Applying filters (all rows should now be visible)');
      applyFilters();
      
      XCCFLog('=== SAVE AND RECONCILE FILTER CLEAR COMPLETE ===');
    }, true); // Use capture phase
    
    XCCFLog('SaveAndReconcile button listener attached successfully');
  }

  // Add detailed monitoring for row field updates
  function setupRowUpdateMonitoring() {
    XCCFLog('Setting up row update monitoring...');
    
    const tableBody = document.getElementById('ext-gen27');
    if (!tableBody) {
      XCCFLog('Table body not found for monitoring, will retry...');
      setTimeout(setupRowUpdateMonitoring, 2000);
      return;
    }
    
    XCCFLog('Table body found, creating row update observer...');
    
    // Create observer for monitoring changes to row fields
    const rowUpdateObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        // Look for changes to specific columns
        if (mutation.target.classList) {
          const classList = Array.from(mutation.target.classList);
          
          // Check if this is a field we care about
          const monitoredFields = [
            'x-grid3-td-colAccount',
            'x-grid3-td-colTaxRate', 
            'x-grid3-td-colCompany',
            'x-grid3-td-colProperty',
            'x-grid3-td-colPayee'
          ];
          
          const isMonitoredField = monitoredFields.some(field => classList.includes(field));
          
          if (isMonitoredField) {
            const fieldType = classList.find(c => c.startsWith('x-grid3-td-col'))?.replace('x-grid3-td-col', '') || 'Unknown';
            
            XCCFLog('=== ROW FIELD UPDATE DETECTED ===');
            XCCFLog('Field type: ' + fieldType);
            XCCFLog('Mutation type: ' + mutation.type);
            XCCFLog('Target: ' + mutation.target.tagName + '.' + mutation.target.className);
            
            if (mutation.type === 'characterData' || mutation.type === 'childList') {
              const cellInner = mutation.target.querySelector('.x-grid3-cell-inner');
              const newValue = cellInner ? cellInner.textContent : mutation.target.textContent;
              XCCFLog('New value: "' + newValue + '"');
              XCCFLog('Old value: "' + (mutation.oldValue || 'N/A') + '"');
            }
            
            if (mutation.type === 'attributes') {
              XCCFLog('Attribute changed: ' + mutation.attributeName);
              XCCFLog('New attribute value: ' + mutation.target.getAttribute(mutation.attributeName));
            }
            
            XCCFLog('Timestamp: ' + new Date().toISOString());
            
            // Track timing - how long until change completes
            const startTime = Date.now();
            const checkInterval = setInterval(() => {
              const elapsed = Date.now() - startTime;
              
              // Check if element is still being modified
              const isStable = !mutation.target.classList.contains('x-grid3-cell-dirty') &&
                             !mutation.target.classList.contains('x-grid3-cell-editing');
              
              if (isStable) {
                clearInterval(checkInterval);
                XCCFLog(`${fieldType} field update completed in ${elapsed}ms`);
                XCCFLog('=== ROW FIELD UPDATE COMPLETE ===');
              } else if (elapsed > 5000) {
                clearInterval(checkInterval);
                XCCFLog(`${fieldType} field update timeout after ${elapsed}ms (still not stable)`);
                XCCFLog('=== ROW FIELD UPDATE TIMEOUT ===');
              }
            }, 100);
          }
        }
      });
    });
    
    // Observe the table body with detailed settings
    rowUpdateObserver.observe(tableBody, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeOldValue: true,
      characterData: true,
      characterDataOldValue: true
    });
    
    XCCFLog('Row update monitoring observer attached');
  }

  // Enhanced checkbox selection with extensive debugging
  function selectAllFilteredEnhanced(checked) {
    XCCFLog('=== ENHANCED SELECT ALL FILTERED START ===');
    XCCFLog('Timestamp: ' + new Date().toISOString());
    XCCFLog('Checkbox state: ' + (checked ? 'CHECKED' : 'UNCHECKED'));
    
    const tableBody = document.getElementById('ext-gen27');
    if (!tableBody) {
      XCCFLog('ERROR: Table body not found!');
      XCCFLog('=== ENHANCED SELECT ALL FILTERED FAILED ===');
      return;
    }
    XCCFLog('Table body found: ' + tableBody.id);
    
    // Log the overall table structure
    XCCFLog('Table body tag: ' + tableBody.tagName);
    XCCFLog('Table body classes: ' + tableBody.className);
    XCCFLog('Table body direct children: ' + tableBody.children.length);

    const rows = tableBody.querySelectorAll('.x-grid3-row');
    XCCFLog('Total rows found: ' + rows.length);
    
    // Sample the first row to understand structure
    if (rows.length > 0) {
      const firstRow = rows[0];
      XCCFLog('=== FIRST ROW STRUCTURE ANALYSIS ===');
      XCCFLog('Row tag: ' + firstRow.tagName);
      XCCFLog('Row classes: ' + firstRow.className);
      XCCFLog('Row direct children: ' + firstRow.children.length);
      
      // Log all direct children
      Array.from(firstRow.children).forEach((child, idx) => {
        XCCFLog(`  Child ${idx}: ${child.tagName}.${child.className}`);
      });
      
      // Try to find checkbox using various methods
      XCCFLog('=== CHECKBOX SEARCH IN FIRST ROW ===');
      
      // Method 1: .x-grid3-row-checker
      const checker1 = firstRow.querySelector('.x-grid3-row-checker');
      XCCFLog('Method 1 (.x-grid3-row-checker): ' + (checker1 ? 'FOUND - ' + checker1.tagName + '.' + checker1.className : 'NOT FOUND'));
      
      // Method 2: input[type="checkbox"]
      const checker2 = firstRow.querySelector('input[type="checkbox"]');
      XCCFLog('Method 2 (input[type="checkbox"]): ' + (checker2 ? 'FOUND - ' + checker2.tagName + '.' + checker2.className : 'NOT FOUND'));
      
      // Method 3: div with "checker" in class
      const checker3 = firstRow.querySelector('div[class*="checker"]');
      XCCFLog('Method 3 (div[class*="checker"]): ' + (checker3 ? 'FOUND - ' + checker3.tagName + '.' + checker3.className : 'NOT FOUND'));
      
      // Method 4: td.x-grid3-td-checker div
      const checker4 = firstRow.querySelector('td.x-grid3-td-checker div');
      XCCFLog('Method 4 (td.x-grid3-td-checker div): ' + (checker4 ? 'FOUND - ' + checker4.tagName + '.' + checker4.className : 'NOT FOUND'));
      
      // Method 5: td.x-grid3-td-checker
      const checker5 = firstRow.querySelector('td.x-grid3-td-checker');
      XCCFLog('Method 5 (td.x-grid3-td-checker): ' + (checker5 ? 'FOUND - ' + checker5.tagName + '.' + checker5.className : 'NOT FOUND'));
      if (checker5) {
        XCCFLog('  checker5 innerHTML: ' + checker5.innerHTML.substring(0, 200));
      }
      
      // Method 6: All td elements
      const allTds = firstRow.querySelectorAll('td');
      XCCFLog('Method 6 (All td elements): ' + allTds.length + ' found');
      allTds.forEach((td, idx) => {
        XCCFLog(`  td ${idx}: ${td.className}`);
        if (idx === 0) { // First td is likely the checkbox column
          XCCFLog(`  First td innerHTML: ${td.innerHTML.substring(0, 200)}`);
        }
      });
      
      XCCFLog('=== END CHECKBOX SEARCH ===');
    }
    
    let visibleCount = 0;
    let hiddenCount = 0;
    let clickedCount = 0;
    let checkboxNotFoundCount = 0;
    let alreadyInCorrectState = 0;
    let clickSuccessCount = 0;
    let clickFailCount = 0;
    
    rows.forEach((row, index) => {
      // Only check/uncheck visible rows
      const isVisible = row.style.display !== 'none';
      
      if (!isVisible) {
        hiddenCount++;
        return; // Skip hidden rows
      }
      
      visibleCount++;
      
      // Only log details for first 3 visible rows to avoid log spam
      const shouldLog = visibleCount <= 3;
      
      if (shouldLog) {
        XCCFLog(`Row ${index} (visible ${visibleCount}): VISIBLE`);
      }
      
      // Try multiple methods to find the checkbox
      let checkbox = null;
      let checkboxMethod = null;
      
      // Try all methods in order
      checkbox = row.querySelector('.x-grid3-row-checker');
      if (checkbox) checkboxMethod = '.x-grid3-row-checker';
      
      if (!checkbox) {
        checkbox = row.querySelector('input[type="checkbox"]');
        if (checkbox) checkboxMethod = 'input[type="checkbox"]';
      }
      
      if (!checkbox) {
        checkbox = row.querySelector('div[class*="checker"]');
        if (checkbox) checkboxMethod = 'div[class*="checker"]';
      }
      
      if (!checkbox) {
        checkbox = row.querySelector('td.x-grid3-td-checker div');
        if (checkbox) checkboxMethod = 'td.x-grid3-td-checker div';
      }
      
      if (!checkbox) {
        // Try clicking the first td element directly
        checkbox = row.querySelector('td.x-grid3-td-checker');
        if (checkbox) checkboxMethod = 'td.x-grid3-td-checker (fallback)';
      }
      
      if (!checkbox) {
        // Last resort: try to click the row itself
        checkbox = row;
        checkboxMethod = 'row itself (last resort)';
      }
      
      if (!checkbox) {
        checkboxNotFoundCount++;
        if (shouldLog) {
          XCCFLog(`Row ${index}: ERROR - No clickable element found!`);
          XCCFLog(`Row ${index}: Row HTML sample: ` + row.innerHTML.substring(0, 300));
        }
        return;
      }
      
      if (shouldLog) {
        XCCFLog(`Row ${index}: Checkbox found via method: ${checkboxMethod}`);
        XCCFLog(`Row ${index}: Checkbox element: ${checkbox.tagName}.${checkbox.className}`);
      }
      
      // Check current state
      const isChecked = row.classList.contains('x-grid3-row-selected');
      if (shouldLog) {
        XCCFLog(`Row ${index}: Current state: ${isChecked ? 'SELECTED' : 'NOT SELECTED'}`);
        XCCFLog(`Row ${index}: Desired state: ${checked ? 'SELECTED' : 'NOT SELECTED'}`);
      }
      
      // Only click if state needs to change
      const needsClick = (checked && !isChecked) || (!checked && isChecked);
      
      if (needsClick) {
        clickedCount++;
        
        if (shouldLog) {
          XCCFLog(`Row ${index}: CLICKING to ${checked ? 'SELECT' : 'DESELECT'}`);
        }
        
        let clickWorked = false;
        
        // Try multiple click methods
        try {
          // Method 1: Direct click
          checkbox.click();
          if (shouldLog) {
            XCCFLog(`Row ${index}: Direct click() executed`);
          }
          
          // Check if it worked after a tiny delay
          setTimeout(() => {
            const newState = row.classList.contains('x-grid3-row-selected');
            const expectedState = checked;
            if (newState === expectedState) {
              clickSuccessCount++;
              if (shouldLog) {
                XCCFLog(`Row ${index}: Click SUCCESS - state is now correct`);
              }
            } else {
              clickFailCount++;
              if (shouldLog) {
                XCCFLog(`Row ${index}: Click FAILED - state is still wrong`);
              }
            }
          }, 100);
          
        } catch (error) {
          if (shouldLog) {
            XCCFLog(`Row ${index}: ERROR clicking - ${error.message}`);
          }
          clickFailCount++;
        }
        
        // Method 2: Dispatch MouseEvent (as backup)
        try {
          const mouseDownEvent = new MouseEvent('mousedown', {
            view: window,
            bubbles: true,
            cancelable: true
          });
          const mouseUpEvent = new MouseEvent('mouseup', {
            view: window,
            bubbles: true,
            cancelable: true
          });
          const clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true
          });
          
          checkbox.dispatchEvent(mouseDownEvent);
          checkbox.dispatchEvent(mouseUpEvent);
          checkbox.dispatchEvent(clickEvent);
          
          if (shouldLog) {
            XCCFLog(`Row ${index}: MouseEvents dispatched`);
          }
        } catch (error) {
          if (shouldLog) {
            XCCFLog(`Row ${index}: ERROR dispatching MouseEvents - ${error.message}`);
          }
        }
        
      } else {
        alreadyInCorrectState++;
        if (shouldLog) {
          XCCFLog(`Row ${index}: Already in correct state, skipping`);
        }
      }
    });

    XCCFLog('=== ENHANCED SELECT ALL FILTERED SUMMARY ===');
    XCCFLog(`Total rows: ${rows.length}`);
    XCCFLog(`Visible rows: ${visibleCount}`);
    XCCFLog(`Hidden rows: ${hiddenCount}`);
    XCCFLog(`Checkboxes not found: ${checkboxNotFoundCount}`);
    XCCFLog(`Clicked: ${clickedCount}`);
    XCCFLog(`Already in correct state: ${alreadyInCorrectState}`);
    XCCFLog(`Click successes (verified): ${clickSuccessCount}`);
    XCCFLog(`Click failures (verified): ${clickFailCount}`);
    XCCFLog('Timestamp: ' + new Date().toISOString());
    XCCFLog('=== ENHANCED SELECT ALL FILTERED END ===');
  }

  // Override the original selectAllFiltered function
  function selectAllFiltered(checked) {
    selectAllFilteredEnhanced(checked);
  }

  // Initialize when ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    // DOM is already ready
    setTimeout(init, 1000);
  }
  
  // Setup additional listeners after initial load
  setTimeout(() => {
    setupSaveAndReconcileListener();
    setupRowUpdateMonitoring();
  }, 3000);

  function XCCFLog(text) {
    console.log('Xero Cash Coding Filter: ' + text);
  }

})();