/**
 * javascript/networks.js
 *
 * Networks panel: table + create/remove, backed by ajax/networks.php.
 */
(function () {
  'use strict';
  const P = window.Podman;
  let networks = [];

  function rowHtml(n) {
    const nameCell = n.isDefault
      ? '<strong>' + P.escapeHtml(n.name) + '</strong> <span class="podman-row-sub">(default)</span>'
      : P.escapeHtml(n.name);
    const removeDisabled = n.isDefault || n.containers > 0;
    return '' +
      '<tr data-name="' + P.escapeHtml(n.name) + '">' +
      '<td>' + nameCell + '</td>' +
      '<td><span class="podman-chip podman-chip-neutral">' + P.escapeHtml(n.driver) + '</span></td>' +
      '<td class="mono">' + P.escapeHtml(n.subnet || '&mdash;') + '</td>' +
      '<td class="mono">' + P.escapeHtml(n.gateway || '&mdash;') + '</td>' +
      '<td class="tnum">' + n.containers + '</td>' +
      '<td class="podman-actions"><div class="podman-actions-row"><button class="podman-btn podman-btn-icon" data-action="remove"' +
      (removeDisabled ? ' disabled' : '') + ' title="Remove">&#128465;</button></div></td>' +
      '</tr>';
  }

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

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

  function init() {
    P.el('networks-create-btn').addEventListener('click', function () {
      P.openFormModal({
        title: 'New Network',
        submitLabel: 'Create',
        fields: [
          { name: 'name', label: 'Network name', required: true, placeholder: 'my-network' },
          { name: 'subnet', label: 'Subnet (optional)', placeholder: '10.89.2.0/24' },
        ],
        onSubmit: function (values) {
          return P.post('networks', 'create', { name: values.name, driver: 'bridge', subnet: values.subnet || undefined }).then(load);
        },
      });
    });

    P.el('networks-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 network "' + name + '"?')) return;
      btn.disabled = true;
      P.post('networks', 'remove', { name: name }).then(load).catch(function (err) {
        alert('Remove failed: ' + err.message);
        btn.disabled = false;
      });
    });

    return load();
  }

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