// Initialize the editor when the DOM content is loaded
document.addEventListener('DOMContentLoaded', () => {
  console.log('Editor window loaded');
  
  // Get canvas element
  const canvas = document.getElementById('editor-canvas');
  if (!canvas) {
    console.error('Canvas element not found');
    return;
  }
  console.log('Canvas element found:', canvas);

  // Create test image to verify canvas
  const ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 600;
  ctx.fillStyle = '#f0f0f0';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#000000';
  ctx.font = '20px Arial';
  ctx.fillText('Waiting for screenshot...', 20, 40);
  
  // Initialize screenshot editor
  const editor = new ScreenshotEditor(canvas);
  console.log('ScreenshotEditor initialized');
  
  // Notify background script that editor is ready
  chrome.runtime.sendMessage({ type: 'editor-ready' }, response => {
    console.log('Editor ready notification sent, response:', response);
  });
  
  // Listen for messages
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log('Editor received message:', message);
    
    if (message.type === 'init-editor') {
      console.log('Loading screenshot...');
      
      if (!message.screenshot || typeof message.screenshot !== 'string') {
        console.error('Invalid screenshot data received');
        sendResponse({ success: false, error: 'Invalid screenshot data' });
        return;
      }
      
      const img = new Image();
      img.onload = async () => {
        console.log('Screenshot data is valid, dimensions:', img.width, 'x', img.height);
        try {
          await editor.loadImage(message.screenshot);
          console.log('Screenshot loaded successfully');
          sendResponse({ success: true });
        } catch (error) {
          console.error('Error loading screenshot:', error);
          sendResponse({ success: false, error: error.message });
        }
      };
      
      img.onerror = () => {
        console.error('Error loading image');
        sendResponse({ success: false, error: 'Error loading image' });
      };
      
      img.src = message.screenshot;
      return true; // Keep the message channel open for async response
    }
  });
  
  // Handle save button click
  document.getElementById('save-btn').addEventListener('click', () => {
    console.log('Save button clicked');
    
    try {
      const editedScreenshot = editor.getImageData();
      console.log('Sending edited screenshot back to popup...');
      
      // Send the edited screenshot back to the background script
      chrome.runtime.sendMessage({
        type: 'save-screenshot',
        screenshot: editedScreenshot
      }, response => {
        console.log('Save screenshot response:', response);
        if (response && response.success) {
          window.close();
        } else {
          console.error('Error saving screenshot:', response?.error);
        }
      });
    } catch (error) {
      console.error('Error saving screenshot:', error);
    }
  });
  
  // Handle cancel button click
  document.getElementById('cancel-btn').addEventListener('click', () => {
    window.close();
  });
});