// ═══════════════════════════════════════════════════════
// Chmod Calculator
// ═══════════════════════════════════════════════════════
async function chmodFromNumeric() {
  const val = document.getElementById('chmodNumeric').value.trim();
  if (!val || !/^[0-7]{3,4}$/.test(val)) return;
  const d = await apiPost('/api/chmod/calculate', { numeric: val });
  if (d.success) updateChmodUI(d);
}
async function chmodFromSymbolic() {
  const val = document.getElementById('chmodSymbolic').value.trim();
  if (!val || val.length < 9) return;
  const d = await apiPost('/api/chmod/calculate', { symbolic: val });
  if (d.success) updateChmodUI(d);
}
function updateChmodUI(d) {
  document.getElementById('chmodNumeric').value = d.numeric;
  document.getElementById('chmodSymbolic').value = d.symbolic;
  document.getElementById('chmodCommand').textContent = `chmod ${d.numeric} filename`;
  const roles = ['owner', 'group', 'others'];
  const perms = ['read', 'write', 'execute'];
  let html = '<div style="display:grid;grid-template-columns:100px repeat(3,1fr);gap:6px;font-size:0.82rem;">';
  html += '<div></div>' + perms.map(p => `<div style="text-align:center;color:var(--text-muted);text-transform:uppercase;font-size:0.7rem;font-weight:600;">${p}</div>`).join('');
  for (const role of roles) {
    html += `<div style="color:var(--text-secondary);font-weight:600;text-transform:capitalize;">${role}</div>`;
    for (const perm of perms) {
      const on = d[role][perm];
      html += `<div style="text-align:center;padding:6px;background:${on ? 'var(--green)' : 'var(--bg-input)'};color:${on ? '#fff' : 'var(--text-muted)'};border-radius:var(--radius-sm);font-weight:600;border:1px solid var(--border);">${on ? '✓' : '—'}</div>`;
    }
  }
  html += '</div>';
  document.getElementById('chmodMatrix').innerHTML = html;
  setStatus('chmodStatus', 'success', `${d.numeric} = ${d.symbolic} ✓`);
}
setTimeout(chmodFromNumeric, 200);