// Popup script for Page Editor extension

document.addEventListener('DOMContentLoaded', () => {
  initializePopup();
});

function initializePopup() {
  const toggle = document.getElementById('editModeToggle');
  
  // Check current edit mode state
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const currentTab = tabs[0];
    const pageUrl = currentTab.url;
    const EDIT_MODE_KEY = `edit_mode_${btoa(pageUrl)}`;
    
    chrome.storage.session.get([EDIT_MODE_KEY], (result) => {
      const isEnabled = !!result[EDIT_MODE_KEY];
      
      // Update toggle UI
      if (isEnabled) {
        toggle.classList.add('enabled');
        document.getElementById('statusText').textContent = 'Enabled';
        document.getElementById('statusText').classList.add('active');
        document.getElementById('editInfo').classList.add('visible');
        document.getElementById('keyboardShortcuts').classList.add('visible');
        document.getElementById('editActionsSection').style.display = 'block';
      } else {
        toggle.classList.remove('enabled');
        document.getElementById('statusText').textContent = 'Disabled';
        document.getElementById('statusText').classList.remove('active');
        document.getElementById('editInfo').classList.remove('visible');
        document.getElementById('keyboardShortcuts').classList.remove('visible');
        document.getElementById('editActionsSection').style.display = 'none';
      }
      
      updateEditStatus();
    });
  });

  // Toggle click handler
  toggle.addEventListener('click', () => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const currentTab = tabs[0];
      const pageUrl = currentTab.url;
      const EDIT_MODE_KEY = `edit_mode_${btoa(pageUrl)}`;
      
      // Get current state
      chrome.storage.session.get([EDIT_MODE_KEY], (result) => {
        const isCurrentlyEnabled = !!result[EDIT_MODE_KEY];
        const newState = !isCurrentlyEnabled;
        
        // Store new state
        if (newState) {
          chrome.storage.session.set({ [EDIT_MODE_KEY]: true });
        } else {
          chrome.storage.session.remove([EDIT_MODE_KEY]);
        }
        
        // Send message to content script
        chrome.tabs.sendMessage(currentTab.id, {
          action: 'toggleEditMode',
          enabled: newState
        }, (response) => {
          if (chrome.runtime.lastError) {
            console.log('Content script not ready:', chrome.runtime.lastError);
            return;
          }
          
          // Update UI
          if (newState) {
            toggle.classList.add('enabled');
            document.getElementById('statusText').textContent = 'Enabled';
            document.getElementById('statusText').classList.add('active');
            document.getElementById('editInfo').classList.add('visible');
            document.getElementById('keyboardShortcuts').classList.add('visible');
            document.getElementById('editActionsSection').style.display = 'block';
          } else {
            toggle.classList.remove('enabled');
            document.getElementById('statusText').textContent = 'Disabled';
            document.getElementById('statusText').classList.remove('active');
            document.getElementById('editInfo').classList.remove('visible');
            document.getElementById('keyboardShortcuts').classList.remove('visible');
            document.getElementById('editActionsSection').style.display = 'none';
          }
          
          updateEditStatus();
        });
      });
    });
  });

  // Attach button listeners
  attachButtonListeners();
}

function attachButtonListeners() {
  // Save All button
  const saveAllBtn = document.getElementById('saveAllBtn');
  if (saveAllBtn) {
    saveAllBtn.addEventListener('click', () => {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        chrome.scripting.executeScript({
          target: { tabId: tabs[0].id },
          function: () => {
            const editableElements = document.querySelectorAll('[data-editable-marked]');
            const edits = {};
            
            // Manually save (calling saveAllEdits from content script)
            editableElements.forEach((el) => {
              if (el.textContent.trim().length > 0) {
                console.log('[Page Editor] Saving element');
              }
            });
          }
        });
        
        setTimeout(() => {
          updateEditStatus();
          showMessage('All changes saved!', 'success');
        }, 500);
      });
    });
  }

  // Clear All button
  const clearAllBtn = document.getElementById('clearAllBtn');
  if (clearAllBtn) {
    clearAllBtn.addEventListener('click', () => {
      if (confirm('Are you sure you want to clear all edits on this page? This cannot be undone.')) {
        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
          const pageUrl = tabs[0].url;
          const storageKey = `page_edits_${btoa(pageUrl)}`;
          
          chrome.storage.local.remove([storageKey], () => {
            chrome.scripting.executeScript({
              target: { tabId: tabs[0].id },
              function: () => {
                location.reload();
              }
            });
            
            setTimeout(() => {
              updateEditStatus();
              showMessage('All edits cleared!', 'success');
            }, 500);
          });
        });
      }
    });
  }

  // Export button
  const exportBtn = document.getElementById('exportBtn');
  if (exportBtn) {
    exportBtn.addEventListener('click', () => {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const pageUrl = tabs[0].url;
        const storageKey = `page_edits_${btoa(pageUrl)}`;

        chrome.storage.local.get([storageKey], (result) => {
          const edits = result[storageKey] || {};
          
          if (Object.keys(edits).length === 0) {
            showMessage('No edits to export', 'error');
            return;
          }

          const exportData = {
            url: pageUrl,
            exportedAt: new Date().toISOString(),
            edits: edits
          };

          const dataStr = JSON.stringify(exportData, null, 2);
          const dataBlob = new Blob([dataStr], { type: 'application/json' });
          const url = URL.createObjectURL(dataBlob);
          const filename = `page_edits_${Date.now()}.json`;

          const link = document.createElement('a');
          link.href = url;
          link.download = filename;
          link.click();

          URL.revokeObjectURL(url);
          showMessage('Edits exported!', 'success');
        });
      });
    });
  }
}

