import { safe, ensureArr, badge, rowHTML, humanBytes, kvGrid, fmtSeconds, pick } from './helpers.js';

export function renderNodeDetailCard(d) {
  const st = d.status || {};
  const ver = d.version || {};
  const tm = d.time || {};
  const netcfg = ensureArr(d.network_cfg);
  const disks = ensureArr(d.disks);
  const subscription = d.subscription || {};

  // online detect
  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 = Array.isArray(st.loadavg) ? st.loadavg.join(' ') : (st.loadavg || '');

  const cpuinfo = st.cpuinfo || {};
  const boot = st['boot-info'] || st.boot_info || {};
  const curKernel = st['current-kernel'] || st.current_kernel || {};
  const ramStr = (mem.used != null && mem.available != null && mem.total != null)
    ? `${humanBytes(mem.used)} used / ${humanBytes(mem.available)} free / ${humanBytes(mem.total)} total`
    : (mem.total != null ? humanBytes(mem.total) : '—');

  const tech = {
    'PVE version': pick(st.pveversion, ver.pvemanager, ver['pve-manager']),
    'Kernel': pick(st.kversion, curKernel.release, ver.kernel, ver.release),
    'CPU model': pick(cpuinfo.model, st['cpu-model'], ver['cpu-model'], ver.cpu),
    'Architecture': pick(curKernel.machine, ver.arch, st.architecture, st.arch),
    'RAM': ramStr,
    'Boot mode': pick(boot.mode) ? String(boot.mode).toUpperCase() : '—',
    'Secure Boot': (boot.secureboot === 1 || boot.secureboot === '1') ? 'enabled' :
      (boot.secureboot === 0 || boot.secureboot === '0') ? 'disabled' : '—'
  };

  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: ${safe(((st.cpu??null)!==null)?(st.cpu*100).toFixed(1)+'%':'—')}</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)} (${((mem.used/mem.total)*100).toFixed(1)}%)` : '—'}</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)} (${((root.used/root.total)*100).toFixed(1)}%)` : '—'}</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(tech['Kernel'])} / ${safe(pick(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>`;

  const sysDetails = kvGrid(tech, Object.keys(tech), {
    'PVE version': 'PVE version','Kernel':'Kernel version','CPU model':'CPU model',
    'Architecture':'Arch','RAM':'RAM (used/free/total)','Boot mode':'Boot mode','Secure Boot':'Secure Boot'
  });

  const netRows = ensureArr(netcfg).map(n => 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>`;

  const diskRows = ensureArr(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: ukryj, gdy notfound/No subscription key
  const subTxt = (subscription.message||'') + ' ' + (subscription.status||'');
  const hideSub = /notfound/i.test(subTxt) || /no subscription key/i.test(subTxt);
  const subBox = hideSub ? '' : `
    <div class="mt-3"><div class="fw-semibold mb-1">Subscription</div>
      <div class="small">
        <div>Status: ${badge(safe(subscription.status||'unknown'), /active|valid/i.test(subscription.status||'') ? 'ok':'warn')}</div>
        ${subscription.productname ? `<div>Product: <strong>${safe(subscription.productname)}</strong></div>` : ''}
        ${subscription.message ? `<div class="text-muted">${safe(subscription.message)}</div>` : ''}
      </div>
    </div>`;

  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">System details</div>${sysDetails}</div>
    <div class="mt-3"><div class="fw-semibold mb-1">Network (config)</div>${netCfgTable}</div>
    <div class="mt-3"><div class="fw-semibold mb-1">Disks</div>${diskTable}</div>
    ${subBox}
    ${rawBtn}${rawBox}`;
}