{{ define "users_title" }}User Management{{ end }}
{{ define "users_content" }}
<div class="space-y-6">
  <div class="flex justify-between items-center">
    <h1 class="text-2xl font-semibold text-white">User Management</h1>
    <button id="add-user-btn" class="px-4 py-2 bg-primary-600 hover:bg-primary-500 rounded text-white">
      Add New User
    </button>
  </div>

  <!-- Current User Info -->
  <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
    <h2 class="text-lg font-semibold text-white mb-2">Current User</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
      <div>
        <span class="text-gray-400">Username:</span>
        <span class="text-white ml-2" id="current-username">{{ .CurrentUser.Username }}</span>
      </div>
      <div>
        <span class="text-gray-400">Role:</span>
        <span class="text-white ml-2 capitalize" id="current-role">{{ .CurrentUser.Role }}</span>
      </div>
      <div>
        <span class="text-gray-400">Last Login:</span>
        <span class="text-white ml-2" id="current-last-login">
          {{ if .CurrentUser.LastLogin }}{{ .CurrentUser.LastLogin.Format "2006-01-02 15:04:05" }}{{ else }}Never{{ end }}
        </span>
      </div>
    </div>
  </div>

  <!-- Users Table -->
  <div class="bg-gray-800 border border-gray-700 rounded-lg">
    <div class="p-4 border-b border-gray-700">
      <h2 class="text-lg font-semibold text-white">All Users</h2>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-700">
        <thead class="bg-gray-800">
          <tr>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Username</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Email</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Role</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Last Login</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Created</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody id="users-table" class="bg-gray-900 divide-y divide-gray-800">
          <!-- Dynamic content will be inserted here -->
        </tbody>
      </table>
    </div>
  </div>

  <!-- API Keys Section -->
  <div class="bg-gray-800 border border-gray-700 rounded-lg">
    <div class="p-4 border-b border-gray-700 flex justify-between items-center">
      <h2 class="text-lg font-semibold text-white">My API Keys</h2>
      <button id="add-apikey-btn" class="px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded text-white text-sm">
        Generate API Key
      </button>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-700">
        <thead class="bg-gray-800">
          <tr>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Name</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Key</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Last Used</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Expires</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody id="apikeys-table" class="bg-gray-900 divide-y divide-gray-800">
          <!-- Dynamic content will be inserted here -->
        </tbody>
      </table>
    </div>
  </div>

  <!-- User Form Modal -->
  <div id="user-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
      <div class="bg-gray-800 rounded-lg max-w-md w-full">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
          <h3 id="user-modal-title" class="text-lg font-semibold text-white">Add New User</h3>
          <button id="close-user-modal" class="text-gray-400 hover:text-white">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
        <form id="user-form" class="p-4 space-y-4">
          <input type="hidden" id="user-id" name="id">
          <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
          
          <div>
            <label class="block text-sm text-gray-300 mb-1">Username</label>
            <input type="text" id="user-username" name="username" required
                   class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100"
                   placeholder="Enter username">
            <div id="username-error" class="text-red-400 text-sm mt-1 hidden"></div>
          </div>

          <div id="password-field">
            <label class="block text-sm text-gray-300 mb-1">Password</label>
            <input type="password" id="user-password" name="password" required
                   class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100"
                   placeholder="Enter password">
            <div id="password-error" class="text-red-400 text-sm mt-1 hidden"></div>
            <div class="text-xs text-gray-400 mt-1">
              Password must be at least 8 characters with uppercase, lowercase, digit, and special character.
            </div>
          </div>

          <div>
            <label class="block text-sm text-gray-300 mb-1">Email (Optional)</label>
            <input type="email" id="user-email" name="email"
                   class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100"
                   placeholder="Enter email address">
            <div id="email-error" class="text-red-400 text-sm mt-1 hidden"></div>
          </div>

          <div>
            <label class="block text-sm text-gray-300 mb-1">Role</label>
            <select id="user-role" name="role" required
                    class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100">
              <option value="readonly">Read Only</option>
              <option value="user">User</option>
              <option value="admin">Admin</option>
            </select>
          </div>

          <div class="flex items-center">
            <input type="checkbox" id="user-active" name="active" checked
                   class="mr-2 h-4 w-4 text-primary-600 bg-gray-900 border-gray-700 rounded">
            <label for="user-active" class="text-sm text-gray-300">Active</label>
          </div>

          <div class="flex justify-end space-x-3 pt-4">
            <button type="button" id="cancel-user-btn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-white">
              Cancel
            </button>
            <button type="submit" class="px-4 py-2 bg-primary-600 hover:bg-primary-500 rounded text-white">
              Save User
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- API Key Form Modal -->
  <div id="apikey-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
      <div class="bg-gray-800 rounded-lg max-w-md w-full">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
          <h3 class="text-lg font-semibold text-white">Generate API Key</h3>
          <button id="close-apikey-modal" class="text-gray-400 hover:text-white">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
        <form id="apikey-form" class="p-4 space-y-4">
          <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
          
          <div>
            <label class="block text-sm text-gray-300 mb-1">Name</label>
            <input type="text" id="apikey-name" name="name" required
                   class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100"
                   placeholder="e.g., Production API, Mobile App">
            <div id="apikey-name-error" class="text-red-400 text-sm mt-1 hidden"></div>
          </div>

          <div>
            <label class="block text-sm text-gray-300 mb-1">Expires In (Days)</label>
            <select id="apikey-expires" name="expires_in"
                    class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100">
              <option value="">Never</option>
              <option value="30">30 days</option>
              <option value="90">90 days</option>
              <option value="365">1 year</option>
            </select>
          </div>

          <div class="flex justify-end space-x-3 pt-4">
            <button type="button" id="cancel-apikey-btn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-white">
              Cancel
            </button>
            <button type="submit" class="px-4 py-2 bg-primary-600 hover:bg-primary-500 rounded text-white">
              Generate Key
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- API Key Display Modal -->
  <div id="apikey-display-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
      <div class="bg-gray-800 rounded-lg max-w-lg w-full">
        <div class="p-4 border-b border-gray-700">
          <h3 class="text-lg font-semibold text-white">API Key Generated</h3>
        </div>
        <div class="p-4 space-y-4">
          <div class="bg-yellow-900 border border-yellow-700 rounded p-3">
            <div class="text-yellow-200 text-sm font-medium">⚠️ Important</div>
            <div class="text-yellow-100 text-sm mt-1">
              Save this API key securely. It will not be shown again.
            </div>
          </div>
          
          <div>
            <label class="block text-sm text-gray-300 mb-1">API Key</label>
            <div class="flex">
              <input type="text" id="generated-apikey" readonly
                     class="flex-1 bg-gray-900 border border-gray-700 rounded-l px-3 py-2 text-gray-100 font-mono text-sm">
              <button id="copy-apikey" class="px-3 py-2 bg-primary-600 hover:bg-primary-500 rounded-r text-white text-sm">
                Copy
              </button>
            </div>
          </div>

          <div class="flex justify-end">
            <button id="close-apikey-display" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-white">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
