registerPage('courses', async (content, params = {}) => {
  document.getElementById('topbar-title').textContent = 'Courses & Certificates';

  let activeTab = 'courses';

  function tabHtml() {
    return `<div style="display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px">
      ${['courses','certificates'].map(t => `
        <button onclick="switchTab('${t}')" id="tab-${t}" style="padding:10px 20px;border:none;background:none;cursor:pointer;font-size:13px;font-weight:500;border-bottom:2px solid ${t===activeTab?'var(--orange)':'transparent'};color:${t===activeTab?'var(--orange)':'var(--muted)'}">
          ${t.charAt(0).toUpperCase()+t.slice(1)}
        </button>`).join('')}
    </div>`;
  }

  async function renderCourses(search = '') {
    const r = await api('courses.php', { action: 'list', search });
    if (!r.success) { document.getElementById('tab-content').innerHTML = emptyHTML(); return; }
    const rows = r.courses;
    document.getElementById('tab-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="course-search" placeholder="Search courses…" value="${search}">
        </div>
        <button class="btn btn-primary" onclick="courseAdd()">+ New Course</button>
      </div>
      ${rows.length === 0 ? emptyHTML('No courses found') : `
      <div class="table-wrap"><table>
        <thead><tr><th>Name</th><th>Unit Std</th><th>Valid For</th><th>Cert Prefix</th><th>Actions</th></tr></thead>
        <tbody>${rows.map(c => `<tr>
          <td class="fw-500">${c.courses_name}</td>
          <td class="mono">${c.unit_standard_number || '—'}</td>
          <td>${c.valid_for || '—'}</td>
          <td class="mono">${c.certificate_no_prefix || '—'}</td>
          <td class="actions-td">
            <button class="btn btn-sm btn-secondary" onclick="courseEdit(${c.record_id})">Edit</button>
            <button class="btn btn-sm btn-danger" onclick="courseDelete(${c.record_id})">Delete</button>
          </td></tr>`).join('')}
        </tbody>
      </table></div>`}`;

    document.getElementById('course-search')?.addEventListener('input', e => renderCourses(e.target.value));
  }

  async function renderCertificates() {
    const r = await api('courses.php', { action: 'list_certificates' });
    if (!r.success) { document.getElementById('tab-content').innerHTML = emptyHTML(); return; }
    const rows = r.certificates;
    document.getElementById('tab-content').innerHTML = rows.length === 0 ? emptyHTML('No certificates found') : `
      <div class="table-wrap"><table>
        <thead><tr><th>Cert #</th><th>Prefix</th><th>Employee</th><th>Course</th><th>Issued</th><th>Expiry</th></tr></thead>
        <tbody>${rows.map(c => `<tr>
          <td class="mono">${c.prefix}-${c.certificate_number}</td>
          <td class="mono">${c.prefix}</td>
          <td>${c.client_employees_name || ''} ${c.surname || ''}</td>
          <td>${c.courses_name || '—'}</td>
          <td>${c.date_time_of_certification || '—'}</td>
          <td>${c.expiry_date || '—'}</td>
        </tr>`).join('')}
        </tbody>
      </table></div>`;
  }

  function buildPage() {
    content.innerHTML = `
      <div class="card card-body">
        ${tabHtml()}
        <div id="tab-content">${loadingHTML()}</div>
      </div>

      <!-- Course Modal -->
      <div class="modal-bg" id="course-modal">
        <div class="modal modal-lg">
          <div class="modal-header">
            <h3 id="course-modal-title">New Course</h3>
            <button class="modal-close" onclick="closeModal('course-modal')">×</button>
          </div>
          <div class="modal-body">
            <input type="hidden" id="cof-id">
            <div class="form-grid cols-3">
              <div class="form-group span-2"><label>Course Name *</label><input type="text" id="cof-name"></div>
              <div class="form-group"><label>Valid For</label><input type="text" id="cof-valid" placeholder="e.g. 36 months"></div>
              <div class="form-group"><label>Unit Standard Number</label><input type="text" id="cof-unit"></div>
              <div class="form-group"><label>Cert No Prefix</label><input type="text" id="cof-prefix"></div>
              <div class="form-group"><label>Capacity</label><input type="text" id="cof-capacity"></div>
              <div class="form-group"><label>Code</label><input type="text" id="cof-code"></div>
              <div class="form-group"><label>Produce Cards?</label>
                <select id="cof-cards"><option value="0">No</option><option value="1">Yes</option></select>
              </div>
              <div class="form-group"><label>Is Code/Capacity Type?</label>
                <select id="cof-iscc"><option value="0">No</option><option value="1">Yes</option></select>
              </div>
              <div class="form-group span-2"><label>Expiry / Refresher Heading</label><input type="text" id="cof-expiry-heading"></div>
              <div class="form-group span-2"><label>Restrictions</label><textarea id="cof-restrictions" style="min-height:50px"></textarea></div>
              <div class="form-group"><label>Assessor Name</label><input type="text" id="cof-assessor-name"></div>
              <div class="form-group"><label>Assessor Reg No</label><input type="text" id="cof-assessor-reg"></div>
              <div class="form-group span-2"><label>Facilitator / HOD Names</label><input type="text" id="cof-facilitator"></div>
              <div class="form-group span-2"><label>DOL CI / ISO Numbers</label><input type="text" id="cof-client-info"></div>
              <div class="form-group span-2"><label>Company Template Name</label><input type="text" id="cof-template"></div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('course-modal')">Cancel</button>
            <button class="btn btn-primary" onclick="courseSave()">Save Course</button>
          </div>
        </div>
      </div>`;

    if (activeTab === 'courses') renderCourses();
    else renderCertificates();
  }

  buildPage();

  window.switchTab = (tab) => {
    activeTab = tab;
    buildPage();
  };

  window.courseAdd = () => {
    document.getElementById('course-modal-title').textContent = 'New Course';
    document.getElementById('cof-id').value = '';
    ['cof-name','cof-valid','cof-unit','cof-prefix','cof-capacity','cof-code','cof-expiry-heading','cof-restrictions','cof-assessor-name','cof-assessor-reg','cof-facilitator','cof-client-info','cof-template'].forEach(id => { const el = document.getElementById(id); if (el) el.value = ''; });
    openModal('course-modal');
  };

  window.courseEdit = async (id) => {
    const r = await api('courses.php', { action: 'get', id });
    if (!r.success) { toast('Failed', 'error'); return; }
    const c = r.course;
    document.getElementById('course-modal-title').textContent = 'Edit Course';
    document.getElementById('cof-id').value              = c.record_id;
    document.getElementById('cof-name').value            = c.courses_name || '';
    document.getElementById('cof-valid').value           = c.valid_for || '';
    document.getElementById('cof-unit').value            = c.unit_standard_number || '';
    document.getElementById('cof-prefix').value          = c.certificate_no_prefix || '';
    document.getElementById('cof-capacity').value        = c.capacity || '';
    document.getElementById('cof-code').value            = c.code || '';
    document.getElementById('cof-cards').value           = c.produce_cards || '0';
    document.getElementById('cof-iscc').value            = c.is_a_code_capacity_type_course || '0';
    document.getElementById('cof-expiry-heading').value  = c.expiry_refresher_heading || '';
    document.getElementById('cof-restrictions').value    = c.restricitions || '';
    document.getElementById('cof-assessor-name').value   = c.assesor_name || '';
    document.getElementById('cof-assessor-reg').value    = c.assesor_reg_no || '';
    document.getElementById('cof-facilitator').value     = c.facilitator_hod_names || '';
    document.getElementById('cof-client-info').value     = c.client_other_info || '';
    document.getElementById('cof-template').value        = c.company_specific_template_name || '';
    openModal('course-modal');
  };

  window.courseSave = async () => {
    const id = document.getElementById('cof-id').value;
    const params = {
      action: id ? 'update' : 'create', id,
      courses_name:                   document.getElementById('cof-name').value,
      valid_for:                      document.getElementById('cof-valid').value,
      unit_standard_number:           document.getElementById('cof-unit').value,
      certificate_no_prefix:          document.getElementById('cof-prefix').value,
      capacity:                       document.getElementById('cof-capacity').value,
      code:                           document.getElementById('cof-code').value,
      produce_cards:                  document.getElementById('cof-cards').value,
      is_a_code_capacity_type_course: document.getElementById('cof-iscc').value,
      expiry_refresher_heading:       document.getElementById('cof-expiry-heading').value,
      restricitions:                  document.getElementById('cof-restrictions').value,
      assesor_name:                   document.getElementById('cof-assessor-name').value,
      assesor_reg_no:                 document.getElementById('cof-assessor-reg').value,
      facilitator_hod_names:          document.getElementById('cof-facilitator').value,
      client_other_info:              document.getElementById('cof-client-info').value,
      company_specific_template_name: document.getElementById('cof-template').value,
      attachement: '', moderator_number: '',
    };
    const r = await api('courses.php', params, 'POST');
    if (r.success) { toast(r.message, 'success'); closeModal('course-modal'); renderCourses(); }
    else toast(r.error, 'error');
  };

  window.courseDelete = async (id) => {
    if (!confirm('Delete this course?')) return;
    const r = await api('courses.php', { action: 'delete', id }, 'POST');
    if (r.success) { toast('Deleted', 'success'); renderCourses(); }
    else toast(r.error, 'error');
  };
});