export function renderNetworkHealth(state) {
  _renderAdGuard(state.adguard || {});
  _renderScrutiny(state.scrutiny || {});
}

function _renderAdGuard(d) {
  const online = d.source_status === "online";

  const pill = document.getElementById("adguard-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("adguard-total", fmtK(d.total_queries));
    set("adguard-blocked", fmtK(d.blocked_queries));
    set("adguard-blocked-pct", `${d.blocked_percent ?? 0}%`);
    set("adguard-latency", `${d.avg_processing_ms ?? 0}ms`);

    const bar = document.getElementById("adguard-bar-fill");
    if (bar) bar.style.width = `${Math.min(d.blocked_percent ?? 0, 100)}%`;
  } else {
    ["adguard-total", "adguard-blocked", "adguard-blocked-pct", "adguard-latency"].forEach(id => set(id, "—"));
    const bar = document.getElementById("adguard-bar-fill");
    if (bar) bar.style.width = "0%";
  }
}

function _renderScrutiny(d) {
  const online = d.source_status === "online";

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

  // stat blocks
  const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
  if (online) {
    set("scrutiny-total", d.total_count ?? 0);
    set("scrutiny-failed", d.failed_count ?? 0);
    const passedEl = document.getElementById("scrutiny-passed");
    if (passedEl) {
      passedEl.textContent = (d.total_count ?? 0) - (d.failed_count ?? 0);
    }
  } else {
    set("scrutiny-total", "—");
    set("scrutiny-failed", "—");
    set("scrutiny-passed", "—");
  }

  // disk list
  const list = document.getElementById("scrutiny-list");
  if (!list) return;

  if (!online || !d.devices || d.devices.length === 0) {
    list.innerHTML = `<div class="scrutiny-offline">— ${online ? "no devices" : "offline"}</div>`;
    return;
  }

  list.innerHTML = d.devices.map(dev => {
    const ok = dev.status === "passed";
    const icon = ok ? "✓" : dev.status === "failed" ? "✗" : "?";
    const cls = ok ? "disk-ok" : dev.status === "failed" ? "disk-fail" : "disk-unk";
    const temp = dev.temperature != null ? `<span class="disk-temp">${dev.temperature}°C</span>` : "";
    return `
      <div class="scrutiny-row">
        <span class="disk-icon ${cls}">${icon}</span>
        <span class="disk-name">${dev.name}</span>
        <span class="disk-model">${dev.model}</span>
        ${temp}
      </div>`;
  }).join("");
}

function fmtK(n) {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
  if (n >= 1_000) return (n / 1_000).toFixed(0) + "K";
  return String(n ?? 0);
}