// ============================================================
// Elegant Work — Roles & Permissions Manager
// Rendered inside Settings page
// ============================================================

const CF_MODULES = [
  { key: 'dashboard', label: '🏠 Dashboard', actions: ['view'] },
  { key: 'clients', label: '🏢 Clients', actions: ['view', 'create', 'edit', 'delete'] },
  { key: 'employees', label: '👥 Employees', actions: ['view', 'create', 'edit', 'delete', 'reports'] },
  { key: 'projects', label: '📁 Projects', actions: ['view', 'create', 'edit', 'delete'] },
  { key: 'jobcards', label: '🔧 Job Cards', actions: ['view', 'view_own', 'create', 'edit', 'delete', 'reports', 'view_costing'] },
  { key: 'stock', label: '📦 Stock Control', actions: ['view', 'create', 'edit', 'delete', 'reports'] },
  { key: 'fleet', label: '🚗 Fleet', actions: ['view', 'create', 'edit', 'delete', 'reports'] },
  { key: 'slips', label: '🧾 Slip Manager', actions: ['view', 'create', 'edit', 'delete', 'reports'] },
  { key: 'cashflow', label: '💰 Cash Flow', actions: ['view', 'create', 'edit', 'delete', 'reports'] },
  { key: 'checklists', label: '✅ Checklists', actions: ['view', 'create', 'edit', 'delete'] },
  { key: 'calendar', label: '📅 Calendar', actions: ['view', 'create', 'edit', 'delete'] },
  { key: 'payroll', label: '💼 Payroll', actions: ['view', 'create', 'edit', 'delete', 'reports'] },
  { key: 'settings', label: '⚙️ Settings', actions: ['view', 'edit'] },
  { key: 'users', label: '👤 Users', actions: ['view', 'create', 'edit', 'delete'] },
];

const ACTION_LABELS = { view: 'View', create: 'Create', edit: 'Edit', delete: 'Delete', reports: 'Reports', view_own: 'Own Only', view_costing: 'Costing' };
const ACTION_COLORS = {
  view: { bg: '#eff6ff', color: '#1d4ed8' },
  create: { bg: '#f0fdf4', color: '#15803d' },
  edit: { bg: '#fefce8', color: '#92400e' },
  delete: { bg: '#fff1f2', color: '#dc2626' },
  reports: { bg: '#fdf4ff', color: '#7c3aed' },
  view_own: { bg: '#fff7ed', color: '#c2410c' },
  view_costing: { bg: '#ecfdf5', color: '#065f46' },
};

// ── Main entry — render roles table into a container ──────────
async function renderRolesSection(containerId) {
  const wrap = document.getElementById(containerId);
  if (!wrap) return;
  wrap.innerHTML = '<div class="loading-overlay" style="position:relative;height:80px"><div class="spinner"></div></div>';

  const res = await API.post('roles/list', {});
  if (!res.success) { wrap.innerHTML = `<p class="text-danger p-3">Failed to load roles.</p>`; return; }

  const roles = res.data.roles;
  const isAdmin = Auth.isAdmin();

  wrap.innerHTML = `
    <div class="table-wrap" style="border:none;border-radius:0">
      <table>
        <thead>
          <tr>
            <th>Role</th>
            <th>Description</th>
            <th>Active Users</th>
            <th>Type</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          ${roles.map(r => `
          <tr>
            <td style="font-weight:700">${r.name}</td>
            <td class="text-sm text-muted">${r.description || '—'}</td>
            <td>
              <span class="badge" style="background:#f0f9ff;color:#0369a1">${r.user_count} user${r.user_count != 1 ? 's' : ''}</span>
            </td>
            <td>
              ${r.is_system
      ? '<span class="badge" style="background:#fef9c3;color:#92400e">🔒 System</span>'
      : '<span class="badge badge-muted">Custom</span>'}
            </td>
            <td style="white-space:nowrap">
              <button class="btn btn-ghost btn-sm" onclick="openPermissionsModal(${r.id},'${r.name.replace(/'/g, "\\'")}',${r.is_system})">
                🛡️ Permissions
              </button>
              ${!r.is_system && isAdmin ? `
              <button class="btn btn-ghost btn-sm" onclick="openEditRoleModal(${r.id},'${r.name.replace(/'/g, "\\'")}','${(r.description || '').replace(/'/g, "\\'")}')">✏️</button>
              <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="deleteRole(${r.id},'${r.name.replace(/'/g, "\\'")}',${r.user_count})">🗑</button>
              ` : ''}
            </td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>`;
}

// ── Add Role ──────────────────────────────────────────────────
function openAddRoleModal() {
  Modal.open({
    id: 'role-modal',
    title: '+ New Role',
    body: `<form id="role-form">
      <div class="form-group">
        <label class="form-label">Role Name <span class="required">*</span></label>
        <input name="name" class="form-control" placeholder="e.g. Sales, Support, Operations" required>
      </div>
      <div class="form-group">
        <label class="form-label">Description</label>
        <input name="description" class="form-control" placeholder="Brief description of this role's responsibilities">
      </div>
    </form>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitRole(null)"><span class="btn-text">Create Role</span></button>`
  });
}

