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

  async function render(search = '') {
    const r = await api('assessments.php', { action: 'list', search });
    if (!r.success) { document.getElementById('ass-table').innerHTML = emptyHTML(); return; }
    const rows = r.assessments;
    document.getElementById('ass-table').innerHTML = rows.length === 0 ? emptyHTML('No assessments found') : `
      <div class="table-wrap"><table>
        <thead><tr><th>Name</th><th>Info</th><th>NQF</th><th>Credits</th><th>Pass%</th><th>Expiry (mo)</th><th>Actions</th></tr></thead>
        <tbody>${rows.map(a => `<tr>
          <td class="fw-500">${a.assessments_name}</td>
          <td class="text-muted text-sm">${a.assessment_info || '—'}</td>
          <td class="mono">${a.nqf_level}</td>
          <td class="mono">${a.credits}</td>
          <td class="mono">${(+a.passmark * 100).toFixed(0)}%</td>
          <td class="mono">${a.expiry}</td>
          <td class="actions-td">
            <button class="btn btn-sm btn-secondary" onclick="assBuilder(${a.record_id})">Build ✎</button>
            <button class="btn btn-sm btn-secondary" onclick="assEdit(${a.record_id})">Edit</button>
            <button class="btn btn-sm btn-danger" onclick="assDelete(${a.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="ass-search" placeholder="Search assessments…">
      </div>
      <button class="btn btn-primary" onclick="assAdd()">+ New Assessment</button>
    </div>
    <div class="card"><div id="ass-table">${loadingHTML()}</div></div>

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

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

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

  window.assAdd = () => {
    document.getElementById('ass-modal-title').textContent = 'New Assessment';
    document.getElementById('af-id').value = '';
    document.getElementById('af-name').value = '';
    document.getElementById('af-info').value = '';
    document.getElementById('af-nqf').value = '1';
    document.getElementById('af-credits').value = '1';
    document.getElementById('af-passmark').value = '0.8';
    document.getElementById('af-expiry').value = '36';
    openModal('ass-modal');
  };

  window.assEdit = async (id) => {
    const r = await api('assessments.php', { action: 'get', id });
    if (!r.success) { toast('Failed', 'error'); return; }
    const a = r.assessment;
    document.getElementById('ass-modal-title').textContent = 'Edit Assessment';
    document.getElementById('af-id').value       = a.record_id;
    document.getElementById('af-name').value     = a.assessments_name;
    document.getElementById('af-info').value     = a.assessment_info || '';
    document.getElementById('af-nqf').value      = a.nqf_level;
    document.getElementById('af-credits').value  = a.credits;
    document.getElementById('af-passmark').value = a.passmark;
    document.getElementById('af-expiry').value   = a.expiry;
    openModal('ass-modal');
  };

  window.assSave = async () => {
    const id = document.getElementById('af-id').value;
    const r  = await api('assessments.php', {
      action: id ? 'update' : 'create', id,
      assessments_name: document.getElementById('af-name').value,
      assessment_info:  document.getElementById('af-info').value,
      nqf_level:        document.getElementById('af-nqf').value,
      credits:          document.getElementById('af-credits').value,
      passmark:         document.getElementById('af-passmark').value,
      expiry:           document.getElementById('af-expiry').value,
    }, 'POST');
    if (r.success) { toast(r.message, 'success'); closeModal('ass-modal'); render(); }
    else toast(r.error, 'error');
  };

  window.assDelete = async (id) => {
    if (!confirm('Delete this assessment and all its sections/questions?')) return;
    const r = await api('assessments.php', { action: 'delete', id }, 'POST');
    if (r.success) { toast('Deleted', 'success'); render(); }
    else toast(r.error, 'error');
  };

  // ── Builder ────────────────────────────────────────────────────────────────
  window.assBuilder = async (id) => {
    await renderBuilder(id);
    openModal('ass-builder-modal');
  };

  async function renderBuilder(assessmentId) {
    const body = document.getElementById('builder-body');
    body.innerHTML = loadingHTML();
    const r = await api('assessments.php', { action: 'get', id: assessmentId });
    if (!r.success) { body.innerHTML = emptyHTML(); return; }
    const a = r.assessment;
    document.getElementById('builder-title').textContent = `Build: ${a.assessments_name}`;

    const sectionsHtml = (a.sections || []).map(sec => `
      <div class="accordion-item open" id="sec-${sec.record_id}">
        <div class="accordion-header" onclick="this.parentElement.classList.toggle('open')">
          <span style="flex:1">${sec.section_name}</span>
          <button class="btn btn-sm btn-secondary" onclick="event.stopPropagation();editSection(${sec.record_id},'${sec.section_name.replace(/'/g,"\\'")}')">Rename</button>
          <button class="btn btn-sm btn-danger" onclick="event.stopPropagation();deleteSection(${sec.record_id},${assessmentId})">✕</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">
          <div class="question-list" id="qlist-${sec.record_id}">
            ${(sec.questions || []).map(q => `
              <div class="question-row" id="q-${q.record_id}">
                <span class="q-text">${q.question}</span>
                <button class="btn btn-icon btn-secondary btn-sm" title="Edit" onclick="editQuestion(${q.record_id},'${q.question.replace(/'/g,"\\'")}',${assessmentId})">✎</button>
                <button class="btn btn-icon btn-danger btn-sm" title="Delete" onclick="deleteQuestion(${q.record_id},${assessmentId})">✕</button>
              </div>`).join('') || '<p class="text-muted text-sm">No questions yet.</p>'}
          </div>
          <div style="display:flex;gap:8px;margin-top:10px">
            <input type="text" id="new-q-${sec.record_id}" placeholder="New question…" style="flex:1">
            <button class="btn btn-sm btn-primary" onclick="addQuestion(${sec.record_id},${assessmentId})">Add</button>
          </div>
        </div>
      </div>`).join('');

    body.innerHTML = `
      <div id="sections-list">${sectionsHtml || '<p class="text-muted text-sm" style="margin-bottom:12px">No sections yet. Add one below.</p>'}</div>
      <div class="divider"></div>
      <div style="display:flex;gap:8px;align-items:center">
        <input type="text" id="new-section-name" placeholder="New section name…" style="flex:1">
        <button class="btn btn-primary" onclick="addSection(${assessmentId})">+ Add Section</button>
      </div>`;
  }

  window.addSection = async (assId) => {
    const name = document.getElementById('new-section-name').value.trim();
    if (!name) { toast('Enter a section name', 'error'); return; }
    const r = await api('assessments.php', { action: 'add_section', assessment_id: assId, section_name: name }, 'POST');
    if (r.success) { toast('Section added', 'success'); await renderBuilder(assId); }
    else toast(r.error, 'error');
  };

  window.editSection = async (secId, current) => {
    const name = prompt('Rename section:', current);
    if (!name || name === current) return;
    const r = await api('assessments.php', { action: 'update_section', section_id: secId, section_name: name }, 'POST');
    if (r.success) { toast('Section renamed', 'success'); const assId = /* reload */ document.getElementById('builder-title').dataset.id; await renderBuilder(assId); }
    else toast(r.error, 'error');
  };

  window.deleteSection = async (secId, assId) => {
    if (!confirm('Delete section and all its questions?')) return;
    const r = await api('assessments.php', { action: 'delete_section', section_id: secId }, 'POST');
    if (r.success) { toast('Section deleted', 'success'); await renderBuilder(assId); }
    else toast(r.error, 'error');
  };

  window.addQuestion = async (secId, assId) => {
    const q = document.getElementById(`new-q-${secId}`).value.trim();
    if (!q) { toast('Enter a question', 'error'); return; }
    const r = await api('assessments.php', { action: 'add_question', assessment_section_id: secId, question: q }, 'POST');
    if (r.success) { toast('Question added', 'success'); await renderBuilder(assId); }
    else toast(r.error, 'error');
  };

  window.editQuestion = async (qId, current, assId) => {
    const q = prompt('Edit question:', current);
    if (!q || q === current) return;
    const r = await api('assessments.php', { action: 'update_question', question_id: qId, question: q }, 'POST');
    if (r.success) { toast('Question updated', 'success'); await renderBuilder(assId); }
    else toast(r.error, 'error');
  };

  window.deleteQuestion = async (qId, assId) => {
    if (!confirm('Delete question?')) return;
    const r = await api('assessments.php', { action: 'delete_question', question_id: qId }, 'POST');
    if (r.success) { toast('Question deleted', 'success'); await renderBuilder(assId); }
    else toast(r.error, 'error');
  };
});