registerPage('dashboard', async (content) => {
  document.getElementById('topbar-title').textContent = 'Dashboard';
  const r = await api('dashboard.php');
  if (!r.success) { content.innerHTML = emptyHTML('Failed to load dashboard'); return; }

  const { stats, booking_statuses, recent_bookings } = r;

  const statItems = [
    { label: 'Clients', value: stats.clients, icon: '🏢', page: 'clients' },
    { label: 'Employees', value: stats.employees, icon: '👷', page: 'employees' },
    { label: 'Bookings', value: stats.bookings, icon: '📅', page: 'bookings' },
    { label: 'Assessments', value: stats.assessments, icon: '📋', page: 'assessments' },
    { label: 'Tests', value: stats.tests, icon: '📝', page: 'tests' },
    { label: 'Users', value: stats.users, icon: '👤', page: 'users' },
    { label: 'Certificates', value: stats.certificates, icon: '🏅', page: 'courses' },
  ];

  const statsHtml = statItems.map(s => `
    <div class="stat-card" onclick="navigate('${s.page}')">
      <div class="stat-icon">${s.icon}</div>
      <div class="stat-value">${s.value}</div>
      <div class="stat-label">${s.label}</div>
    </div>`).join('');

  const recentHtml = recent_bookings.length === 0 ? emptyHTML('No recent bookings') :
    `<div class="table-wrap"><table>
      <thead><tr><th>#</th><th>Date</th><th>Client</th><th>Assessor</th><th>Status</th><th></th></tr></thead>
      <tbody>${recent_bookings.map(b => `
        <tr>
          <td class="mono">${b.booking_number || b.record_id}</td>
          <td>${b.date_booked}</td>
          <td>${b.clients_name || '—'}</td>
          <td>${b.assessor || '—'}</td>
          <td>${statusBadge(b.status)}</td>
          <td><button class="btn btn-sm btn-secondary" onclick="navigate('bookings',{view:${b.record_id}})">View</button></td>
        </tr>`).join('')}
      </tbody>
    </table></div>`;

  // Load expiry data
  const er = await api('expiry.php', { action: 'dashboard' });
  const expiryGrouped = er.success ? er.grouped : {};
  const expiryTotal = er.success ? er.total : 0;


  function daysBadge(d) {
    const n = parseInt(d);
    if (isNaN(n)) return `<span class="badge badge-gray">Unknown</span>`;
    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">Expires today</span>`;
    if (n <= 30) return `<span class="badge badge-danger">${label} left</span>`;
    if (n <= 60) return `<span class="badge badge-warning">${label} left</span>`;
    if (n <= 180) return `<span class="badge badge-info">${label} left</span>`;
    return `<span class="badge badge-success">${label} left</span>`;
  }

  const expiryHtml = Object.keys(expiryGrouped).length === 0
    ? `<div style="padding:20px;text-align:center;color:var(--muted);font-size:13px">✓ Nothing expiring within 60 days</div>`
    : Object.entries(expiryGrouped).map(([client, rows], ci) => `
        <div style="border-bottom:1px solid var(--border)">
          <div onclick="this.parentElement.querySelector('.exp-body').classList.toggle('open')"
               style="display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;background:var(--bg)">
            <svg class="exp-arrow" style="transition:transform .2s;flex-shrink:0" 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>
            <span style="font-size:13px;font-weight:500;flex:1">${client}</span>
            <span class="badge badge-gray">${rows.length}</span>
            ${rows.filter(r => parseInt(r.days_left) < 0).length ? `<span class="badge badge-danger">${rows.filter(r => parseInt(r.days_left) < 0).length} expired</span>` : ''}
            ${rows.filter(r => parseInt(r.days_left) >= 0 && parseInt(r.days_left) <= 30).length ? `<span class="badge badge-warning">${rows.filter(r => parseInt(r.days_left) >= 0 && parseInt(r.days_left) <= 30).length} critical</span>` : ''}
          </div>
          <div class="exp-body" style="display:none;overflow:hidden">
            <table style="width:100%;border-collapse:collapse;font-size:12px">
              <thead><tr style="background:#f8fafc">
                <th style="padding:7px 14px;text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase">Name</th>
                <th style="padding:7px 14px;text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase">ID</th>
                <th style="padding:7px 14px;text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase">Assessment / Test</th>
                <th style="padding:7px 14px;text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase">Done</th>
                <th style="padding:7px 14px;text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase">Expires</th>
                <th style="padding:7px 14px;text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase">Status</th>
              </tr></thead>
              <tbody>${rows.map(r => `<tr style="border-top:1px solid var(--border)">
                <td style="padding:7px 14px">${r.client_employees_name} ${r.surname}</td>
                <td style="padding:7px 14px;font-family:monospace;font-size:11px">${r.i_doc_passport || '—'}</td>
                <td style="padding:7px 14px">
                  <span class="badge ${r.rec_type === 'assessment' ? 'badge-info' : 'badge-orange'}" style="font-size:10px">${r.rec_type === 'assessment' ? 'A' : 'T'}</span>
                  ${r.name}
                </td>
                <td style="padding:7px 14px">${(r.done_date || '').slice(0, 10)}</td>
                <td style="padding:7px 14px">${r.expiry_date || '—'}</td>
                <td style="padding:7px 14px">${daysBadge(r.days_left)}</td>
              </tr>`).join('')}</tbody>
            </table>
          </div>
        </div>`).join('');

  // Toggle open/close for collapsible groups
  function initExpiry() {
    document.querySelectorAll('.exp-body').forEach(b => {
      b.style.display = 'block'; // start open
    });
    document.querySelectorAll('[onclick*="exp-body"]').forEach(h => {
      h.addEventListener('click', function () {
        const arrow = this.querySelector('.exp-arrow');
        if (arrow) arrow.style.transform = arrow.style.transform === 'rotate(180deg)' ? '' : 'rotate(180deg)';
      });
    });
  }

  content.innerHTML = `
    <div class="stats-grid">${statsHtml}</div>
    <div class="card" style="margin-bottom:16px">
      <div class="card-header">
        <h2>Expiring / Expired (within 60 days)</h2>
        <span class="badge badge-gray" style="margin-right:8px">${expiryTotal} records</span>
        <button class="btn btn-primary btn-sm" onclick="navigate('expiry')">Full Expiry Report</button>
      </div>
      ${expiryHtml}
    </div>
    <div class="card">
      <div class="card-header">
        <h2>Recent Bookings</h2>
        <button class="btn btn-primary btn-sm" onclick="navigate('bookings')">All Bookings</button>
      </div>
      ${recentHtml}
    </div>`;
  initExpiry();
});