/**
 * javascript/compose.js
 *
 * Compose panel: project list + read-only YAML view + up/down/pull,
 * backed by ajax/compose.php. See that file's header comment — this is
 * the one panel whose backend shells out to the `podman compose` CLI,
 * because no REST equivalent for Compose exists in libpod.
 */
(function () {
  'use strict';
  const P = window.Podman;
  let projects = [];
  let selected = null;

  function statusChip(status) {
    const cls = status === 'up' ? 'podman-chip-good' : (status === 'down' ? 'podman-chip-neutral' : 'podman-chip-warn');
    return '<span class="podman-chip ' + cls + '"><span class="d"></span>' + P.escapeHtml(status) + '</span>';
  }

  function renderSidebar() {
    P.el('compose-sidebar').innerHTML = projects.map(function (p) {
      return '<div class="podman-compose-proj' + (p.name === selected ? ' active' : '') + '" data-name="' + P.escapeHtml(p.name) + '">' +
        '<div class="name" style="display:flex; justify-content:space-between; gap:8px;">' + P.escapeHtml(p.name) + ' ' + statusChip(p.status) + '</div>' +
        '<div class="path">' + P.escapeHtml(p.path) + '</div>' +
        '</div>';
    }).join('') || '<div class="podman-empty-note">No compose projects under /boot/config/plugins/podman/compose/</div>';
  }

  function loadYaml(name) {
    P.el('compose-title').textContent = name + ' / compose.yaml';
    P.el('compose-yaml').textContent = 'Loading…';
    return P.get('compose', 'get', { project: name }).then(function (data) {
      P.el('compose-yaml').textContent = data.yaml;
    }).catch(function (err) {
      P.el('compose-yaml').textContent = 'Error: ' + err.message;
    });
  }

  function selectProject(name) {
    selected = name;
    renderSidebar();
    loadYaml(name);
  }

  function loadProjects() {
    return P.get('compose', 'list').then(function (data) {
      projects = data;
      if (!selected && projects.length > 0) selected = projects[0].name;
      renderSidebar();
      if (selected) loadYaml(selected);
    }).catch(function (err) {
      P.el('compose-sidebar').innerHTML = '<div class="podman-error" style="padding:14px;">' + P.escapeHtml(err.message) + '</div>';
    });
  }

  function runAction(action) {
    if (!selected) return;
    const btn = P.el('compose-action-' + action);
    btn.disabled = true;
    P.post('compose', action, { project: selected }).then(function (data) {
      alert((data.output || 'Done.').slice(0, 2000));
      return loadProjects();
    }).catch(function (err) {
      alert('podman compose ' + action + ' failed: ' + err.message);
    }).finally(function () {
      btn.disabled = false;
    });
  }

  function init() {
    P.el('compose-sidebar').addEventListener('click', function (e) {
      const item = e.target.closest('.podman-compose-proj[data-name]');
      if (item) selectProject(item.dataset.name);
    });
    P.el('compose-action-up').addEventListener('click', function () { runAction('up'); });
    P.el('compose-action-down').addEventListener('click', function () { runAction('down'); });
    P.el('compose-action-pull').addEventListener('click', function () { runAction('pull'); });

    return loadProjects();
  }

  P.registerPanel('compose', { init: init, refresh: loadProjects });
})();