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

<Layout title="Voting Methods - Admin">
  <div class="admin-container">
    <AdminNav currentPage="/admin/voting" />

    <main class="admin-content">
      <header class="page-header">
        <div class="header-content">
          <div class="header-icon">
            <svg class="icon icon-xl"><use href="#icon-vote-cast"/></svg>
          </div>
          <div>
            <h1>Voting Methods</h1>
            <p class="subtitle">Configure how your communities make decisions</p>
          </div>
        </div>
      </header>

      <!-- Method Comparison -->
      <section class="comparison-section">
        <h2>
          <svg class="icon"><use href="#icon-info"/></svg>
          Understanding Voting Methods
        </h2>
        <div class="comparison-grid">
          <div class="comparison-card" data-method="approval">
            <div class="card-icon" style="--method-color: #22c55e;">
              <svg class="icon icon-lg"><use href="#icon-approval"/></svg>
            </div>
            <h3>Approval</h3>
            <p>Vote yes/no on each option. Simple and prevents spoiler effects.</p>
            <div class="complexity-indicator">
              <span class="dot filled"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>
          </div>
          <div class="comparison-card" data-method="ranked_choice">
            <div class="card-icon" style="--method-color: #3b82f6;">
              <svg class="icon icon-lg"><use href="#icon-ranked-choice"/></svg>
            </div>
            <h3>Ranked Choice</h3>
            <p>Rank preferences. Eliminates lowest until majority found.</p>
            <div class="complexity-indicator">
              <span class="dot filled"></span>
              <span class="dot filled"></span>
              <span class="dot"></span>
            </div>
          </div>
          <div class="comparison-card" data-method="schulze">
            <div class="card-icon" style="--method-color: #8b5cf6;">
              <svg class="icon icon-lg"><use href="#icon-schulze"/></svg>
            </div>
            <h3>Schulze</h3>
            <p>Pairwise comparison tournament. Mathematically optimal winner.</p>
            <div class="complexity-indicator">
              <span class="dot filled"></span>
              <span class="dot filled"></span>
              <span class="dot filled"></span>
            </div>
          </div>
          <div class="comparison-card" data-method="star">
            <div class="card-icon" style="--method-color: #f59e0b;">
              <svg class="icon icon-lg"><use href="#icon-star"/></svg>
            </div>
            <h3>STAR</h3>
            <p>Score 0-5 stars, top two face automatic runoff.</p>
            <div class="complexity-indicator">
              <span class="dot filled"></span>
              <span class="dot filled"></span>
              <span class="dot"></span>
            </div>
          </div>
          <div class="comparison-card" data-method="quadratic">
            <div class="card-icon" style="--method-color: #ec4899;">
              <svg class="icon icon-lg"><use href="#icon-quadratic"/></svg>
            </div>
            <h3>Quadratic</h3>
            <p>Spend credits where cost = votes². Express intensity.</p>
            <div class="complexity-indicator">
              <span class="dot filled"></span>
              <span class="dot filled"></span>
              <span class="dot filled"></span>
            </div>
          </div>
        </div>
      </section>

      <!-- Platform Methods -->
      <section class="methods-section">
        <div class="section-header">
          <h2>
            <svg class="icon"><use href="#icon-config"/></svg>
            Platform Configuration
          </h2>
          <p>Enable or disable voting methods for all communities</p>
        </div>
        <div class="voting-methods" id="voting-methods">
          <div class="loading-state">
            <div class="spinner"></div>
            <span>Loading voting methods...</span>
          </div>
        </div>
      </section>

      <!-- Phase Configuration -->
      <section class="phase-section">
        <div class="section-header">
          <h2>
            <svg class="icon"><use href="#icon-phase"/></svg>
            Default Phase Settings
          </h2>
          <p>Configure the default deliberation workflow for proposals</p>
        </div>
        <div class="phase-config" id="phase-config">
          <div class="phase-flow">
            <div class="phase-step">
              <div class="phase-icon inform">
                <svg class="icon"><use href="#icon-inform"/></svg>
              </div>
              <span class="phase-label">Inform</span>
              <span class="phase-desc">Read materials</span>
            </div>
            <div class="phase-arrow">→</div>
            <div class="phase-step">
              <div class="phase-icon discuss">
                <svg class="icon"><use href="#icon-discussion"/></svg>
              </div>
              <span class="phase-label">Discuss</span>
              <span class="phase-desc">Deliberate</span>
            </div>
            <div class="phase-arrow">→</div>
            <div class="phase-step">
              <div class="phase-icon vote">
                <svg class="icon"><use href="#icon-vote-cast"/></svg>
              </div>
              <span class="phase-label">Vote</span>
              <span class="phase-desc">Decide</span>
            </div>
            <div class="phase-arrow">→</div>
            <div class="phase-step">
              <div class="phase-icon results">
                <svg class="icon"><use href="#icon-results"/></svg>
              </div>
              <span class="phase-label">Results</span>
              <span class="phase-desc">Outcome</span>
            </div>
          </div>
          <div class="phase-settings">
            <label class="setting-row">
              <input type="checkbox" id="require-inform" />
              <span>Require inform phase before discussion</span>
            </label>
            <label class="setting-row">
              <input type="checkbox" id="require-discuss" checked />
              <span>Require discussion phase before voting</span>
            </label>
            <label class="setting-row">
              <input type="checkbox" id="auto-close" checked />
              <span>Auto-close voting when deadline reached</span>
            </label>
          </div>
        </div>
      </section>
    </main>
  </div>
