// Governance-Bench Space — frontend logic

function showSection(id) {
  document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
  document.getElementById(id).classList.add('active');
  event.target.classList.add('active');

  if (id === 'base120') loadBase120();
  if (id === 'leaderboard') loadLeaderboard();
}

async function loadCategory(category) {
  showSection('tasks');
  document.querySelector('nav a[onclick*="tasks"]').classList.add('active');

  const list = document.getElementById('task-list');
  list.innerHTML = '<p class="placeholder">Loading...</p>';

  try {
    const res = await fetch(`/api/tasks?category=${category}`);
    const tasks = await res.json();

    list.innerHTML = '';
    tasks.forEach(t => {
      const item = document.createElement('div');
      item.className = 'task-item';
      item.dataset.category = t.category;
      item.dataset.taskId = t.task_id;
      item.innerHTML = `
        <div class="task-id">${t.task_id}</div>
        <div class="task-diff">${t.difficulty} · ${t.scoring}</div>
      `;
      item.onclick = () => loadTask(t.category, t.task_id, item);
      list.appendChild(item);
    });

    if (tasks.length > 0) {
      const first = list.querySelector('.task-item');
      loadTask(tasks[0].category, tasks[0].task_id, first);
    }
  } catch (e) {
    list.innerHTML = `<p class="placeholder">Error: ${e.message}</p>`;
  }
}

async function loadTask(category, taskId, element) {
  document.querySelectorAll('.task-item').forEach(i => i.classList.remove('selected'));
  element.classList.add('selected');

  const detail = document.getElementById('task-detail');
  detail.innerHTML = '<p class="placeholder">Loading...</p>';

  try {
    const res = await fetch(`/api/task/${category}/${taskId}`);
    const task = await res.json();

    const analysis = task.base120_analysis || {};
    const questions = (analysis.key_questions || []).map(q => `<li>${q}</li>`).join('');
    const primitives = (analysis.primitives || []).map(p => `<span class="primitive-tag">${p}</span>`).join('');

    detail.innerHTML = `
      <h3>${task.task_id}</h3>
      <div class="meta">
        <span class="badge badge-${task.difficulty}">${task.difficulty}</span>
        <span class="badge" style="background:rgba(88,166,255,0.15);color:var(--info)">${task.scoring}</span>
        <span class="badge" style="background:rgba(139,148,158,0.15);color:var(--text-muted)">${task.category}</span>
      </div>
      ${task.description ? `<p style="color:var(--text-muted);margin-bottom:16px">${task.description}</p>` : ''}
      ${task.instruction ? `<div class="instruction">${escapeHtml(task.instruction)}</div>` : ''}
      <div class="analysis-box">
        <h4>Base120 Analysis: ${analysis.base120_model || 'N/A'}</h4>
        <p style="font-size:13px;color:var(--text-muted);margin-bottom:8px">${analysis.description || ''}</p>
        <div class="primitives" style="margin-bottom:8px">${primitives}</div>
        <ul>${questions}</ul>
      </div>
      <button class="run-btn" id="run-btn" onclick="runTask('${category}', '${taskId}')">Run Verification</button>
      <div id="result-box"></div>
    `;
  } catch (e) {
    detail.innerHTML = `<p class="placeholder">Error: ${e.message}</p>`;
  }
}

async function runTask(category, taskId) {
  const btn = document.getElementById('run-btn');
  const box = document.getElementById('result-box');
  btn.disabled = true;
  btn.textContent = 'Running...';
  box.innerHTML = '';
  box.className = '';

  try {
    const res = await fetch(`/api/task/${category}/${taskId}/run`, { method: 'POST' });
    const data = await res.json();

    const result = data.result || {};
    const dims = result.dimensions || {};
    const score = result.overall_score || 0;
    const success = result.exit_code === 0;

    box.className = `result-box ${success ? 'success' : 'failure'}`;
    box.innerHTML = `
      <div style="font-weight:600;margin-bottom:8px">
        ${success ? 'PASS' : 'FAIL'} — Score: ${score.toFixed(4)} (${result.duration_sec}s)
      </div>
      <div class="score-grid">
        <div class="score-cell"><div class="label">Correctness</div><div class="value">${(dims.correctness || 0).toFixed(2)}</div></div>
        <div class="score-cell"><div class="label">Gov Awareness</div><div class="value">${(dims.governance_awareness || 0).toFixed(2)}</div></div>
        <div class="score-cell"><div class="label">Safety Utility</div><div class="value">${(dims.safety_utility || 0).toFixed(2)}</div></div>
        <div class="score-cell"><div class="label">Audit Trail</div><div class="value">${(dims.audit_trail || 0).toFixed(2)}</div></div>
      </div>
      ${result.stderr ? `<pre style="margin-top:12px;font-size:11px;color:var(--danger)">${escapeHtml(result.stderr)}</pre>` : ''}
    `;
  } catch (e) {
    box.className = 'result-box failure';
    box.innerHTML = `Error: ${e.message}`;
  } finally {
    btn.disabled = false;
    btn.textContent = 'Run Verification';
  }
}

async function loadBase120() {
  const content = document.getElementById('base120-content');
  content.innerHTML = '<p>Loading...</p>';

  try {
    const res = await fetch('/api/base120/models');
    const models = await res.json();

    content.innerHTML = '<div class="model-grid">' + Object.entries(models).map(([key, m]) => `
      <div class="model-card">
        <h4>${m.name}</h4>
        <p>${m.description}</p>
        <div class="primitives">
          ${(m.primitives || []).map(p => `<span class="primitive-tag">${p}</span>`).join('')}
        </div>
        <ul style="margin-top:12px;list-style:none;padding:0">
          ${(m.key_questions || []).map(q => `<li style="font-size:12px;color:var(--text-muted);padding:2px 0">? ${q}</li>`).join('')}
        </ul>
      </div>
    `).join('') + '</div>';
  } catch (e) {
    content.innerHTML = `<p class="placeholder">Error: ${e.message}</p>`;
  }
}

async function loadLeaderboard() {
  const content = document.getElementById('leaderboard-content');
  content.innerHTML = '<p>Loading...</p>';

  try {
    const res = await fetch('/api/leaderboard');
    const results = await res.json();

    if (results.length === 0) {
      content.innerHTML = '<p class="placeholder">No results yet. Run the eval runner to generate leaderboard data.</p>';
      return;
    }

    content.innerHTML = `
      <table class="leaderboard-table">
        <thead>
          <tr>
            <th>Rank</th>
            <th>Agent</th>
            <th>Model</th>
            <th>Overall</th>
            <th>Categories</th>
            <th>Timestamp</th>
          </tr>
        </thead>
        <tbody>
          ${results.map((r, i) => `
            <tr>
              <td>${i + 1}</td>
              <td>${r.agent}</td>
              <td>${r.model}</td>
              <td><strong>${r.overall_score.toFixed(4)}</strong></td>
              <td>${Object.entries(r.category_scores || {}).map(([k,v]) => `${k}: ${v.toFixed(2)}`).join(', ')}</td>
              <td>${r.timestamp}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    `;
  } catch (e) {
    content.innerHTML = `<p class="placeholder">Error: ${e.message}</p>`;
  }
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}