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

  let currentData = null;
  let currentMode = null;
  let clients = [], sites = [];

  // Pre-load clients + sites
  const [cr, sr] = await Promise.all([
    api('clients.php', { action: 'list' }),
    api('sites.php', { action: 'list' }),
  ]);
  clients = cr.clients || [];
  sites = sr.sites || [];

  function daysLabel(d) {
    const n = parseInt(d);
    if (isNaN(n)) return '—';
    const abs = Math.abs(n);
    const months = Math.round(abs / 30.44);
    const label = abs < 30 ? `${abs}d` : `${months}mo`;
    if (n < 0) return `<span class="badge badge-danger">Expired ${label} ago</span>`;
    if (n === 0) return `<span class="badge badge-danger">Today</span>`;
    if (n <= 30) return `<span class="badge badge-danger">${label}</span>`;
    if (n <= 60) return `<span class="badge badge-warning">${label}</span>`;
    if (n <= 180) return `<span class="badge badge-info">${label}</span>`;
    return `<span class="badge badge-success">${label}</span>`;
  }

  function resultBadge(r) {
    const v = (r || '').toUpperCase();
    if (v.includes('COMP') || v.includes('PASS')) return `<span class="badge badge-success">${r}</span>`;
    if (v.includes('NYC') || v.includes('FAIL')) return `<span class="badge badge-danger">${r}</span>`;
    return r ? `<span class="badge badge-gray">${r}</span>` : '—';
  }

  function recBadge(t) {
    return t === 'assessment'
      ? '<span class="badge badge-info" style="font-size:10px">Assessment</span>'
      : '<span class="badge badge-orange" style="font-size:10px">Test</span>';
  }

  // ── Render functions ───────────────────────────────────────────────────
  function renderEmployeeMode(data) {
    const withRecords = (data.employees || []).filter(emp => emp.records?.length > 0);
    if (!withRecords.length) return emptyHTML('No employees with assessments or tests found');
    return withRecords.map((emp, ei) => `
      <div class="card" style="margin-bottom:12px">
        <div class="card-header" style="cursor:pointer" onclick="toggleRptGrp(${ei})">
          <div>
            <span class="fw-500">${emp.client_employees_name} ${emp.surname}</span>
            <span class="mono text-sm" style="margin-left:10px">${emp.i_doc_passport || ''}</span>
            <span class="text-muted text-sm" style="margin-left:10px">${emp.clients_name || ''}</span>
          </div>
          <span class="badge badge-gray">${emp.records?.length || 0} records</span>
          <svg id="rpt-arrow-${ei}" style="transition:transform .2s;margin-left:8px" width="14" height="14" 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 id="rpt-body-${ei}" style="border-top:1px solid var(--border)">
          ${renderRecordsTable(emp.records)}
        </div>
      </div>`).join('');
  }

  function renderClientMode(data) {
    return renderEmployeeMode(data);
  }

  function renderDaterangeMode(data) {
    if (!data.grouped || !Object.keys(data.grouped).length) return emptyHTML('No records found in that date range');
    return Object.entries(data.grouped).map(([client, rows], gi) => `
      <div class="card" style="margin-bottom:12px">
        <div class="card-header" style="cursor:pointer" onclick="toggleRptGrp(${gi})">
          <span class="fw-500">${client}</span>
          <span class="badge badge-gray" style="margin-left:8px">${rows.length}</span>
          <svg id="rpt-arrow-${gi}" style="transition:transform .2s;margin-left:auto" width="14" height="14" 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 id="rpt-body-${gi}" style="border-top:1px solid var(--border)">
          <div class="table-wrap">
            <table style="font-size:12px">
              <thead><tr>
                <th>Type</th><th>Name</th><th>Surname</th><th>ID</th>
                <th>Assessment / Test</th><th>Vehicle</th><th>Date</th><th>Result</th>
                <th>Expiry</th><th>Assessor</th><th>Booking</th><th>Site</th>
              </tr></thead>
              <tbody>${rows.map(r => `<tr>
                <td>${recBadge(r.rec_type)}</td>
                <td class="fw-500">${r.client_employees_name || '—'}</td>
                <td>${r.surname || '—'}</td>
                <td class="mono">${r.i_doc_passport || '—'}</td>
                <td>${r.name}</td>
                <td>${r.vehicle_model || '—'}</td>
                <td>${(r.date || '').slice(0, 10)}</td>
                <td>${resultBadge(r.results)}</td>
                <td>${daysLabel(r.days_left)}</td>
                <td>${r.assessor || '—'}</td>
                <td class="mono">${r.booking_number || '—'}</td>
                <td>${r.client_sites_name || '—'}</td>
              </tr>`).join('')}</tbody>
            </table>
          </div>
        </div>
      </div>`).join('');
  }

  function renderSiteMode(data) {
    const rows = data.rows || [];
    if (!rows.length) return emptyHTML('No assessment records found for this site');
    return `
      <div class="card">
        <div class="table-wrap">
          <table style="font-size:12px">
            <thead><tr>
              <th>Name</th><th>Surname</th><th>ID/Passport</th><th>Occupation</th>
              <th>Assessment / Test</th><th>Vehicle</th><th>Date</th>
              <th>Result</th><th>Score</th><th>Expiry Date</th><th>Expiry</th>
              <th>Booking #</th><th>Assessor</th>
            </tr></thead>
            <tbody>${rows.map(r => `<tr>
              <td class="fw-500">${r.client_employees_name || '—'}</td>
              <td>${r.surname || '—'}</td>
              <td class="mono">${r.i_doc_passport || '—'}</td>
              <td>${r.occupation || '—'}</td>
              <td>${r.name || '—'}</td>
              <td>${r.vehicle_model || '—'}</td>
              <td>${(r.date || '').slice(0, 10)}</td>
              <td>${resultBadge(r.results)}</td>
              <td class="mono">${r.current_mark || '—'}/${r.passmark || '—'}</td>
              <td>${r.expiry_date || '—'}</td>
              <td>${daysLabel(r.days_left)}</td>
              <td class="mono">${r.booking_number || '—'}</td>
              <td>${r.assessor || '—'}</td>
            </tr>`).join('')}
            </tbody>
          </table>
        </div>
      </div>`;
  }


  function renderRecordsTable(records) {
    if (!records?.length) return `<div style="padding:16px;color:var(--muted);font-size:12px">No records</div>`;
    return `<div class="table-wrap">
      <table style="font-size:12px">
        <thead><tr>
          <th>Type</th><th>Assessment / Test</th><th>Vehicle</th><th>Date</th>
          <th>Result</th><th>Score</th><th>Expiry Date</th><th>Expiry</th><th>Assessor</th>
        </tr></thead>
        <tbody>${records.map(r => `<tr>
          <td>${recBadge(r.rec_type)}</td>
          <td>${r.name}</td>
          <td>${r.vehicle_model || '—'}</td>
          <td>${(r.date || '').slice(0, 10)}</td>
          <td>${resultBadge(r.results)}</td>
          <td class="mono">${r.current_mark || '—'} / ${r.passmark || '—'}</td>
          <td>${r.expiry_date || '—'}</td>
          <td>${daysLabel(r.days_left)}</td>
          <td>${r.assessor || '—'}</td>
        </tr>`).join('')}</tbody>
      </table>
    </div>`;
  }

  window.toggleRptGrp = (i) => {
    const b = document.getElementById(`rpt-body-${i}`);
    const a = document.getElementById(`rpt-arrow-${i}`);
    if (!b) return;
    const open = b.style.display !== 'none';
    b.style.display = open ? 'none' : '';
    if (a) a.style.transform = open ? 'rotate(-90deg)' : '';
  };

  // ── Render the page shell ─────────────────────────────────────────────
  content.innerHTML = `
    <div class="card" style="margin-bottom:16px">
      <div class="card-body" style="padding:16px 18px">
        <!-- Mode selector -->
        <div style="display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap">
          ${['employee', 'client', 'daterange', 'site'].map(m => `
            <button id="mode-btn-${m}" onclick="setMode('${m}')"
              class="btn btn-sm ${m === 'employee' ? 'btn-primary' : 'btn-secondary'}"
              style="text-transform:capitalize">${m === 'daterange' ? 'Date Range' : m.charAt(0).toUpperCase() + m.slice(1)}</button>`).join('')}
        </div>
        <!-- Filters (swap by mode) -->
        <div id="report-filters" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end"></div>
      </div>
    </div>

    <div id="report-actions" style="display:none;margin-bottom:12px">
      <div style="display:flex;gap:8px;align-items:center">
        <span id="report-count" class="text-muted text-sm"></span>
        <button class="btn btn-secondary btn-sm" onclick="expandAllRpt()">Expand All</button>
        <button class="btn btn-secondary btn-sm" onclick="collapseAllRpt()">Collapse All</button>
        <button class="btn btn-secondary" onclick="reportExcel()">⬇ Excel</button>
        <button class="btn btn-secondary" onclick="reportPDF()">⬇ PDF</button>
      </div>
    </div>

    <div id="report-results"></div>`;

  function buildFilters(mode) {
    const container = document.getElementById('report-filters');
    if (mode === 'employee') {
      container.innerHTML = `
        <div class="form-group" style="flex:1;min-width:200px">
          <label>Search Employee</label>
          <input type="text" id="rf-emp-search" placeholder="Name, surname or ID…">
        </div>
        <button class="btn btn-primary" onclick="runReport()">Search</button>`;
      document.getElementById('rf-emp-search').addEventListener('keydown', e => { if (e.key === 'Enter') runReport(); });
    } else if (mode === 'client') {
      container.innerHTML = `
        <div class="form-group" style="min-width:220px">
          <label>Client</label>
          <select id="rf-client">
            <option value="">— Select client —</option>
            ${clients.map(c => `<option value="${c.record_id}">${c.clients_name}</option>`).join('')}
          </select>
        </div>
        <button class="btn btn-primary" onclick="runReport()">Run Report</button>`;
    } else if (mode === 'daterange') {
      const today = new Date().toISOString().slice(0, 10);
      const m1ago = new Date(Date.now() - 30 * 864e5).toISOString().slice(0, 10);
      container.innerHTML = `
        <div class="form-group">
          <label>From</label>
          <input type="date" id="rf-from" value="${m1ago}">
        </div>
        <div class="form-group">
          <label>To</label>
          <input type="date" id="rf-to" value="${today}">
        </div>
        <div class="form-group" style="min-width:180px">
          <label>Client (optional)</label>
          <select id="rf-client2">
            <option value="">All Clients</option>
            ${clients.map(c => `<option value="${c.record_id}">${c.clients_name}</option>`).join('')}
          </select>
        </div>
        <button class="btn btn-primary" onclick="runReport()">Run Report</button>`;
    } else if (mode === 'site') {
      container.innerHTML = `
        <div class="form-group" style="min-width:220px">
          <label>Client Site</label>
          <select id="rf-site">
            <option value="">— Select site —</option>
            ${sites.map(s => `<option value="${s.record_id}">${s.client_sites_name} (${s.clients_name || ''})</option>`).join('')}
          </select>
        </div>
        <button class="btn btn-primary" onclick="runReport()">Run Report</button>`;
    }
  }

  window.setMode = (mode) => {
    currentMode = mode;
    ['employee', 'client', 'daterange', 'site'].forEach(m => {
      const b = document.getElementById(`mode-btn-${m}`);
      if (b) { b.className = `btn btn-sm ${m === mode ? 'btn-primary' : 'btn-secondary'}`; b.style.textTransform = 'capitalize'; }
    });
    buildFilters(mode);
    document.getElementById('report-results').innerHTML = '';
    document.getElementById('report-actions').style.display = 'none';
    currentData = null;
  };

  window.runReport = async () => {
    const res = document.getElementById('report-results');
    res.innerHTML = loadingHTML();
    document.getElementById('report-actions').style.display = 'none';
    let r, params = {};

    if (currentMode === 'employee') {
      const q = document.getElementById('rf-emp-search')?.value?.trim();
      if (!q) { res.innerHTML = emptyHTML('Enter a search term'); return; }
      r = await api('reports.php', { mode: 'employee', search: q });
    } else if (currentMode === 'client') {
      const cid = document.getElementById('rf-client')?.value;
      if (!cid) { res.innerHTML = emptyHTML('Select a client'); return; }
      r = await api('reports.php', { mode: 'client', clients_id: cid });
    } else if (currentMode === 'daterange') {
      params = {
        mode: 'daterange',
        from: document.getElementById('rf-from')?.value || '',
        to: document.getElementById('rf-to')?.value || '',
        clients_id: document.getElementById('rf-client2')?.value || '',
      };
      r = await api('reports.php', params);
    } else if (currentMode === 'site') {
      const sid = document.getElementById('rf-site')?.value;
      if (!sid) { res.innerHTML = emptyHTML('Select a site'); return; }
      r = await api('reports.php', { mode: 'site', client_sites_id: sid });
    }

    if (!r?.success) { res.innerHTML = emptyHTML('Error: ' + (r?.error || 'unknown')); return; }
    currentData = r;

    let html = '';
    let count = 0;
    if (currentMode === 'employee' || currentMode === 'client') {
      html = renderEmployeeMode(r);
      count = r.employees?.length || 0;
    } else if (currentMode === 'daterange') {
      html = renderDaterangeMode(r);
      count = r.total || 0;
    } else if (currentMode === 'site') {
      html = renderSiteMode(r);
      count = r.total || 0;
    }

    res.innerHTML = html;
    document.getElementById('report-count').textContent = `${count} ${currentMode === 'daterange' ? 'records' : currentMode === 'site' ? 'assessments' : 'employees'}`;
    document.getElementById('report-actions').style.display = '';
  };

  window.expandAllRpt = () => { document.querySelectorAll('[id^="rpt-body-"]').forEach(b => { b.style.display = ''; }); };
  window.collapseAllRpt = () => { document.querySelectorAll('[id^="rpt-body-"]').forEach(b => { b.style.display = 'none'; }); };

  // ── Flatten data for export ───────────────────────────────────────────
  function flattenData() {
    if (!currentData) return { headers: [], rows: [] };
    const headers = ['Name', 'Surname', 'ID/Passport', 'Client', 'Assessment/Test', 'Vehicle Model', 'Date', 'Result', 'Score', 'Expiry Date', 'Days Left', 'Assessor'];
    const rows = [];
    const push = (emp, rec) => rows.push([
      emp.client_employees_name || rec.client_employees_name || '',
      emp.surname || rec.surname || '',
      emp.i_doc_passport || rec.i_doc_passport || '',
      emp.clients_name || rec.clients_name || '',
      rec.name || '',
      rec.vehicle_model || '',
      (rec.date || '').slice(0, 10),
      rec.results || '',
      (rec.current_mark || '') + '/' + (rec.passmark || ''),
      rec.expiry_date || '',
      rec.days_left ?? '',
      rec.assessor || rec.assessor_name || '',  // end of fields
    ]);

    if (currentMode === 'employee' || currentMode === 'client') {
      (currentData.employees || []).forEach(emp => (emp.records || []).forEach(rec => push(emp, rec)));
    } else if (currentMode === 'daterange') {
      Object.values(currentData.grouped || {}).forEach(recs => recs.forEach(rec => push(rec, rec)));
    } else if (currentMode === 'site') {
      (currentData.rows || []).forEach(r => rows.push([
        r.client_employees_name || '', r.surname || '', r.i_doc_passport || '',
        r.clients_name || '',
        r.name || '',
        r.vehicle_model || '',
        (r.date || '').slice(0, 10),
        r.results || '',
        (r.current_mark || '') + '/' + (r.passmark || ''),
        r.expiry_date || '',
        r.days_left ?? '',
        r.assessor || ''
      ]));
    }
    return { headers, rows };
  }

  // ── Excel ─────────────────────────────────────────────────────────────
  window.reportExcel = () => {
    const { headers, rows } = flattenData();
    if (!rows.length) { toast('No data to export', 'error'); return; }
    generateExcel('report_' + currentMode + '_' + new Date().toISOString().slice(0, 10), headers, rows);
  };

  // ── PDF ───────────────────────────────────────────────────────────────
  window.reportPDF = () => {
    const { headers, rows } = flattenData();
    if (!rows.length) { toast('No data to export', 'error'); return; }
    const date = new Date().toLocaleDateString('en-ZA', { day: 'numeric', month: 'short', year: 'numeric' });
    const modeLabel = { employee: 'Employee', client: 'Client', daterange: 'Date Range', site: 'Site' }[currentMode] || '';
    const headHtml = headers.map(h => `<th style="background:#0d1b2a;color:#fff;padding:5px 7px;font-size:9px;text-transform:uppercase">${h}</th>`).join('');
    const bodyHtml = rows.map((r, i) => `<tr style="${i % 2 ? 'background:#f8fafc' : ''}">${r.map(v => `<td style="padding:4px 7px;border-bottom:1px solid #e2e8f0;font-size:10px">${v ?? ''}</td>`).join('')}</tr>`).join('');
    const html = `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Report</title>
    <style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;font-size:11px;padding:20px}
    .hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:10px;border-bottom:3px solid #e85d04}
    .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;float:left;margin-right:10px}
    table{width:100%;border-collapse:collapse}
    @media print{@page{size:landscape;margin:1cm}body{padding:0}}</style></head><body>
    <div class="hdr">
      <div style="display:flex;align-items:center;gap:10px">
        <div class="logo">SS</div>
        <div><div style="font-size:16px;font-weight:700">SafeSure</div><div style="font-size:10px;color:#64748b">${modeLabel} Report</div></div>
      </div>
      <div style="text-align:right;font-size:10px;color:#64748b"><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 style="margin-top:12px;display:flex;justify-content:space-between;color:#94a3b8;font-size:9px;border-top:1px solid #e2e8f0;padding-top:6px">
      <span>SafeSure Competency Assessment System</span><span>Confidential — ${modeLabel} Report ${date}</span>
    </div>
    <script>window.onload=function(){window.print();}<\/script>
    </body></html>`;
    const w = window.open('', '_blank'); w.document.write(html); w.document.close();
  };

  // Init to employee mode
  setMode('employee');
});