/**
 * Updates the tabs display by showing the active tab content and scrolling to make it visible.
 * This function is called when switching between tabs to update both the content visibility
 * and the tab button states.
 *
 * @param {string} controllerId - The ID of the tabs controller element (format: "{managerId}-controller")
 */
function updateTabs(controllerId) {
  const controller = document.getElementById(controllerId);
  if (!controller) {
    console.warn(`Controller ${controllerId} not found`);
    return;
  }

  const activeTabId = controller.dataset.activeTab;
  if (!activeTabId) {
    console.warn('No active tab ID found');
    return;
  }

  // Extract manager ID from controller ID (remove '-controller' suffix)
  const managerId = controllerId.replace('-controller', '');

  // Hide all tab contents for this manager
  const contentWrapper = document.getElementById(`${managerId}-content-wrapper`);
  if (contentWrapper) {
    contentWrapper.querySelectorAll('.mf-tab-content').forEach(content => {
      content.classList.add('hidden');
    });

    // Show the active tab content
    const activeContent = document.getElementById(`${managerId}-${activeTabId}-content`);
    if (activeContent) {
      activeContent.classList.remove('hidden');
    }
  }

  // Update active tab button styling
  const header = document.getElementById(`${managerId}-header`);
  if (header) {
    // Remove active class from all tabs
    header.querySelectorAll('.mf-tab-button').forEach(btn => {
      btn.classList.remove('mf-tab-active');
    });

    // Add active class to current tab
    const activeButton = header.querySelector(`[data-tab-id="${activeTabId}"]`);
    if (activeButton) {
      activeButton.classList.add('mf-tab-active');

      // Scroll to make active tab visible if needed
      activeButton.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'nearest'
      });
    }
  }
}