// ============================================================
// Email Notifications Module
// ============================================================

async function renderEmailNotifications(params = {}) {
  const content = document.getElementById('page-content');
  if (!Auth.isAdmin() && !Auth.isDev()) {
    content.innerHTML = `<div class="empty-state"><div class="empty-icon">🔒</div><div class="empty-title">Admin Access Only</div></div>`;
    return;
  }

  content.innerHTML = `
    <div class="section-header">
      <div><h3>Email Notifications</h3><p class="text-muted text-sm">SMTP configuration, notification rules and delivery log</p></div>
    </div>

    <div class="tabs mb-4" id="email-tabs">
      <button class="tab-btn active" onclick="emailTab('settings',this)">⚙️ SMTP Settings</button>
      <button class="tab-btn"        onclick="emailTab('rules',this)">🔔 Notification Rules</button>
      <button class="tab-btn"        onclick="emailTab('log',this)">📜 Delivery Log</button>
      <button class="tab-btn"        onclick="emailTab('queue',this)">📤 Queue</button>
      <button class="tab-btn"        onclick="emailTab('tools',this)">🛠 System Tools</button>
    </div>

    <div id="email-tab-body">
      <div class="loading-overlay"><div class="spinner"></div></div>
    </div>
  `;

  await _emailLoadData();
  emailTab('settings', document.querySelector('#email-tabs .tab-btn'));
}

let _emailData = { settings: {}, rules: [], roles: [] };

async function _emailLoadData() {
  const [res, rolesRes] = await Promise.all([
    API.post('email_notifications/index', { action: 'get_settings' }),
    API.post('roles/list', {}),
  ]);
  if (res.success) {
    _emailData.settings = res.data.settings || {};
    _emailData.rules = res.data.rules || [];
  }
  _emailData.roles = rolesRes.data?.roles || [];
}

function emailTab(tab, btn) {
  document.querySelectorAll('#email-tabs .tab-btn').forEach(b => b.classList.remove('active'));
  if (btn) btn.classList.add('active');
  const body = document.getElementById('email-tab-body');
  if (!body) return;
  if (tab === 'settings') renderEmailSettings(body);
  if (tab === 'rules') renderEmailRules(body);
  if (tab === 'log') renderEmailLog(body);
  if (tab === 'queue') renderEmailQueue(body);
  if (tab === 'tools') renderSystemTools(body);
}

