// Health monitoring UI functions

let healthData = null;
let healthUpdateInterval = null;

// Fetch health data
async function fetchHealth() {
  try {
    const response = await fetch('/api/health');
    if (!response.ok) {
      throw new Error('Failed to fetch health data');
    }
    healthData = await response.json();
    return healthData;
  } catch (err) {
    console.error('Failed to fetch health:', err);
    if (window.showNotification) window.showNotification('Failed to load health data', 'error');
    return null;
  }
}

// Render health dashboard
async function renderHealth() {
  const data = await fetchHealth();
  if (!data) return;
  
  updateHealthStatus(data);
  renderServiceCards(data);
  updateHealthHistory(data);
}

// Update health status display
function updateHealthStatus(data) {
  const statusEl = document.getElementById('health-status');
  if (statusEl) {
    statusEl.textContent = data.status === 'healthy' ? 'Healthy' : 'Degraded';
    statusEl.className = data.status === 'healthy' 
      ? 'text-2xl font-bold text-green-600 dark:text-green-400'
      : 'text-2xl font-bold text-yellow-600 dark:text-yellow-400';
  }
  
  const uptimeEl = document.getElementById('health-uptime');
  if (uptimeEl && data.uptime) {
    uptimeEl.textContent = window.formatUptime ? window.formatUptime(data.uptime) : `${Math.floor(data.uptime / 1000)}s`;
  }
}

// Render service status cards
function renderServiceCards(data) {
  const services = [
    { key: 'dns', name: 'DNS Service', icon: '🌐' },
    { key: 'proxy', name: 'Proxy Service', icon: '🔒' },
    { key: 'swarm', name: 'Swarm', icon: '🔗' },
    { key: 'corestore', name: 'Corestore', icon: '💾' }
  ];
  
  const container = document.getElementById('health-services');
  if (!container) return;
  
  container.innerHTML = services.map(service => {
    const serviceData = data.services?.[service.key] || data.dependencies?.[service.key];
    const healthy = serviceData?.healthy !== false;
    const enabled = serviceData?.enabled !== false;
    const statusColor = healthy ? 'green' : 'red';
    const statusText = healthy ? 'Healthy' : 'Unhealthy';
    
    return `
      <div class="rounded-lg shadow-md p-4 theme-card">
        <div class="flex items-center justify-between mb-2">
          <div class="flex items-center gap-2">
            <span class="text-2xl">${service.icon}</span>
            <h3 class="text-lg font-semibold">${service.name}</h3>
          </div>
          <span class="px-3 py-1 rounded-full text-sm font-semibold ${
            healthy ? 'bg-green-500' : 
            'bg-red-500'
          }" style="color: var(--text-primary);">
            ${statusText}
          </span>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-400">
          ${enabled ? 'Enabled' : 'Disabled'}
          ${serviceData?.details ? ` • ${JSON.stringify(serviceData.details).replace(/[{}"]/g, '').substring(0, 50)}...` : ''}
        </div>
      </div>
    `;
  }).join('');
}

// Update health history
function updateHealthHistory(data) {
  // Health history tracking removed - chart no longer displayed
}

// Render health history chart - removed, chart no longer displayed
function renderHealthHistoryChart() {
  // Health history chart removed from stats page
}

// Start health updates
function startHealthUpdates() {
  if (healthUpdateInterval) return;
  
  // Initial render
  renderHealth();
  
  // Update every 5 seconds
  healthUpdateInterval = setInterval(() => {
    renderHealth();
  }, 5000);
}

// Stop health updates
function stopHealthUpdates() {
  if (healthUpdateInterval) {
    clearInterval(healthUpdateInterval);
    healthUpdateInterval = null;
  }
}

// Make functions globally accessible
window.renderHealth = renderHealth;
window.startHealthUpdates = startHealthUpdates;
window.stopHealthUpdates = stopHealthUpdates;