{{define "management-content"}}
<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-white mb-2">System Management</h1>
      <p class="text-slate-400">Manage services and users</p>
    </div>
  </div>

  <!-- Tabs -->
  <div class="border-b border-slate-800">
    <nav class="flex gap-4">
      <button onclick="switchTab('services')" id="tab-services" class="tab-button px-4 py-2 border-b-2 border-blue-600 text-blue-400 font-medium">
        Services
      </button>
      <button onclick="switchTab('users')" id="tab-users" class="tab-button px-4 py-2 border-b-2 border-transparent text-slate-400 hover:text-slate-300">
        Users
      </button>
    </nav>
  </div>

  <!-- Services Tab -->
  <div id="content-services" class="tab-content">
    <div class="bg-slate-800 rounded-lg border border-slate-700 overflow-hidden">
      <div class="p-4 border-b border-slate-700 flex items-center justify-between">
        <h2 class="text-lg font-semibold text-white">Service Management</h2>
        <div class="flex gap-2">
          <button onclick="loadServiceStatus()" class="text-sm text-slate-400 hover:text-white">Refresh</button>
        </div>
      </div>
      <div class="p-4 space-y-4">
        <!-- Services List -->
        <div id="services-list" class="space-y-4">
          <p class="text-slate-400 text-sm">Loading services...</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Users Tab -->
  <div id="content-users" class="tab-content hidden">
    <div class="bg-slate-800 rounded-lg border border-slate-700 overflow-hidden">
      <div class="p-4 border-b border-slate-700 flex items-center justify-between">
        <h2 class="text-lg font-semibold text-white">User Management</h2>
        <div class="flex gap-2">
          <button onclick="showCreateUserModal()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">
            Create User
          </button>
          <button onclick="loadUsers()" class="text-sm text-slate-400 hover:text-white">Refresh</button>
        </div>
      </div>
      <div id="users-list" class="p-4">
        <p class="text-slate-400 text-sm">Loading...</p>
      </div>
    </div>
  </div>
</div>

<!-- Service Logs Modal -->
<div id="service-logs-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-xl font-semibold text-white" id="service-logs-title">Service Logs</h3>
      <div class="flex items-center gap-2">
        <input type="number" id="logs-lines" value="50" min="10" max="1000" class="w-20 px-2 py-1 bg-slate-900 border border-slate-700 rounded text-white text-sm">
        <button onclick="loadServiceLogs()" class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">Refresh</button>
        <button onclick="closeModal('service-logs-modal')" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 text-white rounded text-sm">Close</button>
      </div>
    </div>
    <div id="service-logs-content" class="flex-1 overflow-y-auto bg-slate-900 rounded p-4 text-sm text-slate-300 font-mono whitespace-pre-wrap">
      Loading logs...
    </div>
  </div>
</div>

