export function renderStorage(state) {
  const storage = state.storage || {};
  const grid = document.getElementById("storage-grid");
  if (!grid) return;

  const disks = storage.disks || [];
  if (!disks.length) {
    grid.innerHTML = '<div class="card" style="opacity:0.5; font-family:var(--font-mono); font-size:10px; color:var(--text-dim); padding:12px;">No disk data</div>';
    return;
  }

  grid.innerHTML = disks.map(disk => {
    const pct = disk.usage_percent ?? 0;
    const fillClass = pct > 85 ? "danger" : pct > 70 ? "warn" : "";
    const statusColor = disk.status === "critical" ? "var(--red)" : disk.status === "warning" ? "var(--yellow)" : "var(--teal)";
    return `
      <div class="card">
        <div class="disk-header">
          <span class="disk-name">${disk.name || disk.mount}</span>
          <span class="disk-usage" style="color:${statusColor}">${pct.toFixed(1)}%</span>
        </div>
        <div class="disk-sub">${disk.mount} · ${disk.used_gb?.toFixed(1)}/${disk.total_gb?.toFixed(1)} GB</div>
        <div class="progress-bar">
          <div class="progress-fill ${fillClass}" style="width:${Math.min(pct,100)}%"></div>
        </div>
      </div>`;
  }).join("");
}