likwid/frontend/src/pages/admin/plugins.astro

---
export const prerender = false;
import Layout from '../../layouts/Layout.astro';
import AdminNav from '../../components/AdminNav.astro';
import { API_BASE } from '../../lib/api';
---

<Layout title="Plugin Management - Admin">
  <div class="admin-container">
    <AdminNav currentPage="/admin/plugins" />

    <main class="admin-content">
      <header class="ui-page-header">
        <div class="ui-page-title">
          <h1>Plugin Management</h1>
          <p class="ui-subtitle">Enable and configure platform plugins</p>
        </div>
      </header>

      <div class="plugin-categories">
        <div class="category ui-card ui-card-soft ui-card-pad-md" id="category-core">
          <h2>Core Plugins</h2>
          <p class="category-desc">Essential plugins that cannot be disabled</p>
          <div class="plugins-list" data-category="core"></div>
        </div>

        <div class="category ui-card ui-card-soft ui-card-pad-md" id="category-voting">
          <h2>Voting Plugins</h2>
          <p class="category-desc">Advanced voting methods for proposals</p>
          <div class="plugins-list" data-category="voting"></div>
        </div>

        <div class="category ui-card ui-card-soft ui-card-pad-md" id="category-governance">
          <h2>Governance Features</h2>
          <p class="category-desc">Delegation, deliberation, and moderation</p>
          <div class="plugins-list" data-category="governance"></div>
        </div>

        <div class="category ui-card ui-card-soft ui-card-pad-md" id="category-integrations">
          <h2>Integrations</h2>
          <p class="category-desc">Connect with external services</p>
          <div class="plugins-list" data-category="integrations"></div>
        </div>
      </div>
    </main>
  </div>
</Layout>

<style>
  .admin-container {
    display: flex;
    min-height: calc(100vh - 60px);
  }

  .admin-content {
    flex: 1;
    padding: 2rem;
    max-width: 1000px;
  }

  .category {
    margin-bottom: 1.25rem;
  }

  .category h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
  }

  .category-desc {
    color: var(--color-text-muted);
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
  }

  .plugins-list {
    display: grid;
    gap: 1rem;
  }

  .plugin-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .plugin-card.disabled {
    opacity: 0.6;
  }

  .plugin-info {
    flex: 1;
  }

  .plugin-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .plugin-info h3 .badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: normal;
  }

  .plugin-info h3 .badge.core {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
  }

  .plugin-info p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
  }

  .plugin-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

  .toggle-switch {
    --ui-toggle-width: 48px;
    --ui-toggle-height: 26px;
    --ui-toggle-thumb-size: 20px;
  }

  .loading {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
  }
</style>

<script define:vars={{ API_BASE }}>
  const token = localStorage.getItem('token');

  if (!token) {
    window.location.href = '/login?redirect=/admin/plugins';
  }

  function showError(msg) {
    document.querySelectorAll('.plugins-list').forEach(el => {
      el.innerHTML = `<p class="loading">${msg}</p>`;
    });
  }

  async function loadPlugins() {
    try {
      const [defaultsRes, instanceRes] = await Promise.all([
        fetch(`${API_BASE}/api/plugins/defaults`, {
          headers: { 'Authorization': `Bearer ${token}` },
        }),
        fetch(`${API_BASE}/api/plugins/instance`, {
          headers: { 'Authorization': `Bearer ${token}` },
        })
      ]);

      if (defaultsRes.status === 401 || instanceRes.status === 401) {
        window.location.href = '/login?redirect=/admin/plugins';
        return;
      }

      if (defaultsRes.status === 403 || instanceRes.status === 403) {
        showError('Admin access required');
        return;
      }

      const defaults = await defaultsRes.json();
      const instance = await instanceRes.json();

      const instanceMap = new Map(instance.map(p => [p.plugin_name, p]));

      const categories = {
        core: [],
        voting: [],
        governance: [],
        moderation: [],
        communication: [],
        integrations: []
      };

      defaults.forEach(plugin => {
        const cat = plugin.category || 'core';
        const instancePlugin = instanceMap.get(plugin.plugin_name);
        const isEnabled = instancePlugin?.is_enabled ?? plugin.default_enabled;
        
        const card = createPluginCard(plugin, isEnabled);
        
        if (categories[cat]) {
          categories[cat].push(card);
        } else if (cat === 'moderation' || cat === 'communication') {
          categories.governance.push(card);
        } else {
          categories.core.push(card);
        }
      });

      Object.entries(categories).forEach(([cat, cards]) => {
        const container = document.querySelector(`.plugins-list[data-category="${cat}"]`);
        if (container && cards.length > 0) {
          container.innerHTML = cards.join('');
        } else if (container) {
          container.innerHTML = '<p class="loading">No plugins in this category</p>';
        }
      });

      setupToggleHandlers();
    } catch (e) {
      console.error('Failed to load plugins:', e);
    }
  }

  function createPluginCard(plugin, isEnabled) {
    const isCore = plugin.is_core;
    return `
      <div class="plugin-card ui-card ui-card-soft ui-card-pad-md ${isEnabled ? '' : 'disabled'}">
        <div class="plugin-info">
          <h3>
            ${plugin.display_name}
            ${isCore ? '<span class="badge core">Core</span>' : ''}
            ${plugin.is_recommended && !isCore ? '<span class="badge">Recommended</span>' : ''}
          </h3>
          <p>${plugin.description || 'No description'}</p>
        </div>
        <div class="plugin-actions">
          <label class="toggle-switch">
            <input type="checkbox" 
                   data-plugin="${plugin.plugin_name}" 
                   ${isEnabled ? 'checked' : ''} 
                   ${isCore ? 'disabled' : ''}>
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>
    `;
  }

  function setupToggleHandlers() {
    document.querySelectorAll('.toggle-switch input').forEach(toggle => {
      toggle.addEventListener('change', async (e) => {
        const pluginName = e.target.dataset.plugin;
        const isEnabled = e.target.checked;
        
        try {
          const res = await fetch(`${API_BASE}/api/plugins/instance/${pluginName}`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({ is_enabled: isEnabled })
          });

          if (res.status === 401) {
            window.location.href = '/login?redirect=/admin/plugins';
            return;
          }

          if (res.status === 403) {
            alert('Admin access required');
            e.target.checked = !isEnabled;
            return;
          }

          if (!res.ok) {
            const err = await res.text();
            alert('Failed to update plugin: ' + err);
            e.target.checked = !isEnabled;
          } else {
            const card = e.target.closest('.plugin-card');
            card.classList.toggle('disabled', !isEnabled);
          }
        } catch (err) {
          alert('Failed to update plugin');
          e.target.checked = !isEnabled;
        }
      });
    });
  }

  loadPlugins();
</script>