// PHASE 7: Tab Switch State Refresh
// Add this code to the Home Template <script> section

// Track if this is the Home tab and listen for visibility changes
(function initTabSwitchRefresh() {
  let lastVisible = true; // Start as visible since Home is default tab

  // Check visibility periodically
  const checkVisibility = function() {
    const homeTab = document.querySelector('[aria-label="Home"]');
    const isVisible = homeTab && homeTab.classList.contains('md-active');

    // If tab just became visible (switched to Home)
    if (isVisible && !lastVisible) {
      console.log('[PHASE 7] Home tab activated - refreshing state');

      // Request current state from backend
      scope.send({ action: 'get-current-state' });

      // Optionally: Trigger dashboard re-render
      if (scope.renderDashboard) {
        scope.$evalAsync(scope.renderDashboard);
      }
    }

    lastVisible = isVisible;
  };

  // Check every 500ms for tab changes
  setInterval(checkVisibility, 500);

  // Also listen for Angular's tab change events if available
  scope.$on('$locationChangeSuccess', function() {
    console.log('[PHASE 7] Location change detected');
    setTimeout(checkVisibility, 100);
  });
})();

// ALTERNATIVE APPROACH: Listen for ui-control messages
// This approach hooks into Node-RED Dashboard's ui_control node
scope.$watch('msg', function(msg) {
  if (!msg) return;

  // If this is a ui_control message indicating Home tab activation
  if (msg.ui_control && msg.ui_control.tab === 'Home') {
    console.log('[PHASE 7] Home tab activated via ui_control');

    // Refresh current state from backend
    scope.send({ action: 'get-current-state' });

    // Re-render dashboard
    if (scope.renderDashboard) {
      scope.$evalAsync(scope.renderDashboard);
    }
  }
});