/**
 * javascript/volumes.js
 *
 * Volumes panel: named-volume table + create/remove, backed by
 * ajax/volumes.php. Bind mounts are deliberately not shown here — see
 * that file's header comment.
 */
(function () {
  'use strict';
  const P = window.Podman;
  let volumes = [];

  function rowHtml(v) {
    return '' +
      '<tr data-name="' + P.escapeHtml(v.name) + '">' +
      '<td>' + P.escapeHtml(v.name) + '</td>' +
      '<td><span class="podman-chip podman-chip-neutral">' + P.escapeHtml(v.driver) + '</span></td>' +
      '<td class="mono podman-row-sub">' + P.escapeHtml(v.mountpoint) + '</td>' +
      '<td class="tnum">' + v.usedBy + '</td>' +
      '<td class="podman-actions"><button class="podman-btn podman-btn-icon" data-action="remove"' +
      (v.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>&#128465;</button></td>' +
      '</tr>';
  }

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

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

  function init() {
    P.el('volumes-create-btn').addEventListener('click', function () {
      const name = prompt('New volume name:');
      if (!name) return;
      P.post('volumes', 'create', { name: name }).then(load).catch(function (err) {
        alert('Create failed: ' + err.message);
      });
    });

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

    return load();
  }

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