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

{% block title %}{% if role %}Edit {{ role.name }}{% else %}Create Role{% endif %} - Accounts{% endblock %}

{% block breadcrumb_items %}
    <li class="breadcrumb-item"><a href="{% url 'accounts:role_list' %}">Roles</a></li>
    {% if role %}
        <li class="breadcrumb-item"><a href="{% url 'accounts:role_detail' role.id %}">{{ role.name }}</a></li>
        <li class="breadcrumb-item active">Edit</li>
    {% else %}
        <li class="breadcrumb-item active">Create Role</li>
    {% endif %}
{% endblock %}

{% block page_title %}{% if role %}Edit Role: {{ role.name }}{% else %}Create New Role{% endif %}{% endblock %}

{% block page_actions %}
    <div class="btn-group" role="group">
        <a href="{% url 'accounts:role_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Back to Roles
        </a>
        {% if role %}
            <a href="{% url 'accounts:role_detail' role.id %}" class="btn btn-outline-primary">
                <i class="fas fa-eye me-1"></i>View Details
            </a>
        {% endif %}
    </div>
{% endblock %}

{% block content %}
<form method="post" id="roleForm" novalidate>
    {% csrf_token %}
    
    <div class="row">
        <!-- Main Form -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Basic Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_name" class="form-label">Role Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control{% if form.name.errors %} is-invalid{% endif %}" 
                                       id="id_name" name="name" value="{{ form.name.value|default:'' }}" 
                                       placeholder="Enter role name" required>
                                {% if form.name.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.name.errors.0 }}
                                    </div>
                                {% endif %}
                                <div class="form-text">Choose a descriptive name for this role.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_is_default" class="form-label">Role Type</label>
                                <select class="form-select{% if form.is_default.errors %} is-invalid{% endif %}" 
                                        id="id_is_default" name="is_default">
                                    <option value="false" {% if not form.is_default.value %}selected{% endif %}>Custom Role</option>
                                    {% if user.is_superuser %}
                                        <option value="true" {% if form.is_default.value %}selected{% endif %}>System Role</option>
                                    {% endif %}
                                </select>
                                {% if form.is_default.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.is_default.errors.0 }}
                                    </div>
                                {% endif %}
                                <div class="form-text">System roles are managed by administrators.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="id_description" class="form-label">Description</label>
                        <textarea class="form-control{% if form.description.errors %} is-invalid{% endif %}" 
                                  id="id_description" name="description" rows="3" 
                                  placeholder="Describe the purpose and scope of this role">{{ form.description.value|default:'' }}</textarea>
                        {% if form.description.errors %}
                            <div class="invalid-feedback">
                                {{ form.description.errors.0 }}
                            </div>
                        {% endif %}
                        <div class="form-text">Provide a clear description of what this role is for.</div>
                    </div>
                </div>
            </div>
            
            <!-- Permissions -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-key me-2"></i>Permissions</h5>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-primary" onclick="selectAllPermissions()">
                            <i class="fas fa-check-square me-1"></i>Select All
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="clearAllPermissions()">
                            <i class="fas fa-square me-1"></i>Clear All
                        </button>
                        <button type="button" class="btn btn-outline-info" onclick="togglePermissionGroups()">
                            <i class="fas fa-expand-alt me-1"></i>Expand All
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    {% if form.permissions.errors %}
                        <div class="alert alert-danger">
                            {{ form.permissions.errors.0 }}
                        </div>
                    {% endif %}
                    
                    <div class="permissions-container">
                        {% regroup permissions_by_app as permissions_groups %}
                        {% for app_group in permissions_groups %}
                            <div class="permission-app-group mb-4">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="text-primary mb-0">
                                        <i class="fas fa-folder me-1"></i>{{ app_group.grouper|title }}
                                        <span class="badge bg-light text-dark ms-2">{{ app_group.list|length }} permissions</span>
                                    </h6>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-outline-primary btn-sm" 
                                                onclick="selectAppPermissions('{{ app_group.grouper }}')">
                                            Select All
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm" 
                                                onclick="clearAppPermissions('{{ app_group.grouper }}')">
                                            Clear All
                                        </button>
                                        <button type="button" class="btn btn-outline-info btn-sm" 
                                                onclick="toggleAppGroup('{{ app_group.grouper }}')">
                                            <i class="fas fa-chevron-down"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="permission-group-content" id="app-{{ app_group.grouper }}">
                                    <div class="row">
                                        {% regroup app_group.list by content_type.model as model_groups %}
                                        {% for model_group in model_groups %}
                                            <div class="col-md-6 col-lg-4 mb-3">
                                                <div class="card border-light">
                                                    <div class="card-header bg-light py-2">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <h6 class="mb-0 text-capitalize">{{ model_group.grouper }}</h6>
                                                            <div class="form-check">
                                                                <input class="form-check-input model-select-all" type="checkbox" 
                                                                       id="select-{{ app_group.grouper }}-{{ model_group.grouper }}" 
                                                                       onchange="toggleModelPermissions('{{ app_group.grouper }}', '{{ model_group.grouper }}', this.checked)">
                                                                <label class="form-check-label" for="select-{{ app_group.grouper }}-{{ model_group.grouper }}">
                                                                    <small>All</small>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-body py-2">
                                                        {% for permission in model_group.list %}
                                                            <div class="form-check">
                                                                <input class="form-check-input permission-checkbox" 
                                                                       type="checkbox" 
                                                                       name="permissions" 
                                                                       value="{{ permission.id }}" 
                                                                       id="permission_{{ permission.id }}"
                                                                       data-app="{{ app_group.grouper }}"
                                                                       data-model="{{ model_group.grouper }}"
                                                                       {% if permission.id in selected_permissions %}checked{% endif %}>
                                                                <label class="form-check-label" for="permission_{{ permission.id }}">
                                                                    <small>{{ permission.name|title }}</small>
                                                                </label>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Form Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-save me-2"></i>Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>
                            {% if role %}Update Role{% else %}Create Role{% endif %}
                        </button>
                        
                        {% if role %}
                            <button type="button" class="btn btn-success" onclick="saveAndAssignUsers()">
                                <i class="fas fa-user-plus me-1"></i>Save & Assign Users
                            </button>
                        {% else %}
                            <button type="button" class="btn btn-success" onclick="saveAndContinue()">
                                <i class="fas fa-plus me-1"></i>Save & Add Another
                            </button>
                        {% endif %}
                        
                        <a href="{% url 'accounts:role_list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>Cancel
                        </a>
                        
                        {% if role and not role.is_default %}
                            <hr>
                            <button type="button" class="btn btn-outline-danger" onclick="confirmDelete()">
                                <i class="fas fa-trash me-1"></i>Delete Role
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Permission Summary -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Permission Summary</h5>
                </div>
                <div class="card-body">
                    <div class="permission-stats">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Selected:</span>
                            <span class="badge bg-primary" id="selectedCount">0</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Total Available:</span>
                            <span class="badge bg-secondary" id="totalCount">{{ total_permissions }}</span>
                        </div>
                        <div class="progress mb-2">
                            <div class="progress-bar" role="progressbar" style="width: 0%" id="progressBar"></div>
                        </div>
                        <small class="text-muted">Permission coverage</small>
                    </div>
                    
                    <hr>
                    
                    <div class="permission-breakdown" id="permissionBreakdown">
                        <!-- Will be populated by JavaScript -->
                    </div>
                </div>
            </div>
            
            <!-- Quick Templates -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-magic me-2"></i>Quick Templates</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="applyTemplate('admin')">
                            <i class="fas fa-user-shield me-1"></i>Admin Template
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm" onclick="applyTemplate('editor')">
                            <i class="fas fa-edit me-1"></i>Editor Template
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm" onclick="applyTemplate('viewer')">
                            <i class="fas fa-eye me-1"></i>Viewer Template
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="applyTemplate('custom')">
                            <i class="fas fa-cog me-1"></i>Custom Template
                        </button>
                    </div>
                    <small class="text-muted mt-2 d-block">Apply predefined permission sets</small>
                </div>
            </div>
            
            {% if role %}
                <!-- Current Users -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-users me-2"></i>Current Users ({{ role.user_count }})</h5>
                    </div>
                    <div class="card-body">
                        {% if role.user_count > 0 %}
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-1"></i>
                                Changes to permissions will affect {{ role.user_count }} user(s).
                            </div>
                            <a href="{% url 'accounts:role_detail' role.id %}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye me-1"></i>View Users
                            </a>
                        {% else %}
                            <p class="text-muted mb-0">No users assigned to this role yet.</p>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</form>