</Layout>

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

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

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

  .header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .header-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-bg);
    border-radius: 12px;
    color: var(--color-primary);
  }

  .page-header h1 {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
  }

  .subtitle {
    color: var(--color-text-muted);
    margin: 0;
  }

  /* Comparison Section */
  .comparison-section {
    margin-bottom: 2.5rem;
  }

  .comparison-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    margin-bottom: 1rem;
  }

  .comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }

  .comparison-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .comparison-card:hover {
    border-color: var(--method-color, var(--color-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--method-color) 15%, transparent);
    border-radius: 12px;
    color: var(--method-color);
    margin: 0 auto 0.75rem;
  }

  .comparison-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
  }

  .comparison-card p {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
    line-height: 1.4;
  }

  .complexity-indicator {
    display: flex;
    justify-content: center;
    gap: 4px;
  }

  .complexity-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
  }

  .complexity-indicator .dot.filled {
    background: var(--method-color, var(--color-primary));
  }

  /* Methods Section */
  .methods-section, .phase-section {
    margin-bottom: 2.5rem;
  }

  .section-header {
    margin-bottom: 1.25rem;
  }

  .section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    margin: 0 0 0.25rem;
  }

  .section-header p {
    color: var(--color-text-muted);
    margin: 0;
    font-size: 0.9375rem;
  }

  .voting-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .method-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: all 0.15s ease;
  }

  .method-row:hover {
    border-color: var(--color-primary);
  }

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

  .method-row .method-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .method-row .method-info {
    flex: 1;
  }

  .method-row .method-name {
    font-weight: 600;
    margin-bottom: 0.125rem;
  }

  .method-row .method-desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }

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

  .default-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
    background: var(--color-warning);
    color: white;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .btn-set-default {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
  }

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

  /* Toggle Switch */
  .toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
  }

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

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

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

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

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

  /* Phase Flow */
  .phase-config {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem;
  }

  .phase-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
  }

  .phase-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
  }

  .phase-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .phase-icon.inform {
    background: color-mix(in srgb, #3b82f6 15%, transparent);
    color: #3b82f6;
  }

  .phase-icon.discuss {
    background: color-mix(in srgb, #8b5cf6 15%, transparent);
    color: #8b5cf6;
  }

  .phase-icon.vote {
    background: color-mix(in srgb, #22c55e 15%, transparent);
    color: #22c55e;
  }

  .phase-icon.results {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #f59e0b;
  }

  .phase-label {
    font-weight: 600;
    font-size: 0.875rem;
  }

  .phase-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  .phase-arrow {
    font-size: 1.25rem;
    color: var(--color-text-muted);
  }

  .phase-settings {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .setting-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9375rem;
  }

  .setting-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
  }

  /* Loading State */
  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--color-text-muted);
    gap: 1rem;
  }

  .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  @media (max-width: 768px) {
    .admin-container {
      flex-direction: column;
    }

    .comparison-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .phase-flow {
      gap: 0.5rem;
    }

    .phase-arrow {
      display: none;
    }
  }
