likwid/frontend/src/pages/communities/[slug]/voting-config.astro

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

<Layout title="Voting Configuration">
  <section class="ui-page">
    <div class="ui-container ui-config-container">
      <div class="ui-hero ui-card ui-card-glass">
        <div class="ui-hero-top">
          <div class="ui-hero-title">
            <h1>Voting Configuration</h1>
            <p class="ui-hero-subtitle">Configure voting methods for this community</p>
          </div>
          <a href={`/communities/${slug}`} class="ui-btn ui-btn-secondary">Back to Community</a>
        </div>
      </div>

      <div class="voting-methods" id="voting-methods">
        <p class="loading">Loading voting methods...</p>
      </div>
    </div>
  </section>
</Layout>

<style>
  .ui-config-container {
    max-width: 900px;
  }

  .voting-methods {
    display: grid;
    gap: 1.25rem;
  }

  .method-card.disabled {
    opacity: 0.5;
  }

  .method-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .method-info h3 {
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .complexity {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-weight: normal;
  }

  .complexity.simple { background: var(--color-success); color: var(--color-on-primary); }
  .complexity.moderate { background: var(--color-warning); color: var(--color-on-primary); }
  .complexity.advanced { background: var(--color-error); color: var(--color-on-primary); }

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

  .method-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

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

  .default-badge {
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.75rem;
  }

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

  .error-message {
    background: var(--color-error-muted);
    border: 1px solid var(--color-error);
    padding: 1rem;
    border-radius: var(--radius-md);
    color: var(--color-error);
  }
</style>

<script define:vars={{ slug, API_BASE }}>
  const token = localStorage.getItem('token');
  let communityId = null;

  if (!token) {
    window.location.href = `/login?redirect=/communities/${slug}/voting-config`;
  }

  async function init() {
    try {
      const res = await fetch(`${API_BASE}/api/communities`);
      if (!res.ok) {
        document.getElementById('voting-methods').innerHTML = 
          '<p class="error-message">Failed to load community</p>';
        return;
      }

      const communities = await res.json();
      const community = (communities || []).find(c => c.slug === slug);

      if (!community) {
        document.getElementById('voting-methods').innerHTML = 
          '<p class="error-message">Community not found</p>';
        return;
      }

      communityId = community.id;
      await loadVotingMethods();
    } catch (e) {
      document.getElementById('voting-methods').innerHTML = 
        '<p class="error-message">Failed to load community</p>';
    }
  }

  async function loadVotingMethods() {
    const container = document.getElementById('voting-methods');
    
    try {
      const res = await fetch(`${API_BASE}/api/communities/${communityId}/voting-methods`, {
        headers: { 'Authorization': `Bearer ${token}` },
      });

      if (res.status === 401) {
        window.location.href = `/login?redirect=/communities/${slug}/voting-config`;
        return;
      }

      if (res.status === 403) {
        container.innerHTML = '<p class="error-message">Admin/moderator access required</p>';
        return;
      }

      const methods = await res.json();

      container.innerHTML = methods.map(m => `
        <div class="method-card ui-card ui-card-soft ui-card-pad-md ${m.is_enabled ? '' : 'disabled'}" data-id="${m.voting_method.id}">
          <div class="method-header">
            <div class="method-info">
              <h3>
                ${m.voting_method.display_name}
                <span class="complexity ${m.voting_method.complexity_level}">${m.voting_method.complexity_level}</span>
              </h3>
              <p>${m.voting_method.description || 'No description'}</p>
            </div>
            <div class="method-controls">
              ${m.is_default ? '<span class="default-badge">Default</span>' : `
                <button class="ui-btn ui-btn-secondary js-set-default" data-id="${m.voting_method.id}" type="button">
                  Set Default
                </button>
              `}
              <label class="toggle-switch">
                <input type="checkbox" 
                       data-id="${m.voting_method.id}" 
                       ${m.is_enabled ? 'checked' : ''}>
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>
      `).join('');

      setupHandlers();
    } catch (e) {
      container.innerHTML = '<p class="error-message">Failed to load voting methods</p>';
    }
  }

  function setupHandlers() {
    // Toggle handlers
    document.querySelectorAll('.method-card .toggle-switch input').forEach(toggle => {
      toggle.addEventListener('change', async (e) => {
        const methodId = e.target.dataset.id;
        const isEnabled = e.target.checked;
        
        try {
          const res = await fetch(`${API_BASE}/api/communities/${communityId}/voting-methods/${methodId}`, {
            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: ' + err);
            e.target.checked = !isEnabled;
          } else {
            const card = e.target.closest('.method-card');
            card.classList.toggle('disabled', !isEnabled);
          }
        } catch (err) {
          alert('Failed to update');
          e.target.checked = !isEnabled;
        }
      });
    });

    // Default handlers
    document.querySelectorAll('.js-set-default').forEach(btn => {
      btn.addEventListener('click', async () => {
        const methodId = btn.dataset.id;
        
        try {
          const res = await fetch(`${API_BASE}/api/communities/${communityId}/voting-methods/${methodId}`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({ is_default: true, is_enabled: true })
          });

          if (res.ok) {
            loadVotingMethods();
          } else {
            const err = await res.text();
            alert('Failed: ' + err);
          }
        } catch (err) {
          alert('Failed to set default');
        }
      });
    });
  }

  init();
</script>