popup.js

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

async function loadSnapshots() {
  try {
    const result = await chrome.storage.local.get(['snapshots']);
    const snapshots = result.snapshots || [];
    
    const content = document.getElementById('content');
    
    if (snapshots.length === 0) {
      content.innerHTML = `
        <div class="empty-state">
          <div class="empty-title">No snapshots yet</div>
          <div class="empty-text">
            Press CTRL+SHIFT+S to save your current tabs
          </div>
        </div>
      `;
    } else {
      content.innerHTML = '<div class="snapshots-list" id="snapshots-list"></div>';
      renderSnapshots(snapshots);
    }
  } catch (error) {
    console.error('Error loading snapshots:', error);
    document.getElementById('content').innerHTML = `
      <div class="loading">Error loading snapshots</div>
    `;
  }
}

function renderSnapshots(snapshots) {
  const container = document.getElementById('snapshots-list');
  container.innerHTML = '';

  snapshots.forEach(snapshot => {
    const snapshotElement = createSnapshotElement(snapshot);
    container.appendChild(snapshotElement);
  });
}

function createSnapshotElement(snapshot) {
  const div = document.createElement('div');
  div.className = 'snapshot-item';
  
  const date = new Date(snapshot.timestamp);
  const formattedDate = date.toLocaleDateString();
  const formattedTime = date.toLocaleTimeString([], { 
    hour: '2-digit', 
    minute: '2-digit' 
  });

  div.innerHTML = `
    <div class="snapshot-header">
      <div class="snapshot-title">${escapeHtml(snapshot.title)}</div>
      <div class="snapshot-actions">
        <button class="btn btn-edit" data-action="edit" data-id="${snapshot.id}">
          Edit
        </button>
        <button class="btn btn-delete" data-action="delete" data-id="${snapshot.id}">
          Delete
        </button>
      </div>
    </div>
    <div class="snapshot-meta">
      <span>${formattedDate}</span>
      <span>${formattedTime}</span>
      <span>${snapshot.tabCount} tabs</span>
    </div>
    <div class="snapshot-actions" style="margin-top: 12px;">
      <button class="btn btn-inspect" data-action="inspect" data-id="${snapshot.id}">
        Inspect
      </button>
      <button class="btn" data-action="restore" data-id="${snapshot.id}">
        Restore
      </button>
    </div>
  `;

  // Add event listeners
  div.addEventListener('click', (e) => {
    const action = e.target.dataset.action;
    const id = e.target.dataset.id;
    
    if (action === 'delete') {
      deleteSnapshot(id, e);
    } else if (action === 'restore') {
      restoreSnapshot(id, e);
    } else if (action === 'inspect') {
      inspectTabs(id);
    } else if (action === 'edit') {
      openNamingModal('edit', id);
    }
  });

  return div;
}

function restoreSnapshot(snapshotId, event) {
  if (event) event.stopPropagation();
  
  chrome.runtime.sendMessage({ 
    action: 'restore', 
    snapshotId: snapshotId 
  }, (response) => {
    if (response && response.success) {
      window.close();
    }
  });
}

function deleteSnapshot(snapshotId, event) {
  if (event) event.stopPropagation();
  
  if (confirm('Are you sure you want to delete this snapshot?')) {
    chrome.runtime.sendMessage({ 
      action: 'delete', 
      snapshotId: snapshotId 
    }, (response) => {
      if (response && response.success) {
        loadSnapshots();
      }
    });
  }
}

function escapeHtml(text) {
  const map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  return text.replace(/[&<>"']/g, m => map[m]);
}

// Modal functionality
let currentSnapshot = null;

function setupModalListeners() {
  // Inspection modal listeners
  const modal = document.getElementById('inspection-modal');
  const closeBtn = document.getElementById('modal-close');
  const selectAllBtn = document.getElementById('select-all-tabs');
  const restoreSelectedBtn = document.getElementById('restore-selected-tabs');

  closeBtn.addEventListener('click', closeModal);
  
  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      closeModal();
    }
  });

  selectAllBtn.addEventListener('click', toggleSelectAll);
  restoreSelectedBtn.addEventListener('click', restoreSelectedTabs);

  // Naming modal listeners
  const namingModal = document.getElementById('naming-modal');
  const namingCloseBtn = document.getElementById('naming-modal-close');
  const cancelNamingBtn = document.getElementById('cancel-naming');
  const saveNamedBtn = document.getElementById('save-named-snapshot');
  const nameInput = document.getElementById('snapshot-name');

  namingCloseBtn.addEventListener('click', closeNamingModal);
  cancelNamingBtn.addEventListener('click', closeNamingModal);
  saveNamedBtn.addEventListener('click', saveNamedSnapshot);

  namingModal.addEventListener('click', (e) => {
    if (e.target === namingModal) {
      closeNamingModal();
    }
  });

  nameInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      saveNamedSnapshot();
    }
  });
}

