registerPage('tests', async (content, params = {}) => {
  document.getElementById('topbar-title').textContent = 'Tests';

  async function render(search = '') {
    const r = await api('tests.php', { action: 'list', search });
    if (!r.success) { document.getElementById('tests-table').innerHTML = emptyHTML(); return; }
    const rows = r.tests;
    document.getElementById('tests-table').innerHTML = rows.length === 0 ? emptyHTML('No tests found') : `
      <div class="table-wrap"><table>
        <thead><tr><th>Name</th><th>Description</th><th>NQF</th><th>Credits</th><th>Pass%</th><th>Expiry</th><th>Actions</th></tr></thead>
        <tbody>${rows.map(t => `<tr>
          <td class="fw-500">${t.test_name}</td>
          <td class="text-muted text-sm">${t.test_description || '—'}</td>
          <td class="mono">${t.nqf_level}</td>
          <td class="mono">${t.credits}</td>
          <td class="mono">${(+t.passmark * 100).toFixed(0)}%</td>
          <td class="mono">${t.expiry} mo</td>
          <td class="actions-td">
            <button class="btn btn-sm btn-secondary" onclick="testBuilder(${t.record_id})">Build ✎</button>
            <button class="btn btn-sm btn-secondary" onclick="testEdit(${t.record_id})">Edit</button>
            <button class="btn btn-sm btn-danger" onclick="testDelete(${t.record_id})">Delete</button>
          </td></tr>`).join('')}
        </tbody>
      </table></div>`;
  }

  content.innerHTML = `
    <div class="search-wrap">
      <div class="search-input-wrap">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35" stroke-linecap="round"/></svg>
        <input type="text" id="test-search" placeholder="Search tests…">
      </div>
      <button class="btn btn-primary" onclick="testAdd()">+ New Test</button>
    </div>
    <div class="card"><div id="tests-table">${loadingHTML()}</div></div>

    <!-- Info Modal -->
    <div class="modal-bg" id="test-modal">
      <div class="modal">
        <div class="modal-header">
          <h3 id="test-modal-title">New Test</h3>
          <button class="modal-close" onclick="closeModal('test-modal')">×</button>
        </div>
        <div class="modal-body">
          <div class="form-grid">
            <input type="hidden" id="tf-id">
            <div class="form-group span-2"><label>Test Name *</label><input type="text" id="tf-name"></div>
            <div class="form-group span-2"><label>Description</label><textarea id="tf-desc" style="min-height:60px"></textarea></div>
            <div class="form-group"><label>NQF Level</label><input type="number" id="tf-nqf" value="1" min="0"></div>
            <div class="form-group"><label>Credits</label><input type="number" id="tf-credits" value="1" min="0"></div>
            <div class="form-group"><label>Pass Mark (0–1)</label><input type="number" id="tf-passmark" value="0.8" step="0.01" min="0" max="1"></div>
            <div class="form-group"><label>Expiry (months)</label><input type="number" id="tf-expiry" value="36" min="1"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="closeModal('test-modal')">Cancel</button>
          <button class="btn btn-primary" onclick="testSave()">Save</button>
        </div>
      </div>
    </div>

    <!-- Builder Modal -->
    <div class="modal-bg" id="test-builder-modal">
      <div class="modal modal-lg">
        <div class="modal-header">
          <h3 id="test-builder-title">Build Test</h3>
          <button class="modal-close" onclick="closeModal('test-builder-modal')">×</button>
        </div>
        <div class="modal-body" id="test-builder-body"></div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="closeModal('test-builder-modal')">Done</button>
        </div>
      </div>
    </div>`;

  document.getElementById('test-search').addEventListener('input', e => render(e.target.value));
  render();

  function fillTestForm(t = null) {
    document.getElementById('test-modal-title').textContent = t ? 'Edit Test' : 'New Test';
    document.getElementById('tf-id').value       = t?.record_id      || '';
    document.getElementById('tf-name').value     = t?.test_name      || '';
    document.getElementById('tf-desc').value     = t?.test_description || '';
    document.getElementById('tf-nqf').value      = t?.nqf_level      || 1;
    document.getElementById('tf-credits').value  = t?.credits        || 1;
    document.getElementById('tf-passmark').value = t?.passmark       || '0.8';
    document.getElementById('tf-expiry').value   = t?.expiry         || 36;
  }

  window.testAdd  = () => { fillTestForm(); openModal('test-modal'); };
  window.testEdit = async (id) => {
    const r = await api('tests.php', { action: 'get', id });
    if (!r.success) { toast('Failed', 'error'); return; }
    fillTestForm(r.test);
    openModal('test-modal');
  };
  window.testSave = async () => {
    const id = document.getElementById('tf-id').value;
    const r  = await api('tests.php', {
      action: id ? 'update' : 'create', id,
      test_name:        document.getElementById('tf-name').value,
      test_description: document.getElementById('tf-desc').value,
      nqf_level:        document.getElementById('tf-nqf').value,
      credits:          document.getElementById('tf-credits').value,
      passmark:         document.getElementById('tf-passmark').value,
      expiry:           document.getElementById('tf-expiry').value,
    }, 'POST');
    if (r.success) { toast(r.message, 'success'); closeModal('test-modal'); render(); }
    else toast(r.error, 'error');
  };
  window.testDelete = async (id) => {
    if (!confirm('Delete this test?')) return;
    const r = await api('tests.php', { action: 'delete', id }, 'POST');
    if (r.success) { toast('Deleted', 'success'); render(); }
    else toast(r.error, 'error');
  };

  // ── Builder ────────────────────────────────────────────────────────────────
  window.testBuilder = async (id) => {
    await renderTestBuilder(id);
    openModal('test-builder-modal');
  };

  async function renderTestBuilder(testId) {
    const body = document.getElementById('test-builder-body');
    body.innerHTML = loadingHTML();
    const r = await api('tests.php', { action: 'get', id: testId });
    if (!r.success) { body.innerHTML = emptyHTML(); return; }
    const t = r.test;
    document.getElementById('test-builder-title').textContent = `Build: ${t.test_name}`;

    const questionsHtml = (t.questions || []).map(q => `
      <div class="accordion-item open" id="tq-${q.record_id}">
        <div class="accordion-header" onclick="this.parentElement.classList.toggle('open')">
          <span style="flex:1;font-weight:400;font-size:13px">${q.section_name}</span>
          <button class="btn btn-sm btn-secondary" onclick="event.stopPropagation();editTestQuestion(${q.record_id},'${q.section_name.replace(/'/g,"\\'")}',${testId})">Rename</button>
          <button class="btn btn-sm btn-danger" onclick="event.stopPropagation();deleteTestQuestion(${q.record_id},${testId})">✕</button>
          <svg class="accordion-arrow" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </div>
        <div class="accordion-body">
          <p class="text-muted text-sm" style="margin-bottom:8px;font-weight:500">Options (tick = correct answer)</p>
          <div class="question-list" id="alist-${q.record_id}">
            ${(q.answers || []).map(a => `
              <div class="answer-row ${+a.option === 1 ? 'correct' : ''}" id="ans-${a.record_id}">
                <span style="flex:1;font-size:13px">${a.answer}</span>
                ${+a.option === 1 ? '<span class="correct-badge">CORRECT</span>' : ''}
                <button class="btn btn-sm btn-secondary btn-icon" onclick="editAnswer(${a.record_id},${q.record_id},${testId})">✎</button>
                <button class="btn btn-sm btn-danger btn-icon" onclick="deleteAnswer(${a.record_id},${testId})">✕</button>
              </div>`).join('') || '<p class="text-muted text-sm">No options yet.</p>'}
          </div>
          <div style="display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:10px;align-items:center">
            <input type="text" id="new-ans-${q.record_id}" placeholder="New option text…">
            <label style="display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap;text-transform:none;letter-spacing:0">
              <input type="checkbox" id="new-ans-correct-${q.record_id}"> Correct
            </label>
            <button class="btn btn-sm btn-primary" onclick="addAnswer(${q.record_id},${testId})">Add</button>
          </div>
        </div>
      </div>`).join('');

    body.innerHTML = `
      <div id="test-questions-list">${questionsHtml || '<p class="text-muted text-sm" style="margin-bottom:12px">No questions yet.</p>'}</div>
      <div class="divider"></div>
      <div style="display:flex;gap:8px;align-items:center">
        <input type="text" id="new-tq-name" placeholder="New question / section name…" style="flex:1">
        <button class="btn btn-primary" onclick="addTestQuestion(${testId})">+ Add Question</button>
      </div>`;
  }

  window.addTestQuestion = async (testId) => {
    const name = document.getElementById('new-tq-name').value.trim();
    if (!name) { toast('Enter question text', 'error'); return; }
    const r = await api('tests.php', { action: 'add_question', test_id: testId, section_name: name }, 'POST');
    if (r.success) { toast('Question added', 'success'); await renderTestBuilder(testId); }
    else toast(r.error, 'error');
  };

  window.editTestQuestion = async (qId, current, testId) => {
    const name = prompt('Edit question:', current);
    if (!name || name === current) return;
    const r = await api('tests.php', { action: 'update_question', question_id: qId, section_name: name }, 'POST');
    if (r.success) { toast('Updated', 'success'); await renderTestBuilder(testId); }
    else toast(r.error, 'error');
  };

  window.deleteTestQuestion = async (qId, testId) => {
    if (!confirm('Delete question and all its options?')) return;
    const r = await api('tests.php', { action: 'delete_question', question_id: qId }, 'POST');
    if (r.success) { toast('Deleted', 'success'); await renderTestBuilder(testId); }
    else toast(r.error, 'error');
  };

  window.addAnswer = async (qId, testId) => {
    const text    = document.getElementById(`new-ans-${qId}`).value.trim();
    const correct = document.getElementById(`new-ans-correct-${qId}`).checked ? 1 : 0;
    if (!text) { toast('Enter option text', 'error'); return; }
    const r = await api('tests.php', { action: 'add_answer', test_question_id: qId, answer: text, option: correct, comment: '' }, 'POST');
    if (r.success) { toast('Option added', 'success'); await renderTestBuilder(testId); }
    else toast(r.error, 'error');
  };

  window.editAnswer = async (aId, qId, testId) => {
    const text    = prompt('Edit option text:');
    if (!text) return;
    const correct = confirm('Is this the correct answer?') ? 1 : 0;
    const r = await api('tests.php', { action: 'update_answer', answer_id: aId, answer: text, option: correct, comment: '' }, 'POST');
    if (r.success) { toast('Option updated', 'success'); await renderTestBuilder(testId); }
    else toast(r.error, 'error');
  };

  window.deleteAnswer = async (aId, testId) => {
    if (!confirm('Delete option?')) return;
    const r = await api('tests.php', { action: 'delete_answer', answer_id: aId }, 'POST');
    if (r.success) { toast('Option deleted', 'success'); await renderTestBuilder(testId); }
    else toast(r.error, 'error');
  };
});