// ---- Pods ----

async function podAction(action, name) {
  try {
    const res = await api(`/pods/actions/${encodeURIComponent(action)}/${encodeURIComponent(name)}`, 'POST');
    showModal(`Pod ${action}: ${name}`, JSON.stringify(res, null, 2));

    await fetchContainers(); // refresh pods + containers view in één keer
  } catch (e) {
    showModal(`Pod ${action} fout`, e.stack || e.message);
  }
}

// ---- Containers ----

function _podKey(c) {
  return (c.PodName && String(c.PodName).trim()) ? String(c.PodName).trim() : '(geen pod)';
}

function _cmpStr(a, b) {
  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });
}

function _isCollapsed(pod) {
  return localStorage.getItem('pod_group_collapsed:' + pod) === '1';
}

function _setCollapsed(pod, v) {
  localStorage.setItem('pod_group_collapsed:' + pod, v ? '1' : '0');
}

function renderActionsDropdown(menuId, actionFn, targetEsc) {
  // actionFn is string: "containerAction" of "podAction"
  // targetEsc is al esc(...) dus veilig in onclick
  return `
    <span class="actions-menu">
      <button class="btn icon" title="Acties" onclick="toggleMenu('${menuId}')">⋮</button>
      <div class="menuPanel" id="${menuId}">
        <button class="menuItem ok" onclick="${actionFn}('start','${targetEsc}'); closeAllMenus();">Start</button>
        <button class="menuItem warn" onclick="${actionFn}('restart','${targetEsc}'); closeAllMenus();">Restart</button>
        <button class="menuItem bad" onclick="${actionFn}('stop','${targetEsc}'); closeAllMenus();">Stop</button>
      </div>
    </span>
  `;
}

function renderContainerRow(c) {
  const name = (c.Names && c.Names[0]) ? c.Names[0] : (c.Names || c.Name || c.name || '');
  const status = c.Status || c.State || c.state || '';
  const podName = c.PodName || '-';
  const image = c.Image || c.image || '';
  const managed = c._dashboard_source || 'podman';
  const menuId = `menu-${cssSafeId('c:' + normalizeContainerName(name))}`;
  const inPod = !!(c.PodName && String(c.PodName).trim());
  const ports = inPod
    ? ''  // verberg bij pod-containers
    : ((c._dashboard_published_ports || []).join(", ")
      || (c.Ports || []).map(p => `${p.host_port}:${p.container_port}`).join(", "));

  return `
    <tr>
      <td><strong>${esc(name)}</strong></td>
      <td>${badgeFromStatus(status)}</td>
      <td>${podName}</td>
      <td class="muted">${esc(image)}</td>
      <td>${badgeFromStatus(managed)}</td>
      <td class="muted num" id="cpu-${cssSafeId(normalizeContainerName(name))}">-</td>
      <td class="muted num" id="mem-${cssSafeId(normalizeContainerName(name))}">-</td>
      <td>${ports || '-'}</td>
      <td>
        <div class="flex">
          <button class="btn icon" title="Inspect" onclick="containerInspect(decodeURIComponent('${encodeURIComponent(name)}'))">🔍</button>
          <button class="btn icon" title="Logs" onclick="containerLogs(decodeURIComponent('${encodeURIComponent(name)}'))">📄</button>
          ${renderActionsDropdown(menuId, 'containerAction', esc(name))}
        </div>
      </td>
    </tr>
  `;
}

let containersC2P = new Map();