function updateEditStatus() {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const currentTab = tabs[0];
    const pageUrl = currentTab.url;
    const storageKey = `page_edits_${btoa(pageUrl)}`;

    chrome.storage.local.get([storageKey], (result) => {
      const edits = result[storageKey] || {};
      const editCount = Object.keys(edits).length;

      const statusEl = document.getElementById('editStatus');
      if (editCount === 0) {
        statusEl.textContent = 'No edits yet on this page';
      } else {
        statusEl.innerHTML = `<span id="editCount">${editCount}</span> element${editCount !== 1 ? 's' : ''} edited`;
      }
    });
  });
}

function showMessage(message, type = 'info') {
  const statusEl = document.getElementById('editStatus');
  const originalText = statusEl.textContent;

  statusEl.textContent = message;
  statusEl.style.color = type === 'success' ? '#2e7d32' : '#d32f2f';

  setTimeout(() => {
    statusEl.textContent = originalText;
    statusEl.style.color = '#666';
  }, 2000);
}

function attachButtonListeners() {
  // Save All button
  document.getElementById('saveAllBtn').addEventListener('click', () => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.scripting.executeScript({
        target: { tabId: tabs[0].id },
        function: () => {
          // Call the saveAllEdits function from content script
          const event = new Event('save-all-edits');
          document.dispatchEvent(event);
        }
      });
      
      setTimeout(() => {
        updateStatus();
        showMessage('All changes saved!', 'success');
      }, 500);
    });
  });

  // Clear All button
  document.getElementById('clearAllBtn').addEventListener('click', () => {
    if (confirm('Are you sure you want to clear all edits on this page? This cannot be undone.')) {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const pageUrl = tabs[0].url;
        const storageKey = `page_edits_${btoa(pageUrl)}`;
        
        chrome.storage.local.remove([storageKey], () => {
          chrome.scripting.executeScript({
            target: { tabId: tabs[0].id },
            function: () => {
              location.reload();
            }
          });
          
          setTimeout(() => {
            updateStatus();
            showMessage('All edits cleared!', 'success');
          }, 500);
        });
      });
    }
  });

  // Export button
  document.getElementById('exportBtn').addEventListener('click', () => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const pageUrl = tabs[0].url;
      const storageKey = `page_edits_${btoa(pageUrl)}`;

      chrome.storage.local.get([storageKey], (result) => {
        const edits = result[storageKey] || {};
        
        if (Object.keys(edits).length === 0) {
          showMessage('No edits to export', 'error');
          return;
        }

        const exportData = {
          url: pageUrl,
          exportedAt: new Date().toISOString(),
          edits: edits
        };

        const dataStr = JSON.stringify(exportData, null, 2);
        const dataBlob = new Blob([dataStr], { type: 'application/json' });
        const url = URL.createObjectURL(dataBlob);
        const filename = `page_edits_${Date.now()}.json`;

        const link = document.createElement('a');
        link.href = url;
        link.download = filename;
        link.click();

        URL.revokeObjectURL(url);
        showMessage('Edits exported!', 'success');
      });
    });
  });
}

function showMessage(message, type = 'info') {
  const statusEl = document.getElementById('status');
  const originalText = statusEl.textContent;
  const originalClass = statusEl.className;

  statusEl.textContent = message;
  statusEl.className = `status ${type === 'success' ? 'success' : 'error'}`;

  setTimeout(() => {
    statusEl.textContent = originalText;
    statusEl.className = originalClass;
  }, 2000);
}