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

{% block title %}Roles - Accounts{% endblock %}

{% block breadcrumb_items %}
    <li class="breadcrumb-item active">Roles</li>
{% endblock %}

{% block page_title %}Role Management{% endblock %}

{% block page_actions %}
    <div class="btn-group" role="group">
        <a href="{% url 'accounts:role_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Add Role
        </a>
        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#bulkActionsModal">
            <i class="fas fa-tasks me-1"></i>Bulk Actions
        </button>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                <i class="fas fa-download me-1"></i>Export
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="?export=csv"><i class="fas fa-file-csv me-1"></i>CSV</a></li>
                <li><a class="dropdown-item" href="?export=excel"><i class="fas fa-file-excel me-1"></i>Excel</a></li>
                <li><a class="dropdown-item" href="?export=pdf"><i class="fas fa-file-pdf me-1"></i>PDF</a></li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3" id="filterForm">
            <div class="col-md-4">
                <label for="search" class="form-label">Search</label>
                <input type="text" class="form-control" id="search" name="search" value="{{ request.GET.search }}" placeholder="Search roles...">
            </div>
            <div class="col-md-3">
                <label for="is_default" class="form-label">Type</label>
                <select class="form-select" id="is_default" name="is_default">
                    <option value="">All Roles</option>
                    <option value="true" {% if request.GET.is_default == 'true' %}selected{% endif %}>Default Roles</option>
                    <option value="false" {% if request.GET.is_default == 'false' %}selected{% endif %}>Custom Roles</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="has_users" class="form-label">Usage</label>
                <select class="form-select" id="has_users" name="has_users">
                    <option value="">All</option>
                    <option value="true" {% if request.GET.has_users == 'true' %}selected{% endif %}>With Users</option>
                    <option value="false" {% if request.GET.has_users == 'false' %}selected{% endif %}>No Users</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-1"></i>Filter
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Statistics -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="mb-0">{{ stats.total_roles }}</h4>
                        <p class="mb-0">Total Roles</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-user-shield fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="mb-0">{{ stats.default_roles }}</h4>
                        <p class="mb-0">Default Roles</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-star fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="mb-0">{{ stats.custom_roles }}</h4>
                        <p class="mb-0">Custom Roles</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-cog fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="mb-0">{{ stats.assigned_users }}</h4>
                        <p class="mb-0">Assigned Users</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-users fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Roles List -->
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Roles ({{ page_obj.paginator.count }})</h5>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="selectAll">
                <label class="form-check-label" for="selectAll">
                    Select All
                </label>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        {% if roles %}
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="50">
                                <input type="checkbox" class="form-check-input" id="selectAllTable">
                            </th>
                            <th>Role</th>
                            <th>Description</th>
                            <th>Permissions</th>
                            <th>Users</th>
                            <th>Type</th>
                            <th>Created</th>
                            <th width="120">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for role in roles %}
                            <tr>
                                <td>
                                    <input type="checkbox" class="form-check-input role-checkbox" value="{{ role.id }}">
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="role-icon me-2">
                                            {% if role.is_default %}
                                                <i class="fas fa-star text-warning"></i>
                                            {% else %}
                                                <i class="fas fa-user-shield text-primary"></i>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <strong>{{ role.name }}</strong>
                                            {% if role.is_default %}
                                                <span class="badge bg-warning ms-1">Default</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-muted">{{ role.description|truncatechars:60 }}</span>
                                </td>
                                <td>
                                    <div class="permissions-preview">
                                        {% for perm in role.permissions.all|slice:":3" %}
                                            <span class="badge bg-light text-dark me-1">{{ perm.name }}</span>
                                        {% endfor %}
                                        {% if role.permissions.count > 3 %}
                                            <span class="badge bg-secondary">+{{ role.permissions.count|add:"-3" }} more</span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ role.user_count }} users</span>
                                </td>
                                <td>
                                    {% if role.is_default %}
                                        <span class="badge bg-warning">System</span>
                                    {% else %}
                                        <span class="badge bg-primary">Custom</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <small class="text-muted">{{ role.created_at|date:"M d, Y" }}</small>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{% url 'accounts:role_detail' role.id %}" class="btn btn-outline-primary" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{% url 'accounts:role_edit' role.id %}" class="btn btn-outline-secondary" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% if not role.is_default %}
                                            <button type="button" class="btn btn-outline-danger" title="Delete" onclick="confirmDelete('{{ role.id }}', '{{ role.name }}')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-user-shield fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No roles found</h5>
                <p class="text-muted">Create your first role to get started.</p>
                <a href="{% url 'accounts:role_create' %}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>Create Role
                </a>
            </div>
        {% endif %}
    </div>
    
    {% if roles %}
        <!-- Pagination -->
        <div class="card-footer">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted">
                    Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} roles
                </div>
                {% if page_obj.has_other_pages %}
                    <nav>
                        <ul class="pagination pagination-sm mb-0">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                </li>
                            {% endif %}
                            
                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ num }}</span>
                                    </li>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ num }}">{{ num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>

