popup.js

// DOM Elements
const sortBtn = document.getElementById('sortBtn');
const saveBtn = document.getElementById('saveBtn');
const loadBtn = document.getElementById('loadBtn');
const statusBar = document.getElementById('statusBar');
const statusText = document.getElementById('statusText');
const statusIcon = document.querySelector('.status-icon');

// Status update helper
function updateStatus(message, type = 'default') {
  statusBar.className = 'status-bar ' + type;
  statusText.textContent = message;
  
  const icons = {
    default: '✨',
    loading: '⟳',
    success: '✓',
    error: '✕'
  };
  
  statusIcon.textContent = icons[type] || icons.default;
}

// Set button loading state
function setButtonLoading(button, loading) {
  if (loading) {
    button.classList.add('loading');
  } else {
    button.classList.remove('loading');
  }
}

// Send message to background script
async function sendMessage(action) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage({ action }, (response) => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError.message));
      } else if (response && response.error) {
        reject(new Error(response.error));
      } else {
        resolve(response);
      }
    });
  });
}

// Sort & Group Tabs
sortBtn.addEventListener('click', async () => {
  setButtonLoading(sortBtn, true);
  updateStatus('Sorting and grouping tabs...', 'loading');
  
  try {
    const response = await sendMessage('sortAndGroup');
    updateStatus(`Created ${response.groupCount} group${response.groupCount !== 1 ? 's' : ''} from ${response.tabCount} tabs`, 'success');
  } catch (error) {
    updateStatus('Failed to sort tabs: ' + error.message, 'error');
  } finally {
    setButtonLoading(sortBtn, false);
  }
});

// Save All Tabs
saveBtn.addEventListener('click', async () => {
  setButtonLoading(saveBtn, true);
  updateStatus('Saving your tabs...', 'loading');
  
  try {
    const response = await sendMessage('saveTabs');
    updateStatus(`Saved ${response.tabCount} tabs successfully`, 'success');
  } catch (error) {
    updateStatus('Failed to save tabs: ' + error.message, 'error');
  } finally {
    setButtonLoading(saveBtn, false);
  }
});

// Load Saved Tabs
loadBtn.addEventListener('click', async () => {
  setButtonLoading(loadBtn, true);
  updateStatus('Loading saved tabs...', 'loading');
  
  try {
    const response = await sendMessage('loadTabs');
    if (response.tabCount === 0) {
      updateStatus('No saved tabs found', 'default');
    } else {
      updateStatus(`Restored ${response.tabCount} tabs`, 'success');
    }
  } catch (error) {
    updateStatus('Failed to load tabs: ' + error.message, 'error');
  } finally {
    setButtonLoading(loadBtn, false);
  }
});

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  updateStatus('Ready to organize your tabs', 'default');
});