registerPage('clients', async (content, params = {}) => {
  document.getElementById('topbar-title').textContent = 'Clients';
  let provinces = [];

  async function loadProvinces() {
    if (provinces.length) return;
    const r = await api('clients.php', { action: 'provinces' });
    if (r.success) provinces = r.provinces;
  }

  async function render(search = '') {
    const r = await api('clients.php', { action: 'list', search });
    if (!r.success) { content.innerHTML = emptyHTML('Failed to load clients'); return; }
    const rows = r.clients;

    const tableHtml = rows.length === 0 ? emptyHTML('No clients found') : `
      <div class="table-wrap"><table>
        <thead><tr><th>Code</th><th>Name</th><th>Province</th><th>Email</th><th>Phone</th><th>Actions</th></tr></thead>
        <tbody>${rows.map(c => `
          <tr>
            <td class="mono">${c.client_code || '—'}</td>
            <td class="fw-500">${c.clients_name}</td>
            <td>${c.provinces_name || '—'}</td>
            <td>${c.email || '—'}</td>
            <td>${c.phone || '—'}</td>
            <td class="actions-td">
              <button class="btn btn-sm btn-secondary" onclick="clientEdit(${c.record_id})">Edit</button>
              <button class="btn btn-sm btn-danger" onclick="clientDelete(${c.record_id},'${c.clients_name.replace(/'/g, "\\'")}')">Delete</button>
            </td>
          </tr>`).join('')}
        </tbody>
      </table></div>`;

    document.getElementById('clients-table').innerHTML = tableHtml;
  }

  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="client-search" placeholder="Search clients…">
      </div>
      <button class="btn btn-secondary" onclick="doExportCSV()">⬇ Excel</button>
      <button class="btn btn-secondary" onclick="doExportPDF()">⬇ PDF</button>
      <button class="btn btn-primary" onclick="clientAdd()">+ Add Client</button>
    </div>
    <div class="card"><div id="clients-table">${loadingHTML()}</div></div>

    <!-- Modal -->
    <div class="modal-bg" id="client-modal">
      <div class="modal">
        <div class="modal-header">
          <h3 id="client-modal-title">Add Client</h3>
          <button class="modal-close" onclick="closeModal('client-modal')">×</button>
        </div>
        <div class="modal-body">
          <form id="client-form" class="form-grid">
            <input type="hidden" id="cf-id">
            <div class="form-group"><label>Client Name *</label><input type="text" id="cf-name" required></div>
            <div class="form-group"><label>Client Code</label><input type="text" id="cf-code"></div>
            <div class="form-group"><label>Province</label><select id="cf-province"><option value="0">— Select —</option></select></div>
            <div class="form-group"><label>Email</label><input type="email" id="cf-email"></div>
            <div class="form-group"><label>Phone</label><input type="text" id="cf-phone"></div>
            <div class="form-group span-2"><label>Address</label><input type="text" id="cf-address"></div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="closeModal('client-modal')">Cancel</button>
          <button class="btn btn-primary" onclick="clientSave()">Save Client</button>
        </div>
      </div>
    </div>`;

  await loadProvinces();
  const sel = document.getElementById('cf-province');
  provinces.forEach(p => sel.innerHTML += `<option value="${p.record_id}">${p.provinces_name}</option>`);

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

  window.clientAdd = async () => {
    document.getElementById('client-modal-title').textContent = 'Add Client';
    document.getElementById('client-form').reset();
    document.getElementById('cf-id').value = '';
    openModal('client-modal');
  };

  window.clientEdit = async (id) => {
    const r = await api('clients.php', { action: 'get', id });
    if (!r.success) { toast('Failed to load client', 'error'); return; }
    const c = r.client;
    document.getElementById('client-modal-title').textContent = 'Edit Client';
    document.getElementById('cf-id').value = c.record_id;
    document.getElementById('cf-name').value = c.clients_name;
    document.getElementById('cf-code').value = c.client_code || '';
    document.getElementById('cf-province').value = c.provinces_id || 0;
    document.getElementById('cf-email').value = c.email || '';
    document.getElementById('cf-phone').value = c.phone || '';
    document.getElementById('cf-address').value = c.address || '';
    openModal('client-modal');
  };

  window.clientSave = async () => {
    const id = document.getElementById('cf-id').value;
    const params = {
      action: id ? 'update' : 'create',
      id,
      clients_name: document.getElementById('cf-name').value,
      client_code: document.getElementById('cf-code').value,
      provinces_id: document.getElementById('cf-province').value,
      email: document.getElementById('cf-email').value,
      phone: document.getElementById('cf-phone').value,
      address: document.getElementById('cf-address').value,
    };
    const r = await api('clients.php', params, 'POST');
    if (r.success) { toast(r.message, 'success'); closeModal('client-modal'); render(); }
    else toast(r.error, 'error');
  };

  window.clientDelete = async (id, name) => {
    if (!confirm(`Delete client "${name}"? This cannot be undone.`)) return;
    const r = await api('clients.php', { action: 'delete', id }, 'POST');
    if (r.success) { toast('Client deleted', 'success'); render(); }
    else toast(r.error, 'error');
  };


  // ── Export ─────────────────────────────────────────────────────────────────
  const _getExportRows = async (filter) => {
    const r = await api('clients.php', { action: 'list', search: '' });
    if (!r.success) { toast('Export failed', 'error'); return null; }
    return r.clients.map(c => [c.client_code || '', c.clients_name || '', c.provinces_name || '', c.email || '', c.phone || '', c.address || '']);
  };
  const _exportHeaders = ['Code', 'Name', 'Province', 'Email', 'Phone', 'Address'];
  const _exportTitle = 'Clients';


  function printExport(title, headers, rows) {
    const headHtml = headers.map(h => '<th>' + h + '</th>').join('');
    const bodyHtml = rows.map((row, i) =>
      '<tr' + (i % 2 ? ' class="alt"' : '') + '>' + row.map(v => '<td>' + (v ?? '') + '</td>').join('') + '</tr>'
    ).join('');
    const date = new Date().toLocaleDateString('en-ZA', { day: 'numeric', month: 'short', year: 'numeric' });
    const html = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>' + title + '</title><style>' +
      '*{box-sizing:border-box;margin:0;padding:0}' +
      'body{font-family:Arial,sans-serif;font-size:11px;color:#1a2332;padding:20px}' +
      '.hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:3px solid #e85d04}' +
      '.brand{display:flex;align-items:center;gap:10px}' +
      '.logo{width:36px;height:36px;background:#e85d04;border-radius:6px;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}' +
      '.bname{font-size:16px;font-weight:700}.bsub{font-size:10px;color:#64748b}' +
      '.meta{text-align:right;font-size:10px;color:#64748b}.meta b{color:#1a2332}' +
      'table{width:100%;border-collapse:collapse;font-size:10px;margin-top:6px}' +
      'th{background:#0d1b2a;color:#fff;padding:6px 8px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}' +
      'td{padding:5px 8px;border-bottom:1px solid #e2e8f0;vertical-align:top}' +
      'tr.alt td{background:#f8fafc}' +
      '.foot{margin-top:14px;display:flex;justify-content:space-between;color:#94a3b8;font-size:9px;border-top:1px solid #e2e8f0;padding-top:6px}' +
      '@media print{@page{margin:1cm}body{padding:0}}' +
      '</style></head><body>' +
      '<div class="hdr"><div class="brand"><div class="logo">SS</div>' +
      '<div><div class="bname">SafeSure</div><div class="bsub">' + title + '</div></div></div>' +
      '<div class="meta"><div>Date: <b>' + date + '</b></div><div>Records: <b>' + rows.length + '</b></div></div></div>' +
      '<table><thead><tr>' + headHtml + '</tr></thead><tbody>' + bodyHtml + '</tbody></table>' +
      '<div class="foot"><span>SafeSure Competency Assessment System</span><span>Confidential — ' + title + ' ' + date + '</span></div>' +
      '<scr' + 'ipt>window.onload=function(){window.print();}</' + 'script>' +
      '</body></html>';
    const w = window.open('', '_blank');
    w.document.write(html);
    w.document.close();
  }
  window.doExportPDF = async () => {
    const rows = await _getExportRows();
    if (rows) printExport(_exportTitle, _exportHeaders, rows);
  };
  window.doExportCSV = async () => {
    const rows = await _getExportRows();
    if (!rows) return;
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.aoa_to_sheet([_exportHeaders, ...rows]);
    XLSX.utils.book_append_sheet(wb, ws, 'Clients');
    XLSX.writeFile(wb, _exportTitle.toLowerCase().replace(/ /g, '_') + '_' + new Date().toISOString().slice(0, 10) + '.xlsx');
  };
});