<!-- Bulk Actions Modal -->
<div class="modal fade" id="bulkActionsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Actions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="bulkActionForm">
                    <div class="mb-3">
                        <label for="bulkAction" class="form-label">Select Action</label>
                        <select class="form-select" id="bulkAction" name="action" required>
                            <option value="">Choose action...</option>
                            <option value="delete">Delete Selected Roles</option>
                            <option value="export">Export Selected Roles</option>
                        </select>
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        <strong>Warning:</strong> This action will affect <span id="selectedCount">0</span> selected role(s).
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="executeBulkAction()">Execute Action</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<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 id="deleteRoleName"></strong>?</p>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    This action cannot be undone. All users 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 id="deleteForm" method="post" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Delete Role</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Auto-submit filter form
document.getElementById('search').addEventListener('input', function() {
    clearTimeout(this.searchTimeout);
    this.searchTimeout = setTimeout(() => {
        document.getElementById('filterForm').submit();
    }, 500);
});

document.getElementById('is_default').addEventListener('change', function() {
    document.getElementById('filterForm').submit();
});

document.getElementById('has_users').addEventListener('change', function() {
    document.getElementById('filterForm').submit();
});

// Select all functionality
document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.role-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
    updateSelectedCount();
});

document.getElementById('selectAllTable').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.role-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
    document.getElementById('selectAll').checked = this.checked;
    updateSelectedCount();
});

// Update selected count
function updateSelectedCount() {
    const selected = document.querySelectorAll('.role-checkbox:checked').length;
    document.getElementById('selectedCount').textContent = selected;
}

// Listen for individual checkbox changes
document.querySelectorAll('.role-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', updateSelectedCount);
});

// Delete confirmation
function confirmDelete(roleId, roleName) {
    document.getElementById('deleteRoleName').textContent = roleName;
    document.getElementById('deleteForm').action = `/accounts/roles/${roleId}/delete/`;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// Bulk actions
function executeBulkAction() {
    const action = document.getElementById('bulkAction').value;
    const selected = Array.from(document.querySelectorAll('.role-checkbox:checked')).map(cb => cb.value);
    
    if (!action) {
        alert('Please select an action.');
        return;
    }
    
    if (selected.length === 0) {
        alert('Please select at least one role.');
        return;
    }
    
    if (action === 'delete') {
        if (confirm(`Are you sure you want to delete ${selected.length} role(s)?`)) {
            // Submit bulk delete form
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{% url "accounts:role_bulk_delete" %}';
            
            // Add CSRF token
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = 'csrfmiddlewaretoken';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            // Add selected role IDs
            selected.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'role_ids';
                input.value = id;
                form.appendChild(input);
            });
            
            document.body.appendChild(form);
            form.submit();
        }
    } else if (action === 'export') {
        // Export selected roles
        const params = new URLSearchParams();
        selected.forEach(id => params.append('role_ids', id));
        window.open(`{% url "accounts:role_export" %}?${params.toString()}`, '_blank');
    }
    
    // Close modal
    bootstrap.Modal.getInstance(document.getElementById('bulkActionsModal')).hide();
}
</script>
{% endblock %}