// ── SMTP Settings Tab ────────────────────────────────────
function renderEmailSettings(wrap) {
  const s = _emailData.settings;
  const enabled = s.email_enabled === '1';

  wrap.innerHTML = `
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:900px">

      <!-- SMTP Config Card -->
      <div class="card" style="grid-column:1/-1">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center">
          <h5 style="margin:0">📡 SMTP Configuration</h5>
          <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;font-weight:500">
            <input type="checkbox" id="email-enabled" ${enabled ? 'checked' : ''}>
            Enable Email Sending
          </label>
        </div>
        <div class="card-body">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
            <div class="form-group">
              <label class="form-label">SMTP Host <span class="required">*</span></label>
              <input id="es-host" class="form-control" placeholder="smtp.gmail.com" value="${_esc(s.email_smtp_host)}">
            </div>
            <div class="form-group">
              <label class="form-label">Port</label>
              <input id="es-port" class="form-control" placeholder="587" value="${_esc(s.email_smtp_port || '587')}">
            </div>
            <div class="form-group">
              <label class="form-label">Security</label>
              <select id="es-secure" class="form-control">
                <option value="tls"  ${s.email_smtp_secure === 'tls' || !s.email_smtp_secure ? 'selected' : ''}>TLS (recommended)</option>
                <option value="ssl"  ${s.email_smtp_secure === 'ssl' ? 'selected' : ''}>SSL</option>
                <option value="none" ${s.email_smtp_secure === 'none' ? 'selected' : ''}>None</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">SMTP Username <span class="required">*</span></label>
              <input id="es-user" class="form-control" placeholder="your@email.com" value="${_esc(s.email_smtp_user)}">
            </div>
            <div class="form-group">
              <label class="form-label">SMTP Password <span class="required">*</span></label>
              <input id="es-pass" type="password" class="form-control" placeholder="app password" value="${_esc(s.email_smtp_pass)}">
            </div>
          </div>
        </div>
      </div>

      <!-- Sender Identity -->
      <div class="card">
        <div class="card-header"><h5 style="margin:0">✉️ Sender Identity</h5></div>
        <div class="card-body">
          <div class="form-group">
            <label class="form-label">From Email <span class="required">*</span></label>
            <input id="es-from-email" class="form-control" placeholder="noreply@company.co.za" value="${_esc(s.email_from_address)}">
          </div>
          <div class="form-group">
            <label class="form-label">From Name</label>
            <input id="es-from-name" class="form-control" placeholder="Elegant Work" value="${_esc(s.email_from_name || 'Elegant Work')}">
          </div>
        </div>
      </div>

      <!-- Routing -->
      <div class="card">
        <div class="card-header"><h5 style="margin:0">🎯 Routing</h5></div>
        <div class="card-body">
          <div class="form-group">
            <label class="form-label">Admin Notification Email</label>
            <input id="es-admin-email" class="form-control" placeholder="admin@company.co.za" value="${_esc(s.email_admin_address)}">
            <div class="form-hint">Receives admin-level notifications for all events</div>
          </div>
          <div class="form-group">
            <label class="form-label">App URL (for email links)</label>
            <input id="es-app-url" class="form-control" placeholder="https://yoursite.co.za/app" value="${_esc(s.email_app_url || '')}">
            <div class="form-hint">Used to generate "View Job Card" etc. links in emails</div>
          </div>
        </div>
      </div>

      <!-- Actions -->
      <div class="card" style="grid-column:1/-1">
        <div class="card-body">
          <div style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap">
            <button class="btn btn-primary" onclick="emailSaveSettings()">💾 Save Settings</button>
            <div style="display:flex;gap:.5rem;align-items:center;flex:1;min-width:200px">
              <input id="es-test-email" class="form-control" placeholder="Test recipient email..." style="flex:1">
              <button class="btn btn-outline" onclick="emailSendTest()">📧 Send Test</button>
            </div>
          </div>
          <div id="email-test-result" style="margin-top:.75rem"></div>
        </div>
      </div>

    </div>

    <!-- Cron instructions -->
    <div class="card mt-4" style="max-width:900px">
      <div class="card-header"><h5 style="margin:0">⏱️ Cron Job Setup</h5></div>
      <div class="card-body">
        <p class="text-sm text-muted mb-3">Add one of these lines to your server's crontab to enable automatic email sending:</p>
        <div style="background:#1e293b;border-radius:8px;padding:1rem;margin-bottom:.75rem">
          <code style="color:#86efac;font-size:.8rem;font-family:monospace;display:block">
            # Every minute (real-time delivery)<br>
            * * * * * php /home/[user]/public_html/cron/send_notifications.php >> /var/log/ewg_email.log 2>&1
          </code>
        </div>
        <div style="background:#1e293b;border-radius:8px;padding:1rem">
          <code style="color:#93c5fd;font-size:.8rem;font-family:monospace;display:block">
            # Every 5 minutes (lower server load)<br>
            */5 * * * * php /home/[user]/public_html/cron/send_notifications.php >> /var/log/ewg_email.log 2>&1
          </code>
        </div>
        <div class="alert mt-3" style="background:#fef9c3;border:1px solid #fde047;border-radius:6px;padding:.75rem 1rem;font-size:.85rem;color:#713f12">
          ⚠️ Replace <code>/home/[user]/public_html/</code> with your actual server path. On cPanel you can add crons under <strong>Cron Jobs</strong> in your hosting panel.
        </div>
      </div>
    </div>
  `;
}

async function emailSaveSettings() {
  const btn = event.target;
  btn.classList.add('loading');
  const res = await API.post('email_notifications/index', {
    action: 'save_settings',
    email_enabled: document.getElementById('email-enabled').checked ? '1' : '0',
    email_smtp_host: document.getElementById('es-host').value.trim(),
    email_smtp_port: document.getElementById('es-port').value.trim(),
    email_smtp_secure: document.getElementById('es-secure').value,
    email_smtp_user: document.getElementById('es-user').value.trim(),
    email_smtp_pass: document.getElementById('es-pass').value,
    email_from_address: document.getElementById('es-from-email').value.trim(),
    email_from_name: document.getElementById('es-from-name').value.trim(),
    email_admin_address: document.getElementById('es-admin-email').value.trim(),
    email_app_url: document.getElementById('es-app-url').value.trim(),
  });
  btn.classList.remove('loading');
  if (res.success) {
    Toast.show('Email settings saved ✅', 'success');
    await _emailLoadData();
  } else Toast.show(res.message, 'error');
}

