const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const statusDiv = document.getElementById('status');
const tabCountSpan = document.getElementById('tabCount');

// Update UI based on tracking status
function updateUI(isTracking, tabCount = 0) {
  if (isTracking) {
    statusDiv.textContent = 'Tracking Active';
    statusDiv.className = 'tracking';
    startBtn.style.display = 'none';
    stopBtn.style.display = 'block';
    tabCountSpan.textContent = tabCount;
  } else {
    statusDiv.textContent = 'Not Tracking';
    statusDiv.className = 'not-tracking';
    startBtn.style.display = 'block';
    stopBtn.style.display = 'none';
    tabCountSpan.textContent = '0';
  }
}

// Start tracking
startBtn.addEventListener('click', () => {
  chrome.runtime.sendMessage({ action: 'startTracking' }, (response) => {
    console.log('Started tracking:', response);
    checkStatus();
  });
});

// Stop tracking
stopBtn.addEventListener('click', () => {
  chrome.runtime.sendMessage({ action: 'stopTracking' }, (response) => {
    console.log('Stopped tracking:', response);
    checkStatus();
  });
});

// Check current status
function checkStatus() {
  chrome.runtime.sendMessage({ action: 'getStatus' }, (response) => {
    updateUI(response.isTracking, response.tabCount);
  });
}

// Initial status check
checkStatus();

// Update status every 2 seconds
setInterval(checkStatus, 2000);