{% extends "superadmin/base_superadmin.html" %}

{% block page_title %}User Management{% endblock %}
{% block page_description %}Manage all users, admins, and permissions{% endblock %}

{% block superadmin_content %}
<!-- Stats Summary -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-users text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Total Users</p>
                <p class="text-2xl font-bold text-gray-900">{{ users|length }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-crown text-red-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Superadmins</p>
                <p class="text-2xl font-bold text-gray-900">{{ users|selectattr('is_superadmin')|list|length }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-user-shield text-purple-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Admins</p>
                <p class="text-2xl font-bold text-gray-900">{{ users|selectattr('is_admin')|list|length }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-user-check text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Active Users</p>
                <p class="text-2xl font-bold text-gray-900">{{ users|selectattr('is_active')|list|length }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Users Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">All Users</h3>
        <p class="text-sm text-gray-500">Manage user permissions and status</p>
    </div>
    
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Group</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for user in users %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                                <span class="text-white font-bold text-sm">{{ user.full_name[0] if user.full_name else 'U' }}</span>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">{{ user.full_name }}</div>
                                <div class="text-sm text-gray-500">{{ user.email }}</div>
                                {% if user.custom_id %}
                                <div class="text-xs text-blue-600 font-semibold">{{ user.custom_id }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if user.group %}
                            <div class="flex flex-col">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
                                    <i class="fas fa-building mr-1"></i>
                                    {{ user.group.name }}
                                </span>
                                <span class="text-xs text-gray-500 mt-1">{{ user.group.group_code }}</span>
                            </div>
                        {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                                <i class="fas fa-minus mr-1"></i>
                                No Group
                            </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex flex-col space-y-1">
                            {% if user.is_superadmin %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    <i class="fas fa-crown mr-1"></i>
                                    Superadmin
                                </span>
                            {% elif user.is_admin %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                    <i class="fas fa-shield-alt mr-1"></i>
                                    Admin
                                </span>
                            {% else %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    <i class="fas fa-user mr-1"></i>
                                    Member
                                </span>
                            {% endif %}
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if user.is_active %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <i class="fas fa-check-circle mr-1"></i>
                                Active
                            </span>
                        {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                <i class="fas fa-times-circle mr-1"></i>
                                Inactive
                            </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ user.created_at.strftime('%B %d, %Y') if user.created_at else 'N/A' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex items-center space-x-2">
                            {% if not user.is_superadmin or user.id == current_user.id %}
                                <!-- Role Management -->
                                {% if not user.is_admin and not user.is_superadmin %}
                                    <a href="{{ url_for('superadmin_promote_user', user_id=user.id) }}" 
                                       class="text-blue-600 hover:text-blue-900 px-2 py-1 rounded text-xs border border-blue-200 hover:bg-blue-50"
                                       onclick="return confirm('Promote {{ user.full_name }} to admin?')">
                                        <i class="fas fa-arrow-up mr-1"></i>Promote
                                    </a>
                                {% elif user.is_admin and not user.is_superadmin %}
                                    <a href="{{ url_for('superadmin_demote_user', user_id=user.id) }}" 
                                       class="text-orange-600 hover:text-orange-900 px-2 py-1 rounded text-xs border border-orange-200 hover:bg-orange-50"
                                       onclick="return confirm('Demote {{ user.full_name }} to regular user?')">
                                        <i class="fas fa-arrow-down mr-1"></i>Demote
                                    </a>
                                {% endif %}

                                <!-- Group Assignment -->
                                <button onclick="openGroupModal({{ user.id }}, '{{ user.full_name }}', '{{ user.group.group_code if user.group else '' }}')" 
                                        class="text-emerald-600 hover:text-emerald-900 px-2 py-1 rounded text-xs border border-emerald-200 hover:bg-emerald-50">
                                    <i class="fas fa-building mr-1"></i>Group
                                </button>

                                <!-- Status Toggle -->
                                <a href="{{ url_for('superadmin_toggle_user_status', user_id=user.id) }}" 
                                   class="{% if user.is_active %}text-red-600 hover:text-red-900{% else %}text-green-600 hover:text-green-900{% endif %} px-2 py-1 rounded text-xs border {% if user.is_active %}border-red-200 hover:bg-red-50{% else %}border-green-200 hover:bg-green-50{% endif %}"
                                   onclick="return confirm('{% if user.is_active %}Deactivate{% else %}Activate{% endif %} {{ user.full_name }}?')">
                                    {% if user.is_active %}
                                        <i class="fas fa-user-slash mr-1"></i>Deactivate
                                    {% else %}
                                        <i class="fas fa-user-check mr-1"></i>Activate
                                    {% endif %}
                                </a>
                            {% else %}
                                <span class="text-gray-400 text-xs">Protected User</span>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Group Assignment Modal -->
<div id="groupModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900" id="modalTitle">Assign Group</h3>
                <button onclick="closeGroupModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="groupForm" method="POST" action="">
                <div class="mb-4">
                    <label for="group_code" class="block text-sm font-medium text-gray-700 mb-2">
                        Select Group/Organization
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-building h-5 w-5 text-gray-400"></i>
                        </div>
                        <select id="group_code" name="group_code" 
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
                            <option value="">No Group (Remove from all groups)</option>
                            {% for group in groups %}
                            <option value="{{ group.group_code }}">
                                {{ group.name }} ({{ group.group_code }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <div class="flex items-center space-x-3">
                    <button type="submit" 
                            class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200">
                        <i class="fas fa-save mr-2"></i>
                        Update Group
                    </button>
                    <button type="button" onclick="closeGroupModal()" 
                            class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors duration-200">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let currentUserId = null;

function openGroupModal(userId, userName, currentGroupCode) {
    currentUserId = userId;
    document.getElementById('modalTitle').textContent = `Assign Group - ${userName}`;
    document.getElementById('groupForm').action = `/superadmin/users/assign-group/${userId}`;
    
    // Set current group selection
    const groupSelect = document.getElementById('group_code');
    groupSelect.value = currentGroupCode || '';
    
    document.getElementById('groupModal').classList.remove('hidden');
}

function closeGroupModal() {
    document.getElementById('groupModal').classList.add('hidden');
    currentUserId = null;
}

// Close modal when clicking outside
document.getElementById('groupModal').addEventListener('click', function(event) {
    if (event.target === this) {
        closeGroupModal();
    }
});
</script>
{% endblock %}