async function loadImages() {
  const res = await fetch("/api/images");
  const images = await res.json();
  renderImages(images);
}

function renderImages(images) {
  const tbody = document.getElementById("images-tbody");
  tbody.innerHTML = "";

  images.forEach(img => {
    const tr = document.createElement("tr");

    const repoTag = (img.RepoTags && img.RepoTags.length > 0)
      ? img.RepoTags[0]
      : "<none>";

    const shortId = img.Id.substring(0, 12);
    const sizeMB = (img.Size / 1024 / 1024).toFixed(1);
    const containers = img.Containers || 0;
    const fullId = img.Id;

    const status = containers > 0
      ? `<span class="badge badge-green">In use</span>`
      : `<span class="badge badge-yellow">Unused</span>`;

    const disabled = containers > 0 ? "disabled" : "";

    tr.innerHTML = `
      <td>
        <input type="checkbox" class="image-checkbox" value="${fullId}" ${disabled}>
      </td>
      <td>${repoTag}</td>
      <td>${shortId}</td>
      <td>${sizeMB} MB</td>
      <td>${containers}</td>
      <td>${status}</td>
      <td>
        <button class="btn small bad" onclick="removeSingleImage('${fullId}')" ${disabled}>
          Remove
        </button>
      </td>
    `;

    tbody.appendChild(tr);
  });
}

function toggleSelectAllImages(master) {
  document.querySelectorAll(".image-checkbox:not(:disabled)")
    .forEach(cb => cb.checked = master.checked);
}

async function removeSingleImage(id) {
  if (!confirm("Image verwijderen?")) return;

  await fetch("/api/images/" + encodeURIComponent(id), {
    method: "DELETE"
  });

  await loadImages();
}

async function removeSelectedImages() {
  const selected = Array.from(document.querySelectorAll(".image-checkbox:checked"))
    .map(cb => cb.value);

  if (!selected.length) {
    alert("Geen images geselecteerd.");
    return;
  }

  if (!confirm("Geselecteerde images verwijderen?")) return;

  await fetch("/api/images/remove", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ images: selected })
  });

  await loadImages();
}

async function pruneUnusedImages() {
  if (!confirm("Alle unused images verwijderen?")) return;

  await fetch("/api/images/prune?all=true", {
    method: "POST"
  });

  await loadImages();
}