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

  async function loadClients() {
    const r = await api('clients.php', { action: 'list' });
    if (r.success) clients = r.clients;
  }

  async function render(search = '', clientFilter = '') {
    const r = await api('sites.php', { action: 'list', search, clients_id: clientFilter });
    if (!r.success) {
      document.getElementById('sites-table').innerHTML = emptyHTML('Error: ' + (r.error || 'unknown'));
      return;
    }
    const rows = r.sites;
    document.getElementById('sites-table').innerHTML = rows.length === 0
      ? emptyHTML('No sites found')
      : `<div class="table-wrap"><table>
          <thead><tr><th>Site Name</th><th>Client</th><th>Actions</th></tr></thead>
          <tbody>${rows.map(s => `<tr>
            <td class="fw-500">${s.client_sites_name}</td>
            <td>${s.clients_name || '—'}</td>
            <td class="actions-td">
              <button class="btn btn-sm btn-secondary" onclick="siteEdit(${s.record_id})">Edit</button>
              <button class="btn btn-sm btn-danger"    onclick="siteDelete(${s.record_id}, '${s.client_sites_name.replace(/'/g, "\\'")}')">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="site-search" placeholder="Search sites…">
      </div>
      <select id="site-client-filter" style="max-width:220px"><option value="">All Clients</option></select>
      <button class="btn btn-secondary" onclick="doExportCSV({clients_id: document.getElementById(\'site-client-filter\').value || \'\'})">⬇ Excel</button>
      <button class="btn btn-secondary" onclick="doExportPDF({clients_id: document.getElementById(\'site-client-filter\').value || \'\'})">⬇ PDF</button>
      <button class="btn btn-primary" onclick="siteAdd()">+ Add Site</button>
    </div>
    <div class="card"><div id="sites-table">${loadingHTML()}</div></div>

    <div class="modal-bg" id="site-modal">
      <div class="modal">
        <div class="modal-header">
          <h3 id="site-modal-title">Add Site</h3>
          <button class="modal-close" onclick="closeModal('site-modal')">×</button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="sf-id">
          <div class="form-grid cols-1">
            <div class="form-group"><label>Site / Contractor Name *</label><input type="text" id="sf-name"></div>
            <div class="form-group"><label>Client *</label><select id="sf-client"><option value="">— Select —</option></select></div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="closeModal('site-modal')">Cancel</button>
          <button class="btn btn-primary" onclick="siteSave()">Save</button>
        </div>
      </div>
    </div>`;

  await loadClients();
  const filterSel = document.getElementById('site-client-filter');
  const modalSel = document.getElementById('sf-client');
  clients.forEach(c => {
    filterSel.innerHTML += `<option value="${c.record_id}">${c.clients_name}</option>`;
    modalSel.innerHTML += `<option value="${c.record_id}">${c.clients_name}</option>`;
  });

  const go = () => render(
    document.getElementById('site-search').value,
    document.getElementById('site-client-filter').value
  );
  document.getElementById('site-search').addEventListener('input', go);
  document.getElementById('site-client-filter').addEventListener('change', go);
  render();

  window.siteAdd = () => {
    document.getElementById('site-modal-title').textContent = 'Add Site';
    document.getElementById('sf-id').value = '';
    document.getElementById('sf-name').value = '';
    document.getElementById('sf-client').value = '';
    openModal('site-modal');
  };

  window.siteEdit = async (id) => {
    const r = await api('sites.php', { action: 'get', id });
    if (!r.success) { toast('Failed to load site', 'error'); return; }
    const s = r.site;
    document.getElementById('site-modal-title').textContent = 'Edit Site';
    document.getElementById('sf-id').value = s.record_id;
    document.getElementById('sf-name').value = s.client_sites_name;
    document.getElementById('sf-client').value = s.clients_id;
    openModal('site-modal');
  };

  window.siteSave = async () => {
    const id = document.getElementById('sf-id').value;
    const r = await api('sites.php', {
      action: id ? 'update' : 'create',
      id,
      client_sites_name: document.getElementById('sf-name').value,
      clients_id: document.getElementById('sf-client').value,
    }, 'POST');
    if (r.success) { toast(r.message, 'success'); closeModal('site-modal'); go(); }
    else toast(r.error, 'error');
  };

  window.siteDelete = async (id, name) => {
    if (!confirm(`Delete site "${name}"?`)) return;
    const r = await api('sites.php', { action: 'delete', id }, 'POST');
    if (r.success) { toast('Site deleted', 'success'); go(); }
    else toast(r.error, 'error');
  };


  // ── Export ─────────────────────────────────────────────────────────────────
  const _getExportRows = async (filter) => {
    const clientId = document.getElementById('site-client-filter').value || '';
    const r = await api('sites.php', { action: 'list', clients_id: clientId });
    if (!r.success) { toast('Export failed', 'error'); return null; }
    return r.sites.map(s => [s.client_sites_name || '', s.clients_name || '']);
  };
  const _exportHeaders = ['Site Name', 'Client'];
  const _exportTitle = 'Client Sites';


  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, 'Sites');
    XLSX.writeFile(wb, _exportTitle.toLowerCase().replace(/ /g, '_') + '_' + new Date().toISOString().slice(0, 10) + '.xlsx');
  };
});