let activeTab = 'console';
const clearHandlers = {};

export function registerClearHandler(tabId, fn) {
  clearHandlers[tabId] = fn;
}

export function switchDevtoolsTab(tabId) {
  activeTab = tabId;
  document.querySelectorAll('.devtools-tab').forEach(btn => {
    btn.classList.toggle('active', btn.dataset.tab === tabId);
  });
  document.querySelectorAll('.devtools-panel').forEach(panel => {
    panel.classList.toggle('active', panel.id === `panel-${tabId}`);
  });
}

export function getActiveDevtoolsTab() {
  return activeTab;
}

export function initDevtools() {
  document.querySelectorAll('.devtools-tab').forEach(btn => {
    btn.addEventListener('click', () => switchDevtoolsTab(btn.dataset.tab));
  });

  document.getElementById('btn-clear-devtools').addEventListener('click', () => {
    const handler = clearHandlers[activeTab];
    if (handler) handler();
  });
}