<!-- Delete Confirmation Modal -->
{% if role and not role.is_default %}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the role <strong>{{ role.name }}</strong>?</p>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    This action cannot be undone. All {{ role.user_count }} user(s) with this role will lose their permissions.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form action="{% url 'accounts:role_delete' role.id %}" method="post" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Delete Role</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// Permission management
let permissionTemplates = {
    'admin': {% if admin_permissions %}{{ admin_permissions|safe }}{% else %}[]{% endif %},
    'editor': {% if editor_permissions %}{{ editor_permissions|safe }}{% else %}[]{% endif %},
    'viewer': {% if viewer_permissions %}{{ viewer_permissions|safe }}{% else %}[]{% endif %},
    'custom': []
};

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updatePermissionStats();
    
    // Add event listeners to all permission checkboxes
    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', updatePermissionStats);
    });
    
    // Collapse all groups initially except the first one
    document.querySelectorAll('.permission-group-content').forEach((group, index) => {
        if (index > 0) {
            group.style.display = 'none';
        }
    });
});

// Select all permissions
function selectAllPermissions() {
    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
        checkbox.checked = true;
    });
    updatePermissionStats();
}

// Clear all permissions
function clearAllPermissions() {
    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
    updatePermissionStats();
}

// Toggle permission groups
function togglePermissionGroups() {
    const groups = document.querySelectorAll('.permission-group-content');
    const isExpanded = Array.from(groups).some(group => group.style.display !== 'none');
    
    groups.forEach(group => {
        group.style.display = isExpanded ? 'none' : 'block';
    });
}

