popup.js

// popup.js
let sessionDB;
let statusElement;
let activeTagFilters = new Set();

document.addEventListener('DOMContentLoaded', async function() {
  sessionDB = new SessionDB();
  await sessionDB.init();
  statusElement = document.getElementById('status');

  // Initialize all event listeners
  initializeEventListeners();
  
  // Load initial data
  await loadSessions();
  await updateTagCloud();
  await checkAutoBackupStatus();
});

function initializeEventListeners() {
  // Save session
  document.getElementById('saveSession').addEventListener('click', saveCurrentSession);
  
  // Search
  document.getElementById('searchInput').addEventListener('input', debounce(handleSearch, 300));
  document.getElementById('searchType').addEventListener('change', handleSearch);
  
  // Import/Export
  document.getElementById('exportSessions').addEventListener('click', exportSessions);
  document.getElementById('importSessions').addEventListener('click', () => {
    document.getElementById('importFile').click();
  });
  document.getElementById('importFile').addEventListener('change', importSessions);
  
  // Auto-backup
  document.getElementById('toggleAutoBackup').addEventListener('click', toggleAutoBackup);

  saveButton.addEventListener('click', async () => {
    const tags = tagInput.value.split(',')
      .map(tag => tag.trim())
      .filter(tag => tag.length > 0);
    
    await saveCurrentSession(tags);
    loadSessions(); // Refresh the display
    tagInput.value = ''; // Clear the input
  });

}

async function saveCurrentSession(tags) {
  const tabs = await chrome.tabs.query({ currentWindow: true });
  const session = {
    id: Date.now(),
    timestamp: new Date().toISOString(),
    tags: tags,
    tabs: tabs.map(tab => ({
      title: tab.title,
      url: tab.url
    }))
  };

  // Get existing sessions and add the new one
  const { sessions = [] } = await chrome.storage.local.get('sessions');
  sessions.unshift(session);
  
  // Save updated sessions
  await chrome.storage.local.set({ sessions });
}

async function handleSearch() {
  const query = document.getElementById('searchInput').value;
  const type = document.getElementById('searchType').value;
  
  try {
    const sessions = await sessionDB.searchSessions(query, type);
    renderSessions(sessions);
    updateStatus('Search complete');
  } catch (error) {
    updateStatus('Search error: ' + error);
  }
}

async function updateTagCloud() {
  const sessions = await sessionDB.getAllSessions();
  const tagCounts = new Map();
  
  sessions.forEach(session => {
    session.tags.forEach(tag => {
      tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
    });
  });

  const tagCloud = document.getElementById('tagCloud');
  tagCloud.innerHTML = Array.from(tagCounts.entries())
    .map(([tag, count]) => `
      <span class="tag ${activeTagFilters.has(tag) ? 'selected' : ''}" 
            onclick="toggleTagFilter('${tag}')">
        ${tag} (${count})
      </span>
    `).join('');
}

async function toggleTagFilter(tag) {
  if (activeTagFilters.has(tag)) {
    activeTagFilters.delete(tag);
  } else {
    activeTagFilters.add(tag);
  }
  
  const sessions = await sessionDB.getAllSessions();
  const filteredSessions = activeTagFilters.size > 0 
    ? sessions.filter(session => 
        session.tags.some(tag => activeTagFilters.has(tag)))
    : sessions;
    
  renderSessions(filteredSessions);
  updateTagCloud();
}

async function importSessions(event) {
  const file = event.target.files[0];
  if (!file) return;

  try {
    const text = await file.text();
    const sessions = JSON.parse(text);
    
    for (const session of sessions) {
      await sessionDB.addSession(session);
    }
    
    await loadSessions();
    updateStatus('Sessions imported successfully');
  } catch (error) {
    updateStatus('Import error: ' + error);
  }
}

async function exportSessions() {
  try {
    const sessions = await sessionDB.getAllSessions();
    const blob = new Blob([JSON.stringify(sessions, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
    chrome.downloads.download({
      url: url,
      filename: `sessions-backup-${timestamp}.json`,
      saveAs: true
    });
    
    updateStatus('Sessions exported successfully');
  } catch (error) {
    updateStatus('Export error: ' + error);
  }
}

async function toggleAutoBackup() {
  const { autoBackupEnabled } = await chrome.storage.local.get('autoBackupEnabled');
  const newValue = !autoBackupEnabled;
  
  await chrome.storage.local.set({ autoBackupEnabled: newValue });
  if (newValue) {
    chrome.alarms.create('autoBackup', { periodInMinutes: 60 });
  } else {
    chrome.alarms.clear('autoBackup');
  }
  
  document.getElementById('toggleAutoBackup').textContent = 
    newValue ? 'Disable Auto-Backup' : 'Enable Auto-Backup';
  updateStatus(`Auto-backup ${newValue ? 'enabled' : 'disabled'}`);
}

function renderSessionEditor(session) {
  return `
    <div class="session-editor">
      <input type="text" value="${session.tags.join(', ')}" 
             class="edit-tags" placeholder="Edit tags (comma-separated)">
      <div class="tab-list">
        ${session.tabs.map((tab, index) => `
          <div class="tab-item">
            <input type="text" value="${tab.title}" class="edit-tab-title" data-index="${index}">
            <input type="text" value="${tab.url}" class="edit-tab-url" data-index="${index}">
            <button onclick="removeTab(${session.id}, ${index})">Remove</button>
          </div>
        `).join('')}
      </div>
      <button onclick="saveEditedSession(${session.id})">Save Changes</button>
      <button onclick="cancelEdit(${session.id})">Cancel</button>
    </div>
  `;
}

// ... (Previous helper functions remain the same)

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}