function renderContainersGrouped(list, tbody, podStatus) {
  const groups = new Map();
  for (const c of (list || [])) {
    const k = _podKey(c);
    if (!groups.has(k)) groups.set(k, []);
    groups.get(k).push(c);
  }

  for (const podName of Object.keys(podStatus || {})) {
    if (!groups.has(podName)) groups.set(podName, []);
  }

  const keys = Array.from(groups.keys()).sort((a, b) => {
    if (a === '(geen pod)' && b !== '(geen pod)') return 1;
    if (b === '(geen pod)' && a !== '(geen pod)') return -1;
    return _cmpStr(a, b);
  });

  containersC2P = new Map();

  let html = '';

  for (const pod of keys) {
    const items = groups.get(pod) || [];
    items.sort((a, b) =>
      _cmpStr(
        (a.Names && a.Names[0]) ? a.Names[0] : (a.Name || ''),
        (b.Names && b.Names[0]) ? b.Names[0] : (b.Name || '')
      )
    );

    const collapsed = _isCollapsed(pod);
    const isRealPod = (pod !== '(geen pod)');
    const total = items.length;
    const podMenuId = `menu-${cssSafeId('p:' + pod)}`;

    let podPortsText = "-";
    if (isRealPod) {
      const podPorts = Array.from(new Set(
        items.flatMap(c => (c._dashboard_published_ports || []))
      )).sort((a, b) => _cmpStr(a, b));
      podPortsText = podPorts.length ? podPorts.join(", ") : "-";
    }

    let cls = 'muted';
    let label = '-';

    if (total > 0) {
      const running = items.filter(x => {
        const s = (x.Status || x.State || '').toLowerCase();
        return s === 'running';
      }).length;

      label = `${running}/${total}`;
      if (running === total) cls = 'ok';
      else if (running === 0) cls = 'bad';
      else cls = 'warn';
    } else {
      const ps = String((podStatus && podStatus[pod]) || '').toLowerCase();
      if (ps === 'active') { cls = 'ok'; label = 'active'; }
      else if (ps === 'inactive') { cls = 'bad'; label = 'inactive'; }
      else { cls = 'muted'; label = ps || 'unknown'; }
    }

    html += `
      <tr class="pod-group-row">
        <td>
          <span class="pod-toggle" data-pod="${encodeURIComponent(pod)}" style="cursor:pointer; user-select:none;">
            ${collapsed ? '▶' : '▼'} <b>${esc(pod)}</b>
          </span>
        </td>

        <td>
          <span class="btn small ${cls}">
            ${label}
          </span>
        </td>

        <td class="muted">-</td>
        <td class="muted">-</td>
        <td>${isRealPod ? '<span class="btn small muted">pod</span>' : '<span class="muted">-</span>'}</td>

        <td class="muted num" id="podcpu-${cssSafeId(pod)}" data-podstatus="${esc((podStatus && podStatus[pod]) || '')}">-</td>
        <td class="muted num" id="podmem-${cssSafeId(pod)}" data-podstatus="${esc((podStatus && podStatus[pod]) || '')}">-</td>
        <td class="mono">${esc(podPortsText)}</td>
        <td>
          ${isRealPod ? `
          <div class="flex">
            <!-- placeholders voor uitlijning -->
            <button class="btn icon" disabled style="visibility:hidden;" aria-hidden="true" tabindex="-1">🔍</button>
            <button class="btn icon" disabled style="visibility:hidden;" aria-hidden="true" tabindex="-1">📄</button>

            ${renderActionsDropdown(podMenuId, 'podAction', esc(pod))}
          </div>
          ` : '<span class="muted">-</span>'}
        </td>
      </tr>
    `;

    for (const c of items) {
      const cname = normalizeContainerName((c.Names && c.Names[0]) ? c.Names[0] : (c.Names || c.Name || c.name || ''));
      if (cname) containersC2P.set(cname, pod);
      const row = renderContainerRow(c).replace(
        '<tr',
        `<tr class="pod-item-row" data-pod="${encodeURIComponent(pod)}"${collapsed ? ' style="display:none;"' : ''}`
      );
      html += row;
    }
  }

  tbody.innerHTML = html;

  tbody.onclick = (ev) => {
    const t = ev.target.closest('.pod-toggle');
    if (!t) return;

    const podEnc = t.getAttribute('data-pod') || '';
    const pod = decodeURIComponent(podEnc);
    const isNowCollapsed = !_isCollapsed(pod);
    _setCollapsed(pod, isNowCollapsed);

    tbody.querySelectorAll(`.pod-item-row[data-pod="${CSS.escape(podEnc)}"]`).forEach(r => {
      r.style.display = isNowCollapsed ? 'none' : '';
    });

    t.innerHTML =
      `${isNowCollapsed ? '▶' : '▼'} <b>${pod}</b> ` +
      `<span style="opacity:.7;">(${tbody.querySelectorAll(`.pod-item-row[data-pod="${CSS.escape(podEnc)}"]`).length})</span>`;
  };
}

async function fetchContainers() {
  const [containers, pods] = await Promise.all([
    api('/containers-dashboard', 'GET'),
    api('/pods-dashboard', 'GET')
  ]);

  const list = Array.isArray(containers) ? containers : (containers?.containers || []);
  document.getElementById('countContainers').textContent = list.length;

  const podsList = Array.isArray(pods) ? pods : [];
  const podStatus = {};
  for (const p of podsList) {
    const n = p?.Name || p?.name;
    if (!n) continue;
    podStatus[n] = (p?.Status || p?.status || '').toLowerCase(); // "active"/"inactive"/...
  }

  const tbody = document.getElementById('containersTbody');
  if (!tbody) return;
  renderContainersGrouped(list, tbody, podStatus);
}

let containersDashboardStatsTimer = null;
let containersDashboardStatsInFlight = false;

function startContainersDashboardStatsPoll() {
  if (containersDashboardStatsTimer) return;
  // immediate tick, daarna elke 1s
  pollContainersDashboardStatsOnce();
  containersDashboardStatsTimer = setInterval(pollContainersDashboardStatsOnce, 1000);
}

function stopContainersDashboardStatsPoll() {
  if (!containersDashboardStatsTimer) return;
  clearInterval(containersDashboardStatsTimer);
  containersDashboardStatsTimer = null;
  resetPodTotals();
}

