const gb = (kb) => (kb / 1048576).toFixed(1);
const rate = (b) => (b >= 1048576 ? `${(b / 1048576).toFixed(1)} MB/s` : `${Math.round(b / 1024)} KB/s`);
const uptime = (s) => {
  const d = Math.floor(s / 86400);
  const h = Math.floor((s % 86400) / 3600);
  const m = Math.floor((s % 3600) / 60);
  return d ? `${d}d ${h}h` : `${h}h ${m}m`;
};
const gpu = (g) => {
  if (!g) return "—";
  if (g.asleep) return `${g.name} (asleep)`;
  return `${g.name} ${g.util}%${g.temp != null ? ` · ${g.temp}°C` : ""}`;
};

function row(label, value) {
  const div = document.createElement("div");
  div.className = "row";
  const name = document.createElement("span");
  name.className = "muted";
  name.textContent = label;
  const val = document.createElement("span");
  val.className = "num";
  val.textContent = value;
  div.append(name, val);
  return div;
}

export default {
  title: "System",
  interval: 1,

  mount(el) {
    const box = document.createElement("div");
    box.className = "stats";
    el.append(box);
  },

  update(st, el) {
    const box = el.querySelector(".stats");
    box.textContent = "";
    box.append(
      row("CPU", `${st.cpu}%${st.cpuTemp != null ? ` · ${st.cpuTemp}°C` : ""}`),
      row("Memory", `${gb(st.memUsed)} / ${gb(st.memTotal)} GiB`),
      row("GPU", gpu(st.gpu)),
      row("Network", `↓ ${rate(st.net.down)}  ↑ ${rate(st.net.up)}`),
      row("Uptime", uptime(st.uptime)),
    );
  },
};