function pct(value) {
  return `${Math.round(value)}%`;
}

function gb(value) {
  return `${Number(value).toFixed(1)} GB`;
}

function toneForPercent(value) {
  if (value >= 85) return "danger";
  if (value >= 60) return "warning";
  return "online";
}

function setSignal(id, tone) {
  const node = document.getElementById(id);
  node.className = `signal ${tone === "danger" ? "offline" : tone === "warning" ? "warning" : tone === "info" ? "info" : "online"}`;
}

function setBar(id, fillId, percent, tone) {
  const bar = document.getElementById(id);
  const fill = document.getElementById(fillId);
  bar.className = `metric-bar${tone === "online" ? "" : ` ${tone === "danger" ? "danger" : tone}`}`;
  fill.style.width = `${Math.max(0, Math.min(percent, 100))}%`;
}

export function renderStats(state) {
  const { system } = state.data;
  const cpuTone = toneForPercent(system.cpu.usage_percent);
  const ramTone = toneForPercent(system.memory.usage_percent);
  const networkTone = "info";
  const uptimeTone = system.source.status === "online" ? "online" : "danger";

  setSignal("cpu-signal", cpuTone);
  document.getElementById("cpu-value").textContent = pct(system.cpu.usage_percent);
  document.getElementById("cpu-value").className = `card-value value-${cpuTone}`;
  document.getElementById("cpu-cores").textContent = `${system.cpu.cores} CORES`;
  document.getElementById("cpu-cores").className = `metric-accent ${cpuTone === "danger" ? "warning" : "online"}`;
  document.getElementById("cpu-load").textContent = system.cpu.load_1.toFixed(2);
  setBar("cpu-bar", "cpu-bar-fill", system.cpu.usage_percent, cpuTone);

  setSignal("ram-signal", ramTone);
  document.getElementById("ram-value").textContent = pct(system.memory.usage_percent);
  document.getElementById("ram-value").className = `card-value value-${ramTone}`;
  document.getElementById("ram-used").textContent = gb(system.memory.used_gb);
  document.getElementById("ram-used").className = `metric-accent ${ramTone}`;
  document.getElementById("ram-free").textContent = gb(system.memory.available_gb);
  document.getElementById("ram-free").className = "metric-accent info";
  setBar("ram-bar", "ram-bar-fill", system.memory.usage_percent, ramTone);

  setSignal("network-signal", networkTone);
  document.getElementById("network-value").textContent = system.network.rx_mbps.toFixed(1);
  document.getElementById("network-value").className = "card-value value-info";
  document.getElementById("network-tx").textContent = `${system.network.tx_mbps.toFixed(1)} MBPS`;
  setBar("network-bar", "network-bar-fill", Math.min(system.network.rx_mbps * 4, 100), networkTone);

  const uptimeDays = Math.max(0, Math.floor(system.host.uptime_seconds / 86400));
  const uptimeHours = Math.max(0, Math.floor(system.host.uptime_seconds / 3600));
  setSignal("uptime-signal", uptimeTone);
  document.getElementById("uptime-value").textContent = `${uptimeDays}D`;
  document.getElementById("uptime-value").className = `card-value value-${uptimeTone === "danger" ? "danger" : "online"}`;
  document.getElementById("uptime-host").textContent = system.source.host_name.toUpperCase();
  document.getElementById("uptime-hours").textContent = String(uptimeHours);
  setBar("uptime-bar", "uptime-bar-fill", system.source.status === "online" ? 84 : 10, uptimeTone === "danger" ? "danger" : "online");
}