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

  const pill = document.getElementById("uk-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; };
  set("uk-up", online ? (d.monitors_up ?? 0) : "—");
  set("uk-down", online ? (d.monitors_down ?? 0) : "—");
  const total = (d.monitors_up ?? 0) + (d.monitors_down ?? 0);
  const pct = total > 0 ? Math.round((d.monitors_up / total) * 100) : (online ? 100 : 0);
  set("uk-uptime", online ? `${pct}%` : "—");

  // down monitors list
  const downList = document.getElementById("uk-down-list");
  if (downList) {
    const downs = (d.monitors || []).filter(m => m.status === "offline");
    if (!online || downs.length === 0) {
      downList.innerHTML = "";
    } else {
      downList.innerHTML = downs.map(m =>
        `<span class="uk-down-name">▼ ${m.name}</span>`
      ).join("");
    }
  }

  // uptime bars per monitor (top 6 by name)
  const barsContainer = document.getElementById("uk-bars");
  if (barsContainer) {
    const monitors = (d.monitors || []).slice(0, 6);
    if (!online || monitors.length === 0) {
      barsContainer.innerHTML = '<span class="widget-offline-msg">—</span>';
    } else {
      barsContainer.innerHTML = monitors.map(m => {
        const beats = m.heartbeats && m.heartbeats.length
          ? m.heartbeats
          : (m.status === "online" ? Array(20).fill(1) : Array(20).fill(0));
        const segments = beats.slice(-20).map(b =>
          `<span class="hb-seg ${b ? "hb-up" : "hb-down"}"></span>`
        ).join("");
        return `
          <div class="uk-monitor-row">
            <span class="uk-monitor-name">${m.name}</span>
            <span class="uk-bar">${segments}</span>
          </div>`;
      }).join("");
    }
  }
}