likwid/frontend/src/pages/delegations.astro

---
import Layout from '../layouts/Layout.astro';
import { API_BASE as apiBase } from '../lib/api';
import DelegationGraph from '../components/voting/DelegationGraph.astro';
---

<Layout title="Delegations - Likwid">
  <div class="container">
    <header class="page-header">
      <h1>Vote Delegations</h1>
      <p class="subtitle">Delegate your voting power to trusted members</p>
    </header>

    <div class="auth-required" id="auth-check">
      <p>Please <a href="/login">log in</a> to manage delegations.</p>
    </div>

    <div class="delegations-content" id="delegations-content" style="display: none;">
      <section class="graph-section">
        <DelegationGraph />
      </section>

      <div class="tabs">
        <button class="tab active" data-tab="outgoing">My Delegations</button>
        <button class="tab" data-tab="incoming">Delegated to Me</button>
        <button class="tab" data-tab="delegates">Find Delegates</button>
      </div>

      <!-- My Delegations Tab -->
      <div class="tab-content active" id="tab-outgoing">
        <div class="section-header">
          <h2>Active Delegations</h2>
          <button class="btn btn-primary" id="new-delegation-btn">New Delegation</button>
        </div>
        <div class="delegations-list" id="my-delegations">
          <p class="loading">Loading delegations...</p>
        </div>
      </div>

      <!-- Delegated to Me Tab -->
      <div class="tab-content" id="tab-incoming">
        <h2>Votes Delegated to Me</h2>
        <div class="delegations-list" id="incoming-delegations">
          <p class="loading">Loading...</p>
        </div>
      </div>

      <!-- Find Delegates Tab -->
      <div class="tab-content" id="tab-delegates">
        <h2>Available Delegates</h2>
        <p class="help-text">Find trusted community members to delegate your votes to.</p>
        <div class="delegates-list" id="delegates-list">
          <p class="loading">Loading delegates...</p>
        </div>
      </div>
    </div>

    <!-- New Delegation Modal -->
    <div class="modal" id="delegation-modal">
      <div class="modal-content">
        <h2>Create Delegation</h2>
        <form id="delegation-form">
          <div class="form-group">
            <label for="delegate-select">Delegate to</label>
            <select id="delegate-select" required>
              <option value="">Select a delegate...</option>
            </select>
          </div>
          <div class="form-group">
            <label for="scope-select">Scope</label>
            <select id="scope-select" required>
              <option value="global">Global (all votes)</option>
              <option value="community">Specific Community</option>
            </select>
          </div>
          <div class="form-group" id="community-select-group" style="display: none;">
            <label for="community-select">Community</label>
            <select id="community-select">
              <option value="">Select community...</option>
            </select>
          </div>
          <div class="form-group">
            <label for="weight-input">Delegation weight</label>
            <input id="weight-input" type="range" min="0.1" max="1" step="0.1" value="1" />
            <div class="help-text" id="weight-label">100% of your voting power</div>
          </div>
          <div class="form-actions">
            <button type="button" class="btn btn-secondary" id="cancel-delegation">Cancel</button>
            <button type="submit" class="btn btn-primary">Create Delegation</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</Layout>

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

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

  .page-header h1 {
    margin: 0;
    color: var(--text-primary);
  }

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

  .tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
  }

  .tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: all 0.2s;
  }

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

  .tab.active {
    color: var(--accent-color);
    background: var(--bg-secondary);
    font-weight: 600;
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .delegations-list, .delegates-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .delegation-card, .delegate-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
  }

  .delegation-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .delegation-card .delegate-name {
    font-weight: 600;
    color: var(--text-primary);
  }

  .delegation-card .scope-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    background: var(--accent-color);
    color: white;
  }

  .delegation-card .meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
  }

  .graph-section {
    margin-bottom: 1.5rem;
  }

  .delegation-card .actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
  }

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

  .delegate-info h3 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
  }

  .delegate-info .bio {
    color: var(--text-secondary);
    font-size: 0.9rem;
  }

  .delegate-stats {
    display: flex;
    gap: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
  }

  .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
  }

  .btn-primary {
    background: var(--accent-color);
    color: white;
    border: none;
  }

  .btn-primary:hover {
    opacity: 0.9;
  }

  .btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
  }

  .btn-danger {
    background: #dc3545;
    color: white;
    border: none;
  }

  .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }

  .modal.active {
    display: flex;
  }

  .modal-content {
    background: var(--bg-primary);
    padding: 2rem;
    border-radius: 1rem;
    width: 100%;
    max-width: 500px;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
  }

  .form-group select, .form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

  .form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
  }

  .help-text {
    color: var(--text-secondary);
    margin-bottom: 1rem;
  }

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

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

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

  async function init() {
    if (!token) {
      document.getElementById('auth-check').style.display = 'block';
      return;
    }
    
    document.getElementById('auth-check').style.display = 'none';
    document.getElementById('delegations-content').style.display = 'block';
    
    await Promise.all([
      loadMyDelegations(),
      loadIncomingDelegations(),
      loadDelegates()
    ]);
    
    setupTabs();
    setupModal();
  }

  function setupTabs() {
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', () => {
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
        tab.classList.add('active');
        document.getElementById(`tab-${tab.dataset.tab}`).classList.add('active');
      });
    });
  }

  function setupModal() {
    const modal = document.getElementById('delegation-modal');
    const newBtn = document.getElementById('new-delegation-btn');
    const cancelBtn = document.getElementById('cancel-delegation');
    const form = document.getElementById('delegation-form');
    const scopeSelect = document.getElementById('scope-select');
    const communityGroup = document.getElementById('community-select-group');
    const weightInput = document.getElementById('weight-input');
    const weightLabel = document.getElementById('weight-label');

    newBtn?.addEventListener('click', async () => {
      await loadDelegatesForSelect();
      await loadCommunitiesForSelect();
      modal.classList.add('active');
    });

    cancelBtn?.addEventListener('click', () => {
      modal.classList.remove('active');
    });

    scopeSelect?.addEventListener('change', () => {
      communityGroup.style.display = scopeSelect.value === 'community' ? 'block' : 'none';
    });

    weightInput?.addEventListener('input', () => {
      const v = parseFloat(weightInput.value || '1');
      if (weightLabel) weightLabel.textContent = `${Math.round(v * 100)}% of your voting power`;
    });

    form?.addEventListener('submit', async (e) => {
      e.preventDefault();
      await createDelegation();
    });
  }

  async function loadMyDelegations() {
    const container = document.getElementById('my-delegations');
    try {
      const res = await fetch(`${API_URL}/api/delegations`, {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      const delegations = await res.json();
      
      if (delegations.length === 0) {
        container.innerHTML = '<div class="empty-state">No active delegations. Create one to delegate your voting power.</div>';
        return;
      }

      container.innerHTML = delegations.map(d => `
        <div class="delegation-card">
          <header>
            <span class="delegate-name">→ ${d.delegate_username || 'Unknown'}</span>
            <span class="scope-badge">${d.scope}</span>
          </header>
          <div class="meta">
            Weight: ${Math.round((d.weight || 1) * 100)}%<br/>
            Created: ${new Date(d.created_at).toLocaleDateString()}
          </div>
          <div class="actions">
            <button class="btn btn-danger btn-sm" onclick="revokeDelegation('${d.id}')">Revoke</button>
          </div>
        </div>
      `).join('');
    } catch (e) {
      container.innerHTML = '<div class="error">Failed to load delegations</div>';
    }
  }

  async function loadIncomingDelegations() {
    const container = document.getElementById('incoming-delegations');
    try {
      const res = await fetch(`${API_URL}/api/delegations/to-me`, {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      const delegations = await res.json();
      
      if (delegations.length === 0) {
        container.innerHTML = '<div class="empty-state">No one has delegated votes to you yet.</div>';
        return;
      }

      container.innerHTML = delegations.map(d => `
        <div class="delegation-card">
          <header>
            <span class="delegate-name">← ${d.delegate_username || 'Unknown'}</span>
            <span class="scope-badge">${d.scope}</span>
          </header>
          <div class="meta">
            Weight: ${Math.round((d.weight || 1) * 100)}%<br/>
            Since: ${new Date(d.created_at).toLocaleDateString()}
          </div>
        </div>
      `).join('');
    } catch (e) {
      container.innerHTML = '<div class="error">Failed to load incoming delegations</div>';
    }
  }

  async function loadDelegates() {
    const container = document.getElementById('delegates-list');
    try {
      const res = await fetch(`${API_URL}/api/delegates`);
      const delegates = await res.json();
      
      if (delegates.length === 0) {
        container.innerHTML = '<div class="empty-state">No delegates available yet.</div>';
        return;
      }

      container.innerHTML = delegates.map(d => `
        <div class="delegate-card">
          <div class="delegate-info">
            <h3>${d.display_name || d.username}</h3>
            <p class="bio">${d.bio || 'No bio provided'}</p>
          </div>
          <div class="delegate-stats">
            <span>${d.total_delegators} delegators</span>
            <span>${d.total_votes_cast} votes cast</span>
          </div>
        </div>
      `).join('');
    } catch (e) {
      container.innerHTML = '<div class="error">Failed to load delegates</div>';
    }
  }

  async function loadDelegatesForSelect() {
    const select = document.getElementById('delegate-select');
    try {
      const res = await fetch(`${API_URL}/api/delegates`);
      const delegates = await res.json();
      select.innerHTML = '<option value="">Select a delegate...</option>' +
        delegates.map(d => `<option value="${d.user_id}">${d.display_name || d.username}</option>`).join('');
    } catch (e) {
      console.error('Failed to load delegates for select');
    }
  }

  async function loadCommunitiesForSelect() {
    const select = document.getElementById('community-select');
    try {
      const res = await fetch(`${API_URL}/api/communities`);
      const communities = await res.json();
      select.innerHTML = '<option value="">Select community...</option>' +
        communities.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
    } catch (e) {
      console.error('Failed to load communities');
    }
  }

  async function createDelegation() {
    const delegateId = document.getElementById('delegate-select').value;
    const scope = document.getElementById('scope-select').value;
    const communityId = document.getElementById('community-select').value;
    const weight = parseFloat(document.getElementById('weight-input').value || '1');

    const body = {
      delegate_id: delegateId,
      scope: scope,
      weight: weight,
    };
    if (scope === 'community' && communityId) {
      body.community_id = communityId;
    }

    try {
      const res = await fetch(`${API_URL}/api/delegations`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(body)
      });

      if (res.ok) {
        document.getElementById('delegation-modal').classList.remove('active');
        await loadMyDelegations();
        window.dispatchEvent(new Event('delegations:changed'));
      } else {
        const err = await res.text();
        alert('Failed to create delegation: ' + err);
      }
    } catch (e) {
      alert('Failed to create delegation');
    }
  }

  window.revokeDelegation = async function(id) {
    if (!confirm('Are you sure you want to revoke this delegation?')) return;
    
    try {
      const res = await fetch(`${API_URL}/api/delegations/${id}`, {
        method: 'DELETE',
        headers: { 'Authorization': `Bearer ${token}` }
      });

      if (res.ok) {
        await loadMyDelegations();
        window.dispatchEvent(new Event('delegations:changed'));
      } else {
        alert('Failed to revoke delegation');
      }
    } catch (e) {
      alert('Failed to revoke delegation');
    }
  };

  init();
</script>