async function emailSendTest() {
  const email = document.getElementById('es-test-email').value.trim();
  const result = document.getElementById('email-test-result');
  if (!email) { Toast.show('Enter a test email address first', 'warning'); return; }

  result.innerHTML = `<div class="d-flex align-center gap-2 text-sm text-muted"><div class="spinner" style="width:16px;height:16px;border-width:2px"></div> Sending test email...</div>`;

  const res = await API.post('email_notifications/index', { action: 'test_send', to_email: email });
  if (res.success) {
    result.innerHTML = `<div style="color:var(--success);font-size:.85rem;font-weight:600">✅ Test email sent successfully to ${_esc(email)}!</div>`;
  } else {
    result.innerHTML = `<div style="color:var(--danger);font-size:.85rem">❌ ${_esc(res.message)}</div>
      ${res.errors?.length ? `<details style="margin-top:.5rem"><summary style="font-size:.8rem;cursor:pointer;color:var(--text-muted)">SMTP Debug Log</summary>
        <pre style="font-size:.72rem;background:#1e293b;color:#86efac;padding:.75rem;border-radius:6px;margin-top:.5rem;overflow-x:auto">${_esc(res.errors.join('\n'))}</pre></details>` : ''}`;
  }
}

// ── Notification Rules Tab ───────────────────────────────
function renderEmailRules(wrap) {
  const rules = _emailData.rules;
  const roles = _emailData.roles;
  const ruleMap = {};
  rules.forEach(r => ruleMap[r.event_type] = r);

  // ── Section definitions ──────────────────────────────────
  const SECTIONS = [
    {
      key: 'jobcards',
      label: '📋 Job Cards',
      desc: 'Notifications triggered by job card activity',
      events: [
        { type: 'job_created', label: 'Job Card Created', desc: 'When a new job card is created' },
        { type: 'job_assigned', label: 'Job Card Assigned', desc: 'When a job card is assigned or reassigned' },
        { type: 'job_status_changed', label: 'Status Changed', desc: 'When a job card status changes' },
        { type: 'job_completed', label: 'Job Card Completed', desc: 'When marked completed or internal complete' },
        { type: 'job_invoiced', label: 'Job Card Invoiced', desc: 'When a job card is marked as invoiced' },
      ],
      hasAssignedPerson: true,
      hasClient: true,
    },
    {
      key: 'checklists',
      label: '✅ Checklists',
      desc: 'Notifications for checklist compliance and reminders',
      events: [
        { type: 'checklist_due', label: 'Checklist Due Today', desc: 'Daily reminder — sent via cron each morning' },
        { type: 'checklist_missed', label: 'Checklist Overdue', desc: 'When a checklist was not completed by its due date' },
        { type: 'checklist_completed', label: 'Checklist Completed', desc: 'When a checklist is submitted' },
      ],
      hasAssignedPerson: true,
      hasClient: false,
    },
    {
      key: 'stock',
      label: '📦 Stock',
      desc: 'Inventory alerts',
      events: [
        { type: 'low_stock', label: 'Low Stock Alert', desc: 'When an item drops below its minimum quantity after a book-out' },
      ],
      hasAssignedPerson: false,
      hasClient: false,
    },
    {
      key: 'hr',
      label: '👥 HR & Leave',
      desc: 'Employee leave and HR notifications',
      events: [
        { type: 'leave_submitted', label: 'Leave Request Submitted', desc: 'When an employee submits a leave request' },
        { type: 'leave_actioned', label: 'Leave Approved / Rejected', desc: 'When leave is approved or rejected by HR' },
      ],
      hasAssignedPerson: false,
      hasClient: false,
    },
  ];

  function roleCheckboxes(eventType, activeRoleIds) {
    if (!roles.length) return '<span class="text-xs text-muted">No roles defined</span>';
    return `<div style="display:flex;flex-direction:column;gap:3px">
      ${roles.map(role => `
        <label style="display:flex;align-items:center;gap:6px;font-size:.8rem;cursor:pointer;white-space:nowrap;padding:1px 0">
          <input type="checkbox" class="rule-role-cb"
            data-rule="${role.id === undefined ? '' : eventType}" data-role-id="${role.id}"
            ${activeRoleIds.includes(String(role.id)) ? 'checked' : ''}>
          <span>${_esc(role.name)}</span>
        </label>`).join('')}
    </div>`;
  }

  function renderSection(section) {
    const rows = section.events.map(ev => {
      const r = ruleMap[ev.type];
      if (!r) return '';
      const activeRoleIds = (r.notify_role_ids || '').split(',').map(x => x.trim()).filter(Boolean);

      const assignedCell = section.hasAssignedPerson
        ? `<td style="text-align:center;vertical-align:top;padding-top:10px">
            <input type="checkbox" class="rule-field"
              data-rule="${ev.type}" data-field="notify_assigned_tech"
              title="Also notify the person directly assigned to this item"
              ${r.notify_assigned_tech == '1' ? 'checked' : ''}>
           </td>`
        : `<td style="text-align:center;vertical-align:top;padding-top:10px">
            <span style="color:var(--border);font-size:.8rem">—</span>
           </td>`;

      const clientCell = section.hasClient
        ? `<td style="text-align:center;vertical-align:top;padding-top:10px">
            <input type="checkbox" class="rule-field"
              data-rule="${ev.type}" data-field="notify_client"
              title="Notify the client contact email"
              ${r.notify_client == '1' ? 'checked' : ''}>
           </td>`
        : `<td style="text-align:center;vertical-align:top;padding-top:10px">
            <span style="color:var(--border);font-size:.8rem">—</span>
           </td>`;

      return `
        <tr id="rule-row-${ev.type}">
          <td style="vertical-align:top;padding-top:10px">
            <div style="font-weight:600;font-size:.875rem">${ev.label}</div>
            <div style="font-size:.75rem;color:var(--text-muted);margin-top:2px">${ev.desc}</div>
          </td>
          <td style="text-align:center;vertical-align:top;padding-top:10px">
            <input type="checkbox" class="rule-field"
              data-rule="${ev.type}" data-field="is_enabled"
              ${r.is_enabled == '1' ? 'checked' : ''}>
          </td>
          <td style="vertical-align:top;padding-top:6px">
            ${roleCheckboxes(ev.type, activeRoleIds)}
          </td>
          ${assignedCell}
          ${clientCell}
          <td style="vertical-align:top;padding-top:8px">
            <input type="text" class="form-control rule-field"
              style="font-size:.8rem;padding:.3rem .5rem;min-width:180px"
              data-rule="${ev.type}" data-field="custom_recipients"
              placeholder="extra@email.com"
              value="${_esc(r.custom_recipients || '')}">
          </td>
        </tr>`;
    }).join('');

    return `
      <div class="card mb-4" style="max-width:1000px">
        <div class="card-header">
          <h5 style="margin:0">${section.label}</h5>
          <div class="text-xs text-muted" style="margin-top:3px">${section.desc}</div>
        </div>
        <div style="overflow-x:auto">
          <table style="min-width:700px">
            <thead>
              <tr style="background:var(--bg-secondary,#f9fafb)">
                <th style="min-width:200px">Event</th>
                <th style="text-align:center;width:60px">Active</th>
                <th style="min-width:160px">Notify Roles</th>
                <th style="text-align:center;width:90px">
                  ${section.hasAssignedPerson
        ? '<span title="Also email the specific person assigned to this job / checklist">Assigned<br><span style=\'font-weight:400\'>Person</span></span>'
        : '—'}
                </th>
                <th style="text-align:center;width:60px">
                  ${section.hasClient ? 'Client' : '—'}
                </th>
                <th style="min-width:200px">Extra Recipients</th>
              </tr>
            </thead>
            <tbody>${rows || '<tr><td colspan="6" class="text-muted text-sm" style="padding:1rem">No rules configured for this section.</td></tr>'}</tbody>
          </table>
        </div>
      </div>`;
  }

  wrap.innerHTML = `
    <div style="max-width:1000px;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap">
      <div class="text-sm text-muted" style="line-height:1.7">
        <strong>Notify Roles</strong> — emails every active user account with that role &nbsp;·&nbsp;
        <strong>Assigned Person</strong> — the specific person assigned to that job / checklist &nbsp;·&nbsp;
        <strong>Client</strong> — the client contact email on the job card &nbsp;·&nbsp;
        <strong>Extra Recipients</strong> — any additional addresses, comma-separated
      </div>
      <button class="btn btn-primary btn-sm" style="flex-shrink:0" onclick="emailSaveRules()">💾 Save All Rules</button>
    </div>
    ${SECTIONS.map(renderSection).join('')}
    <div style="max-width:1000px;display:flex;justify-content:flex-end;margin-top:.25rem">
      <button class="btn btn-primary" onclick="emailSaveRules()">💾 Save All Rules</button>
    </div>
  `;
}

