let isListening = true;
let currentTrack = null;

function toggleTheme() {
  const html = document.documentElement;
  const isLight = html.getAttribute('data-theme') === 'light';
  const next = isLight ? 'dark' : 'light';
  html.setAttribute('data-theme', next);
  document.getElementById('theme-btn').textContent = isLight ? 'Light' : 'Dark';
  if (currentTrack && currentTrack.key) {
    window.updateWheel(currentTrack.key);
  } else {
    window.updateWheel(null);
  }
}

function toggleListening() {
  isListening = !isListening;
  const statusEl = document.getElementById('listening-status');
  const icon = statusEl.querySelector('i');
  const text = document.getElementById('listening-text');
  
  if (isListening) {
    statusEl.classList.remove('paused');
    icon.className = 'fa-solid fa-microphone';
    text.textContent = 'Listening';
  } else {
    statusEl.classList.add('paused');
    icon.className = 'fa-solid fa-pause';
    text.textContent = 'Paused';
  }
}

function toggleWheel() {
  const hero = document.getElementById('hero');
  if (hero.classList.contains('wheel-mode')) {
    resetHero();
  } else {
    hero.classList.remove('cover-mode');
    hero.classList.add('wheel-mode');
  }
}

function toggleCover() {
  const hero = document.getElementById('hero');
  if (hero.classList.contains('cover-mode')) {
    resetHero();
  } else {
    hero.classList.remove('wheel-mode');
    hero.classList.add('cover-mode');
  }
}

function resetHero() {
  document.getElementById('hero').classList.remove('wheel-mode', 'cover-mode');
}

// Initial draw
window.updateWheel(null);