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

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

<Layout title="Plugin Management - Admin">
  <div class="admin-container">
    <nav class="admin-nav">
      <a href="/admin/settings">Settings</a>
      <a href="/admin/plugins" class="active">Plugins</a>
      <a href="/admin/voting">Voting Methods</a>
      <a href="/admin/roles">Roles</a>
    </nav>

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

      <div class="plugin-categories">
        <div class="category" 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" 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" 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" 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-nav {
    width: 200px;
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-right: 1px solid var(--border-color);
  }

  .admin-nav a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .admin-nav a:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  .admin-nav a.active {
    background: var(--accent-color);
    color: white;
  }

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

  .page-header {
    margin-bottom: 2rem;
  }

  .page-header h1 {
    margin: 0;
  }

  .subtitle {
    color: var(--text-secondary);
    margin-top: 0.5rem;
  }

  .category {
    margin-bottom: 2.5rem;
  }

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

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

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

  .plugin-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
    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(--accent-color);
    color: white;
    font-weight: normal;
  }

  .plugin-info h3 .badge.core {
    background: #6c757d;
  }

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

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

  .toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
  }

  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border-color);
    border-radius: 26px;
    transition: 0.3s;
  }

  .toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
  }

  input:checked + .toggle-slider {
    background: var(--accent-color);
  }

  input:checked + .toggle-slider:before {
    transform: translateX(22px);
  }

  input:disabled + .toggle-slider {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .btn-config {
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
  }

  .btn-config:hover {
    background: var(--bg-hover);
  }

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

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

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

      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 ${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.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>