async function emailSaveRules() {
  const btns = document.querySelectorAll('[onclick="emailSaveRules()"]');
  btns.forEach(b => b.classList.add('loading'));

  const rules = [];
  document.querySelectorAll('tr[id^="rule-row-"]').forEach(row => {
    const eventType = row.id.replace('rule-row-', '');
    const rule = { event_type: eventType };

    // Standard checkbox / text fields
    row.querySelectorAll('.rule-field').forEach(el => {
      rule[el.dataset.field] = el.type === 'checkbox' ? (el.checked ? '1' : '0') : el.value;
    });

    // Role checkboxes → notify_role_ids
    const checkedRoles = [...row.querySelectorAll('.rule-role-cb:checked')].map(cb => cb.dataset.roleId);
    rule.notify_role_ids = checkedRoles.join(',');

    rules.push(rule);
  });

  const res = await API.post('email_notifications/index', { action: 'save_rules', rules });
  btns.forEach(b => b.classList.remove('loading'));
  if (res.success) {
    Toast.show('Notification rules saved ✅', 'success');
    await _emailLoadData();
  } else {
    Toast.show(res.message, 'error');
  }
}
// ── Delivery Log Tab ────────────────────────────────────
async function renderEmailLog(wrap) {
  wrap.innerHTML = `<div class="loading-overlay"><div class="spinner"></div></div>`;
  const res = await API.post('email_notifications/index', { action: 'get_log', limit: 50 });
  if (!res.success) { wrap.innerHTML = `<div class="empty-state"><div class="empty-title">${res.message}</div></div>`; return; }
  const logs = res.data.logs || [];

  wrap.innerHTML = `
    <div class="card" style="max-width:1000px">
      <div class="card-header" style="display:flex;justify-content:space-between;align-items:center">
        <h5 style="margin:0">📜 Delivery Log <span class="badge badge-muted">${logs.length} recent</span></h5>
        <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="emailClearLog()">🗑 Clear Old Records</button>
      </div>
      ${logs.length ? `
      <div style="overflow-x:auto">
        <table>
          <thead><tr>
            <th>Time</th><th>Type</th><th>Recipient</th><th>Subject</th><th>Status</th><th>Error</th>
          </tr></thead>
          <tbody>
            ${logs.map(l => `
              <tr>
                <td class="text-sm text-muted" style="white-space:nowrap">${_fmtDt(l.sent_at)}</td>
                <td><span class="badge badge-muted" style="font-size:.68rem">${l.notification_type || '—'}</span></td>
                <td class="text-sm">${_esc(l.recipient_email)}</td>
                <td class="text-sm" style="max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${_esc(l.subject)}</td>
                <td>${l.status === 'sent'
      ? '<span class="badge badge-success">✓ Sent</span>'
      : '<span class="badge badge-danger">✗ Failed</span>'
    }</td>
                <td class="text-xs text-muted" style="max-width:180px;overflow:hidden;text-overflow:ellipsis">${l.error_message ? _esc(l.error_message.substring(0, 80)) : '—'}</td>
              </tr>`).join('')}
          </tbody>
        </table>
      </div>` : `
      <div class="empty-state" style="padding:2rem">
        <div class="empty-icon">📬</div>
        <div class="empty-title">No emails sent yet</div>
        <p class="text-muted text-sm">Sent emails will appear here once the cron runs.</p>
      </div>`}
    </div>
  `;
}

