// ------ helpers ------
const $ = (q)=>document.querySelector(q);
function safe(v){ return (v===undefined||v===null||v==='') ? '—' : String(v); }
function ensureArr(a){ return Array.isArray(a)?a:[]; }
function pct(p){ if(p==null) return '—'; return (p*100).toFixed(1)+'%'; }
function humanBytes(n){ if(n==null) return '—'; const u=['B','KiB','MiB','GiB','TiB','PiB']; let i=0,x=+n; while(x>=1024&&i<u.length-1){x/=1024;i++;} return x.toFixed(1)+' '+u[i]; }
function badge(txt, kind){
  const cls={ok:'bg-success-subtle text-success-emphasis',warn:'bg-warning-subtle text-warning-emphasis',
             err:'bg-danger-subtle text-danger-emphasis',info:'bg-info-subtle text-info-emphasis',
             dark:'bg-secondary-subtle text-secondary-emphasis'}[kind||'dark'];
  return `<span class="badge rounded-pill ${cls}">${safe(txt)}</span>`;
}
function rowHTML(cols, attrs=''){ return `<tr ${attrs}>${cols.map(c=>`<td>${c??'—'}</td>`).join('')}</tr>`; }
function setRows(tbody, rows){ tbody.innerHTML = rows.length ? rows.join('') : rowHTML(['—']); }
function fmtSeconds(s){
  if(s==null) return '—';
  s = Math.floor(s);
  const d = Math.floor(s/86400); s%=86400;
  const h = Math.floor(s/3600); s%=3600;
  const m = Math.floor(s/60);   s%=60;
  const parts = [h.toString().padStart(2,'0'), m.toString().padStart(2,'0'), s.toString().padStart(2,'0')].join(':');
  return d>0 ? `${d}d ${parts}` : parts;
}
function parseNetConf(val){
  const out={}; if(!val) return out;
  val.split(',').forEach(kv=>{
    const [k,v] = kv.split('=');
    if(k && v!==undefined) out[k.trim()]=v.trim();
  });
  return out;
}
function parseVmNetworks(config){
  const nets=[];
  for(const [k,v] of Object.entries(config||{})){
    const m = k.match(/^net(\d+)$/);
    if(m){ nets.push({idx:+m[1], raw:v, ...parseNetConf(v)}); }
  }
  nets.sort((a,b)=>a.idx-b.idx);
  return nets;
}
function kvGrid(obj, keys, titleMap={}){
  return `<div class="row row-cols-1 row-cols-md-2 g-2">
    ${keys.map(k=>`
      <div class="col">
        <div class="card border-0"><div class="card-body p-2">
          <div class="text-muted small">${titleMap[k]||k}</div>
          <div class="fw-semibold">${safe(obj[k])}</div>
        </div></div>
      </div>`).join('')}
  </div>`;
}

// ------ DOM refs ------
const nodeInput=$('#node'), btnEnable=$('#btnEnable'), btnDisable=$('#btnDisable'), btnToggleAll=$('#btnToggleAll');
const btnRefresh=$('#btnRefresh'), btnAuto=$('#btnAuto'), selInterval=$('#selInterval');
const healthDot=$('#healthDot'), healthTitle=$('#healthTitle'), healthSub=$('#healthSub');
const qSummary=$('#q-summary'), qCardsWrap=$('#q-cards'), unitsBox=$('#units'), replBox=$('#repl');
const tblHaRes=$('#ha-res tbody'), tblHaStatus=$('#ha-status tbody'), tblNodes=$('#nodes tbody'), tblNonHA=$('#nonha tbody');
const pvecmPre=$('#pvecm'), cfgtoolPre=$('#cfgtool'), footer=$('#footer');

// ------ actions ------
async function callAction(act){
  const node = nodeInput.value || '';
  const r = await fetch('/api/'+act,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({node})});
  const d = await r.json(); alert(d.ok?'OK':('ERROR: '+(d.error||'unknown')));
}
btnEnable.onclick=()=>callAction('enable');
btnDisable.onclick=()=>callAction('disable');
btnToggleAll.onclick=()=>{
  document.querySelectorAll('.accordion-collapse').forEach(el=>{
    const bs = bootstrap.Collapse.getOrCreateInstance(el,{toggle:false});
    el.classList.contains('show')?bs.hide():bs.show();
  });
};