function inspectTabs(snapshotId) {
  const result = chrome.storage.local.get(['snapshots']);
  result.then(data => {
    const snapshots = data.snapshots || [];
    const snapshot = snapshots.find(s => s.id === snapshotId);
    
    if (snapshot) {
      currentSnapshot = snapshot;
      renderTabList(snapshot.tabs);
      openModal();
    }
  });
}

function renderTabList(tabs) {
  const tabList = document.getElementById('tab-list');
  tabList.innerHTML = '';

  tabs.forEach((tab, index) => {
    const tabItem = document.createElement('div');
    tabItem.className = `tab-item ${tab.active ? 'tab-active' : ''}`;
    
    const favicon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2U1ZTVlNSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiPjxjaXJjbGUgY3g9IjgiIGN5PSI4IiByPSIzIiBmaWxsPSIjOTk5Ii8+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjEiIGZpbGw9IiNlNWU1ZTUiLz48L2c+PC9zdmc+';
    
    tabItem.innerHTML = `
      <input type="checkbox" class="tab-checkbox" data-index="${index}" checked>
      <img class="tab-favicon" src="${favicon}">
      <div class="tab-info">
        <div class="tab-title">${escapeHtml(tab.title)}</div>
        <div class="tab-url">${escapeHtml(tab.url)}</div>
      </div>
    `;

    // Add click listener for checkbox
    const checkbox = tabItem.querySelector('.tab-checkbox');
    checkbox.addEventListener('change', (e) => {
      e.stopPropagation();
      tabItem.classList.toggle('selected', e.target.checked);
    });

    // Add click listener for tab item
    tabItem.addEventListener('click', (e) => {
      if (e.target !== checkbox) {
        checkbox.checked = !checkbox.checked;
        tabItem.classList.toggle('selected', checkbox.checked);
      }
    });

    tabList.appendChild(tabItem);
  });
}

function openModal() {
  const modal = document.getElementById('inspection-modal');
  modal.classList.add('show');
}

function closeModal() {
  const modal = document.getElementById('inspection-modal');
  modal.classList.remove('show');
  currentSnapshot = null;
}

function toggleSelectAll() {
  const checkboxes = document.querySelectorAll('.tab-checkbox');
  const tabItems = document.querySelectorAll('.tab-item');
  const allChecked = Array.from(checkboxes).every(cb => cb.checked);
  
  checkboxes.forEach(checkbox => {
    checkbox.checked = !allChecked;
  });
  
  tabItems.forEach((item, index) => {
    item.classList.toggle('selected', !allChecked);
  });
}

function restoreSelectedTabs() {
  if (!currentSnapshot) return;
  
  const checkboxes = document.querySelectorAll('.tab-checkbox:checked');
  const selectedIndices = Array.from(checkboxes).map(cb => parseInt(cb.dataset.index));
  
  if (selectedIndices.length === 0) {
    alert('Please select at least one tab to restore.');
    return;
  }

  const selectedTabs = selectedIndices.map(index => currentSnapshot.tabs[index]);
  
  chrome.runtime.sendMessage({
    action: 'restore-selected',
    tabs: selectedTabs
  }, (response) => {
    if (response && response.success) {
      closeModal();
      window.close();
    }
  });
}

// Naming modal functions
let namingMode = 'save'; // 'save' or 'edit'
let editingSnapshotId = null;

function openNamingModal(mode = 'save', snapshotId = null) {
  namingMode = mode;
  editingSnapshotId = snapshotId;
  
  const modal = document.getElementById('naming-modal');
  const input = document.getElementById('snapshot-name');
  
  if (mode === 'edit' && snapshotId) {
    // Load current name for editing
    chrome.storage.local.get(['snapshots']).then(data => {
      const snapshots = data.snapshots || [];
      const snapshot = snapshots.find(s => s.id === snapshotId);
      if (snapshot) {
        input.value = snapshot.customName || snapshot.title;
      }
    });
  } else {
    input.value = '';
  }
  
  modal.classList.add('show');
  input.focus();
}

function closeNamingModal() {
  const modal = document.getElementById('naming-modal');
  modal.classList.remove('show');
  document.getElementById('snapshot-name').value = '';
  namingMode = 'save';
  editingSnapshotId = null;
}

function saveNamedSnapshot() {
  const nameInput = document.getElementById('snapshot-name');
  const name = nameInput.value.trim();
  
  if (!name) {
    alert('Please enter a name for the snapshot.');
    return;
  }
  
  if (namingMode === 'edit' && editingSnapshotId) {
    // Update existing snapshot
    chrome.runtime.sendMessage({
      action: 'update-snapshot-name',
      snapshotId: editingSnapshotId,
      newName: name
    }, (response) => {
      if (response && response.success) {
        closeNamingModal();
        loadSnapshots();
      }
    });
  } else {
    // Save new snapshot with custom name
    chrome.runtime.sendMessage({
      action: 'save-with-name',
      customName: name
    }, (response) => {
      if (response && response.success) {
        closeNamingModal();
        loadSnapshots();
      }
    });
  }
}