async function emailClearLog() {
  if (!await Modal.confirm('Delete log records older than 30 days?', 'Clear Log', false)) return;
  const res = await API.post('email_notifications/index', { action: 'clear_old', days: 30 });
  if (res.success) { Toast.show('Old records cleared', 'success'); emailTab('log', null); }
  else Toast.show(res.message, 'error');
}

// ── Queue Tab ────────────────────────────────────────────
async function renderEmailQueue(wrap) {
  wrap.innerHTML = `<div class="loading-overlay"><div class="spinner"></div></div>`;
  const [pendingRes, failedRes, statsRes] = await Promise.all([
    API.post('email_notifications/index', { action: 'get_queue', status: 'pending', limit: 50 }),
    API.post('email_notifications/index', { action: 'get_queue', status: 'failed', limit: 50 }),
    API.post('email_notifications/index', { action: 'get_stats' }),
  ]);

  const pending = pendingRes.data?.queue || [];
  const failed = failedRes.data?.queue || [];
  const stats = statsRes.data || {};

  const qMap = {};
  (stats.queue || []).forEach(s => qMap[s.status] = s.cnt);
  const logMap = {};
  (stats.log_30d || []).forEach(s => logMap[s.status] = s.cnt);
  const lastSent = stats.last_sent ? _fmtDt(stats.last_sent) : 'Never';

  const allItems = [...pending, ...failed];

  wrap.innerHTML = `
    <!-- Stats -->
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin-bottom:1.25rem;max-width:1000px">
      ${_statCard('📤 Pending', qMap.pending || 0, '#fef9c3', '#713f12')}
      ${_statCard('✓ Sent (30d)', logMap.sent || 0, '#dcfce7', '#166534')}
      ${_statCard('✗ Failed', qMap.failed || 0, '#fee2e2', '#991b1b')}
      ${_statCard('🕐 Last Sent', lastSent, '#f0f9ff', '#0c4a6e')}
    </div>

    <div class="card" style="max-width:1000px">
      <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem">
        <h5 style="margin:0">📤 Email Queue</h5>
        <div class="d-flex gap-2 flex-wrap">
          <button class="btn btn-ghost btn-sm" onclick="renderEmailQueue(document.getElementById('email-tab-body'))">🔄 Refresh</button>
          ${failed.length ? `<button class="btn btn-outline btn-sm" onclick="emailRetryFailed()">↩️ Retry Failed (${failed.length})</button>` : ''}
          ${allItems.length ? `
            <button class="btn btn-ghost btn-sm" onclick="emailDeleteSelected()" id="eq-delete-sel-btn" style="display:none;color:var(--danger)">🗑 Delete Selected</button>
            <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="emailClearQueue()">🗑 Clear All</button>
          ` : ''}
        </div>
      </div>

      ${allItems.length ? `
      <div style="overflow-x:auto">
        <table>
          <thead><tr>
            <th style="width:36px">
              <input type="checkbox" id="eq-select-all" title="Select all" onchange="emailQueueToggleAll(this.checked)">
            </th>
            <th>Status</th><th>Type</th><th>Recipient</th><th>Subject</th><th>Attempts</th><th>Created</th><th>Error</th><th></th>
          </tr></thead>
          <tbody>
            ${allItems.map(q => `
              <tr id="eq-row-${q.id}">
                <td>
                  <input type="checkbox" class="eq-row-cb" data-id="${q.id}" onchange="emailQueueSelectionChanged()">
                </td>
                <td>${q.status === 'pending'
      ? '<span class="badge badge-warning">Pending</span>'
      : '<span class="badge badge-danger">Failed</span>'
    }</td>
                <td><span class="badge badge-muted" style="font-size:.68rem">${q.notification_type}</span></td>
                <td class="text-sm">${_esc(q.recipient_email)}</td>
                <td class="text-sm" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${_esc(q.subject)}</td>
                <td class="text-sm text-muted">${q.attempts}/3</td>
                <td class="text-sm text-muted" style="white-space:nowrap">${_fmtDt(q.created_at)}</td>
                <td class="text-xs text-muted" style="max-width:140px;overflow:hidden;text-overflow:ellipsis">${q.error_message ? _esc(q.error_message.substring(0, 60)) : '—'}</td>
                <td>
                  <button class="btn btn-ghost btn-sm" style="color:var(--danger);padding:.2rem .4rem"
                    onclick="emailDeleteQueued([${q.id}])" title="Delete this email">🗑</button>
                </td>
              </tr>`).join('')}
          </tbody>
        </table>
      </div>` : `
      <div class="empty-state" style="padding:2rem">
        <div class="empty-icon">✅</div>
        <div class="empty-title">Queue is clear</div>
        <p class="text-muted text-sm">All emails have been delivered.</p>
      </div>`}
    </div>
  `;
}

