export function renderBackrest(state) {
  const d = state.backrest || {};
  const online = d.source_status === "online";

  const pill = document.getElementById("backrest-pill");
  if (pill) {
    pill.textContent = online ? "ONLINE" : "OFFLINE";
    pill.className = "status-pill " + (online ? "pill-online" : "pill-offline");
  }

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

  if (online) {
    set("backrest-repos", d.repo_count ?? 0);
    set("backrest-last", fmtAge(d.last_backup_age_hours));
    set("backrest-errors", d.error_count ?? 0);
  } else {
    set("backrest-repos", "—");
    set("backrest-last", "—");
    set("backrest-errors", "—");
  }

  // Color last backup age warn if > 26h
  const lastEl = document.getElementById("backrest-last");
  if (lastEl && online) {
    const age = d.last_backup_age_hours;
    lastEl.style.color = age !== null && age > 26 ? "var(--clr-warn)" : "";
  }

  // Color errors warn if any
  const errEl = document.getElementById("backrest-errors");
  if (errEl && online) {
    errEl.style.color = (d.error_count ?? 0) > 0 ? "var(--clr-warn)" : "";
  }

  // Status dot
  const dot = document.getElementById("backrest-status-dot");
  if (dot) {
    const s = d.last_backup_status || "unknown";
    dot.className = "status-dot dot-" + (s === "ok" ? "ok" : s === "error" ? "err" : "unk");
    dot.title = s;
  }
}

function fmtAge(hours) {
  if (hours === null || hours === undefined) return "—";
  if (hours < 1) return `${Math.round(hours * 60)}m ago`;
  if (hours < 24) return `${Math.round(hours)}h ago`;
  return `${Math.round(hours / 24)}d ago`;
}