registerPage('dedupe', async (content, params = {}) => {
  document.getElementById('topbar-title').textContent = 'Duplicate Employees';
  let groups = [];

  content.innerHTML = `
    <div style="display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap">
      <div id="dedupe-summary" class="text-muted text-sm"></div>
      <button class="btn btn-secondary" style="margin-left:auto" onclick="showBackups()">View Backups / Rollback</button>
      <button class="btn btn-primary" onclick="loadDupes()">🔍 Scan for Duplicates</button>
      <button class="btn btn-danger" id="merge-all-btn" style="display:none" onclick="mergeAll()">⚡ Merge All Duplicates</button>
    </div>
    <div id="dedupe-content">${loadingHTML()}</div>

    <!-- Preview Modal -->
    <div class="modal-bg" id="preview-modal">
      <div class="modal modal-lg" style="width:860px;max-height:92vh;display:flex;flex-direction:column">
        <div class="modal-header" style="flex-shrink:0">
          <h3 id="preview-title">Merge Preview</h3>
          <button class="modal-close" onclick="closeModal('preview-modal')">×</button>
        </div>
        <div class="modal-body" id="preview-body" style="flex:1;overflow-y:auto;min-height:0"></div>
        <div class="modal-footer" style="flex-shrink:0" id="preview-footer"></div>
      </div>
    </div>

    <!-- Backups Modal -->
    <div class="modal-bg" id="backups-modal">
      <div class="modal modal-lg">
        <div class="modal-header">
          <h3>Merge Backups</h3>
          <button class="modal-close" onclick="closeModal('backups-modal')">×</button>
        </div>
        <div class="modal-body" id="backups-body"></div>
      </div>
    </div>`;

  window.loadDupes = async function loadDupes() {
    document.getElementById('dedupe-content').innerHTML = loadingHTML();
    document.getElementById('dedupe-summary')?.setAttribute('data-text', '');
    const r = await api('dedupe.php', { action: 'list' });
    if (!r.success) { document.getElementById('dedupe-content').innerHTML = emptyHTML('Error: ' + r.error); return; }
    groups = r.groups;

    if (!groups.length) {
      document.getElementById('merge-all-btn').style.display = 'none';
      document.getElementById('dedupe-content').innerHTML = `<div class="card card-body"><div class="empty-state"><p>✓ No duplicate employees found.</p></div></div>`;
      return;
    }

    const sumEl2 = document.getElementById('dedupe-summary'); if (sumEl2) sumEl2.textContent =
      `${r.total_groups} duplicate groups found`;

    document.getElementById('merge-all-btn').style.display = groups.length ? '' : 'none';
    document.getElementById('dedupe-content').innerHTML = groups.map((g, gi) => `
      <div class="card" style="margin-bottom:14px">
        <div class="card-header" style="background:var(--bg)">
          <h2 style="font-size:13px">
            <span class="mono" style="color:var(--orange)">${g.records[0].i_doc_passport}</span>
            <span style="margin-left:8px;color:var(--muted);font-weight:400;font-size:12px">
              ${[...new Set(g.records.map(r => r.client_employees_name + ' ' + r.surname))].join(' / ')}
            </span>
          </h2>
          <span class="badge badge-warning" style="margin-left:8px">${g.records.length} records</span>
          <span class="badge badge-info">${g.total_assessments} assessments</span>
          <span class="badge badge-orange">${g.total_tests} tests</span>
          <span class="badge badge-gray">${g.total_bookings} bookings</span>
          <button class="btn btn-sm btn-primary" style="margin-left:auto"
            onclick="previewMerge(${gi})">Preview & Merge</button>
        </div>
        <div class="card-body" style="padding:0">
          <div class="table-wrap">
            <table style="font-size:12px">
              <thead><tr>
                <th>Record ID</th><th>Name</th><th>Surname</th><th>Client</th>
                <th>Company No</th><th>Occupation</th><th>Assessments</th><th>Tests</th><th>Bookings</th><th>Status</th>
              </tr></thead>
              <tbody>
                ${g.records.map(row => `
                  <tr style="${row.is_primary ? 'background:#dcfce7' : 'background:#fff7ed'}">
                    <td class="mono fw-500">${row.record_id}</td>
                    <td>${row.client_employees_name}</td>
                    <td>${row.surname}</td>
                    <td>${row.clients_name || '—'}</td>
                    <td class="mono">${row.company_number || '—'}</td>
                    <td>${row.occupation || '—'}</td>
                    <td class="mono">${row.assessments_count}</td>
                    <td class="mono">${row.tests_count}</td>
                    <td class="mono">${row.bookings_count}</td>
                    <td>${row.is_primary
        ? '<span class="badge badge-success">KEEP (Primary)</span>'
        : '<span class="badge badge-danger">DUPLICATE — will be removed</span>'}</td>
                  </tr>`).join('')}
              </tbody>
            </table>
          </div>
        </div>
      </div>`).join('');
  }

  window.previewMerge = async (gi) => {
    const g = groups[gi];
    const dupIds = g.records.filter(r => !r.is_primary).map(r => r.record_id);
    document.getElementById('preview-title').textContent =
      `Merge: ${g.records[0].client_employees_name} ${g.records[0].surname}`;
    document.getElementById('preview-body').innerHTML = loadingHTML();
    document.getElementById('preview-footer').innerHTML = '';
    openModal('preview-modal');

    const r = await api('dedupe.php', { action: 'preview', primary_id: g.primary_id, dup_ids: JSON.stringify(dupIds) }, 'POST');
    if (!r.success) { document.getElementById('preview-body').innerHTML = emptyHTML('Error: ' + r.error); return; }
    const p = r.preview;

    const assRows = p.assessments.map(a =>
      `<tr><td class="mono">${a.record_id}</td><td>${a.assesses_name}</td><td>${a.date || '—'}</td><td>${a.results || '—'}</td></tr>`
    ).join('') || '<tr><td colspan="4" style="color:var(--muted)">None</td></tr>';

    const testRows = p.tests.map(t =>
      `<tr><td class="mono">${t.record_id}</td><td>${t.test_name}</td><td>${t.date || '—'}</td><td>${t.results || '—'}</td></tr>`
    ).join('') || '<tr><td colspan="4" style="color:var(--muted)">None</td></tr>';

    const bookRows = p.bookings.map(b =>
      `<tr><td class="mono">${b.booking_number || b.record_id}</td><td>${b.date_booked || '—'}</td><td>${statusBadge(b.status)}</td><td class="mono text-sm">${b.affected_dup_ids.join(', ')}</td></tr>`
    ).join('') || '<tr><td colspan="4" style="color:var(--muted)">None</td></tr>';

    const primary = g.records.find(r => r.is_primary);
    const dups = g.records.filter(r => !r.is_primary);

    document.getElementById('preview-body').innerHTML = `
      <div style="background:#dcfce7;border:1px solid #86efac;border-radius:8px;padding:12px 16px;margin-bottom:16px">
        <p style="font-size:13px;font-weight:500;color:#166534">Primary record (kept): ID ${primary.record_id} — ${primary.client_employees_name} ${primary.surname} @ ${primary.clients_name || '?'}</p>
      </div>
      <div style="background:#fff7ed;border:1px solid #fdba74;border-radius:8px;padding:12px 16px;margin-bottom:16px">
        <p style="font-size:13px;font-weight:500;color:#c2410c">Duplicate records (deleted): IDs ${dups.map(d => d.record_id).join(', ')}</p>
      </div>

      <p style="font-size:13px;font-weight:500;margin-bottom:8px">Assessments that will be re-linked to ID ${g.primary_id}:</p>
      <div class="table-wrap" style="margin-bottom:16px">
        <table style="font-size:12px"><thead><tr><th>ID</th><th>Name</th><th>Date</th><th>Result</th></tr></thead>
        <tbody>${assRows}</tbody></table>
      </div>

      <p style="font-size:13px;font-weight:500;margin-bottom:8px">Tests that will be re-linked to ID ${g.primary_id}:</p>
      <div class="table-wrap" style="margin-bottom:16px">
        <table style="font-size:12px"><thead><tr><th>ID</th><th>Name</th><th>Date</th><th>Result</th></tr></thead>
        <tbody>${testRows}</tbody></table>
      </div>

      <p style="font-size:13px;font-weight:500;margin-bottom:8px">Bookings that will be updated:</p>
      <div class="table-wrap" style="margin-bottom:16px">
        <table style="font-size:12px"><thead><tr><th>Booking #</th><th>Date</th><th>Status</th><th>Dup IDs affected</th></tr></thead>
        <tbody>${bookRows}</tbody></table>
      </div>

      <div style="background:#eff6ff;border:1px solid #93c5fd;border-radius:8px;padding:12px 16px">
        <p style="font-size:12px;color:#1e40af">A full backup will be saved automatically before any changes are made. You can rollback from the Backups panel.</p>
      </div>`;

    document.getElementById('preview-footer').innerHTML = `
      <button class="btn btn-secondary" onclick="closeModal('preview-modal')">Cancel</button>
      <button class="btn btn-danger" onclick="doMerge(${gi}, ${g.primary_id}, ${JSON.stringify(dupIds)})">
        Merge & Delete Duplicates
      </button>`;
  };

  window.doMerge = async (gi, primaryId, dupIds) => {
    if (!confirm('Are you sure? Duplicate employee records will be deleted. A backup will be saved first.')) return;
    const g = groups[gi];
    const desc = `Merge ${g.records[0].client_employees_name} ${g.records[0].surname} (${g.records[0].i_doc_passport}) — primary ID ${primaryId}, removed IDs ${dupIds.join(',')}`;

    const r = await api('dedupe.php', {
      action: 'merge',
      primary_id: primaryId,
      dup_ids: JSON.stringify(dupIds),
      description: desc,
    }, 'POST');

    if (r.success) {
      toast(`✓ Merged — Backup #${r.backup_id} saved`, 'success');
      closeModal('preview-modal');
      loadDupes();
    } else {
      toast('Error: ' + r.error, 'error');
    }
  };

  window.mergeAll = async () => {
    if (!groups.length) { toast('No duplicates to merge', 'error'); return; }
    if (!confirm(`Merge ALL ${groups.length} duplicate groups automatically?\n\nA backup will be created for each group. You can rollback individual merges from the Backups panel.`)) return;

    document.getElementById('merge-all-btn').disabled = true;
    document.getElementById('merge-all-btn').textContent = 'Merging…';

    let done = 0, failed = 0;
    const total = groups.length;

    // Progress bar
    document.getElementById('dedupe-content').innerHTML = `
      <div class="card card-body">
        <p style="font-size:13px;font-weight:500;margin-bottom:14px">Merging <span id="prog-done">0</span> / ${total} groups…</p>
        <div style="background:var(--border);border-radius:6px;height:12px;overflow:hidden;margin-bottom:10px">
          <div id="prog-bar" style="height:100%;background:var(--orange);width:0%;transition:width .2s;border-radius:6px"></div>
        </div>
        <div id="prog-log" style="font-size:12px;color:var(--muted);max-height:300px;overflow-y:auto;font-family:monospace;line-height:1.8"></div>
      </div>`;

    for (const g of groups) {
      const dupIds = g.records.filter(r => !r.is_primary).map(r => r.record_id);
      const desc = `Auto-merge ID ${g.records[0].i_doc_passport} — primary ${g.primary_id}, removed ${dupIds.join(',')}`;
      const r = await api('dedupe.php', {
        action: 'merge',
        primary_id: g.primary_id,
        dup_ids: JSON.stringify(dupIds),
        description: desc,
      }, 'POST');

      done++;
      const pct = Math.round((done / total) * 100);
      const progBar = document.getElementById('prog-bar');
      const progDone = document.getElementById('prog-done');
      const progLog = document.getElementById('prog-log');
      if (progBar) progBar.style.width = pct + '%';
      if (progDone) progDone.textContent = done;
      if (progLog) {
        const line = document.createElement('div');
        if (r.success) {
          line.style.color = 'var(--success)';
          line.textContent = `✓ ${g.records[0].i_doc_passport} — merged ${dupIds.length} duplicate(s) → ID ${g.primary_id} (backup #${r.backup_id})`;
        } else {
          failed++;
          line.style.color = 'var(--danger)';
          line.textContent = `✕ ${g.records[0].i_doc_passport} — Error: ${r.error}`;
        }
        progLog.appendChild(line);
        progLog.scrollTop = progLog.scrollHeight;
      }
    }

    document.getElementById('merge-all-btn').disabled = false;
    document.getElementById('merge-all-btn').textContent = '⚡ Merge All Duplicates';
    document.getElementById('merge-all-btn').style.display = 'none';

    toast(`Done — ${done - failed} merged, ${failed} failed`, failed ? 'error' : 'success');

    // Reload after short delay
    setTimeout(() => loadDupes(), 1200);
  };

  window.showBackups = async () => {
    document.getElementById('backups-body').innerHTML = loadingHTML();
    openModal('backups-modal');
    const r = await api('dedupe.php', { action: 'list_backups' });
    if (!r.success) { document.getElementById('backups-body').innerHTML = emptyHTML('Error'); return; }
    const rows = r.backups;
    document.getElementById('backups-body').innerHTML = rows.length === 0
      ? emptyHTML('No backups yet')
      : `<div class="table-wrap"><table style="font-size:12px">
          <thead><tr><th>#</th><th>Date</th><th>Description</th><th>By</th><th></th></tr></thead>
          <tbody>${rows.map(b => `<tr>
            <td class="mono">${b.record_id}</td>
            <td>${b.created_at}</td>
            <td>${b.description}</td>
            <td>${b.safesure_users_name || '—'}</td>
            <td><button class="btn btn-sm btn-danger" onclick="doRollback(${b.record_id})">Rollback</button></td>
          </tr>`).join('')}
          </tbody>
        </table></div>`;
  };

  window.doRollback = async (backupId) => {
    if (!confirm(`Rollback backup #${backupId}? This will restore deleted employee records and undo all reassignments.`)) return;
    const r = await api('dedupe.php', { action: 'rollback', backup_id: backupId }, 'POST');
    if (r.success) {
      toast('Rollback complete', 'success');
      closeModal('backups-modal');
      loadDupes();
    } else {
      toast('Error: ' + r.error, 'error');
    }
  };

  loadDupes();
});