{% extends "admin_base.html" %}
{% load static %}

{% block content %}
<div class="max-w-7xl mx-auto my-8 px-8">
  <div class="text-center mb-10">
    <h1 class="text-4xl font-semibold text-indigo-800 mb-2 flex items-center justify-center"><i class="fas fa-user-shield mr-2"></i> User & Group Permissions</h1>
    <p class="text-lg text-gray-500">Manage users, groups, and assign permissions across the platform</p>
  </div>
  
  <!-- Tab Navigation -->
  <div class="flex border-b border-gray-200 mb-6">
    <button id="tab-users" class="tab-btn px-6 py-3 border-b-2 border-indigo-600 text-indigo-600 font-medium">
      <i class="fas fa-users mr-2"></i> Users
    </button>
    <button id="tab-groups" class="tab-btn px-6 py-3 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-800">
      <i class="fas fa-layer-group mr-2"></i> Groups
    </button>
  </div>
  
  <!-- Users Tab -->
  <div id="content-users" class="tab-content">
    <div class="bg-white bg-opacity-85 backdrop-blur-md rounded-xl border border-white border-opacity-20 shadow-lg p-6 mb-6">
      <div class="relative mb-4">
        <div class="relative flex items-center">
          <i class="fas fa-search absolute left-4 text-gray-400"></i>
          <input type="text" id="user-search" placeholder="Search users by name or username..." class="w-full py-3 pl-10 pr-4 bg-white bg-opacity-80 border-none rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:bg-white transition duration-300 text-base">
        </div>
      </div>
      <select id="user-select" class="w-full py-3 px-4 bg-white bg-opacity-80 border-none rounded-lg shadow-sm appearance-none bg-no-repeat bg-right-4 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:bg-white transition duration-300 text-base">
        <option value="">Select a user to manage permissions</option>
        {% for user in users %}
          <option value="{{ user.id }}">{{ user.get_full_name|default:user.username }} ({{ user.username }})</option>
        {% endfor %}
      </select>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Current User Permissions -->
      <div class="lg:col-span-1">
        <div class="bg-white bg-opacity-85 backdrop-blur-md rounded-xl border border-white border-opacity-20 shadow-lg p-6 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-semibold text-indigo-800 flex items-center"><i class="fas fa-key mr-2"></i> Direct Permissions</h3>
            <span id="perm-count" class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-semibold">0</span>
          </div>
          <div id="current-perms" class="min-h-40">
            <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
              <i class="fas fa-user-alt text-4xl mb-4 text-gray-300"></i>
              <p>No user selected</p>
            </div>
          </div>
        </div>
        
        <div class="bg-white bg-opacity-85 backdrop-blur-md rounded-xl border border-white border-opacity-20 shadow-lg p-6">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-semibold text-indigo-800 flex items-center"><i class="fas fa-users mr-2"></i> User Groups</h3>
            <span id="group-count" class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-semibold">0</span>
          </div>
          <div id="user-groups" class="min-h-40">
            <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
              <i class="fas fa-layer-group text-4xl mb-4 text-gray-300"></i>
              <p>No groups assigned</p>
            </div>
          </div>
          <div class="mt-4">
            <select id="add-group-select" class="w-full py-2 px-3 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600">
              <option value="">Add user to group...</option>
              {% for group in groups %}
                <option value="{{ group.id }}">{{ group.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
      
      <!-- Available Permissions -->
      <div class="lg:col-span-2 bg-white bg-opacity-85 backdrop-blur-md rounded-xl border border-white border-opacity-20 shadow-lg p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-semibold text-indigo-800 flex items-center"><i class="fas fa-list-check mr-2"></i> Available Permissions</h3>
          <div class="relative flex items-center">
            <i class="fas fa-search absolute left-3 text-gray-400 text-sm"></i>
            <input type="text" id="perm-search" placeholder="Filter permissions..." class="py-2 pl-8 pr-4 bg-white bg-opacity-80 border-none rounded-lg text-sm w-44 focus:outline-none focus:bg-white transition duration-300">
          </div>
        </div>
        <div class="perms-categories">
          {% for app, perms in permissions.items %}
            <div class="perm-category mb-6">
              <div class="category-header flex justify-between items-center cursor-pointer py-2 border-b border-gray-100">
                <h4 class="font-medium text-gray-800 flex items-center"><i class="fas fa-cube mr-2"></i> {{ app|title }}</h4>
                <span class="toggle-category text-gray-400 transition duration-300"><i class="fas fa-chevron-down"></i></span>
              </div>
              <ul class="perm-list max-h-0 overflow-y-auto transition-all duration-300 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 pr-2">
                {% for perm in perms %}
                <li class="perm-item py-2">
                    <label class="elegant-checkbox flex items-center relative pl-8 cursor-pointer select-none transition duration-300 hover:text-indigo-600">
                        <input type="checkbox" class="perm-checkbox absolute opacity-0 h-0 w-0 cursor-pointer" 
                               data-codename="{{ perm.codename }}">
                        <span class="checkmark absolute left-0 h-5 w-5 bg-white border-2 border-gray-300 rounded transition duration-300"></span>
                        <span class="perm-name text-base">{{ perm.name }}</span>
                        <span class="perm-codename text-sm text-gray-400 ml-2">{{ perm.codename }}</span>
                    </label>
                </li>
                {% endfor %}
            </ul>
            
            <style>
                /* Custom scrollbar styles */
                .perm-list::-webkit-scrollbar {
                    width: 6px;
                }
                .perm-list::-webkit-scrollbar-track {
                    background: transparent;
                    margin: 4px 0;
                }
                .perm-list::-webkit-scrollbar-thumb {
                    background: rgba(209, 213, 219, 0.5); /* gray-300 with opacity */
                    border-radius: 3px;
                    transition: background 0.3s ease;
                }
                .perm-list:hover::-webkit-scrollbar-thumb {
                    background: rgba(156, 163, 175, 0.8); /* gray-400 with opacity */
                }
                
                /* Expanded state */
                .perm-list.show {
                    max-height: 300px; /* Adjust based on your needs */
                    padding-right: 2px; /* Compensate for scrollbar */
                }
            </style>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
    
    <div class="flex justify-end gap-4 mt-6">
      <button id="reset-perms" class="px-6 py-3 bg-white text-red-500 border border-gray-100 rounded-lg font-medium text-base flex items-center gap-2 transition duration-300 hover:bg-red-50 hover:border-red-100">
        <i class="fas fa-undo"></i> Reset
      </button>
      <button id="save-perms" class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium text-base flex items-center gap-2 shadow-md shadow-indigo-200 transition duration-300 hover:bg-indigo-800 hover:-translate-y-1 hover:shadow-lg">
        <i class="fas fa-save"></i> Save Changes
      </button>
    </div>
  </div>
  
  <!-- Groups Tab -->
  <div id="content-groups" class="tab-content hidden">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Group Selection and Creation -->
      <div class="lg:col-span-1">
        <div class="bg-white bg-opacity-85 backdrop-blur-md rounded-xl border border-white border-opacity-20 shadow-lg p-6 mb-6">
          <h3 class="text-xl font-semibold text-indigo-800 flex items-center mb-4"><i class="fas fa-layer-group mr-2"></i> Groups</h3>
          
          <div class="relative mb-4">
            <div class="relative flex items-center">
              <i class="fas fa-search absolute left-4 text-gray-400"></i>
              <input type="text" id="group-search" placeholder="Search groups..." class="w-full py-3 pl-10 pr-4 bg-white bg-opacity-80 border-none rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:bg-white transition duration-300 text-base">
            </div>
          </div>
          
          <select id="group-select" size="10" class="w-full py-2 px-4 bg-white bg-opacity-80 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600 transition duration-300 text-base mb-4 overflow-auto">
            {% for group in groups %}
              <option value="{{ group.id }}">{{ group.name }}</option>
            {% endfor %}
          </select>
          
          <div class="flex flex-col gap-3 mt-4">
            <button id="create-group-btn" class="px-4 py-2 bg-green-600 text-white rounded-lg font-medium text-base flex items-center gap-2 justify-center shadow-md shadow-green-200 transition duration-300 hover:bg-green-700">
              <i class="fas fa-plus"></i> Create New Group
            </button>
            <button id="delete-group-btn" class="px-4 py-2 bg-white text-red-500 border border-gray-200 rounded-lg font-medium text-base flex items-center gap-2 justify-center transition duration-300 hover:bg-red-50">
              <i class="fas fa-trash"></i> Delete Group
            </button>
          </div>
        </div>
        
        <div class="bg-white bg-opacity-85 backdrop-blur-md rounded-xl border border-white border-opacity-20 shadow-lg p-6">
          <h3 class="text-xl font-semibold text-indigo-800 flex items-center mb-4"><i class="fas fa-edit mr-2"></i> Group Details</h3>
          
          <div id="group-details" class="min-h-40">
            <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
              <i class="fas fa-layer-group text-4xl mb-4 text-gray-300"></i>
              <p>No group selected</p>
            </div>
          </div>
          
          <div id="group-edit-form" class="hidden">
            <div class="mb-4">
              <label for="group-name" class="block text-gray-700 mb-1">Group Name</label>
              <input type="text" id="group-name" class="w-full py-2 px-3 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600" placeholder="Enter group name">
              <input type="hidden" id="group-id">
            </div>
          </div>
        </div>
      </div>
      
      <!-- Group Permissions -->
      <div class="lg:col-span-2 bg-white bg-opacity-85 backdrop-blur-md rounded-xl border border-white border-opacity-20 shadow-lg p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-semibold text-indigo-800 flex items-center"><i class="fas fa-key mr-2"></i> Group Permissions</h3>
          <div class="relative flex items-center">
            <i class="fas fa-search absolute left-3 text-gray-400 text-sm"></i>
            <input type="text" id="group-perm-search" placeholder="Filter permissions..." class="py-2 pl-8 pr-4 bg-white bg-opacity-80 border-none rounded-lg text-sm w-44 focus:outline-none focus:bg-white transition duration-300">
          </div>
        </div>
        <div id="group-permissions" class="min-h-40">
          <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
            <i class="fas fa-key text-4xl mb-4 text-gray-300"></i>
            <p>Select a group to view or edit permissions</p>
          </div>
        </div>
        
        <div id="group-permissions-list" class="perms-categories hidden">
          {% for app, perms in permissions.items %}
            <div class="perm-category mb-6">
              <div class="category-header flex justify-between items-center cursor-pointer py-2 border-b border-gray-100">
                <h4 class="font-medium text-gray-800 flex items-center"><i class="fas fa-cube mr-2"></i> {{ app|title }}</h4>
                <span class="toggle-category text-gray-400 transition duration-300"><i class="fas fa-chevron-down"></i></span>
              </div>
              <ul class="perm-list max-h-0 overflow-y-auto transition-all duration-300 pr-2 scrollbar-thin scrollbar-thumb-gray-300/50 scrollbar-track-transparent hover:scrollbar-thumb-gray-400/70">
                {% for perm in perms %}
                <li class="perm-item py-2">
                    <label class="elegant-checkbox flex items-center relative pl-8 cursor-pointer select-none transition duration-300 hover:text-indigo-600">
                        <input type="checkbox" class="group-perm-checkbox absolute opacity-0 h-0 w-0 cursor-pointer" 
                               data-codename="{{ perm.codename }}">
                        <span class="checkmark absolute left-0 h-5 w-5 bg-white border-2 border-gray-300 rounded transition duration-300"></span>
                        <span class="perm-name text-base">{{ perm.name }}</span>
                        <span class="perm-codename text-sm text-gray-400 ml-2">{{ perm.codename }}</span>
                    </label>
                </li>
                {% endfor %}
            </ul>
      
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
    
    <div class="flex justify-end gap-4 mt-6">
      <button id="reset-group-perms" class="px-6 py-3 bg-white text-red-500 border border-gray-100 rounded-lg font-medium text-base flex items-center gap-2 transition duration-300 hover:bg-red-50 hover:border-red-100">
        <i class="fas fa-undo"></i> Reset
      </button>
      <button id="save-group" class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium text-base flex items-center gap-2 shadow-md shadow-indigo-200 transition duration-300 hover:bg-indigo-800 hover:-translate-y-1 hover:shadow-lg">
        <i class="fas fa-save"></i> Save Group
      </button>
    </div>  
  </div>
</div>

<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<!-- Tailwind CSS CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">

<style>
  /* Styles needed for transitions/animations or elements not directly handled by Tailwind */
  .perm-list.show {
    max-height: 1000px;
  }
  
  .toggle-category.active {
    transform: rotate(180deg);
  }
  
  .elegant-checkbox input:checked ~ .checkmark {
    background-color: #4361ee;
    border-color: #4361ee;
  }
  
  .elegant-checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  .elegant-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* Toast & Dialog Animations */
  @keyframes toastIn {
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes toastOut {
    to {
      transform: translateY(-20px);
      opacity: 0;
    }
  }
  
  @keyframes fadeIn {
    to { opacity: 1; }
  }
  
  @keyframes fadeOut {
    to { opacity: 0; }
  }
  
  @keyframes dialogIn {
    to { transform: translateY(0); }
  }

  .toast-notification {
    animation: toastIn 0.3s forwards;
  }
  
  .toast-notification.fade-out {
    animation: toastOut 0.3s forwards;
  }
  
  .dialog-overlay {
    animation: fadeIn 0.3s forwards;
  }
  
  .dialog-overlay.fade-out {
    animation: fadeOut 0.3s forwards;
  }
  
  .dialog-container {
    animation: dialogIn 0.3s forwards;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tab Navigation
    const tabUsers = document.getElementById('tab-users');
    const tabGroups = document.getElementById('tab-groups');
    const contentUsers = document.getElementById('content-users');
    const contentGroups = document.getElementById('content-groups');
    
    tabUsers.addEventListener('click', function() {
        tabUsers.classList.add('border-indigo-600', 'text-indigo-600');
        tabUsers.classList.remove('border-transparent', 'text-gray-500');
        tabGroups.classList.add('border-transparent', 'text-gray-500');
        tabGroups.classList.remove('border-indigo-600', 'text-indigo-600');
        
        contentUsers.classList.remove('hidden');
        contentGroups.classList.add('hidden');
    });
    
    tabGroups.addEventListener('click', function() {
        tabGroups.classList.add('border-indigo-600', 'text-indigo-600');
        tabGroups.classList.remove('border-transparent', 'text-gray-500');
        tabUsers.classList.add('border-transparent', 'text-gray-500');
        tabUsers.classList.remove('border-indigo-600', 'text-indigo-600');
        
        contentGroups.classList.remove('hidden');
        contentUsers.classList.add('hidden');
    });
    
    //================ USER MANAGEMENT ================//
    // Get DOM elements
    const userSelect = document.getElementById('user-select');
    const currentPerms = document.getElementById('current-perms');
    const userGroups = document.getElementById('user-groups');
    const permCount = document.getElementById('perm-count');
    const groupCount = document.getElementById('group-count');
    const saveBtn = document.getElementById('save-perms');
    const resetBtn = document.getElementById('reset-perms');
    const searchInput = document.getElementById('user-search');
    const permSearch = document.getElementById('perm-search');
    const addGroupSelect = document.getElementById('add-group-select');
    
    // Toggle category visibility
    document.querySelectorAll('.category-header').forEach(header => {
      header.addEventListener('click', function() {
        const category = this.parentElement;
        const list = category.querySelector('.perm-list');
        const icon = this.querySelector('.toggle-category');
        
        list.classList.toggle('show');
        icon.classList.toggle('active');
      });
    });
    
    // CSRF Token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    // Load user permissions and groups when user is selected
    userSelect.addEventListener('change', function() {
        const userId = this.value;
        if (!userId) {
            currentPerms.innerHTML = `
              <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                <i class="fas fa-user-alt text-4xl mb-4 text-gray-300"></i>
                <p>No user selected</p>
              </div>
            `;
            
            userGroups.innerHTML = `
              <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                <i class="fas fa-layer-group text-4xl mb-4 text-gray-300"></i>
                <p>No groups assigned</p>
              </div>
            `;
            
            permCount.textContent = '0';
            groupCount.textContent = '0';
            document.querySelectorAll('.perm-checkbox').forEach(cb => cb.checked = false);
            return;
        }
        
        // Show loading state
        currentPerms.innerHTML = `
          <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
            <i class="fas fa-spinner fa-spin text-4xl mb-4 text-gray-300"></i>
            <p>Loading permissions...</p>
          </div>
        `;
        
        userGroups.innerHTML = `
          <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
            <i class="fas fa-spinner fa-spin text-4xl mb-4 text-gray-300"></i>
            <p>Loading groups...</p>
          </div>
        `;
        
        fetch(`/get-user-permissions/${userId}/`)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    // Handle direct permissions
                    if (data.direct_permissions && data.direct_permissions.length > 0) {
                        let html = '<div class="flex flex-wrap gap-2">';
                        data.direct_permissions.forEach(perm => {
                            html += `
                              <span class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1">
                                ${perm}
                                <i class="fas fa-times ml-1 opacity-70 hover:opacity-100 cursor-pointer remove-perm" data-perm="${perm}"></i>
                              </span>
                            `;
                        });
                        html += '</div>';
                        currentPerms.innerHTML = html;
                        permCount.textContent = data.direct_permissions.length;
                        
                        // Add event listeners to remove buttons
                        document.querySelectorAll('.remove-perm').forEach(btn => {
                          btn.addEventListener('click', function() {
                            const perm = this.dataset.perm;
                            const checkbox = document.querySelector(`.perm-checkbox[data-codename="${perm}"]`);
                            if (checkbox) checkbox.checked = false;
                            updateUserPermDisplay();
                          });
                        });
                    } else {
                        currentPerms.innerHTML = `
                          <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                            <i class="fas fa-key text-4xl mb-4 text-gray-300"></i>
                            <p>No direct permissions assigned</p>
                          </div>
                        `;
                        permCount.textContent = '0';
                    }
                    
                    // Handle user groups
                    const userGroupIds = data.groups || [];
                    if (userGroupIds.length > 0) {
                        let groupsHtml = '<div class="flex flex-wrap gap-2">';
                        
                        // Get all available groups
                        const groupOptions = Array.from(document.querySelectorAll('#add-group-select option')).slice(1);
                        
                        userGroupIds.forEach(groupId => {
                            const groupOption = groupOptions.find(opt => opt.value == groupId);
                            if (groupOption) {
                                const groupName = groupOption.textContent;
                                groupsHtml += `
                                  <span class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1">
                                    ${groupName}
                                    <i class="fas fa-times ml-1 opacity-70 hover:opacity-100 cursor-pointer remove-group" data-group-id="${groupId}"></i>
                                  </span>
                                `;
                            }
                        });
                        
                        groupsHtml += '</div>';
                        userGroups.innerHTML = groupsHtml;
                        groupCount.textContent = userGroupIds.length;
                        
                        // Add event listeners to remove group buttons
                        document.querySelectorAll('.remove-group').forEach(btn => {
                          btn.addEventListener('click', function() {
                            const groupId = this.dataset.groupId;
                            const groupIndex = selectedGroups.indexOf(groupId);
                            if (groupIndex > -1) {
                                selectedGroups.splice(groupIndex, 1);
                                updateUserGroupsDisplay();
                            }
                          });
                        });
                    } else {
                        userGroups.innerHTML = `
                          <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                            <i class="fas fa-layer-group text-4xl mb-4 text-gray-300"></i>
                            <p>No groups assigned</p>
                          </div>
                        `;
                        groupCount.textContent = '0';
                    }
                    
                    // Store selected groups
                    selectedGroups = userGroupIds.map(id => id.toString());
                    
                    // Update checkboxes based on all permissions (direct + from groups)
                    document.querySelectorAll('.perm-checkbox').forEach(checkbox => {
                        checkbox.checked = data.permissions.includes(checkbox.dataset.codename);
                    });
                    
                    // Expand all categories
                    document.querySelectorAll('.perm-list').forEach(list => {
                      list.classList.add('show');
                    });
                    document.querySelectorAll('.toggle-category').forEach(icon => {
                      icon.classList.add('active');
                    });
                } else {
                    throw new Error(data.message || 'Failed to load permissions');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                currentPerms.innerHTML = `
                  <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                    <i class="fas fa-exclamation-triangle text-4xl mb-4 text-gray-300"></i>
                    <p>Error loading permissions</p>
                  </div>
                `;
                userGroups.innerHTML = `
                  <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                    <i class="fas fa-exclamation-triangle text-4xl mb-4 text-gray-300"></i>
                    <p>Error loading groups</p>
                  </div>
                `;
            });
    });
    
    // Track selected groups
    let selectedGroups = [];
    
    // Add user to group
    addGroupSelect.addEventListener('change', function() {
        const groupId = this.value;
        if (!groupId) return;
        
        if (!selectedGroups.includes(groupId)) {
            selectedGroups.push(groupId);
            updateUserGroupsDisplay();
        }
        
        // Reset select
        this.value = '';
    });
    
    // Update user groups display
    function updateUserGroupsDisplay() {
        if (selectedGroups.length === 0) {
            userGroups.innerHTML = `
              <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                <i class="fas fa-layer-group text-4xl mb-4 text-gray-300"></i>
                <p>No groups assigned</p>
              </div>
            `;
            groupCount.textContent = '0';
            return;
        }
        
        let groupsHtml = '<div class="flex flex-wrap gap-2">';
        const groupOptions = Array.from(document.querySelectorAll('#add-group-select option')).slice(1);
        
        selectedGroups.forEach(groupId => {
            const groupOption = groupOptions.find(opt => opt.value == groupId);
            if (groupOption) {
                const groupName = groupOption.textContent;
                groupsHtml += `
                  <span class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1">
                    ${groupName}
                    <i class="fas fa-times ml-1 opacity-70 hover:opacity-100 cursor-pointer remove-group" data-group-id="${groupId}"></i>
                  </span>
                `;
            }
        });
        
        groupsHtml += '</div>';
        userGroups.innerHTML = groupsHtml;
        groupCount.textContent = selectedGroups.length;
        
        // Add event listeners to remove group buttons
        document.querySelectorAll('.remove-group').forEach(btn => {
          btn.addEventListener('click', function() {
            const groupId = this.dataset.groupId;
            const groupIndex = selectedGroups.indexOf(groupId);
            if (groupIndex > -1) {
                selectedGroups.splice(groupIndex, 1);
                updateUserGroupsDisplay();
            }
          });
        });
    }
    
    // Update permissions display
    function updateUserPermDisplay() {
        const selectedPerms = Array.from(document.querySelectorAll('.perm-checkbox:checked'))
            .map(checkbox => checkbox.dataset.codename);
            
        if (selectedPerms.length === 0) {
            currentPerms.innerHTML = `
              <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                <i class="fas fa-key text-4xl mb-4 text-gray-300"></i>
                <p>No direct permissions assigned</p>
              </div>
            `;
            permCount.textContent = '0';
            return;
        }
        
        let html = '<div class="flex flex-wrap gap-2">';
        selectedPerms.forEach(perm => {
            html += `
              <span class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1">
                ${perm}
                <i class="fas fa-times ml-1 opacity-70 hover:opacity-100 cursor-pointer remove-perm" data-perm="${perm}"></i>
              </span>
            `;
        });
        html += '</div>';
        currentPerms.innerHTML = html;
        permCount.textContent = selectedPerms.length;
        
        // Add event listeners to remove buttons
        document.querySelectorAll('.remove-perm').forEach(btn => {
          btn.addEventListener('click', function() {
            const perm = this.dataset.perm;
            const checkbox = document.querySelector(`.perm-checkbox[data-codename="${perm}"]`);
            if (checkbox) checkbox.checked = false;
            updateUserPermDisplay();
          });
        });
    }
    
    // Save user permissions and groups
    saveBtn.addEventListener('click', function() {
        const userId = userSelect.value;
        if (!userId) {
            showToast('Please select a user first', 'warning');
            return;
        }
        
        const selectedPerms = Array.from(document.querySelectorAll('.perm-checkbox:checked'))
            .map(checkbox => checkbox.dataset.codename);
        
        // Show loading state on button
        const originalText = saveBtn.innerHTML;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
        saveBtn.disabled = true;
        
        fetch('/update-user-permissions/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken'),
            },
            body: JSON.stringify({
                user_id: userId,
                permissions: selectedPerms,
                groups: selectedGroups
            })
        })
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            if (data.status === 'success') {
                showToast('User permissions and groups updated successfully', 'success');
                // Refresh the display
                userSelect.dispatchEvent(new Event('change'));
            } else {
                throw new Error(data.message || 'Failed to update permissions');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Error updating permissions: ' + error.message, 'error');
        })
        .finally(() => {
            saveBtn.innerHTML = originalText;
            saveBtn.disabled = false;
        });
    });
    
    // Reset user permissions
    resetBtn.addEventListener('click', function() {
        if (!userSelect.value) {
            showToast('Please select a user first', 'warning');
            return;
        }
        
        showDialog({
            title: 'Reset Permissions',
            message: 'Are you sure you want to reset all permissions and groups for this user?',
            type: 'warning',
            onConfirm: () => {
                document.querySelectorAll('.perm-checkbox').forEach(checkbox => {
                    checkbox.checked = false;
                });
                selectedGroups = [];
                updateUserPermDisplay();
                updateUserGroupsDisplay();
                showToast('Permissions and groups reset (changes not saved yet)', 'info');
            }
        });
    });
    
    // Search users
    function searchUsers() {
        const term = searchInput.value.toLowerCase();
        const options = userSelect.options;
        
        for (let i = 1; i < options.length; i++) { // Skip first option
            const option = options[i];
            const text = option.text.toLowerCase();
            option.style.display = text.includes(term) ? '' : 'none';
        }
    }
    
    searchInput.addEventListener('input', searchUsers);
    
    // Search permissions
    permSearch.addEventListener('input', function() {
        const term = this.value.toLowerCase();
        
        document.querySelectorAll('.perm-item').forEach(item => {
            const permName = item.querySelector('.perm-name').textContent.toLowerCase();
            const permCode = item.querySelector('.perm-codename').textContent.toLowerCase();
            
            if (permName.includes(term) || permCode.includes(term)) {
                item.style.display = 'block';
                
                // Show parent categories if match found
                let category = item.closest('.perm-category');
                let list = category.querySelector('.perm-list');
                let header = category.querySelector('.category-header');
                
                list.classList.add('show');
                header.querySelector('.toggle-category').classList.add('active');
            } else {
                item.style.display = 'none';
            }
        });
    });
    
    //================ GROUP MANAGEMENT ================//
    const groupSelect = document.getElementById('group-select');
    const groupSearch = document.getElementById('group-search');
    const groupDetails = document.getElementById('group-details');
    const groupEditForm = document.getElementById('group-edit-form');
    const groupNameInput = document.getElementById('group-name');
    const groupIdInput = document.getElementById('group-id');
    const groupPermissions = document.getElementById('group-permissions');
    const groupPermissionsList = document.getElementById('group-permissions-list');
    const groupPermSearch = document.getElementById('group-perm-search');
    const createGroupBtn = document.getElementById('create-group-btn');
    const deleteGroupBtn = document.getElementById('delete-group-btn');
    const saveGroupBtn = document.getElementById('save-group');
    const resetGroupPermsBtn = document.getElementById('reset-group-perms');
    
    // Load group permissions when group is selected
    groupSelect.addEventListener('change', function() {
        const groupId = this.value;
        if (!groupId) {
            hideGroupEditForm();
            return;
        }
        
        const selectedOption = this.options[this.selectedIndex];
        const groupName = selectedOption.textContent;
        
        // Show edit form
        groupDetails.classList.add('hidden');
        groupEditForm.classList.remove('hidden');
        
        // Fill group details
        groupNameInput.value = groupName;
        groupIdInput.value = groupId;
        
        // Show loading state
        groupPermissions.innerHTML = `
          <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
            <i class="fas fa-spinner fa-spin text-4xl mb-4 text-gray-300"></i>
            <p>Loading group permissions...</p>
          </div>
        `;
        groupPermissionsList.classList.add('hidden');
        
        fetch(`/get-group-permissions/${groupId}/`)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    // Update checkboxes
                    document.querySelectorAll('.group-perm-checkbox').forEach(checkbox => {
                        checkbox.checked = data.permissions.includes(checkbox.dataset.codename);
                    });
                    
                    // Show permissions list
                    groupPermissions.innerHTML = '';
                    groupPermissionsList.classList.remove('hidden');
                    
                    // Expand all categories
                    document.querySelectorAll('.perm-list').forEach(list => {
                      list.classList.add('show');
                    });
                    document.querySelectorAll('.toggle-category').forEach(icon => {
                      icon.classList.add('active');
                    });
                } else {
                    throw new Error(data.message || 'Failed to load group permissions');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                groupPermissions.innerHTML = `
                  <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
                    <i class="fas fa-exclamation-triangle text-4xl mb-4 text-gray-300"></i>
                    <p>Error loading group permissions</p>
                  </div>
                `;
            });
    });
    
    // Hide group edit form
    function hideGroupEditForm() {
        groupDetails.classList.remove('hidden');
        groupEditForm.classList.add('hidden');
        groupNameInput.value = '';
        groupIdInput.value = '';
        groupPermissionsList.classList.add('hidden');
        groupPermissions.innerHTML = `
          <div class="flex flex-col items-center justify-center text-center py-8 text-gray-500">
            <i class="fas fa-key text-4xl mb-4 text-gray-300"></i>
            <p>Select a group to view or edit permissions</p>
          </div>
        `;
        
        // Uncheck all permissions
        document.querySelectorAll('.group-perm-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
    }
    
    // Create new group
    createGroupBtn.addEventListener('click', function() {
        groupSelect.value = '';
        
        // Show edit form for new group
        groupDetails.classList.add('hidden');
        groupEditForm.classList.remove('hidden');
        
        // Clear form
        groupNameInput.value = '';
        groupIdInput.value = '';
        
        // Show empty permissions list
        groupPermissions.innerHTML = '';
        groupPermissionsList.classList.remove('hidden');
        
        // Uncheck all permissions
        document.querySelectorAll('.group-perm-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
        
        // Expand all categories
        document.querySelectorAll('.perm-list').forEach(list => {
          list.classList.add('show');
        });
        document.querySelectorAll('.toggle-category').forEach(icon => {
          icon.classList.add('active');
        });
        
        // Focus on name input
        groupNameInput.focus();
    });
    
    // Delete group
    deleteGroupBtn.addEventListener('click', function() {
        const groupId = groupSelect.value;
        if (!groupId) {
            showToast('Please select a group first', 'warning');
            return;
        }
        
        const groupName = groupSelect.options[groupSelect.selectedIndex].textContent;
        
        showDialog({
            title: 'Delete Group',
            message: `Are you sure you want to delete the group "${groupName}"? This cannot be undone.`,
            type: 'warning',
            onConfirm: () => {
                fetch(`/delete-group/${groupId}/`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': getCookie('csrftoken'),
                    }
                })
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.json();
                })
                .then(data => {
                    if (data.status === 'success') {
                        // Remove option from select
                        groupSelect.options[groupSelect.selectedIndex].remove();
                        
                        // Update add-group-select
                        const groupOption = document.querySelector(`#add-group-select option[value="${groupId}"]`);
                        if (groupOption) groupOption.remove();
                        
                        // Hide edit form
                        hideGroupEditForm();
                        
                        showToast('Group deleted successfully', 'success');
                    } else {
                        throw new Error(data.message || 'Failed to delete group');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Error deleting group: ' + error.message, 'error');
                });
            }
        });
    });
    
    // Save group
    saveGroupBtn.addEventListener('click', function() {
        const groupName = groupNameInput.value.trim();
        if (!groupName) {
            showToast('Please enter a group name', 'warning');
            return;
        }
        
        const groupId = groupIdInput.value || null;
        const selectedPerms = Array.from(document.querySelectorAll('.group-perm-checkbox:checked'))
            .map(checkbox => checkbox.dataset.codename);
        
        // Show loading state on button
        const originalText = saveGroupBtn.innerHTML;
        saveGroupBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
        saveGroupBtn.disabled = true;
        
        fetch('/update-group-permissions/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken'),
            },
            body: JSON.stringify({
                group_id: groupId,
                group_name: groupName,
                permissions: selectedPerms
            })
        })
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            if (data.status === 'success') {
                if (!groupId) {
                    // Add new group to select
                    const newOption = document.createElement('option');
                    newOption.value = data.group_id;
                    newOption.textContent = data.group_name;
                    groupSelect.appendChild(newOption);
                    
                    // Add to user's add-group-select
                    const newGroupOption = document.createElement('option');
                    newGroupOption.value = data.group_id;
                    newGroupOption.textContent = data.group_name;
                    addGroupSelect.appendChild(newGroupOption);
                    
                    // Select the new group
                    groupSelect.value = data.group_id;
                } else {
                    // Update existing group name if changed
                    const option = groupSelect.options[groupSelect.selectedIndex];
                    if (option.textContent !== data.group_name) {
                        option.textContent = data.group_name;
                        
                        // Update in user's add-group-select
                        const userGroupOption = document.querySelector(`#add-group-select option[value="${data.group_id}"]`);
                        if (userGroupOption) userGroupOption.textContent = data.group_name;
                    }
                }
                
                // Set form values
                groupNameInput.value = data.group_name;
                groupIdInput.value = data.group_id;
                
                showToast('Group saved successfully', 'success');
            } else {
                throw new Error(data.message || 'Failed to save group');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Error saving group: ' + error.message, 'error');
        })
        .finally(() => {
            saveGroupBtn.innerHTML = originalText;
            saveGroupBtn.disabled = false;
        });
    });
    
    // Reset group permissions
    resetGroupPermsBtn.addEventListener('click', function() {
        const groupId = groupIdInput.value;
        
        document.querySelectorAll('.group-perm-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
        
        showToast('Group permissions reset (changes not saved yet)', 'info');
    });
    
    // Search groups
    groupSearch.addEventListener('input', function() {
        const term = this.value.toLowerCase();
        const options = groupSelect.options;
        
        for (let i = 0; i < options.length; i++) {
            const option = options[i];
            const text = option.textContent.toLowerCase();
            option.style.display = text.includes(term) ? '' : 'none';
        }
    });
    
    // Search group permissions
    groupPermSearch.addEventListener('input', function() {
        const term = this.value.toLowerCase();
        
        document.querySelectorAll('#group-permissions-list .perm-item').forEach(item => {
            const permName = item.querySelector('.perm-name').textContent.toLowerCase();
            const permCode = item.querySelector('.perm-codename').textContent.toLowerCase();
            
            if (permName.includes(term) || permCode.includes(term)) {
                item.style.display = 'block';
                
                // Show parent categories if match found
                let category = item.closest('.perm-category');
                let list = category.querySelector('.perm-list');
                let header = category.querySelector('.category-header');
                
                list.classList.add('show');
                header.querySelector('.toggle-category').classList.add('active');
            } else {
                item.style.display = 'none';
            }
        });
    });
    
    //================ UTILITY FUNCTIONS ================//
    
    // Toast notification
    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `toast-notification fixed bottom-8 right-8 bg-white p-4 rounded-lg shadow-xl flex items-center gap-4 z-50 transform translate-y-5 opacity-0 max-w-sm`;
        
        // Border color based on type
        let borderClass, iconColor, icon;
        switch(type) {
            case 'success':
                borderClass = 'border-l-4 border-green-500';
                iconColor = 'text-green-500';
                icon = '<i class="fas fa-check-circle"></i>';
                break;
            case 'error':
                borderClass = 'border-l-4 border-red-500';
                iconColor = 'text-red-500';
                icon = '<i class="fas fa-exclamation-circle"></i>';
                break;
            case 'warning':
                borderClass = 'border-l-4 border-yellow-500';
                iconColor = 'text-yellow-500';
                icon = '<i class="fas fa-exclamation-triangle"></i>';
                break;
            default:
                borderClass = 'border-l-4 border-blue-500';
                iconColor = 'text-blue-500';
                icon = '<i class="fas fa-info-circle"></i>';
        }
        
        toast.classList.add(borderClass);
        
        toast.innerHTML = `
            <div class="toast-icon text-2xl ${iconColor}">${icon}</div>
            <div class="toast-message flex-1 text-base">${message}</div>
            <div class="toast-close text-gray-400 hover:text-gray-800 cursor-pointer pl-4"><i class="fas fa-times"></i></div>
        `;
        
        document.body.appendChild(toast);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            toast.classList.add('fade-out');
            setTimeout(() => toast.remove(), 300);
        }, 5000);
        
        // Manual close
        toast.querySelector('.toast-close').addEventListener('click', () => {
            toast.classList.add('fade-out');
            setTimeout(() => toast.remove(), 300);
        });
    }
    
    // Confirmation dialog
    function showDialog({title, message, type, onConfirm}) {
        const dialog = document.createElement('div');
        dialog.className = 'dialog-overlay fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 opacity-0';
        
        let iconHtml = '';
        if (type === 'warning') {
            iconHtml = '<div class="text-6xl text-yellow-500 mb-4"><i class="fas fa-exclamation-triangle"></i></div>';
        }
        
        dialog.innerHTML = `
            <div class="dialog-container bg-white rounded-xl w-11/12 max-w-lg overflow-hidden transform translate-y-5">
                <div class="px-6 pt-6 pb-4 flex justify-between items-center">
                    <h3 class="text-xl font-medium text-gray-800">${title}</h3>
                    <i class="fas fa-times text-gray-400 hover:text-gray-800 cursor-pointer text-lg dialog-close"></i>
                </div>
                <div class="px-6 py-4 flex flex-col items-center text-center">
                    ${iconHtml}
                    <p class="text-gray-500 leading-relaxed">${message}</p>
                </div>
                <div class="px-6 py-4 bg-gray-50 flex justify-end gap-4">
                    <button class="dialog-btn dialog-cancel px-5 py-2 bg-white text-gray-800 border border-gray-200 rounded-lg font-medium hover:bg-gray-50">Cancel</button>
                    <button class="dialog-btn dialog-confirm px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-800">Confirm</button>
                </div>
            </div>
        `;
        
        document.body.appendChild(dialog);
        
        // Close dialog
        const closeDialog = () => {
            dialog.classList.add('fade-out');
            setTimeout(() => dialog.remove(), 300);
        };
        
        dialog.querySelector('.dialog-close').addEventListener('click', closeDialog);
        dialog.querySelector('.dialog-cancel').addEventListener('click', closeDialog);
        
        // Confirm action
        dialog.querySelector('.dialog-confirm').addEventListener('click', () => {
            onConfirm();
            closeDialog();
        });
    }
});
</script>
{% endblock %}