let currentUsers = [];
let currentAPIKeys = [];
let editingUserId = null;
const currentUserId = parseInt('{{ .CurrentUser.ID }}');

// Load initial data
document.addEventListener('DOMContentLoaded', function() {
  loadUsers();
  loadAPIKeys();
});

// Event listeners
document.getElementById('add-user-btn').addEventListener('click', function() {
  showUserModal();
});

document.getElementById('add-apikey-btn').addEventListener('click', function() {
  showAPIKeyModal();
});

document.getElementById('close-user-modal').addEventListener('click', hideUserModal);
document.getElementById('cancel-user-btn').addEventListener('click', hideUserModal);
document.getElementById('close-apikey-modal').addEventListener('click', hideAPIKeyModal);
document.getElementById('cancel-apikey-btn').addEventListener('click', hideAPIKeyModal);
document.getElementById('close-apikey-display').addEventListener('click', hideAPIKeyDisplayModal);

document.getElementById('user-form').addEventListener('submit', function(e) {
  e.preventDefault();
  saveUser();
});

document.getElementById('apikey-form').addEventListener('submit', function(e) {
  e.preventDefault();
  generateAPIKey();
});

document.getElementById('copy-apikey').addEventListener('click', function() {
  const input = document.getElementById('generated-apikey');
  input.select();
  document.execCommand('copy');
  this.textContent = 'Copied!';
  setTimeout(() => this.textContent = 'Copy', 2000);
});

// Load users
async function loadUsers() {
  try {
    const response = await fetch('/api/users');
    const data = await response.json();
    
    if (response.ok) {
      currentUsers = data.users || [];
      renderUsersTable(currentUsers);
    } else {
      console.error('Failed to load users:', data.error);
    }
  } catch (error) {
    console.error('Failed to load users:', error);
  }
}

