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

{% 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
                    </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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    <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">
                    {% if user.selfie %}
                        <img class="h-16 w-16 rounded-full" src="{{ user.selfie.url }}" alt="">
                    {% else %}
                        <div class="h-16 w-16 rounded-full bg-gray-300 flex items-center justify-center">
                            <span>👤</span>
                        </div>
                    {% endif %}
                </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">
                        {% if user.role == 'admin' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                <i class="fas fa-crown mr-1"></i>Admin
                            </span>
                        {% elif user.role == 'team_leader' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                <span>👔</span>Team Leader
                            </span>
                        {% elif user.role == 'loan_officer' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <i class="fas fa-handshake mr-1"></i>Loan Officer
                            </span>
                        {% elif user.role == 'secretary' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                <i class="fas fa-user-secret mr-1"></i>Secretary
                            </span>
                        {% endif %}
                    </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">
        {% csrf_token %}
        <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-6">
                    {% for module, actions in permissions.items %}
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h5 class="text-md font-medium text-gray-900 mb-3 flex items-center">
                            {% if 'dashboard' in module %}
                                <i class="fas fa-tachometer-alt text-blue-500 mr-2"></i>
                            {% elif 'client' in module %}
                                <span>👥</span>
                            {% elif 'loan' in module %}
                                <span>💵</span>
                            {% elif 'repayment' in module or 'receipt' in module or 'payment' in module %}
                                <span>💳</span>
                            {% elif 'portfolio' in module %}
                                <i class="fas fa-briefcase text-teal-500 mr-2"></i>
                            {% elif 'report' in module or 'statement' in module %}
                                <span>📊</span>
                            {% elif 'document' in module %}
                                <span>📄</span>
                            {% elif 'notification' in module %}
                                <span>🔔</span>
                            {% elif 'setting' in module or 'branch' in module or 'system' in module %}
                                <span>⚙️</span>
                            {% else %}
                                <span>📦</span>
                            {% endif %}
                            {{ module|format_module_name }}
                        </h5>
                        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
                            {% for action, perm_data in actions.items %}
                            <label class="flex items-center text-sm">
                                <input type="checkbox" 
                                       name="perm_{{ module }}_{{ action }}" 
                                       {% if perm_data.allowed %}checked{% endif %}
                                       class="rounded border-gray-300 text-primary focus:ring-primary mr-2">
                                <span class="text-gray-700">{{ action|title }}</span>
                                {% if perm_data.source == 'custom' %}
                                    <span class="ml-1 text-orange-500 font-bold" title="Custom Override">*</span>
                                {% endif %}
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                    
                    <!-- Legend -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <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>
                            <p class="text-xs text-blue-600 mt-2">
                                <strong>Note:</strong> Changes will create custom permissions that override the default role permissions.
                            </p>
                        </div>
                    </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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                <span>💾</span>
                Save Permissions
            </button>
        </div>
    </form>
</div>

<script>
// Add some JavaScript for better UX
document.addEventListener('DOMContentLoaded', function() {
    // Add confirmation for permission changes
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        if (!confirm('Are you sure you want to update the permissions for this user?')) {
            e.preventDefault();
        }
    });

    // Add visual feedback for permission changes
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const label = this.parentElement;
            if (this.checked) {
                label.classList.add('text-primary');
                label.classList.remove('text-gray-700');
            } else {
                label.classList.remove('text-primary');
                label.classList.add('text-gray-700');
            }
        });
    });
});
</script>
{% endblock %}