async function pollContainersDashboardStatsOnce() {
  if (containersDashboardStatsInFlight) return;
  containersDashboardStatsInFlight = true;
  try {
    const containers = await api('/containers-dashboard', 'GET');
    const list = Array.isArray(containers) ? containers : (containers?.containers || []);

    // totals per pod voor deze poll tick
    const podCpu = new Map();   // podName -> cpuPct sum
    const podMem = new Map();   // podName -> memBytes sum
    const podMemPct = new Map(); // podName -> memPct sum

    for (const c of (list || [])) {
      const cname = normalizeContainerName((c?.Names && c.Names[0]) ? c.Names[0] : (c?.Names || c?.Name || c?.name || ''));
      if (!cname) continue;

      const key = cssSafeId(cname);

      const cpuRaw = c?._dashboard_cpu;
      const memBytesRaw = c?._dashboard_mem_usage;
      const memPctRaw = c?._dashboard_mem_perc;

      const cpuPct = Number(cpuRaw);
      const memBytes = Number(memBytesRaw);
      const memPct = Number(memPctRaw);

      const pod = containersC2P.get(cname);
      if (pod) {
        if (Number.isFinite(cpuPct)) podCpu.set(pod, (podCpu.get(pod) || 0) + cpuPct);
        if (Number.isFinite(memBytes)) podMem.set(pod, (podMem.get(pod) || 0) + memBytes);
        if (Number.isFinite(memPct)) podMemPct.set(pod, (podMemPct.get(pod) || 0) + memPct);
      }

      const cpuEl = document.getElementById(`cpu-${key}`);
      if (cpuEl) cpuEl.textContent = Number.isFinite(cpuPct) ? (cpuPct.toFixed(2) + "%") : "-";

      const memEl = document.getElementById(`mem-${key}`);
      if (memEl) {
        if (Number.isFinite(memBytes) && Number.isFinite(memPct)) {
          memEl.textContent = `${formatBytes(memBytes)} (${memPct.toFixed(1)}%)`;
        } else {
          memEl.textContent = "-";
        }
      }
    }

    for (const [pod, cpuSum] of podCpu.entries()) {
      const el = document.getElementById(`podcpu-${cssSafeId(pod)}`);
      if (el) {
        el.textContent = cpuSum.toFixed(2) + "%";
        el.classList.remove('stale');
      }
    }

    for (const [pod, memSum] of podMem.entries()) {
      const el = document.getElementById(`podmem-${cssSafeId(pod)}`);
      if (el) {
        const mp = podMemPct.get(pod) || 0;
        el.textContent = `${formatBytes(memSum)} (${Number(mp).toFixed(1)}%)`;
        el.classList.remove('stale');
      }
    }
  } catch (e) {
    resetPodTotals();
  } finally {
    containersDashboardStatsInFlight = false;
  }
}

function resetPodTotals() {
  document.querySelectorAll('[id^="podcpu-"]').forEach(el => {
    const ps = String(el.getAttribute('data-podstatus') || '').toLowerCase();
    if (ps === 'inactive') {
      el.textContent = '-';
      el.classList.remove('stale');
    } else {
      el.textContent = '—';
      el.classList.add('stale');
    }
  });

  document.querySelectorAll('[id^="podmem-"]').forEach(el => {
    const ps = String(el.getAttribute('data-podstatus') || '').toLowerCase();
    if (ps === 'inactive') {
      el.textContent = '-';
      el.classList.remove('stale');
    } else {
      el.textContent = '—';
      el.classList.add('stale');
    }
  });
}

async function containerInspect(name) {
  try {
    const res = await api(`/containers/inspect/${encodeURIComponent(name)}`, 'GET');
    showModal(`Inspect: ${name}`, JSON.stringify(res, null, 2));
  } catch (e) {
    showModal(`Inspect fout: ${name}`, e.stack || e.message);
  }
}

async function containerLogs(name) {
  try {
    const res = await api(`/containers/logs/${encodeURIComponent(name)}`, 'GET');
    const logs = res.logs ?? JSON.stringify(res, null, 2);
    showModal(`Logs: ${name}`, logs);
  } catch (e) {
    showModal(`Logs fout: ${name}`, e.stack || e.message);
  }
}

async function containerAction(action, name) {
  try {
    const res = await api(`/containers/${encodeURIComponent(action)}/${encodeURIComponent(name)}`, 'POST');
    showModal(`Container ${action}: ${name}`, JSON.stringify(res, null, 2));
    await fetchContainers();
  } catch (e) {
    showModal(`Container ${action} fout`, e.stack || e.message);
  }
}

function cssSafeId(s) {
  const bytes = new TextEncoder().encode(String(s));
  let bin = '';
  bytes.forEach(b => bin += String.fromCharCode(b));
  return btoa(bin).replaceAll('=','').replaceAll('+','-').replaceAll('/','_');
}

function normalizeContainerName(n) {
  if (!n) return '';
  // Podman kan soms "/name" geven, we strippen de leading slash
  return ('' + n).replace(/^\//, '');
}

function formatBytes(b) {
  const n = Number(b || 0);
  if (n >= 1024**3) return (n / 1024**3).toFixed(1) + "GiB";
  if (n >= 1024**2) return (n / 1024**2).toFixed(0) + "MiB";
  if (n >= 1024) return (n / 1024).toFixed(0) + "KiB";
  return n + "B";
}