// Performance test for column toggle
console.log('Column Toggle Performance Test');

// Function to measure performance
function measureColumnToggle() {
  const startTime = performance.now();
  
  // Find the show/hide tasks button
  const taskToggleButton = document.querySelector('button[title*="Tasks"], button:has(svg + span:contains("Tasks"))');
  
  if (!taskToggleButton) {
    console.error('Could not find the show/hide tasks button');
    return;
  }
  
  console.log('Found tasks toggle button:', taskToggleButton);
  
  // Add performance observer
  const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach((entry) => {
      if (entry.entryType === 'measure') {
        console.log(`${entry.name}: ${entry.duration.toFixed(2)}ms`);
      }
    });
  });
  
  observer.observe({ entryTypes: ['measure'] });
  
  // Measure the click performance
  performance.mark('toggle-start');
  
  taskToggleButton.click();
  
  // Use requestAnimationFrame to measure when the DOM updates are complete
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      performance.mark('toggle-end');
      performance.measure('Column Toggle Duration', 'toggle-start', 'toggle-end');
      
      const endTime = performance.now();
      const totalTime = endTime - startTime;
      
      console.log(`Total toggle time: ${totalTime.toFixed(2)}ms`);
      
      if (totalTime < 500) {
        console.log('✅ Performance is good (< 500ms)');
      } else if (totalTime < 1000) {
        console.log('⚠️ Performance is acceptable (500-1000ms)');
      } else {
        console.log('❌ Performance is poor (> 1000ms)');
      }
      
      observer.disconnect();
    });
  });
}

// Function to count EditableTaskStatus components
function countTaskStatusComponents() {
  const components = document.querySelectorAll('[data-testid="editable-task-status"], .editable-task-status');
  console.log(`Found ${components.length} EditableTaskStatus components`);
  return components.length;
}

// Function to monitor component creation/destruction
function monitorComponentChanges() {
  const initialCount = countTaskStatusComponents();
  
  setTimeout(() => {
    const finalCount = countTaskStatusComponents();
    const difference = Math.abs(finalCount - initialCount);
    
    if (difference === 0) {
      console.log('✅ No components were recreated');
    } else {
      console.log(`⚠️ ${difference} components were recreated`);
    }
  }, 1000);
}

// Run the test
console.log('Starting performance test...');
console.log('Initial component count:', countTaskStatusComponents());

// Monitor for component changes
monitorComponentChanges();

// Wait a bit then measure toggle performance
setTimeout(() => {
  measureColumnToggle();
}, 500);

// Export functions for manual testing
window.testColumnToggle = measureColumnToggle;
window.countComponents = countTaskStatusComponents;