function emailQueueToggleAll(checked) {
  document.querySelectorAll('.eq-row-cb').forEach(cb => cb.checked = checked);
  emailQueueSelectionChanged();
}

function emailQueueSelectionChanged() {
  const anyChecked = [...document.querySelectorAll('.eq-row-cb')].some(cb => cb.checked);
  const btn = document.getElementById('eq-delete-sel-btn');
  if (btn) btn.style.display = anyChecked ? '' : 'none';
}

async function emailDeleteSelected() {
  const ids = [...document.querySelectorAll('.eq-row-cb:checked')].map(cb => parseInt(cb.dataset.id));
  if (!ids.length) return;
  if (!await Modal.confirm(`Delete ${ids.length} selected email(s) from the queue? This cannot be undone.`, 'Delete Emails', true)) return;
  await emailDeleteQueued(ids);
}

async function emailDeleteQueued(ids) {
  const res = await API.post('email_notifications/index', { action: 'delete_queued', ids });
  if (res.success) {
    Toast.show(res.message, 'success');
    renderEmailQueue(document.getElementById('email-tab-body'));
  } else {
    Toast.show(res.message, 'error');
  }
}

async function emailClearQueue() {
  if (!await Modal.confirm('Remove ALL emails from the queue (pending and failed)? This cannot be undone.', 'Clear Queue', true)) return;
  const res = await API.post('email_notifications/index', { action: 'clear_queue' });
  if (res.success) {
    Toast.show(`Queue cleared — ${res.data.deleted} email(s) removed.`, 'success');
    renderEmailQueue(document.getElementById('email-tab-body'));
  } else {
    Toast.show(res.message, 'error');
  }
}