// ------ refresh control ------
let REF_TIMER = null;
async function fetchSnapshot(){
  const r = await fetch('/api/info?node='+encodeURIComponent(nodeInput.value||''));
  return await r.json();
}
async function doRefresh(){
  const d = await fetchSnapshot();
  renderSnap(d);
  if (!doRefresh.didNonHA){ await renderNonHA(); doRefresh.didNonHA=true; }
}
btnRefresh.onclick = doRefresh;
btnAuto.onclick = ()=>{
  if(REF_TIMER){
    clearInterval(REF_TIMER); REF_TIMER=null;
    btnAuto.textContent='OFF';
    btnAuto.classList.remove('btn-success'); btnAuto.classList.add('btn-outline-success');
    selInterval.disabled = true;
  }else{
    const iv = parseInt(selInterval.value||'30000',10);
    REF_TIMER = setInterval(doRefresh, iv);
    btnAuto.textContent='ON';
    btnAuto.classList.remove('btn-outline-success'); btnAuto.classList.add('btn-success');
    selInterval.disabled = false;
  }
};
selInterval.onchange = ()=>{
  if(REF_TIMER){
    clearInterval(REF_TIMER);
    REF_TIMER = setInterval(doRefresh, parseInt(selInterval.value||'30000',10));
  }
};

// ------ VM detail API ------
async function fetchVmDetail(sid){
  const r = await fetch('/api/vm?sid='+encodeURIComponent(sid));
  return await r.json();
}
// ------ Node detail API ------
async function fetchNodeDetail(name){
  const r = await fetch('/api/node?name='+encodeURIComponent(name));
  return await r.json();
}