function openEditRoleModal(id, name, description) {
  Modal.open({
    id: 'role-modal',
    title: `✏️ Edit Role`,
    body: `<form id="role-form">
      <div class="form-group">
        <label class="form-label">Role Name <span class="required">*</span></label>
        <input name="name" class="form-control" value="${name}" required>
      </div>
      <div class="form-group">
        <label class="form-label">Description</label>
        <input name="description" class="form-control" value="${description}">
      </div>
    </form>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitRole(${id})"><span class="btn-text">Save Changes</span></button>`
  });
}

async function submitRole(id) {
  const btn = document.querySelector('#modal-role-modal .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('role-form');
  if (!data.name) { Toast.show('Role name required.', 'error'); if (btn) btn.classList.remove('loading'); return; }

  const res = await API.post('roles/save', {
    action: id ? 'update' : 'create',
    id: id || undefined,
    ...data
  });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show(id ? 'Role updated.' : 'Role created.', 'success');
    Modal.close();
    renderRolesSection('roles-table-wrap');
  } else Toast.show(res.message, 'error');
}

async function deleteRole(id, name, userCount) {
  if (userCount > 0) {
    Toast.show(`Cannot delete "${name}" — ${userCount} user(s) assigned. Reassign them first.`, 'error');
    return;
  }
  if (!confirm(`Delete role "${name}"? This cannot be undone.`)) return;
  const res = await API.post('roles/delete', { id });
  if (res.success) { Toast.show('Role deleted.', 'success'); renderRolesSection('roles-table-wrap'); }
  else Toast.show(res.message, 'error');
}

