import { $, safe, ensureArr, badge, rowHTML, setRows, pct, humanBytes, fmtSeconds, kvGrid, showToast } from './helpers.js';
import { api } from './api.js';
import { renderVmDetailCard } from './vmDetail.js';
import { renderNodeDetailCard } from './nodeDetail.js';

// DOM refs
export const refs = {
  nodeInput: $('#node'),
  healthDot: $('#healthDot'), healthTitle: $('#healthTitle'), healthSub: $('#healthSub'),
  qSummary: $('#q-summary'), qCardsWrap: $('#q-cards'), unitsBox: $('#units'), replBox: $('#repl'),
  tblHaRes: $('#ha-res'), tblHaStatus: $('#ha-status'), // (tblHaStatus nieużywany, sekcja wycięta w HTML)
  tblNodes: $('#nodes'), tblNonHA: $('#nonha'),
  pvecmPre: $('#pvecm'), cfgtoolPre: $('#cfgtool'), footer: $('#footer')
};

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

// Cluster cards
export function renderClusterCards(arr) {
  const a = ensureArr(arr); refs.qCardsWrap.innerHTML = '';
  if (!a.length) { refs.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');
  refs.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)]);
  });
  refs.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>`);
}

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

// Replication — ALL NODES
export function renderReplicationTable(repAll) {
  const arr = ensureArr(repAll.jobs);
  if (!arr.length) { refs.replBox && (refs.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([safe(x.node), safe(x.job), en, safe(x.target), safe(x.last), safe(x.next), safe(x.dur), fc, st]);
  });
  refs.replBox.innerHTML = `<div class="table-responsive"><table class="table table-sm table-striped align-middle table-nowrap">
    <thead><tr><th>Node</th><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 (expand)
export function renderHAResources(list) {
  const tbody = refs.tblHaRes.querySelector('tbody');
  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([`<span class="chev"></span>`, sid, stB, safe(x.node), safe(x.group), safe(x.flags || x.comment)], `class="expandable vm-row" data-sid="${sid}"`));
    rows.push(`<tr class="vm-detail d-none"><td colspan="6"><div class="spinner-border spinner-border-sm me-2 d-none"></div><div class="vm-json">—</div></td></tr>`);
  });
  setRows(tbody, rows.length ? rows : [rowHTML(['—','—','—','—','—','—'])]);

  Array.from(refs.tblHaRes.querySelectorAll('tr.vm-row')).forEach((tr, i) => {
    tr.onclick = async () => {
      const detailRow = refs.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');
      // collapse all
      refs.tblHaRes.querySelectorAll('tr.vm-detail').forEach(r => r.classList.add('d-none'));
      refs.tblHaRes.querySelectorAll('tr.vm-row').forEach(r => r.classList.remove('expanded'));
      if (open) {
        detailRow.classList.remove('d-none'); tr.classList.add('expanded');
        spin.classList.remove('d-none');
        const sid = tr.getAttribute('data-sid');
        try { const d = await api.vmDetail(sid); content.innerHTML = renderVmDetailCard(d); }
        catch (e) { content.textContent = 'ERROR: ' + e; }
        spin.classList.add('d-none');
      }
    };
  });
}

// Non-HA VM/CT (expand)
export async function renderNonHA() {
  const r = await api.listNonHA();
  const arr = ensureArr(r.nonha);
  const tbody = refs.tblNonHA.querySelector('tbody');
  if (!arr.length) { setRows(tbody, [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([`<span class="chev"></span>`, sid, type, name, node, st], `class="expandable vm-row" data-sid="${sid}"`));
    rows.push(`<tr class="vm-detail d-none"><td colspan="6"><div class="spinner-border spinner-border-sm me-2 d-none"></div><div class="vm-json">—</div></td></tr>`);
  });
  setRows(tbody, rows);
  Array.from(tbody.querySelectorAll('tr.vm-row')).forEach((tr, i) => {
    tr.onclick = async () => {
      const detailRow = tbody.querySelectorAll('tr.vm-detail')[i];
      const content = detailRow.querySelector('.vm-json');
      const spin = detailRow.querySelector('.spinner-border');
      const open = detailRow.classList.contains('d-none');
      tbody.querySelectorAll('tr.vm-detail').forEach(r => r.classList.add('d-none'));
      tbody.querySelectorAll('tr.vm-row').forEach(r => r.classList.remove('expanded'));
      if (open) {
        detailRow.classList.remove('d-none'); tr.classList.add('expanded');
        spin.classList.remove('d-none');
        const sid = tr.getAttribute('data-sid');
        try { const d = await api.vmDetail(sid); content.innerHTML = renderVmDetailCard(d); }
        catch (e) { content.textContent = 'ERROR: ' + e; }
        spin.classList.add('d-none');
      }
    };
  });
}

// Nodes table (expand)
export function renderNodesTable(nodes) {
  const tbody = refs.tblNodes.querySelector('tbody');
  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="expandable node-row" data-node="${safe(n.node)}">
      <td class="chev"></td><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>${fmtSeconds(n.uptime)}</td>
    </tr>`;

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

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

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