async function emailRetryFailed() {
  const res = await API.post('email_notifications/index', { action: 'retry_failed' });
  if (res.success) { Toast.show('Failed emails reset — will retry on next cron run', 'success'); renderEmailQueue(document.getElementById('email-tab-body')); }
  else Toast.show(res.message, 'error');
}

// ── System Tools Tab ─────────────────────────────────────
function renderSystemTools(wrap) {
  const CRONS = [
    {
      id: 'send_notifications',
      icon: '📧',
      label: 'Send Notifications',
      desc: 'Processes the email queue and sends pending emails. Also queues checklist due/missed alerts for today. Runs every minute in production.',
      warning: null,
      force: false,
    },
    {
      id: 'generate_checklists',
      icon: '✅',
      label: 'Generate Checklists',
      desc: 'Creates upcoming checklist instances based on templates (daily, weekly, monthly). Marks overdue instances as missed. Runs daily at 02:00.',
      warning: null,
      force: false,
    },
    {
      id: 'allocate_leave',
      icon: '🌴',
      label: 'Allocate Leave',
      desc: 'Allocates monthly leave balances to all active employees. Normally only runs on the 1st of each month.',
      warning: 'This job is date-guarded to run on the 1st of the month. Use Force Run to bypass for testing.',
      force: true,
    },
  ];

  wrap.innerHTML = `
    <div style="max-width:860px">

      <!-- Cron Jobs card -->
      <div class="card mb-4">
        <div class="card-header">
          <h5 style="margin:0">⚙️ Cron Jobs</h5>
          <div class="text-xs text-muted" style="margin-top:3px">Manually trigger background jobs for testing. Output is shown in real time below each job.</div>
        </div>
        <div class="card-body" style="padding:0">
          ${CRONS.map(c => `
            <div style="padding:1.1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap">
              <div style="font-size:1.6rem;line-height:1;flex-shrink:0;margin-top:2px">${c.icon}</div>
              <div style="flex:1;min-width:0">
                <div style="font-weight:600;font-size:.925rem">${c.label}</div>
                <div style="font-size:.8rem;color:var(--text-muted);margin-top:2px;line-height:1.5">${c.desc}</div>
                ${c.warning ? `<div style="font-size:.78rem;color:#b45309;background:#fef9c3;border:1px solid #fde047;border-radius:4px;padding:.3rem .6rem;margin-top:.5rem;display:inline-block">${c.warning}</div>` : ''}
                <div id="cron-output-${c.id}" style="display:none;margin-top:.75rem;background:#0f172a;border-radius:6px;padding:.75rem 1rem;font-family:monospace;font-size:.75rem;color:#94a3b8;white-space:pre-wrap;max-height:260px;overflow-y:auto;line-height:1.6"></div>
              </div>
              <div style="display:flex;gap:.5rem;flex-shrink:0;margin-top:2px">
                <button class="btn btn-primary btn-sm" id="cron-btn-${c.id}" onclick="runCron('${c.id}', false)">
                  ▶ Run
                </button>
                ${c.force ? `
                <button class="btn btn-outline btn-sm" style="color:#b45309;border-color:#b45309" id="cron-force-btn-${c.id}" onclick="runCron('${c.id}', true)" title="Bypass date guard">
                  ⚡ Force Run
                </button>` : ''}
              </div>
            </div>
          `).join('')}
        </div>
      </div>

      <!-- Quick tips -->
      <div class="card">
        <div class="card-header"><h5 style="margin:0">📋 Cron Schedule Reference</h5></div>
        <div class="card-body">
          <div style="background:#1e293b;border-radius:8px;padding:1rem;font-family:monospace;font-size:.78rem;color:#94a3b8;line-height:2">
            <span style="color:#86efac"># Every minute — email queue processor</span><br>
            * * * * * php /home/[user]/public_html/cron/send_notifications.php<br><br>
            <span style="color:#86efac"># Daily at 02:00 — checklist generator + missed marker</span><br>
            0 2 * * * php /home/[user]/public_html/cron/generate_checklists.php<br><br>
            <span style="color:#86efac"># Daily at 01:00 — leave allocation (self-guards to 1st of month)</span><br>
            0 1 * * * php /home/[user]/public_html/cron/allocate_leave.php
          </div>
          <div class="text-xs text-muted mt-3">Replace <code>/home/[user]/public_html/</code> with your actual server path. Add via cPanel → Cron Jobs.</div>
        </div>
      </div>

    </div>
  `;
}