// Load API keys
async function loadAPIKeys() {
  try {
    const response = await fetch('/api/apikeys');
    const data = await response.json();
    
    if (response.ok) {
      currentAPIKeys = data.api_keys || [];
      renderAPIKeysTable(currentAPIKeys);
    } else {
      console.error('Failed to load API keys:', data.error);
    }
  } catch (error) {
    console.error('Failed to load API keys:', error);
  }
}

// Render users table
function renderUsersTable(users) {
  const tbody = document.getElementById('users-table');
  tbody.innerHTML = '';

  if (users.length === 0) {
    tbody.innerHTML = '<tr><td colspan="7" class="px-4 py-4 text-center text-gray-400">No users found</td></tr>';
    return;
  }

  users.forEach(user => {
    const row = document.createElement('tr');
    row.className = 'hover:bg-gray-800';
    
    const statusBadge = user.active 
      ? '<span class="px-2 py-1 text-xs bg-green-600 text-white rounded">Active</span>'
      : '<span class="px-2 py-1 text-xs bg-red-600 text-white rounded">Inactive</span>';
    
    const roleBadge = getRoleBadge(user.role);
    const lastLogin = user.last_login ? new Date(user.last_login).toLocaleString() : 'Never';
    const created = new Date(user.created_at).toLocaleDateString();
    
    row.innerHTML = `
      <td class="px-4 py-2 text-sm text-gray-300 font-medium">${user.username}</td>
      <td class="px-4 py-2 text-sm text-gray-300">${user.email || '-'}</td>
      <td class="px-4 py-2 text-sm">${roleBadge}</td>
      <td class="px-4 py-2 text-sm">${statusBadge}</td>
      <td class="px-4 py-2 text-sm text-gray-300">${lastLogin}</td>
      <td class="px-4 py-2 text-sm text-gray-300">${created}</td>
      <td class="px-4 py-2 text-sm">
        <div class="flex space-x-2">
          <button onclick="editUser(${user.id})" class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded">Edit</button>
          ${user.id !== currentUserId ? `<button onclick="deleteUser(${user.id})" class="px-2 py-1 text-xs bg-red-600 hover:bg-red-500 text-white rounded">Delete</button>` : ''}
        </div>
      </td>
    `;
    
    tbody.appendChild(row);
  });
}

// Render API keys table
function renderAPIKeysTable(keys) {
  const tbody = document.getElementById('apikeys-table');
  tbody.innerHTML = '';

  if (keys.length === 0) {
    tbody.innerHTML = '<tr><td colspan="6" class="px-4 py-4 text-center text-gray-400">No API keys found</td></tr>';
    return;
  }

  keys.forEach(key => {
    const row = document.createElement('tr');
    row.className = 'hover:bg-gray-800';
    
    const statusBadge = key.active 
      ? '<span class="px-2 py-1 text-xs bg-green-600 text-white rounded">Active</span>'
      : '<span class="px-2 py-1 text-xs bg-gray-600 text-white rounded">Revoked</span>';
    
    const lastUsed = key.last_used ? new Date(key.last_used).toLocaleString() : 'Never';
    const expires = key.expires_at ? new Date(key.expires_at).toLocaleDateString() : 'Never';
    
    row.innerHTML = `
      <td class="px-4 py-2 text-sm text-gray-300 font-medium">${key.name}</td>
      <td class="px-4 py-2 text-sm text-gray-300 font-mono">${key.key}</td>
      <td class="px-4 py-2 text-sm">${statusBadge}</td>
      <td class="px-4 py-2 text-sm text-gray-300">${lastUsed}</td>
      <td class="px-4 py-2 text-sm text-gray-300">${expires}</td>
      <td class="px-4 py-2 text-sm">
        ${key.active ? `<button onclick="revokeAPIKey(${key.id})" class="px-2 py-1 text-xs bg-red-600 hover:bg-red-500 text-white rounded">Revoke</button>` : ''}
      </td>
    `;
    
    tbody.appendChild(row);
  });
}

// Get role badge HTML
function getRoleBadge(role) {
  switch (role) {
    case 'admin':
      return '<span class="px-2 py-1 text-xs bg-red-600 text-white rounded">Admin</span>';
    case 'user':
      return '<span class="px-2 py-1 text-xs bg-blue-600 text-white rounded">User</span>';
    case 'readonly':
      return '<span class="px-2 py-1 text-xs bg-gray-600 text-white rounded">Read Only</span>';
    default:
      return '<span class="px-2 py-1 text-xs bg-gray-600 text-white rounded">Unknown</span>';
  }
}

