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">
  <section class="ui-page">
    <div class="ui-container">
      <div class="hero ui-card ui-card-glass">
        <div class="hero-top">
          <div>
            <h1 class="hero-title">Vote Delegations</h1>
            <p class="hero-subtitle">Delegate your voting power to trusted members</p>
          </div>
          <div class="hero-actions">
            <a href="/communities" class="ui-btn ui-btn-secondary">Browse</a>
            <button class="ui-btn ui-btn-primary" id="new-delegation-btn" type="button" style="display:none;">New Delegation</button>
          </div>
        </div>

        <div class="hero-kpis">
          <div class="hero-kpis-label">At a glance</div>
          <div class="ui-kpis">
            <div class="ui-kpi">
              <div class="ui-kpi-value" id="kpi-outgoing">—</div>
              <div class="ui-kpi-label">My delegations</div>
            </div>
            <div class="ui-kpi">
              <div class="ui-kpi-value" id="kpi-incoming">—</div>
              <div class="ui-kpi-label">Delegated to me</div>
            </div>
            <div class="ui-kpi">
              <div class="ui-kpi-value" id="kpi-delegates">—</div>
              <div class="ui-kpi-label">Available delegates</div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui-card 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;">
        <details class="panel ui-card" open>
          <summary class="panel-summary">
            <span class="panel-title">Delegation network</span>
            <span class="panel-meta">Explorable view</span>
          </summary>
          <div class="panel-body">
            <DelegationGraph />
          </div>
        </details>

        <details class="panel ui-card" open>
          <summary class="panel-summary">
            <span class="panel-title">Insights</span>
            <span class="panel-meta">
              <span class="ui-badge" id="badge-delegation-insights">—</span>
            </span>
          </summary>
          <div class="panel-body">
            <div id="delegation-insights" class="panel-content">
              <p class="loading">Loading...</p>
            </div>
          </div>
        </details>

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

        <div class="tab-content active" id="tab-outgoing">
          <div class="section-header ui-card">
            <div>
              <h2>Active Delegations</h2>
              <p class="help-text">Your current outgoing delegations (what you delegate to others).</p>
            </div>
            <button class="ui-btn ui-btn-primary" id="new-delegation-btn-secondary" type="button">New Delegation</button>
          </div>
          <div class="delegations-list" id="my-delegations">
            <p class="loading">Loading delegations...</p>
          </div>
        </div>

        <div class="tab-content" id="tab-incoming">
          <div class="section-header ui-card">
            <div>
              <h2>Votes Delegated to Me</h2>
              <p class="help-text">Incoming delegations (people who trust you to vote on their behalf).</p>
            </div>
          </div>
          <div class="delegations-list" id="incoming-delegations">
            <p class="loading">Loading...</p>
          </div>
        </div>

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

      <div class="modal" id="delegation-modal">
        <div class="modal-content ui-card">
          <div class="modal-header">
            <h2>Create Delegation</h2>
            <button type="button" class="ui-btn ui-btn-secondary" id="cancel-delegation">Close</button>
          </div>
          <form id="delegation-form">
            <div class="form-grid">
              <div class="form-group">
                <label for="delegate-select">Delegate to</label>
                <select id="delegate-select" required class="ui-select">
                  <option value="">Select a delegate...</option>
                </select>
              </div>
              <div class="form-group">
                <label for="scope-select">Scope</label>
                <select id="scope-select" required class="ui-select">
                  <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" class="ui-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>

            <div class="form-actions">
              <button type="submit" class="ui-btn ui-btn-primary">Create Delegation</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
</Layout>

