/**
 * javascript/images.js
 *
 * Images panel: table + a "Pull Image" action, backed by ajax/images.php.
 */
(function () {
  'use strict';
  const P = window.Podman;
  let images = [];

  function rowHtml(img) {
    const created = img.createdAt ? P.formatRelativeTime(img.createdAt) : '—';
    return '' +
      '<tr data-id="' + P.escapeHtml(img.id) + '">' +
      '<td>' + P.escapeHtml(img.repository) + '</td>' +
      '<td class="mono">' + P.escapeHtml(img.tag) + '</td>' +
      '<td class="mono podman-row-sub">' + P.escapeHtml(img.shortId) + '</td>' +
      '<td class="tnum">' + P.escapeHtml(img.sizeFormatted) + '</td>' +
      '<td class="tnum">' + created + '</td>' +
      '<td class="tnum">' + img.usedBy + '</td>' +
      '<td class="podman-actions"><div class="podman-actions-row"><button class="podman-btn podman-btn-icon" data-action="remove"' +
      (img.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>&#128465;</button></div></td>' +
      '</tr>';
  }

  function render() {
    const tbody = P.el('images-tbody');
    tbody.innerHTML = images.length
      ? images.map(rowHtml).join('')
      : '<tr><td colspan="7" class="podman-empty-note">No images.</td></tr>';
  }

  function load() {
    const tbody = P.el('images-tbody');
    tbody.innerHTML = P.loadingRow(7);
    return P.get('images', 'list').then(function (data) {
      images = data;
      render();
    }).catch(function (err) {
      tbody.innerHTML = P.errorRow(7, err.message);
    });
  }

  function init() {
    P.el('images-pull-btn').addEventListener('click', function () {
      P.openFormModal({
        title: 'Pull Image',
        submitLabel: 'Pull',
        fields: [
          { name: 'reference', label: 'Image reference', required: true, placeholder: 'docker.io/library/postgres:16' },
        ],
        onSubmit: function (values) {
          return P.post('images', 'pull', { reference: values.reference }).then(load);
        },
      });
    });

    P.el('images-tbody').addEventListener('click', function (e) {
      const btn = e.target.closest('button[data-action="remove"]');
      if (!btn || btn.disabled) return;
      const id = btn.closest('tr').dataset.id;
      if (!confirm('Remove this image?')) return;
      btn.disabled = true;
      P.post('images', 'remove', { id: id }).then(load).catch(function (err) {
        alert('Remove failed: ' + err.message);
        btn.disabled = false;
      });
    });

    return load();
  }

  P.registerPanel('images', { init: init, refresh: load });
})();