// Show user modal
function showUserModal(user = null) {
  editingUserId = user ? user.id : null;
  
  if (user) {
    document.getElementById('user-modal-title').textContent = 'Edit User';
    document.getElementById('user-id').value = user.id;
    document.getElementById('user-username').value = user.username;
    document.getElementById('user-email').value = user.email || '';
    document.getElementById('user-role').value = user.role;
    document.getElementById('user-active').checked = user.active;
    document.getElementById('password-field').style.display = 'none';
  } else {
    document.getElementById('user-modal-title').textContent = 'Add New User';
    document.getElementById('user-form').reset();
    document.getElementById('password-field').style.display = 'block';
    document.getElementById('user-role').value = 'user';
  }
  
  // Clear errors
  clearFormErrors();
  
  document.getElementById('user-modal').classList.remove('hidden');
}

// Hide user modal
function hideUserModal() {
  document.getElementById('user-modal').classList.add('hidden');
  editingUserId = null;
}

// Show API key modal
function showAPIKeyModal() {
  document.getElementById('apikey-form').reset();
  clearAPIKeyFormErrors();
  document.getElementById('apikey-modal').classList.remove('hidden');
}

// Hide API key modal
function hideAPIKeyModal() {
  document.getElementById('apikey-modal').classList.add('hidden');
}

// Hide API key display modal
function hideAPIKeyDisplayModal() {
  document.getElementById('apikey-display-modal').classList.add('hidden');
}

// Save user
async function saveUser() {
  clearFormErrors();
  
  const formData = new FormData(document.getElementById('user-form'));
  const userData = {
    username: formData.get('username'),
    email: formData.get('email'),
    role: formData.get('role'),
    active: formData.has('active')
  };

  if (!editingUserId) {
    userData.password = formData.get('password');
  }

  try {
    let response;
    if (editingUserId) {
      response = await fetch(`/api/users/${editingUserId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData)
      });
    } else {
      response = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData)
      });
    }

    const data = await response.json();
    
    if (response.ok) {
      hideUserModal();
      loadUsers();
    } else {
      showFormError(data.error);
    }
  } catch (error) {
    showFormError('Failed to save user');
  }
}

// Generate API key
async function generateAPIKey() {
  clearAPIKeyFormErrors();
  
  const formData = new FormData(document.getElementById('apikey-form'));
  const keyData = {
    name: formData.get('name'),
    permissions: ['read', 'write'] // Default permissions
  };

  const expiresIn = formData.get('expires_in');
  if (expiresIn) {
    keyData.expires_in = parseInt(expiresIn);
  }

  try {
    const response = await fetch('/api/apikeys', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(keyData)
    });

    const data = await response.json();
    
    if (response.ok) {
      hideAPIKeyModal();
      document.getElementById('generated-apikey').value = data.api_key.key;
      document.getElementById('apikey-display-modal').classList.remove('hidden');
      loadAPIKeys();
    } else {
      showAPIKeyFormError(data.error);
    }
  } catch (error) {
    showAPIKeyFormError('Failed to generate API key');
  }
}

// Edit user
function editUser(userId) {
  const user = currentUsers.find(u => u.id === userId);
  if (user) {
    showUserModal(user);
  }
}

// Delete user
async function deleteUser(userId) {
  if (!confirm('Are you sure you want to delete this user?')) return;

  try {
    const response = await fetch(`/api/users/${userId}`, {
      method: 'DELETE'
    });

    if (response.ok) {
      loadUsers();
    } else {
      const data = await response.json();
      alert('Failed to delete user: ' + data.error);
    }
  } catch (error) {
    alert('Failed to delete user');
  }
}

// Revoke API key
async function revokeAPIKey(keyId) {
  if (!confirm('Are you sure you want to revoke this API key?')) return;

  try {
    const response = await fetch(`/api/apikeys/${keyId}`, {
      method: 'DELETE'
    });

    if (response.ok) {
      loadAPIKeys();
    } else {
      const data = await response.json();
      alert('Failed to revoke API key: ' + data.error);
    }
  } catch (error) {
    alert('Failed to revoke API key');
  }
}

// Error handling functions
function clearFormErrors() {
  document.getElementById('username-error').classList.add('hidden');
  document.getElementById('password-error').classList.add('hidden');
  document.getElementById('email-error').classList.add('hidden');
}

function clearAPIKeyFormErrors() {
  document.getElementById('apikey-name-error').classList.add('hidden');
}

function showFormError(message) {
  // Show error in appropriate field or general error
  alert('Error: ' + message);
}

function showAPIKeyFormError(message) {
  alert('Error: ' + message);
}
</script>
{{ end }}