/**
 * UI-PP-001: read-only plugin listeners table (Settings → ops).
 */
(function () {
  const mountEl = document.getElementById('plugin-ports-app');
  if (!mountEl || typeof Vue === 'undefined') return;

  const { createApp, ref, onMounted } = Vue;

  createApp({
    setup() {
      const listeners = ref([]);
      const loading = ref(true);
      const error = ref('');

      async function load() {
        loading.value = true;
        error.value = '';
        try {
          const resp = await fetch('/api/v1/admin/plugin-ports', { credentials: 'same-origin' });
          const data = await resp.json();
          if (data.success) {
            listeners.value = data.listeners || [];
          } else {
            error.value = data.error || 'Ошибка загрузки';
          }
        } catch (e) {
          error.value = String(e);
        } finally {
          loading.value = false;
        }
      }

      onMounted(load);

      return { listeners, loading, error, load };
    },
    template: `
      <div>
        <div v-if="loading" class="text-muted">Загрузка...</div>
        <div v-else-if="error" class="alert alert-warning">{{ error }}</div>
        <div v-else-if="!listeners.length" class="text-muted">Нет зарегистрированных listeners.</div>
        <table v-else class="table table-sm table-striped">
          <thead>
            <tr>
              <th>ID</th><th>Плагин</th><th>Порт</th><th>Status</th><th>Label</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="ln in listeners" :key="ln.id">
              <td>{{ ln.id }}</td>
              <td>{{ ln.plugin_name }}</td>
              <td>{{ ln.host }}:{{ ln.port }}</td>
              <td><span class="badge bg-secondary">{{ ln.status }}</span></td>
              <td>{{ ln.label || '—' }}</td>
            </tr>
          </tbody>
        </table>
        <button type="button" class="btn btn-outline-secondary btn-sm" @click="load">Обновить</button>
      </div>
    `,
  }).mount(mountEl);
})();