// ------ VM detail card ------
function renderVmDetailCard(d){
  const meta  = d.meta || {};
  const cur   = d.current || {};
  const cfg   = d.config || {};
  const ag    = d.agent || {};
  const agInfo= ag.info || null;
  const agOS  = ag.osinfo && ag.osinfo.result ? ag.osinfo.result : null;
  const agIfs = ag.ifaces && ag.ifaces.result ? ag.ifaces.result : null;

  const statusBadge = /running|online|started/i.test(meta.status||cur.status||'')
    ? badge(meta.status || cur.status || 'running','ok')
    : badge(meta.status || cur.status || 'stopped','err');

  const maxmem = cur.maxmem ?? (cfg.memory? Number(cfg.memory)*1024*1024 : null);
  const used   = cur.mem ?? null;
  const free   = (maxmem!=null && used!=null) ? Math.max(0, maxmem-used) : null;
  const balloonEnabled = (cfg.balloon !== undefined) ? (Number(cfg.balloon)!==0) : (cur.balloon !== undefined && Number(cur.balloon)!==0);
  const binfo  = cur.ballooninfo || null;

  const nets = parseVmNetworks(cfg);

  let guestName = agOS && (agOS.name || agOS.pretty_name) || (agInfo && agInfo.version) || '';
  let guestIPs  = [];
  if (Array.isArray(agIfs)){
    agIfs.forEach(i=>{
      (i['ip-addresses']||[]).forEach(ip=>{
        const a = ip['ip-address']; if (a && !a.startsWith('fe80')) guestIPs.push(a);
      });
    });
  }

  const nicStats = cur.nics || {};
  const nicRows = Object.keys(nicStats).sort().map(ifn=>{
    const ns = nicStats[ifn]||{};
    return rowHTML([ifn, humanBytes(ns.netin||0), humanBytes(ns.netout||0)]);
  });

  const bstat = cur.blockstat || {};
  const bRows = Object.keys(bstat).sort().map(dev=>{
    const s=bstat[dev]||{};
    return rowHTML([
      dev, humanBytes(s.rd_bytes||0), safe(s.rd_operations||0),
      humanBytes(s.wr_bytes||0), safe(s.wr_operations||0),
      safe(s.flush_operations||0), humanBytes(s.wr_highest_offset||0)
    ]);
  });

  const ha = cur.ha || {};
  const haBadge = ha.state ? (/started/i.test(ha.state)?badge(ha.state,'ok'):badge(ha.state,'warn')) : badge('—','dark');

  const sysCards = {
    'QMP status': cur.qmpstatus,
    'QEMU': cur['running-qemu'],
    'Machine': cur['running-machine'],
    'PID': cur.pid,
    'Pressure CPU (some/full)': `${safe(cur.pressurecpusome)}/${safe(cur.pressurecpufull)}`,
    'Pressure IO (some/full)': `${safe(cur.pressureiosome)}/${safe(cur.pressureiofull)}`,
    'Pressure MEM (some/full)': `${safe(cur.pressurememorysome)}/${safe(cur.pressurememoryfull)}`
  };

  const head = `
    <div class="d-flex flex-wrap align-items-center gap-3 mb-2">
      <div class="fw-bold">${meta.name || cfg.name || d.sid}</div>
      <div class="text-muted small">${(d.type||'').toUpperCase()} / VMID ${d.vmid} @ ${d.node}</div>
      <div class="vr"></div>
      <div>${statusBadge}</div>
      ${meta.hastate ? `<div class="vr"></div><div class="small">HA: ${badge(meta.hastate, /started/i.test(meta.hastate)?'ok':'warn')}</div>` : ''}
      ${ha.state ? `<div class="vr"></div><div class="small">HA runtime: ${haBadge}</div>` : ''}
    </div>`;

  const quick = `
    <div class="row row-cols-2 row-cols-md-4 g-2">
      <div class="col"><div class="card border-0"><div class="card-body p-2">
        <div class="text-muted small">CPU</div><div class="fw-semibold">${cur.cpu !== undefined ? (cur.cpu*100).toFixed(1)+'%' : '—'}</div>
        <div class="small text-muted">vCPUs: ${safe(cur.cpus ?? cfg.cores ?? cfg.sockets)}</div>
      </div></div></div>
      <div class="col"><div class="card border-0"><div class="card-body p-2">
        <div class="text-muted small">Memory (used/free/total)</div>
        <div class="fw-semibold">${
          (used!=null && maxmem!=null)
          ? `${humanBytes(used)} / ${humanBytes(free)} / ${humanBytes(maxmem)}`
          : '—'
        }</div>
        <div class="small mt-1">Ballooning: ${balloonEnabled ? badge('enabled','ok') : badge('disabled','err')}</div>
        ${binfo ? `<div class="small text-muted mt-1">Balloon actual: ${humanBytes(binfo.actual)} | guest free: ${humanBytes(binfo.free_mem)} | guest total: ${humanBytes(binfo.total_mem)}</div>` : ''}
      </div></div></div>
      <div class="col"><div class="card border-0"><div class="card-body p-2">
        <div class="text-muted small">Disk (used/total)</div>
        <div class="fw-semibold">${(cur.disk!=null && cur.maxdisk!=null) ? `${humanBytes(cur.disk)} / ${humanBytes(cur.maxdisk)}` : '—'}</div>
        <div class="small text-muted mt-1">R: ${humanBytes(cur.diskread||0)} | W: ${humanBytes(cur.diskwrite||0)}</div>
      </div></div></div>
      <div class="col"><div class="card border-0"><div class="card-body p-2">
        <div class="text-muted small">Uptime</div><div class="fw-semibold">${fmtSeconds(cur.uptime)}</div>
        <div class="small text-muted mt-1">Tags: ${safe(cfg.tags||meta.tags||'—')}</div>
      </div></div></div>
    </div>`;

  const netRows = (parseVmNetworks(cfg)).map(n=>{
    const br = n.bridge || n.br || '—';
    const mdl = n.model || n.type || (n.raw?.split(',')[0]?.split('=')[0]) || 'virtio';
    const mac = n.hwaddr || n.mac || (n.raw?.match(/([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}/)?.[0] || '—');
    const vlan = n.tag || n.vlan || '—';
    const fw = (n.firewall==='1') ? badge('on','warn') : badge('off','dark');
    return rowHTML([`net${n.idx}`, mdl, br, vlan, mac, fw]);
  });
  const netTable = `
    <div class="table-responsive">
      <table class="table table-sm table-striped align-middle table-nowrap">
        <thead><tr><th>IF</th><th>Model</th><th>Bridge</th><th>VLAN</th><th>MAC</th><th>FW</th></tr></thead>
        <tbody>${netRows.length?netRows.join(''):rowHTML(['—','—','—','—','—','—'])}</tbody>
      </table>
    </div>`;

  const nicLive = `
    <div class="table-responsive">
      <table class="table table-sm table-striped align-middle table-nowrap">
        <thead><tr><th>TAP</th><th>RX</th><th>TX</th></tr></thead>
        <tbody>${nicRows.length?nicRows.join(''):rowHTML(['—','—','—'])}</tbody>
      </table>
    </div>`;

  const blkTable = `
    <div class="table-responsive">
      <table class="table table-sm table-striped align-middle table-nowrap">
        <thead><tr><th>Device</th><th>Read bytes</th><th>Read ops</th><th>Write bytes</th><th>Write ops</th><th>Flush ops</th><th>Highest offset</th></tr></thead>
        <tbody>${bRows.length?bRows.join(''):rowHTML(['—','—','—','—','—','—','—'])}</tbody>
      </table>
    </div>`;

  const agentSummary = (agInfo||agOS||guestIPs.length)
    ? `<div class="small">
         ${agOS ? `<div>Guest OS: <strong>${safe(guestName)}</strong></div>`:''}
         ${guestIPs.length ? `<div>Guest IPs: ${guestIPs.map(ip=>badge(ip,'info')).join(' ')}</div>`:''}
         ${agInfo ? `<div>Agent: ${badge('present','ok')}</div>`:`<div>Agent: ${badge('not available','err')}</div>`}
       </div>`
    : '<div class="text-muted small">No guest agent data</div>';

  const cfgFacts = {
    'BIOS': cfg.bios, 'UEFI/EFI disk': cfg.efidisk0 ? 'yes' : 'no',
    'CPU type': cfg.cpu, 'Sockets': cfg.sockets, 'Cores': cfg.cores, 'NUMA': cfg.numa,
    'On boot': cfg.onboot ? 'yes' : 'no', 'OS type': cfg.ostype, 'SCSI hw': cfg.scsihw
  };

  // Collapsible raw JSON
  const rawId = `raw-${d.type}-${d.vmid}`;
  const rawBtn = `
    <button class="btn btn-sm btn-outline-secondary mt-3" type="button"
            data-bs-toggle="collapse" data-bs-target="#${rawId}">
      Show raw JSON
    </button>`;
  const rawBox = `
    <div id="${rawId}" class="collapse mt-2">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#rt-${d.vmid}" type="button">Runtime</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#cfg-${d.vmid}" type="button">Config</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#agt-${d.vmid}" type="button">Agent</button></li>
      </ul>
      <div class="tab-content border-top pt-3">
        <div class="tab-pane fade show active" id="rt-${d.vmid}"><pre class="small mb-0">${JSON.stringify(cur, null, 2)}</pre></div>
        <div class="tab-pane fade" id="cfg-${d.vmid}"><pre class="small mb-0">${JSON.stringify(cfg,  null, 2)}</pre></div>
        <div class="tab-pane fade" id="agt-${d.vmid}"><pre class="small mb-0">${JSON.stringify(ag, null, 2)}</pre></div>
      </div>
    </div>`;

  return `
    ${head}
    ${quick}

    <div class="mt-3">
      <div class="fw-semibold mb-1">Network (config)</div>
      ${netTable}
      <div class="fw-semibold mt-3 mb-1">Network (live)</div>
      ${nicLive}
    </div>

    <div class="mt-3">
      <div class="fw-semibold mb-1">Disks (block statistics)</div>
      ${blkTable}
    </div>

    <div class="mt-3">
      <div class="fw-semibold mb-1">System / QEMU</div>
      ${kvGrid(sysCards, Object.keys(sysCards))}
    </div>

    <div class="mt-3 mb-1"><div class="fw-semibold">Config facts</div>${kvGrid(cfgFacts, Object.keys(cfgFacts))}</div>

    <div class="mt-2">${agentSummary}</div>

    ${rawBtn}
    ${rawBox}
  `;
}

// ------ Node detail card ------
function renderNodeDetailCard(d){
  const st = d.status || {};
  const ver = d.version || {};
  const tm = d.time || {};
  const svcs = ensureArr(d.services);
  const netcfg = ensureArr(d.network_cfg);
  const netstat = ensureArr(d.netstat);
  const disks = ensureArr(d.disks);
  const sub = d.subscription || {};

  // robust online detection
  const isOn = /online|running/i.test(st.status||'') ||
               /online/i.test(st.hastate||'') ||
               (st.uptime>0) ||
               (st.cpu!=null && st.maxcpu!=null) ||
               (st.memory && st.memory.total>0);
  const statusTxt = isOn ? 'online' : (st.status||'offline');
  const sB = isOn ? badge(statusTxt,'ok') : badge(statusTxt,'err');

  const mem = st.memory || {};
  const root = st.rootfs || {};
  const load = st.loadavg || '';

  const top = `
    <div class="d-flex flex-wrap align-items-center gap-3 mb-2">
      <div class="fw-bold">${safe(d.node)}</div>
      <div class="vr"></div>
      <div>${sB}</div>
      <div class="vr"></div>
      <div class="small text-muted">CPU: ${pct(st.cpu)}</div>
      <div class="small text-muted">Load: ${safe(load)}</div>
      <div class="small text-muted">Uptime: ${fmtSeconds(st.uptime)}</div>
    </div>`;

  const memCard = `
    <div class="row row-cols-2 row-cols-md-4 g-2">
      <div class="col"><div class="card border-0"><div class="card-body p-2">
        <div class="text-muted small">Memory</div>
        <div class="fw-semibold">${
          (mem.used!=null && mem.total!=null) ? `${humanBytes(mem.used)} / ${humanBytes(mem.total)} (${pct(mem.used/mem.total)})` : '—'
        }</div>
      </div></div></div>
      <div class="col"><div class="card border-0"><div class="card-body p-2">
        <div class="text-muted small">RootFS</div>
        <div class="fw-semibold">${
          (root.used!=null && root.total!=null) ? `${humanBytes(root.used)} / ${humanBytes(root.total)} (${pct(root.used/root.total)})` : '—'
        }</div>
      </div></div></div>
      <div class="col"><div class="card border-0"><div class="card-body p-2">
        <div class="text-muted small">Kernel / QEMU</div>
        <div class="fw-semibold">${safe(ver.kernel || (ver['release']||''))} / ${safe(ver.qemu||ver['running-qemu']||'')}</div>
      </div></div></div>
      <div class="col"><div class="card border-0"><div class="card-body p-2">
        <div class="text-muted small">Time</div>
        <div class="fw-semibold">${safe(tm.localtime)} ${tm.timezone?`(${tm.timezone})`:''}</div>
      </div></div></div>
    </div>`;

  // --- NORMALIZE service names + build badge
  const svcMap = {};
  svcs.forEach(s => {
    const raw = (s && s.name) ? s.name : '';
    const key = raw.replace(/\.service$/,''); // normalize
    const st = (s && (s.state || s.active)) || '';
    svcMap[key] = st;
  });
  function svcBadge(name){
    const st = String(svcMap[name]||'').toLowerCase();
    return (/running|active/.test(st)) ? badge('active','ok') :
           (st ? badge(st,'err') : badge('inactive','err'));
  }
  const svcTable = `
    <div class="table-responsive">
      <table class="table table-sm table-striped align-middle table-nowrap">
        <thead><tr><th>Service</th><th>State</th><th>Service</th><th>State</th><th>Service</th><th>State</th></tr></thead>
        <tbody>
          <tr>
            <td><strong>watchdog-mux</strong></td><td>${svcBadge('watchdog-mux')}</td>
            <td><strong>pve-ha-crm</strong></td><td>${svcBadge('pve-ha-crm')}</td>
            <td><strong>pve-ha-lrm</strong></td><td>${svcBadge('pve-ha-lrm')}</td>
          </tr>
        </tbody>
      </table>
    </div>`;

  // Network config
  const netRows = netcfg.map(n=>{
    return rowHTML([safe(n.iface||n.ifname), safe(n.type), safe(n.method||n.autostart), safe(n.bridge_ports||n.address||'—'), safe(n.cidr||n.netmask||'—'), safe(n.comments||'')]);
  });
  const netCfgTable = `
    <div class="table-responsive">
      <table class="table table-sm table-striped align-middle table-nowrap">
        <thead><tr><th>IF</th><th>Type</th><th>Method</th><th>Ports/Address</th><th>Netmask/CIDR</th><th>Comment</th></tr></thead>
        <tbody>${netRows.length?netRows.join(''):rowHTML(['—','—','—','—','—','—'])}</tbody>
      </table>
    </div>`;

  // Netstat live
  const nsRows = netstat.map(x=> rowHTML([safe(x.dev||x.iface), humanBytes(x.rx_bytes||x['receive-bytes']||0), humanBytes(x.tx_bytes||x['transmit-bytes']||0)]));
  const netLiveTable = `
    <div class="table-responsive">
      <table class="table table-sm table-striped align-middle table-nowrap">
        <thead><tr><th>IF</th><th>RX</th><th>TX</th></tr></thead>
        <tbody>${nsRows.length?nsRows.join(''):rowHTML(['—','—','—'])}</tbody>
      </table>
    </div>`;

  // Disks
  const diskRows = disks.map(dv=> rowHTML([safe(dv.devpath||dv.kname||dv.dev), safe(dv.model), safe(dv.size?humanBytes(dv.size):'—'), safe(dv.health||dv.wearout||'—'), safe(dv.serial||'—')]));
  const diskTable = `
    <div class="table-responsive">
      <table class="table table-sm table-striped align-middle table-nowrap">
        <thead><tr><th>Device</th><th>Model</th><th>Size</th><th>Health</th><th>Serial</th></tr></thead>
        <tbody>${diskRows.length?diskRows.join(''):rowHTML(['—','—','—','—','—'])}</tbody>
      </table>
    </div>`;

  // Subscription
  const subBox = `
    <div class="small">
      <div>Status: ${badge(safe(sub.status||'unknown'), /active|valid/i.test(sub.status||'')?'ok':'warn')}</div>
      ${sub.productname?`<div>Product: <strong>${safe(sub.productname)}</strong></div>`:''}
      ${sub.message?`<div class="text-muted">${safe(sub.message)}</div>`:''}
    </div>`;

  // Collapsible raw JSON
  const rawId = `raw-node-${safe(d.node)}`;
  const rawBtn = `
    <button class="btn btn-sm btn-outline-secondary mt-3" type="button"
            data-bs-toggle="collapse" data-bs-target="#${rawId}">
      Show raw JSON
    </button>`;
  const rawBox = `
    <div id="${rawId}" class="collapse mt-2">
      <pre class="small mb-0">${JSON.stringify(d, null, 2)}</pre>
    </div>`;

  return `
    ${top}
    ${memCard}

    <div class="mt-3">
      <div class="fw-semibold mb-1">HA services</div>
      ${svcTable}
    </div>

    <div class="mt-3">
      <div class="fw-semibold mb-1">Network (config)</div>
      ${netCfgTable}
      <div class="fw-semibold mt-3 mb-1">Network (live)</div>
      ${netLiveTable}
    </div>

    <div class="mt-3">
      <div class="fw-semibold mb-1">Disks</div>
      ${diskTable}
    </div>

    <div class="mt-3">
      <div class="fw-semibold mb-1">Subscription</div>
      ${subBox}
    </div>

    ${rawBtn}
    ${rawBox}
  `;
}

// ------ Sections ------
function setHealth(ok, vq, unitsActive){
  healthDot.classList.toggle('ok',!!ok);
  healthDot.classList.toggle('bad',!ok);
  healthTitle.textContent = ok ? 'HA: OK' : 'HA: PROBLEM';
  healthSub.textContent = `Quorate=${String(vq.quorate)} | units=${unitsActive?'active':'inactive'} | members=${safe(vq.members)} | quorum=${safe(vq.quorum)}/${safe(vq.expected)}`;
}

function renderClusterCards(arr){
  const a = ensureArr(arr); qCardsWrap.innerHTML='';
  if(!a.length){ qCardsWrap.innerHTML = badge('No data','dark'); return; }
  const cluster = a.find(x=>x.type==='cluster')||{};
  const qB = cluster.quorate ? badge('Quorate: yes','ok') : badge('Quorate: no','err');
  qCardsWrap.insertAdjacentHTML('beforeend', `
    <div class="col-12">
      <div class="card border-0 shadow-sm"><div class="card-body d-flex flex-wrap align-items-center gap-3">
        <div class="fw-bold">${safe(cluster.name)}</div>
        <div class="text-muted small">id: ${safe(cluster.id)}</div><div class="vr"></div>
        <div>${qB}</div><div class="vr"></div>
        <div class="small">nodes: <strong>${safe(cluster.nodes)}</strong></div>
        <div class="small">version: <strong>${safe(cluster.version)}</strong></div>
      </div></div>
    </div>`);
  const nodes = a.filter(x=>x.type==='node');
  const rows = nodes.map(n=>{
    const online = n.online ? badge('online','ok') : badge('offline','err');
    const local  = n.local ? ' '+badge('local','info') : '';
    return rowHTML([safe(n.name), online+local, safe(n.ip), safe(n.nodeid), safe(n.level)]);
  });
  qCardsWrap.insertAdjacentHTML('beforeend', `
    <div class="col-12"><div class="card border-0"><div class="card-body table-responsive pt-2">
      <table class="table table-sm table-striped align-middle table-nowrap">
        <thead><tr><th>Node</th><th>Status</th><th>IP</th><th>NodeID</th><th>Level</th></tr></thead>
        <tbody>${rows.join('')}</tbody>
      </table>
    </div></div></div>`);
}

function renderUnits(units){
  unitsBox.innerHTML='';
  if(!units || !Object.keys(units).length){ unitsBox.innerHTML=badge('No data','dark'); return; }
  const map={active:'ok',inactive:'err',failed:'err',activating:'warn'};
  Object.entries(units).forEach(([k,v])=> unitsBox.insertAdjacentHTML('beforeend', `<span class="me-2">${badge(k,map[v]||'dark')}</span>`));
}

function parsePveSr(text){
  const lines=(text||'').split('\n').map(s=>s.trim()).filter(Boolean), out=[];
  for(const ln of lines){
    if(ln.startsWith('JobID')) continue;
    const m=ln.match(/^(\S+)\s+(\S+)\s+(\S+)\s+(\S+)\s+(\S+)\s+(\S+)\s+(\d+)\s+(\S+)$/);
    if(m) out.push({job:m[1],enabled:m[2],target:m[3],last:m[4],next:m[5],dur:m[6],fail:+m[7],state:m[8]});
  } return out;
}
function renderReplication(text){
  const arr=parsePveSr(text);
  if(!arr.length){ replBox.innerHTML='<span class="text-muted small">No replication jobs</span>'; return; }
  const rows=arr.map(x=>{
    const en=/^yes$/i.test(x.enabled)?badge('Yes','ok'):badge('No','err');
    const st=/^ok$/i.test(x.state)?badge(x.state,'ok'):badge(x.state,'err');
    const fc=x.fail>0?badge(String(x.fail),'err'):badge(String(x.fail),'ok');
    return rowHTML([x.job,en,x.target,x.last,x.next,x.dur,fc,st]);
  });
  replBox.innerHTML=`<div class="table-responsive"><table class="table table-sm table-striped align-middle table-nowrap">
    <thead><tr><th>JobID</th><th>Enabled</th><th>Target</th><th>LastSync</th><th>NextSync</th><th>Duration</th><th>FailCount</th><th>State</th></tr></thead>
    <tbody>${rows.join('')}</tbody></table></div>`;
}

// HA Resources table (expandable rows)
function renderHAResources(list){
  const arr=ensureArr(list); const rows=[];
  arr.forEach(x=>{
    const st = x.state||'—';
    const stB = /start/i.test(st)?badge(st,'ok'):(/stop/i.test(st)?badge(st,'err'):badge(st,'dark'));
    const sid = safe(x.sid);
    rows.push(rowHTML([sid, stB, safe(x.node), safe(x.group), safe(x.flags||x.comment)], `class="vm-row" data-sid="${sid}"`));
    rows.push(`<tr class="vm-detail d-none"><td colspan="5"><div class="spinner-border spinner-border-sm me-2 d-none"></div><div class="vm-json">—</div></td></tr>`);
  });
  setRows(tblHaRes, rows.length?rows:[rowHTML(['—','—','—','—','—'])]);
  Array.from(document.querySelectorAll('#ha-res tbody tr.vm-row')).forEach((tr,i)=>{
    tr.onclick = async ()=>{
      const detailRow = tblHaRes.querySelectorAll('tr.vm-detail')[i];
      const content   = detailRow.querySelector('.vm-json');
      const spin      = detailRow.querySelector('.spinner-border');
      const open = detailRow.classList.contains('d-none');
      document.querySelectorAll('#ha-res tbody tr.vm-detail').forEach(r=>r.classList.add('d-none'));
      if(open){
        detailRow.classList.remove('d-none'); spin.classList.remove('d-none');
        const sid = tr.getAttribute('data-sid');
        try { const d = await fetchVmDetail(sid); content.innerHTML = renderVmDetailCard(d); }
        catch(e){ content.textContent='ERROR: '+e; }
        spin.classList.add('d-none');
      }
    };
  });
}

function renderHAStatus(list){
  const st=ensureArr(list);
  if(!st.length){ setRows(tblHaStatus, [rowHTML(['—','—','—','—'])]); return; }
  const rows=st.map(n=>{
    const sB=/active|online/i.test(n.state||'')?badge(n.state,'ok'):badge(safe(n.state||'—'),'warn');
    const crmB=/active/i.test(n.crm_state||'')?badge(n.crm_state,'ok'):badge(safe(n.crm_state||'—'),'err');
    const lrmB=/active/i.test(n.lrm_state||'')?badge(n.lrm_state,'ok'):badge(safe(n.lrm_state||'—'),'err');
    return rowHTML([safe(n.node), sB, crmB, lrmB]);
  });
  setRows(tblHaStatus, rows);
}

// Non-HA VM/CT table
async function renderNonHA(){
  const r = await fetch('/api/list-vmct');
  const d = await r.json();
  const arr = ensureArr(d.nonha);
  if(!arr.length){ setRows(tblNonHA,[rowHTML(['No non-HA VMs/CTs'])]); return; }
  const rows=[];
  arr.forEach(x=>{
    const sid=safe(x.sid), type=safe(x.type), name=safe(x.name), node=safe(x.node);
    const st=/running/i.test(x.status||'')?badge(x.status,'ok'):badge(x.status,'dark');
    rows.push(rowHTML([sid,type,name,node,st], `class="vm-row" data-sid="${sid}`+"\""));
    rows.push(`<tr class="vm-detail d-none"><td colspan="5"><div class="spinner-border spinner-border-sm me-2 d-none"></div><div class="vm-json">—</div></td></tr>`);
  });
  setRows(tblNonHA, rows);
  Array.from(document.querySelectorAll('#nonha tbody tr.vm-row')).forEach((tr,i)=>{
    tr.onclick = async ()=>{
      const detailRow = tblNonHA.querySelectorAll('tr.vm-detail')[i];
      const content   = detailRow.querySelector('.vm-json');
      const spin      = detailRow.querySelector('.spinner-border');
      const open = detailRow.classList.contains('d-none');
      document.querySelectorAll('#nonha tbody tr.vm-detail').forEach(r=>r.classList.add('d-none'));
      if(open){
        detailRow.classList.remove('d-none'); spin.classList.remove('d-none');
        const sid = tr.getAttribute('data-sid');
        try { const d = await fetchVmDetail(sid); content.innerHTML = renderVmDetailCard(d); }
        catch(e){ content.textContent='ERROR: '+e; }
        spin.classList.add('d-none');
      }
    };
  });
}

// Nodes table (expandable) + sticky first column + robust online detect
function renderNodesTable(nodes){
  const nrows = ensureArr(nodes).map(n=>{
    const isOn = /online|running/i.test(n.status||'') ||
                 /online/i.test(n.hastate||'') ||
                 (n.uptime>0) ||
                 (n.cpu!=null && n.maxcpu!=null) ||
                 (n.mem!=null && n.maxmem!=null);
    const statusTxt = isOn ? 'online' : (n.status||'offline');
    const sB = isOn ? badge(statusTxt,'ok') : badge(statusTxt,'err');

    const mem=(n.mem!=null&&n.maxmem)?`${humanBytes(n.mem)} / ${humanBytes(n.maxmem)} (${pct(n.mem/n.maxmem)})`:'—';
    const rfs=(n.rootfs!=null&&n.maxrootfs)?`${humanBytes(n.rootfs)} / ${humanBytes(n.maxrootfs)} (${pct(n.rootfs/n.maxrootfs)})`:'—';
    const load=(n.loadavg!=null)?String(n.loadavg):'—';
    const cpu=(n.cpu!=null)?pct(n.cpu):'—';

    const main = `<tr class="node-row" data-node="${safe(n.node)}">
      <td class="sticky-col fw-semibold">${safe(n.node)}</td>
      <td>${sB}</td><td>${cpu}</td><td>${load}</td><td>${mem}</td><td>${rfs}</td><td>${safe(n.uptime)}</td>
    </tr>`;

    const detail = `<tr class="node-detail d-none">
      <td colspan="7">
        <div class="spinner-border spinner-border-sm me-2 d-none"></div>
        <div class="node-json">—</div>
      </td>
    </tr>`;

    return main + detail;
  });
  setRows(tblNodes, nrows);

  Array.from(document.querySelectorAll('#nodes tbody tr.node-row')).forEach((tr,i)=>{
    tr.onclick = async ()=>{
      const detailRow = tblNodes.querySelectorAll('tr.node-detail')[i];
      const content   = detailRow.querySelector('.node-json');
      const spin      = detailRow.querySelector('.spinner-border');
      const open = detailRow.classList.contains('d-none');
      document.querySelectorAll('#nodes tbody tr.node-detail').forEach(r=>r.classList.add('d-none'));
      if(open){
        detailRow.classList.remove('d-none'); spin.classList.remove('d-none');
        const name = tr.getAttribute('data-node');
        try { const d = await fetchNodeDetail(name); content.innerHTML = renderNodeDetailCard(d); }
        catch(e){ content.textContent='ERROR: '+e; }
        spin.classList.add('d-none');
      }
    };
  });
}

// ------ main render ------
function renderSnap(d){
  const vq=d.votequorum||{}; const units=d.units||{}; const allUnits=Object.values(units).every(v=>v==='active');
  const ok = (vq.quorate==='yes') && allUnits;
  setHealth(ok, vq, allUnits);

  const gl = document.getElementById('global-loading'); if (gl) gl.remove();

  qSummary.textContent = `Quorate: ${safe(vq.quorate)} | members: ${safe(vq.members)} | expected: ${safe(vq.expected)} | total: ${safe(vq.total)} | quorum: ${safe(vq.quorum)}`;
  renderClusterCards(d.api && d.api.cluster_status);
  renderUnits(units);
  renderReplication(d.replication);
  renderHAResources(d.api && d.api.ha_resources);
  renderHAStatus(d.api && d.api.ha_status);
  renderNodesTable(d.api && d.api.nodes);

  pvecmPre.textContent = safe(d.pvecm);
  cfgtoolPre.textContent = safe(d.cfgtool);

  footer.textContent = `node_arg=${safe(d.node_arg)} | host=${safe(d.hostname)} | ts=${new Date((d.ts||0)*1000).toLocaleString()}`;
}

// initial one-shot load (auto refresh OFF by default)
doRefresh().catch(console.error);