// Select app permissions
function selectAppPermissions(app) {
    document.querySelectorAll(`[data-app="${app}"]`).forEach(checkbox => {
        checkbox.checked = true;
    });
    updatePermissionStats();
}

// Clear app permissions
function clearAppPermissions(app) {
    document.querySelectorAll(`[data-app="${app}"]`).forEach(checkbox => {
        checkbox.checked = false;
    });
    updatePermissionStats();
}

// Toggle app group
function toggleAppGroup(app) {
    const group = document.getElementById(`app-${app}`);
    const button = event.target;
    
    if (group.style.display === 'none') {
        group.style.display = 'block';
        button.innerHTML = '<i class="fas fa-chevron-up"></i>';
    } else {
        group.style.display = 'none';
        button.innerHTML = '<i class="fas fa-chevron-down"></i>';
    }
}

// Toggle model permissions
function toggleModelPermissions(app, model, checked) {
    document.querySelectorAll(`[data-app="${app}"][data-model="${model}"]`).forEach(checkbox => {
        checkbox.checked = checked;
    });
    updatePermissionStats();
}

// Apply permission template
function applyTemplate(template) {
    if (!permissionTemplates[template]) {
        alert('Template not found');
        return;
    }
    
    // Clear all first
    clearAllPermissions();
    
    // Apply template permissions
    permissionTemplates[template].forEach(permId => {
        const checkbox = document.querySelector(`[value="${permId}"]`);
        if (checkbox) {
            checkbox.checked = true;
        }
    });
    
    updatePermissionStats();
}

// Update permission statistics
function updatePermissionStats() {
    const selected = document.querySelectorAll('.permission-checkbox:checked').length;
    const total = document.querySelectorAll('.permission-checkbox').length;
    const percentage = total > 0 ? (selected / total * 100) : 0;
    
    document.getElementById('selectedCount').textContent = selected;
    document.getElementById('totalCount').textContent = total;
    document.getElementById('progressBar').style.width = percentage + '%';
    
    // Update breakdown by app
    const breakdown = {};
    document.querySelectorAll('.permission-checkbox:checked').forEach(checkbox => {
        const app = checkbox.dataset.app;
        breakdown[app] = (breakdown[app] || 0) + 1;
    });
    
    const breakdownHtml = Object.entries(breakdown).map(([app, count]) => 
        `<div class="d-flex justify-content-between"><span>${app}:</span><span class="badge bg-info">${count}</span></div>`
    ).join('');
    
    document.getElementById('permissionBreakdown').innerHTML = breakdownHtml || '<small class="text-muted">No permissions selected</small>';
}

// Save and continue actions
function saveAndContinue() {
    const form = document.getElementById('roleForm');
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'save_and_continue';
    input.value = 'true';
    form.appendChild(input);
    form.submit();
}

function saveAndAssignUsers() {
    const form = document.getElementById('roleForm');
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'save_and_assign';
    input.value = 'true';
    form.appendChild(input);
    form.submit();
}

// Delete confirmation
function confirmDelete() {
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// Form validation
document.getElementById('roleForm').addEventListener('submit', function(e) {
    const name = document.getElementById('id_name').value.trim();
    
    if (!name) {
        e.preventDefault();
        alert('Please enter a role name.');
        document.getElementById('id_name').focus();
        return false;
    }
    
    const selectedPermissions = document.querySelectorAll('.permission-checkbox:checked').length;
    if (selectedPermissions === 0) {
        if (!confirm('No permissions selected. Are you sure you want to create a role with no permissions?')) {
            e.preventDefault();
            return false;
        }
    }
});
</script>
{% endblock %}