{% extends 'base.html' %}
{% load static %}

{% block title %}User Permissions - {{ user.get_full_name }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        <i class="fas fa-shield-alt text-primary mr-2"></i>
                        User Permissions (Simplified)
                    </h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">
                        Manage permissions for {{ user.get_full_name }} ({{ user.get_role_display }})
                    </p>
                </div>
                <a href="{% url 'users:admin_list' %}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
                    <span>←</span>
                    Back to Staff List
                </a>
            </div>
        </div>
    </div>

    <!-- User Info -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center space-x-4">
                <div class="flex-shrink-0 h-16 w-16">
                    <div class="h-16 w-16 rounded-full bg-gray-300 flex items-center justify-center">
                        <span class="text-xl font-medium text-gray-700">{{ user.get_initials }}</span>
                    </div>
                </div>
                <div>
                    <h4 class="text-xl font-medium text-gray-900">{{ user.get_full_name }}</h4>
                    <p class="text-sm text-gray-500">{{ user.email }}</p>
                    <p class="text-sm text-gray-500">{{ user.phone_number }}</p>
                    <div class="mt-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {{ user.get_role_display }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="bg-{% if message.tags == 'error' %}red{% else %}green{% endif %}-50 border border-{% if message.tags == 'error' %}red{% else %}green{% endif %}-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-{% if message.tags == 'error' %}exclamation-triangle{% else %}check-circle{% endif %} text-{% if message.tags == 'error' %}red{% else %}green{% endif %}-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-{% if message.tags == 'error' %}red{% else %}green{% endif %}-700">{{ message }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% endif %}

    <!-- Permissions Form -->
    <form method="post" class="space-y-6" id="permissions-form">
        {% csrf_token %}
        
        <!-- Quick Actions -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h4 class="text-lg font-medium text-gray-900 mb-4">
                    <span>⚡</span>
                    Quick Actions
                </h4>
                <div class="flex flex-wrap gap-2">
                    <button type="button" onclick="selectAll()" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-check-square mr-2"></i>Select All
                    </button>
                    <button type="button" onclick="deselectAll()" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-square mr-2"></i>Deselect All
                    </button>
                </div>
            </div>
        </div>

        <!-- Permissions Grid -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h4 class="text-lg font-medium text-gray-900 mb-4">
                    <span>⚙️</span>
                    Module Permissions
                </h4>
                <p class="text-sm text-gray-600 mb-6">
                    Configure specific permissions for this user. Changes will override the default permissions for their role.
                </p>

                <div class="space-y-8">
                    {% for module_name, actions in permissions.items %}
                    <div class="border border-gray-200 rounded-lg p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h5 class="text-lg font-medium text-gray-900 flex items-center">
                                <span>📦</span>
                                {{ module_name }}
                            </h5>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                            {% for action_code, perm_data in actions.items %}
                            <label class="flex items-center text-sm cursor-pointer hover:bg-gray-50 p-2 rounded">
                                <input type="checkbox" 
                                       name="perm_{{ module_name|lower|cut:' '|cut:'&'|cut:'-' }}_{{ action_code }}" 
                                       {% if perm_data.allowed %}checked{% endif %}
                                       class="rounded border-gray-300 text-primary focus:ring-primary mr-2 permission-checkbox">
                                <span class="text-gray-700 flex-1">{{ action_code|title }}</span>
                                {% if perm_data.custom %}
                                    <span class="ml-1 text-orange-500 font-bold text-xs" title="Custom Override">*</span>
                                {% endif %}
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Legend -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-6">
                    <h6 class="font-medium text-blue-900 mb-2">
                        <span>ℹ️</span>
                        Permission Legend
                    </h6>
                    <div class="text-sm text-blue-800 space-y-1">
                        <p><span class="font-medium">✓ Checked:</span> Permission is granted</p>
                        <p><span class="font-medium">☐ Unchecked:</span> Permission is denied</p>
                        <p><span class="text-orange-500 font-bold">*</span> Custom override (differs from role default)</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-end space-x-3">
            <a href="{% url 'users:admin_list' %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Cancel
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark">
                <span>💾</span>
                Save Permissions
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('permissions-form');
    form.addEventListener('submit', function(e) {
        if (!confirm('Are you sure you want to update the permissions for this user?')) {
            e.preventDefault();
        }
    });

    const checkboxes = document.querySelectorAll('.permission-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const label = this.parentElement;
            if (this.checked) {
                label.classList.add('bg-green-50', 'border-green-200');
                label.classList.remove('bg-gray-50');
            } else {
                label.classList.remove('bg-green-50', 'border-green-200');
                label.classList.add('bg-gray-50');
            }
        });
        
        if (checkbox.checked) {
            checkbox.parentElement.classList.add('bg-green-50', 'border-green-200');
        }
    });
});

function selectAll() {
    const checkboxes = document.querySelectorAll('.permission-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = true;
        checkbox.dispatchEvent(new Event('change'));
    });
}

function deselectAll() {
    const checkboxes = document.querySelectorAll('.permission-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
        checkbox.dispatchEvent(new Event('change'));
    });
}
</script>
{% endblock %}