<style>
  .hero {
    padding: 1.25rem;
    margin-bottom: 1rem;
  }

  .hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .hero-title {
    margin: 0;
    font-size: 2.125rem;
    letter-spacing: -0.02em;
  }

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

  .hero-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero-kpis {
    margin-top: 1rem;
  }

  .hero-kpis-label {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .auth-required {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
  }

  .auth-required a {
    color: var(--color-primary);
  }

  .tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
  }

  .tab {
    flex: 1;
    padding: 0.65rem 0.9rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 12px;
    transition: transform 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
    font-weight: 700;
  }

  .tab:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
  }

  .tab.active {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-border);
  }

  .tab-content {
    display: none;
  }

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

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

  .section-header h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -0.01em;
  }

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

  .delegation-card, .delegate-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 1.1rem;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
  }

  .delegation-card:hover, .delegate-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-hover);
    background: rgba(255, 255, 255, 0.05);
  }

  .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(--color-text);
  }

  .delegation-card .scope-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--color-border);
    color: var(--color-text);
  }

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

  .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(--color-text);
  }

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

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

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

  .modal.active {
    display: flex;
  }

  .modal-content {
    padding: 1.25rem;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
  }

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

  .modal-header h2 {
    margin: 0;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
  }

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

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

  .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

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

  .help-text {
    color: var(--color-text-muted);
    margin: 0.35rem 0 0;
  }

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

  .empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-muted);
  }

  .insights-body {
    display: grid;
    gap: 0.75rem;
  }

  .insights-title {
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .insights-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    display: grid;
    gap: 0.35rem;
  }

  @media (max-width: 640px) {
    .delegate-card {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    .delegate-stats {
      width: 100%;
      justify-content: space-between;
    }
  }
</style>

<script define:vars={{ apiBase }}>
  const API_URL = apiBase;
  let token = localStorage.getItem('token');
  const delegationsState = {
    outgoing: null,
    incoming: null,
    delegates: null,
  };

  function escapeHtml(value) {
    return String(value || '').replace(/[&<>"']/g, function(ch) {
      switch (ch) {
        case '&': return '&amp;';
        case '<': return '&lt;';
        case '>': return '&gt;';
        case '"': return '&quot;';
        case "'": return '&#39;';
        default: return ch;
      }
    });
  }

  function normalizeScope(scope) {
    const s = String(scope || '').toLowerCase();
    if (s === 'global' || s === 'community' || s === 'topic' || s === 'proposal') return s;
    return 'global';
  }

  function getScopeLabel(scope) {
    const s = normalizeScope(scope);
    const labels = {
      global: '🌐 Global',
      community: '🏘️ Community',
      topic: '📁 Topic',
      proposal: '📄 Proposal'
    };
    return labels[s] || s;
  }

  function setText(id, value) {
    const el = document.getElementById(id);
    if (el) el.textContent = String(value);
  }

  function setBadge(id, value) {
    const el = document.getElementById(id);
    if (!el) return;
    const str = String(value);
    el.textContent = str;
    el.setAttribute('aria-label', str);
  }

  function pluralize(label, count) {
    return count === 1 ? label : `${label}s`;
  }

  function renderDelegationInsights() {
    const container = document.getElementById('delegation-insights');
    if (!container) return;

    const outgoing = delegationsState.outgoing;
    const incoming = delegationsState.incoming;
    const delegates = delegationsState.delegates;

    if (!outgoing || !incoming || !delegates) {
      container.innerHTML = '<p class="loading">Loading...</p>';
      return;
    }

    const outgoingCount = outgoing.length;
    const incomingCount = incoming.length;
    const delegatesCount = delegates.length;

    const bullets = [];
    if (outgoingCount === 0) {
      bullets.push('You are currently voting directly (no outgoing delegations).');
    } else {
      bullets.push(`You delegate to ${outgoingCount} ${pluralize('person', outgoingCount)}.`);
    }

    if (incomingCount === 0) {
      bullets.push('No one has delegated to you yet.');
    } else {
      bullets.push(`${incomingCount} ${pluralize('person', incomingCount)} delegated votes to you—check if any are community-scoped.`);
    }

    if (delegatesCount === 0) {
      bullets.push('No delegates are available yet.');
    } else {
      bullets.push(`${delegatesCount} available ${pluralize('delegate', delegatesCount)} to choose from.`);
    }

    if (outgoingCount > 0 && incomingCount > 0) {
      bullets.push('You both delegate and receive delegation—double-check your responsibilities before voting.');
    }

    const actions = [];
    if (outgoingCount === 0) {
      actions.push({ action: 'new', label: 'Create Delegation', kind: 'primary' });
    } else {
      actions.push({ action: 'tab-outgoing', label: 'Review My Delegations', kind: 'secondary' });
    }

    if (incomingCount > 0) {
      actions.push({ action: 'tab-incoming', label: 'Review Incoming', kind: 'secondary' });
    }

    actions.push({ action: 'tab-delegates', label: 'Find Delegates', kind: 'secondary' });

    setBadge('badge-delegation-insights', bullets.length);

    container.innerHTML = `
      <div class="insights-body">
        <div class="insights-title">What stands out</div>
        <ul class="insights-list">
          ${bullets.map((b) => `<li>${escapeHtml(b)}</li>`).join('')}
        </ul>
        <div class="panel-actions">
          ${actions.map((a) => `<button type="button" class="ui-btn ui-btn-${a.kind}" data-insight-action="${a.action}">${escapeHtml(a.label)}</button>`).join('')}
        </div>
      </div>
    `;

    container.querySelectorAll('[data-insight-action]').forEach((btn) => {
      btn.addEventListener('click', () => {
        const action = btn.getAttribute('data-insight-action') || '';
        if (action === 'new') {
          document.getElementById('new-delegation-btn-secondary')?.click();
          return;
        }
        if (action.startsWith('tab-')) {
          const tab = action.replace('tab-', '');
          document.querySelector(`.tab[data-tab="${tab}"]`)?.click();
        }
      });
    });
  }

  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';

    renderDelegationInsights();
    
    document.getElementById('new-delegation-btn')?.setAttribute('style', 'display:inline-flex;');

    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 newBtnSecondary = document.getElementById('new-delegation-btn-secondary');
    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');

    const openModal = async () => {
      await loadDelegatesForSelect();
      await loadCommunitiesForSelect();
      modal.classList.add('active');
    };

    newBtn?.addEventListener('click', openModal);
    newBtnSecondary?.addEventListener('click', openModal);

    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();
      delegationsState.outgoing = delegations;

      setText('kpi-outgoing', delegations.length);
      renderDelegationInsights();
      
      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 => {
        const safeName = escapeHtml(d.delegate_username || 'Unknown');
        const scopeLabel = escapeHtml(getScopeLabel(d.scope));
        const weightPct = Math.round((Number(d.weight) || 1) * 100);
        const createdAt = d.created_at ? new Date(d.created_at).toLocaleDateString() : '';
        const safeId = escapeHtml(d.id);

        return `
          <div class="delegation-card">
            <header>
              <span class="delegate-name">→ ${safeName}</span>
              <span class="scope-badge">${scopeLabel}</span>
            </header>
            <div class="meta">
              Weight: ${weightPct}%<br/>
              ${createdAt ? `Created: ${escapeHtml(createdAt)}` : ''}
            </div>
            <div class="actions">
              <button class="ui-btn ui-btn-danger" type="button" data-revoke-id="${safeId}">Revoke</button>
            </div>
          </div>
        `;
      }).join('');

      container.querySelectorAll('[data-revoke-id]').forEach((btn) => {
        btn.addEventListener('click', async () => {
          const id = btn.getAttribute('data-revoke-id') || '';
          await window.revokeDelegation(id);
        });
      });
    } 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();
      delegationsState.incoming = delegations;

      setText('kpi-incoming', delegations.length);
      renderDelegationInsights();
      
      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 => {
        const safeName = escapeHtml(d.delegator_username || d.delegate_username || 'Unknown');
        const scopeLabel = escapeHtml(getScopeLabel(d.scope));
        const weightPct = Math.round((Number(d.weight) || 1) * 100);
        const createdAt = d.created_at ? new Date(d.created_at).toLocaleDateString() : '';

        return `
          <div class="delegation-card">
            <header>
              <span class="delegate-name">← ${safeName}</span>
              <span class="scope-badge">${scopeLabel}</span>
            </header>
            <div class="meta">
              Weight: ${weightPct}%<br/>
              ${createdAt ? `Since: ${escapeHtml(createdAt)}` : ''}
            </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();
      delegationsState.delegates = delegates;

      setText('kpi-delegates', delegates.length);
      renderDelegationInsights();
      
      if (delegates.length === 0) {
        container.innerHTML = '<div class="empty-state">No delegates available yet.</div>';
        return;
      }

      container.innerHTML = delegates.map(d => {
        const safeName = escapeHtml(d.display_name || d.username || 'Unknown');
        const safeBio = escapeHtml(d.bio || 'No bio provided');
        const delegators = Number(d.total_delegators) || 0;
        const votes = Number(d.total_votes_cast) || 0;

        return `
          <div class="delegate-card">
            <div class="delegate-info">
              <h3>${safeName}</h3>
              <p class="bio">${safeBio}</p>
            </div>
            <div class="delegate-stats">
              <span>${delegators} delegators</span>
              <span>${votes} 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 => {
          const value = escapeHtml(d.user_id);
          const label = escapeHtml(d.display_name || d.username || 'Unknown');
          return `<option value="${value}">${label}</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 => {
          const value = escapeHtml(c.id);
          const label = escapeHtml(c.name);
          return `<option value="${value}">${label}</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>