async function runCron(cronId, force = false) {
  const btn = document.getElementById(force ? `cron-force-btn-${cronId}` : `cron-btn-${cronId}`);
  const outputEl = document.getElementById(`cron-output-${cronId}`);
  const allBtns = document.querySelectorAll(`#cron-btn-${cronId}, #cron-force-btn-${cronId}`);

  allBtns.forEach(b => b.classList.add('loading'));
  outputEl.style.display = 'block';
  outputEl.textContent = '⏳ Running…';

  const started = Date.now();
  const res = await API.post('admin/run_cron', { action: 'run', cron: cronId, force: force ? '1' : '0' });
  const elapsed = ((Date.now() - started) / 1000).toFixed(1);

  allBtns.forEach(b => b.classList.remove('loading'));

  if (res.success) {
    const exitOk = res.data?.exit_code === 0;
    const lines = (res.data?.output || '').split('\n');
    const colored = lines.map(line => {
      if (/✓|sent|success|queued|generated|allocated/i.test(line)) return `\x1b[0m<span style="color:#86efac">${_esc(line)}</span>`;
      if (/✗|fail|error|fatal|warn/i.test(line)) return `<span style="color:#fca5a5">${_esc(line)}</span>`;
      if (/skip|not 1st|disabled/i.test(line)) return `<span style="color:#fde68a">${_esc(line)}</span>`;
      return `<span style="color:#94a3b8">${_esc(line)}</span>`;
    }).join('\n');

    outputEl.innerHTML =
      `<span style="color:${exitOk ? '#86efac' : '#fca5a5'};font-weight:700">${exitOk ? '✓ Completed' : '✗ Finished with errors'} in ${res.data?.elapsed ?? elapsed}s (exit: ${res.data?.exit_code})</span>\n\n` +
      colored;
    outputEl.scrollTop = outputEl.scrollHeight;
    Toast.show(`${cronId} — ${exitOk ? 'completed ✅' : 'finished with errors ⚠'}`, exitOk ? 'success' : 'warning');
  } else {
    outputEl.innerHTML = `<span style="color:#fca5a5">❌ ${_esc(res.message)}</span>`;
    Toast.show(res.message, 'error');
  }
}
function _esc(str) {
  if (!str) return '';
  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function _fmtDt(dt) {
  if (!dt) return '—';
  const d = new Date(dt.replace(' ', 'T'));
  return d.toLocaleString('en-ZA', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
}

function _statCard(label, value, bg, color) {
  return `<div style="background:${bg};border-radius:8px;padding:1rem;border:1px solid ${color}22">
    <div style="font-size:.75rem;font-weight:600;color:${color};text-transform:uppercase;letter-spacing:.5px">${label}</div>
    <div style="font-size:1.4rem;font-weight:700;color:${color};margin-top:.25rem">${value}</div>
  </div>`;
}