<!-- Create User Modal -->
<div id="create-user-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4">
    <h3 class="text-xl font-semibold text-white mb-4">Create User</h3>
    <form id="create-user-form" onsubmit="createUser(event)" class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Username *</label>
        <input type="text" name="username" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Email</label>
        <input type="email" name="email" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Password *</label>
        <input type="password" name="password" required minlength="8" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
        <p class="text-xs text-slate-400 mt-1">Minimum 8 characters required</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Role *</label>
        <select name="role" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
          <option value="viewer">Viewer</option>
          <option value="operator">Operator</option>
          <option value="administrator">Administrator</option>
        </select>
      </div>
      <div class="flex gap-2 justify-end">
        <button type="button" onclick="closeModal('create-user-modal')" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded text-sm">
          Cancel
        </button>
        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">
          Create
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Edit User Modal -->
<div id="edit-user-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4">
    <h3 class="text-xl font-semibold text-white mb-4">Edit User</h3>
    <form id="edit-user-form" onsubmit="updateUser(event)" class="space-y-4">
      <input type="hidden" id="edit-user-id" name="id">
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Username</label>
        <input type="text" id="edit-username" disabled class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-slate-500 text-sm">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Email</label>
        <input type="email" id="edit-email" name="email" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Role</label>
        <select id="edit-role" name="role" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
          <option value="viewer">Viewer</option>
          <option value="operator">Operator</option>
          <option value="administrator">Administrator</option>
        </select>
      </div>
      <div>
        <label class="flex items-center gap-2 text-sm text-slate-300">
          <input type="checkbox" id="edit-active" name="active" class="rounded bg-slate-900 border-slate-700">
          <span>Active</span>
        </label>
      </div>
      <div class="flex gap-2 justify-end">
        <button type="button" onclick="closeModal('edit-user-modal')" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded text-sm">
          Cancel
        </button>
        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">
          Update
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Change Password Modal -->
<div id="change-password-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4">
    <h3 class="text-xl font-semibold text-white mb-4">Change Password</h3>
    <form id="change-password-form" onsubmit="changePassword(event)" class="space-y-4">
      <input type="hidden" id="change-password-user-id" name="id">
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Current Password *</label>
        <input type="password" name="old_password" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">New Password *</label>
        <input type="password" name="new_password" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Confirm New Password *</label>
        <input type="password" name="confirm_password" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
      </div>
      <div class="flex gap-2 justify-end">
        <button type="button" onclick="closeModal('change-password-modal')" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded text-sm">
          Cancel
        </button>
        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">
          Change Password
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  // Check authentication on page load
  (function() {
    const token = localStorage.getItem('atlas_token');
    if (!token) {
      // No token, redirect to login
      window.location.href = '/login?return=' + encodeURIComponent(window.location.pathname);
      return;
    }
  })();

function getAuthHeaders() {
  const token = localStorage.getItem('atlas_token');
  return {
    'Content-Type': 'application/json',
    ...(token ? { 'Authorization': `Bearer ${token}` } : {})
  };
}

function switchTab(tab) {
  // Hide all tabs
  document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
  document.querySelectorAll('.tab-button').forEach(el => {
    el.classList.remove('border-blue-600', 'text-blue-400', 'font-medium');
    el.classList.add('border-transparent', 'text-slate-400');
  });
  
  // Show selected tab
  document.getElementById(`content-${tab}`).classList.remove('hidden');
  document.getElementById(`tab-${tab}`).classList.remove('border-transparent', 'text-slate-400');
  document.getElementById(`tab-${tab}`).classList.add('border-blue-600', 'text-blue-400', 'font-medium');
  
  // Load data for the tab
  if (tab === 'services') loadServiceStatus();
  else if (tab === 'users') loadUsers();
}

function closeModal(modalId) {
  document.getElementById(modalId).classList.add('hidden');
}

// ===== Service Management =====

let currentServiceName = null;

