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

<Layout title="Voting Configuration">
  <div class="config-container">
    <header class="page-header">
      <a href={`/communities/${slug}`} class="back-link">← Back to Community</a>
      <h1>Voting Configuration</h1>
      <p class="subtitle">Configure voting methods for this community</p>
    </header>

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

<style>
  .config-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
  }

  .back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
  }

  .back-link:hover {
    color: var(--accent-color);
  }

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

  .page-header h1 {
    margin: 0.5rem 0 0 0;
  }

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

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

  .method-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 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: #28a745; color: white; }
  .complexity.moderate { background: #ffc107; color: #000; }
  .complexity.advanced { background: #dc3545; color: white; }

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

  .method-controls {
    display: flex;
    gap: 1rem;
    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);
  }

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

  .btn-default {
    padding: 0.35rem 0.65rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
  }

  .btn-default:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

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

  .error-message {
    background: #dc354520;
    border: 1px solid #dc3545;
    padding: 1rem;
    border-radius: 0.5rem;
    color: #dc3545;
  }
</style>

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

  async function init() {
    // First get community ID from slug
    try {
      const res = await fetch(`${API_BASE}/api/communities/${slug}`);
      if (!res.ok) {
        document.getElementById('voting-methods').innerHTML = 
          '<p class="error-message">Community not found</p>';
        return;
      }
      const community = await res.json();
      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`);
      const methods = await res.json();

      container.innerHTML = methods.map(m => `
        <div class="method-card ${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="btn-default" data-id="${m.voting_method.id}">
                  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('.btn-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>