export function renderStats(state) {
  const sys = state.system || {};
  const overview = state.overview || {};
  const cpu = sys.cpu || {};
  const mem = sys.memory || {};
  const net = sys.network || {};
  const host = sys.host || {};
  const docker = overview.docker || state.services?.docker || {};

  const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };

  // CPU
  set("cpu-percent", cpu.usage_percent != null ? `${cpu.usage_percent.toFixed(1)}%` : "—");
  set("cpu-cores", cpu.cores ?? "—");
  set("cpu-load", cpu.load_5 != null ? cpu.load_5.toFixed(2) : "—");

  // Colour CPU
  const cpuEl = document.getElementById("cpu-percent");
  if (cpuEl && cpu.usage_percent != null) {
    cpuEl.className = "stat-num" + (cpu.usage_percent > 85 ? " danger" : cpu.usage_percent > 65 ? " warn" : "");
  }

  // Memory
  set("ram-percent", mem.usage_percent != null ? `${mem.usage_percent.toFixed(1)}%` : "—");
  set("ram-used", mem.used_gb != null ? mem.used_gb.toFixed(1) : "—");
  set("ram-total", mem.total_gb != null ? mem.total_gb.toFixed(0) : "—");

  const ramEl = document.getElementById("ram-percent");
  if (ramEl && mem.usage_percent != null) {
    ramEl.className = "stat-num" + (mem.usage_percent > 85 ? " danger" : mem.usage_percent > 65 ? " warn" : "");
  }

  // Network
  set("net-rx", net.rx_mbps != null ? net.rx_mbps.toFixed(1) : "—");
  set("net-tx", net.tx_mbps != null ? net.tx_mbps.toFixed(1) : "—");

  // Host
  const upDays = host.uptime_seconds != null ? Math.floor(host.uptime_seconds / 86400) : null;
  set("uptime-days", upDays != null ? upDays : "—");
  set("host-platform", host.platform ? host.platform.slice(0, 5).toUpperCase() : "—");

  // Docker
  set("docker-running", docker.running ?? "—");
  set("docker-stopped", docker.stopped ?? "—");
  set("docker-total", docker.total ?? "—");

  const stoppedEl = document.getElementById("docker-stopped");
  if (stoppedEl) stoppedEl.className = "stat-num" + ((docker.stopped ?? 0) > 0 ? " warn" : " dim");
}