async function loadServiceStatus() {
  const token = localStorage.getItem('atlas_token');
  const listEl = document.getElementById('services-list');
  
  if (!token) {
    listEl.innerHTML = `
      <div class="text-center py-4">
        <p class="text-slate-400 mb-2">Authentication required</p>
        <a href="/login?return=/management" class="text-blue-400 hover:text-blue-300">Click here to login</a>
      </div>
    `;
    return;
  }
  
  listEl.innerHTML = '<p class="text-slate-400 text-sm">Loading services...</p>';
  
  try {
    const res = await fetch('/api/v1/services', { headers: getAuthHeaders() });
    const data = await res.json().catch(() => null);
    
    if (!res.ok) {
      if (res.status === 401) {
        localStorage.removeItem('atlas_token');
        localStorage.removeItem('atlas_user');
        listEl.innerHTML = `
          <div class="text-center py-4">
            <p class="text-slate-400 mb-2">Session expired. Please login again.</p>
            <a href="/login?return=/management" class="text-blue-400 hover:text-blue-300">Click here to login</a>
          </div>
        `;
        return;
      }
      const errorMsg = (data && data.error) ? data.error : `HTTP ${res.status}`;
      listEl.innerHTML = `<p class="text-red-400 text-sm">Error: ${errorMsg}</p>`;
      return;
    }
    
    const services = (data && data.services) ? data.services : [];
    
    if (services.length === 0) {
      listEl.innerHTML = '<p class="text-slate-400 text-sm">No services found</p>';
      return;
    }
    
    // Render all services
    listEl.innerHTML = services.map(svc => {
      const statusBadge = getStatusBadge(svc.status);
      const statusColor = getStatusColor(svc.status);
      
      return `
        <div class="bg-slate-900 rounded-lg border border-slate-700 p-4">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-md font-semibold text-white">${escapeHtml(svc.display_name)}</h3>
            <div class="px-3 py-1 rounded text-xs font-medium ${statusColor}">
              ${statusBadge}
            </div>
          </div>
          <div class="text-xs text-slate-500 font-mono mb-4 max-h-24 overflow-y-auto whitespace-pre-wrap">
            ${escapeHtml((svc.output || '').split('\n').slice(-5).join('\n')) || 'No status information'}
          </div>
          <div class="flex gap-2 flex-wrap">
            <button onclick="serviceAction('${svc.name}', 'start')" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded text-xs">
              Start
            </button>
            <button onclick="serviceAction('${svc.name}', 'stop')" class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded text-xs">
              Stop
            </button>
            <button onclick="serviceAction('${svc.name}', 'restart')" class="px-3 py-1.5 bg-yellow-600 hover:bg-yellow-700 text-white rounded text-xs">
              Restart
            </button>
            <button onclick="serviceAction('${svc.name}', 'reload')" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-xs">
              Reload
            </button>
            <button onclick="showServiceLogs('${svc.name}', '${escapeHtml(svc.display_name)}')" class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-white rounded text-xs">
              View Logs
            </button>
          </div>
        </div>
      `;
    }).join('');
  } catch (err) {
    listEl.innerHTML = `<p class="text-red-400 text-sm">Error: ${err.message}</p>`;
  }
}

function getStatusBadge(status) {
  switch(status) {
    case 'running': return 'Running';
    case 'stopped': return 'Stopped';
    case 'failed': return 'Failed';
    case 'not-found': return 'Not Found';
    default: return 'Unknown';
  }
}