// ── Permissions Modal ─────────────────────────────────────────
async function openPermissionsModal(roleId, roleName, isSystem) {
  Modal.open({
    id: 'perms-modal',
    title: `🛡️ Permissions — ${roleName}`,
    size: 'lg',
    body: `<div id="perms-body"><div class="loading-overlay" style="position:relative;height:120px"><div class="spinner"></div></div></div>`,
    footer: isSystem
      ? `<div style="color:#92400e;font-size:.875rem">🔒 Admin permissions are fixed and cannot be changed.</div><button class="btn btn-ghost" onclick="Modal.close()">Close</button>`
      : `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
         <button class="btn btn-primary" onclick="savePermissions(${roleId})"><span class="btn-text">Save Permissions</span></button>`
  });

  const res = await API.post('roles/permissions', { action: 'get', role_id: roleId });
  const body = document.getElementById('perms-body');
  if (!body) return;

  if (!res.success) { body.innerHTML = `<p class="text-danger">Failed to load permissions.</p>`; return; }

  // Build a lookup: module.action => allowed
  const current = {};
  (res.data.permissions || []).forEach(p => { current[`${p.module}.${p.action}`] = !!parseInt(p.allowed); });

  body.innerHTML = `
    <div style="margin-bottom:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">
      <span style="font-size:.8rem;color:#6b7280">Quick set:</span>
      <button class="btn btn-ghost btn-sm" onclick="permsSelectAll(true)">✅ All On</button>
      <button class="btn btn-ghost btn-sm" onclick="permsSelectAll(false)">❌ All Off</button>
      <button class="btn btn-ghost btn-sm" onclick="permsSelectViewOnly()">👁️ View Only</button>
    </div>
    <div style="overflow-x:auto">
    <table style="width:100%;border-collapse:collapse;font-size:.875rem">
      <thead>
        <tr>
          <th style="padding:8px 12px;text-align:left;background:#f8fafc;border-bottom:2px solid var(--border);width:160px">Module</th>
          ${['view', 'view_own', 'create', 'edit', 'delete', 'reports', 'view_costing'].map(a => `
          <th style="padding:8px 12px;text-align:center;background:#f8fafc;border-bottom:2px solid var(--border)">
            <span style="display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;background:${ACTION_COLORS[a]?.bg || '#f3f4f6'};color:${ACTION_COLORS[a]?.color || '#374151'}">
              ${ACTION_LABELS[a] || a}
            </span>
          </th>`).join('')}
        </tr>
      </thead>
      <tbody>
        ${CF_MODULES.map((mod, i) => `
        <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
          <td style="padding:10px 12px;font-weight:600;border-bottom:1px solid var(--border)">${mod.label}</td>
          ${['view', 'view_own', 'create', 'edit', 'delete', 'reports', 'view_costing'].map(act => {
    const key = `${mod.key}.${act}`;
    const hasAction = mod.actions.includes(act);
    const checked = hasAction && (current[key] !== false) && (current[key] !== undefined ? current[key] : false);
    return `<td style="padding:10px 12px;text-align:center;border-bottom:1px solid var(--border)">
              ${hasAction
        ? `<input type="checkbox" data-perm="${key}" ${checked ? 'checked' : ''} ${isSystem ? 'disabled' : ''}
                     style="width:18px;height:18px;cursor:pointer;accent-color:#1b4b8a"
                     onchange="permsUpdateRow('${mod.key}')">`
        : `<span style="color:#e5e7eb">—</span>`}
            </td>`;
  }).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
    </div>
    <p style="margin-top:12px;font-size:.75rem;color:#9ca3af">
      💡 Disabling <strong>View</strong> hides the module from the sidebar entirely.
      Actions only apply if View is also enabled.
    </p>`;
}

function permsSelectAll(on) {
  document.querySelectorAll('#perms-body input[data-perm]').forEach(cb => { if (!cb.disabled) cb.checked = on; });
}

function permsSelectViewOnly() {
  document.querySelectorAll('#perms-body input[data-perm]').forEach(cb => {
    if (cb.disabled) return;
    const isView = cb.dataset.perm.endsWith('.view');
    cb.checked = isView;
  });
}

function permsUpdateRow(moduleKey) {
  // If view is unchecked, uncheck all other actions for that module
  const viewCb = document.querySelector(`input[data-perm="${moduleKey}.view"]`);
  if (viewCb && !viewCb.checked) {
    ['create', 'edit', 'delete'].forEach(a => {
      const cb = document.querySelector(`input[data-perm="${moduleKey}.${a}"]`);
      if (cb) cb.checked = false;
    });
  }
}

async function savePermissions(roleId) {
  const btn = document.querySelector('#modal-perms-modal .btn-primary');
  if (btn) btn.classList.add('loading');

  const matrix = {};
  document.querySelectorAll('#perms-body input[data-perm]').forEach(cb => {
    matrix[cb.dataset.perm] = cb.checked;
  });

  const res = await API.post('roles/permissions', { action: 'set', role_id: roleId, matrix: JSON.stringify(matrix) });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show('Permissions saved. ✅', 'success');
    Modal.close();
    // Refresh own permissions if editing current user's role
    const me = Auth.getCurrentUser();
    if (me && parseInt(me.role_id) === roleId) {
      await Auth.loadPermissions();
      Toast.show('Your permissions were updated — refreshing navigation.', 'info');
      Router.navigate('settings');
    }
  } else Toast.show(res.message, 'error');
}