</style>

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

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

  const methodIcons = {
    'approval': { icon: 'icon-approval', color: '#22c55e' },
    'ranked_choice': { icon: 'icon-ranked-choice', color: '#3b82f6' },
    'schulze': { icon: 'icon-schulze', color: '#8b5cf6' },
    'star': { icon: 'icon-star', color: '#f59e0b' },
    'quadratic': { icon: 'icon-quadratic', color: '#ec4899' },
  };

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

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

      if (res.status === 403) {
        container.innerHTML = '<div class="loading-state"><span>Admin access required</span></div>';
        return;
      }

      const methods = await res.json();

      container.innerHTML = methods.map(m => {
        const meta = methodIcons[m.name] || { icon: 'icon-vote-cast', color: 'var(--color-primary)' };
        return `
          <div class="method-row ${m.is_active ? '' : 'disabled'}" data-id="${m.id}">
            <div class="method-icon" style="background: color-mix(in srgb, ${meta.color} 15%, transparent); color: ${meta.color};">
              <svg class="icon"><use href="#${meta.icon}"/></svg>
            </div>
            <div class="method-info">
              <div class="method-name">${m.display_name}</div>
              <div class="method-desc">${m.description || 'No description'}</div>
            </div>
            <div class="method-controls">
              ${m.is_default ? '<span class="default-badge">Default</span>' : `
                <button class="btn-set-default" data-id="${m.id}">Set Default</button>
              `}
              <label class="toggle-switch">
                <input type="checkbox" data-id="${m.id}" ${m.is_active ? 'checked' : ''}>
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        `;
      }).join('');

      setupToggleHandlers();
      setupDefaultHandlers();
    } catch (e) {
      container.innerHTML = '<div class="loading-state"><span>Failed to load voting methods</span></div>';
    }
  }

  function setupToggleHandlers() {
    document.querySelectorAll('.method-row .toggle-switch input').forEach(toggle => {
      toggle.addEventListener('change', async (e) => {
        const methodId = e.target.dataset.id;
        const isActive = e.target.checked;
        
        try {
          const res = await fetch(`${API_BASE}/api/voting-methods/${methodId}`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({ is_active: isActive })
          });

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

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

          if (!res.ok) {
            e.target.checked = !isActive;
          } else {
            const row = e.target.closest('.method-row');
            row.classList.toggle('disabled', !isActive);
          }
        } catch (err) {
          e.target.checked = !isActive;
        }
      });
    });
  }

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

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

          if (res.status === 403) {
            alert('Admin access required');
            return;
          }

          if (res.ok) {
            loadVotingMethods();
          }
        } catch (err) {
          console.error('Failed to set default');
        }
      });
    });
  }

  // Comparison card click handlers
  document.querySelectorAll('.comparison-card').forEach(card => {
    card.addEventListener('click', () => {
      const method = card.dataset.method;
      const row = document.querySelector(`.method-row[data-id*="${method}"]`);
      if (row) {
        row.scrollIntoView({ behavior: 'smooth', block: 'center' });
        row.style.animation = 'highlight 1s ease';
      }
    });
  });

  loadVotingMethods();
</script>