function getStatusColor(status) {
  switch(status) {
    case 'running': return 'bg-green-900 text-green-300';
    case 'stopped': return 'bg-red-900 text-red-300';
    case 'failed': return 'bg-red-900 text-red-300';
    case 'not-found': return 'bg-slate-700 text-slate-300';
    default: return 'bg-slate-700 text-slate-300';
  }
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

async function serviceAction(serviceName, action) {
  const token = localStorage.getItem('atlas_token');
  if (!token) {
    alert('Please login first');
    window.location.href = '/login?return=/management';
    return;
  }
  
  if (!confirm(`Are you sure you want to ${action} ${serviceName}?`)) return;
  
  try {
    const res = await fetch(`/api/v1/services/${action}?service=${encodeURIComponent(serviceName)}`, {
      method: 'POST',
      headers: getAuthHeaders()
    });
    
    const data = await res.json().catch(() => null);
    
    if (res.ok) {
      alert(`${serviceName} ${action}ed successfully`);
      loadServiceStatus();
    } else {
      const errorMsg = (data && data.error) ? data.error : `Failed to ${action} service`;
      alert(`Error: ${errorMsg}`);
    }
  } catch (err) {
    alert(`Error: ${err.message}`);
  }
}

function showServiceLogs(serviceName, displayName) {
  const token = localStorage.getItem('atlas_token');
  if (!token) {
    alert('Please login first');
    window.location.href = '/login?return=/management';
    return;
  }
  
  currentServiceName = serviceName;
  document.getElementById('service-logs-title').textContent = `${displayName} Logs`;
  document.getElementById('service-logs-modal').classList.remove('hidden');
  loadServiceLogs();
}

async function loadServiceLogs() {
  const token = localStorage.getItem('atlas_token');
  if (!token) {
    document.getElementById('service-logs-content').textContent = 'Authentication required';
    return;
  }
  
  if (!currentServiceName) {
    document.getElementById('service-logs-content').textContent = 'No service selected';
    return;
  }
  
  const lines = document.getElementById('logs-lines').value || '50';
  try {
    const res = await fetch(`/api/v1/services/logs?service=${encodeURIComponent(currentServiceName)}&lines=${lines}`, { 
      headers: getAuthHeaders() 
    });
    const data = await res.json().catch(() => null);
    
    if (!res.ok) {
      const errorMsg = (data && data.error) ? data.error : `HTTP ${res.status}`;
      document.getElementById('service-logs-content').textContent = `Error: ${errorMsg}`;
      return;
    }
    
    document.getElementById('service-logs-content').textContent = data.logs || 'No logs available';
  } catch (err) {
    document.getElementById('service-logs-content').textContent = `Error: ${err.message}`;
  }
}

// ===== User Management =====

async function loadUsers(forceRefresh = false) {
  const token = localStorage.getItem('atlas_token');
  const listEl = document.getElementById('users-list');
  
  if (!token) {
    listEl.innerHTML = `
      <div class="text-center py-8">
        <p class="text-slate-400 mb-2">Authentication required to view users</p>
        <a href="/login?return=/management" class="text-blue-400 hover:text-blue-300">Click here to login</a>
      </div>
    `;
    return;
  }
  
  // Show loading state
  listEl.innerHTML = '<p class="text-slate-400 text-sm">Loading users...</p>';
  
  try {
    // Add cache busting parameter if force refresh
    const url = forceRefresh ? `/api/v1/users?_t=${Date.now()}` : '/api/v1/users';
    const res = await fetch(url, { 
      headers: getAuthHeaders(),
      cache: forceRefresh ? 'no-cache' : 'default'
    });
    
    const rawText = await res.text();
    let data = null;
    try {
      data = JSON.parse(rawText);
    } catch (parseErr) {
      console.error('Failed to parse JSON response:', parseErr, 'Raw response:', rawText);
      listEl.innerHTML = '<p class="text-red-400 text-sm">Error: Invalid JSON response from server</p>';
      return;
    }
    
    if (!res.ok) {
      if (res.status === 401) {
        localStorage.removeItem('atlas_token');
        localStorage.removeItem('atlas_user');
        listEl.innerHTML = `
          <div class="text-center py-8">
            <p class="text-slate-400 mb-2">Session expired. Please login again.</p>
            <a href="/login?return=/management" class="text-blue-400 hover:text-blue-300">Click here to login</a>
          </div>
        `;
        return;
      }
      const errorMsg = (data && data.error) ? data.error : `HTTP ${res.status}`;
      listEl.innerHTML = `<p class="text-red-400 text-sm">Error: ${errorMsg}</p>`;
      return;
    }
    
    if (!data || !Array.isArray(data)) {
      console.error('Invalid response format:', data);
      listEl.innerHTML = '<p class="text-red-400 text-sm">Error: Invalid response format (expected array)</p>';
      return;
    }
    
    console.log(`Loaded ${data.length} users:`, data);
    
    if (data.length === 0) {
      listEl.innerHTML = '<p class="text-slate-400 text-sm">No users found</p>';
      return;
    }
    
    // Sort users by ID to ensure consistent ordering
    const sortedUsers = data.sort((a, b) => {
      const idA = (a.id || '').toLowerCase();
      const idB = (b.id || '').toLowerCase();
      return idA.localeCompare(idB);
    });
    
    listEl.innerHTML = sortedUsers.map(user => {
      // Escape HTML to prevent XSS
      const escapeHtml = (text) => {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
      };
      
      const username = escapeHtml(user.username || 'N/A');
      const email = user.email ? escapeHtml(user.email) : '';
      const userId = escapeHtml(user.id || 'N/A');
      const role = escapeHtml(user.role || 'N/A');
      const active = user.active !== false;
      
      return `
      <div class="border-b border-slate-700 last:border-0 py-4">
        <div class="flex items-start justify-between">
          <div class="flex-1">
            <div class="flex items-center gap-3 mb-2">
              <h3 class="text-lg font-semibold text-white">${username}</h3>
              ${active ? '<span class="px-2 py-1 rounded text-xs font-medium bg-green-900 text-green-300">Active</span>' : '<span class="px-2 py-1 rounded text-xs font-medium bg-slate-700 text-slate-300">Inactive</span>'}
              <span class="px-2 py-1 rounded text-xs font-medium bg-blue-900 text-blue-300">${role}</span>
            </div>
            <div class="text-sm text-slate-400 space-y-1">
              ${email ? `<p>Email: <span class="text-slate-300">${email}</span></p>` : ''}
              <p>ID: <span class="text-slate-300 font-mono text-xs">${userId}</span></p>
            </div>
          </div>
          <div class="flex gap-2 ml-4">
            <button onclick="showEditUserModal('${userId}')" class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-white rounded text-sm">
              Edit
            </button>
            <button onclick="showChangePasswordModal('${userId}', '${username}')" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">
              Change Password
            </button>
            <button onclick="deleteUser('${userId}', '${username}')" class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded text-sm">
              Delete
            </button>
          </div>
        </div>
      </div>
    `;
    }).join('');
  } catch (err) {
    document.getElementById('users-list').innerHTML = `<p class="text-red-400 text-sm">Error: ${err.message}</p>`;
  }
}

function showCreateUserModal() {
  // Reset form when opening modal
  const form = document.getElementById('create-user-form');
  if (form) {
    form.reset();
  }
  document.getElementById('create-user-modal').classList.remove('hidden');
}

// Flag to prevent double submission
let isCreatingUser = false;

async function createUser(e) {
  e.preventDefault();
  
  // Prevent double submission
  if (isCreatingUser) {
    console.log('User creation already in progress, ignoring duplicate submission');
    return;
  }
  
  isCreatingUser = true;
  const submitButton = e.target.querySelector('button[type="submit"]');
  const originalButtonText = submitButton ? submitButton.textContent : '';
  
  // Disable submit button to prevent double clicks
  if (submitButton) {
    submitButton.disabled = true;
    submitButton.textContent = 'Creating...';
  }
  
  const formData = new FormData(e.target);
  
  // Frontend validation
  const password = formData.get('password');
  if (password && password.length < 8) {
    alert('Error: Password must be at least 8 characters long');
    isCreatingUser = false;
    if (submitButton) {
      submitButton.disabled = false;
      submitButton.textContent = originalButtonText;
    }
    return;
  }
  
  try {
    const res = await fetch('/api/v1/users', {
      method: 'POST',
      headers: getAuthHeaders(),
      body: JSON.stringify({
        username: formData.get('username'),
        email: formData.get('email') || '',
        password: formData.get('password'),
        role: formData.get('role')
      })
    });
    
    const rawText = await res.text();
    let data = null;
    try {
      data = JSON.parse(rawText);
    } catch (parseErr) {
      console.error('Failed to parse create user response:', parseErr, 'Raw:', rawText);
      alert('Error: Invalid response from server');
      return;
    }
    
    console.log('Create user response:', res.status, data);
    
    if (res.ok || res.status === 201) {
      console.log('User created successfully, refreshing list...');
      // Reset form before closing modal
      e.target.reset();
      closeModal('create-user-modal');
      // Force reload users list - add cache busting
      await loadUsers(true);
      alert('User created successfully');
    } else {
      // Extract error message from different possible formats
      let errorMsg = 'Failed to create user';
      if (data) {
        // Try structured error format: {code, message, details}
        if (data.message) {
          errorMsg = data.message;
          // Append details if available
          if (data.details) {
            errorMsg += ': ' + data.details;
          }
        } 
        // Fallback to simple error format: {error}
        else if (data.error) {
          errorMsg = data.error;
        }
      }
      console.error('Create user failed:', errorMsg, data);
      alert(`Error: ${errorMsg}`);
    }
  } catch (err) {
    alert(`Error: ${err.message}`);
  } finally {
    // Re-enable submit button
    isCreatingUser = false;
    if (submitButton) {
      submitButton.disabled = false;
      submitButton.textContent = originalButtonText;
    }
  }
}

async function showEditUserModal(userId) {
  try {
    const res = await fetch(`/api/v1/users/${userId}`, { headers: getAuthHeaders() });
    if (!res.ok) {
      const err = await res.json();
      alert(`Error: ${err.error || 'Failed to load user'}`);
      return;
    }
    
    const user = await res.json();
    document.getElementById('edit-user-id').value = user.id;
    document.getElementById('edit-username').value = user.username || '';
    document.getElementById('edit-email').value = user.email || '';
    document.getElementById('edit-role').value = user.role || 'Viewer';
    document.getElementById('edit-active').checked = user.active !== false;
    
    document.getElementById('edit-user-modal').classList.remove('hidden');
  } catch (err) {
    alert(`Error: ${err.message}`);
  }
}

async function updateUser(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const userId = formData.get('id');
  
  try {
    const res = await fetch(`/api/v1/users/${userId}`, {
      method: 'PUT',
      headers: getAuthHeaders(),
      body: JSON.stringify({
        email: formData.get('email') || '',
        role: formData.get('role'),
        active: formData.get('active') === 'on'
      })
    });
    
    if (res.ok) {
      closeModal('edit-user-modal');
      await loadUsers(true);
      alert('User updated successfully');
    } else {
      const err = await res.json();
      alert(`Error: ${err.error || 'Failed to update user'}`);
    }
  } catch (err) {
    alert(`Error: ${err.message}`);
  }
}

async function deleteUser(userId, username) {
  if (!confirm(`Are you sure you want to delete user "${username}"? This action cannot be undone.`)) return;
  
  try {
    const res = await fetch(`/api/v1/users/${userId}`, {
      method: 'DELETE',
      headers: getAuthHeaders()
    });
    
    if (res.ok) {
      await loadUsers(true);
      alert('User deleted successfully');
    } else {
      const err = await res.json();
      alert(`Error: ${err.error || 'Failed to delete user'}`);
    }
  } catch (err) {
    alert(`Error: ${err.message}`);
  }
}

function showChangePasswordModal(userId, username) {
  document.getElementById('change-password-user-id').value = userId;
  document.getElementById('change-password-modal').classList.remove('hidden');
}

async function changePassword(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const userId = document.getElementById('change-password-user-id').value;
  const newPassword = formData.get('new_password');
  const confirmPassword = formData.get('confirm_password');
  
  if (newPassword !== confirmPassword) {
    alert('New passwords do not match');
    return;
  }
  
  try {
    const res = await fetch(`/api/v1/users/${userId}/password`, {
      method: 'PUT',
      headers: getAuthHeaders(),
      body: JSON.stringify({
        old_password: formData.get('old_password'),
        new_password: newPassword
      })
    });
    
    if (res.ok) {
      closeModal('change-password-modal');
      e.target.reset();
      alert('Password changed successfully');
    } else {
      const err = await res.json();
      alert(`Error: ${err.error || 'Failed to change password'}`);
    }
  } catch (err) {
    alert(`Error: ${err.message}`);
  }
}

// Load initial data when page loads
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    loadServiceStatus();
    // Load users if on users tab
    const usersTab = document.getElementById('tab-users');
    if (usersTab && usersTab.classList.contains('border-blue-600')) {
      loadUsers();
    }
  });
} else {
  loadServiceStatus();
  // Load users if on users tab
  const usersTab = document.getElementById('tab-users');
  if (usersTab && usersTab.classList.contains('border-blue-600')) {
    loadUsers();
  }
}
</script>
{{end}}

{{define "management.html"}}
{{template "base" .}}
{{end}}