{% extends "layouts/base.html" %}

{% load static %}

{% block title %}Users{% endblock %}

{% block extra_css %}
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />
<style>
    .filter-card {
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .stats-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .user-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
        position: relative;
    }
    
    .user-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .user-card.selected {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .action-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    .loading-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }
    
    .bulk-actions {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        display: none;
    }
    
    .bulk-actions.show {
        display: block;
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
<style>
    .filter-card {
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .user-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .user-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .active-badge {
        background-color: #28a745;
        color: #fff;
    }
    
    .inactive-badge {
        background-color: #dc3545;
        color: #fff;
    }
    
    .pending-badge {
        background-color: #ffc107;
        color: #000;
    }
    
    .action-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    .loading-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }
    
    @media (max-width: 768px) {
        .action-buttons {
            text-align: center;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Users</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Accounts</a></li>
            <li class="breadcrumb-item active" aria-current="page">Users</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row">
    <!-- Statistics Cards -->
    <div class="col-lg-3 col-md-6">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-users fs-2"></i>
                    </div> 
                    <div>
                        <h2 class="mb-0" id="total-users">{{ stats.total_users }}</h2>
                        <p class="mb-0">Total Users</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-check-circle fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="active-users">{{ stats.active_users }}</h2>
                        <p class="mb-0">Active</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-clock fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="pending-users">{{ stats.pending_users }}</h2>
                        <p class="mb-0">Pending</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-shield fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="user-roles">{{ user_roles|length }}</h2>
                        <p class="mb-0">Roles</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Filters Card -->
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-filter me-2"></i>Filters & Search
                </h5>
            </div>
            <div class="card-body">
                <form method="get" id="filter-form" class="row g-3">
                    <!-- Search Input -->
                    <div class="col-md-4">
                        <label for="search" class="form-label fw-semibold">
                            <i class="fe fe-search me-1"></i>Search
                        </label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search_query }}" 
                               placeholder="Search users...">
                    </div>
                    
                    <!-- Role Filter -->
                    <div class="col-md-4">
                        <label for="role" class="form-label fw-semibold">
                            <i class="fe fe-shield me-1"></i>Role
                        </label>
                        <select class="form-select" id="role" name="role">
                            <option value="" {% if not selected_role %}selected{% endif %}>All Roles</option>
                            {% for role in user_roles %}
                                <option value="{{ role.id }}" 
                                        {% if selected_role == role.id|stringformat:'s' %}selected{% endif %}>
                                    {{ role.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Status Filter -->
                    <div class="col-md-4">
                        <label for="status" class="form-label fw-semibold">
                            <i class="fe fe-activity me-1"></i>Status
                        </label>
                        <select class="form-select" id="status" name="status">
                            <option value="" {% if not selected_status %}selected{% endif %}>All Status</option>
                            <option value="active" {% if selected_status == 'active' %}selected{% endif %}>Active</option>
                            <option value="inactive" {% if selected_status == 'inactive' %}selected{% endif %}>Inactive</option>
                            <option value="pending" {% if selected_status == 'pending' %}selected{% endif %}>Pending</option>
                        </select>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="col-12">
                        <div class="d-flex flex-wrap gap-2 pt-3 border-top">
                            <button type="submit" class="btn btn-primary">
                                <i class="fe fe-filter me-1"></i> Apply Filters
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="clear-filters">
                                <i class="fe fe-refresh-cw me-1"></i> Clear Filters
                            </button>
                            <a href="{% url 'accounts:user_create' %}" class="btn btn-success ms-auto">
                                <i class="fe fe-plus me-1"></i> New User
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Actions Bar -->
<div class="bulk-actions" id="bulk-actions">
    <div class="d-flex align-items-center justify-content-between">
        <div>
            <strong id="selected-count">0</strong> users selected
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-success" id="bulk-activate">
                <i class="fe fe-check me-1"></i> Activate
            </button>
            <button type="button" class="btn btn-sm btn-warning" id="bulk-deactivate">
                <i class="fe fe-x me-1"></i> Deactivate
            </button>
            <button type="button" class="btn btn-sm btn-danger" id="bulk-delete">
                <i class="fe fe-trash-2 me-1"></i> Delete
            </button>
        </div>
    </div>
</div>

<!-- Users List -->
<div class="row" id="users-container">
    {% for user in users %}
    <div class="col-lg-6 col-xl-4">
        <div class="card user-card" data-user-id="{{ user.id }}">
            <div class="card-body">
                <div class="d-flex align-items-start">
                    <div class="flex-shrink-0">
                        <input type="checkbox" class="form-check-input user-checkbox" 
                               value="{{ user.id }}" id="user-{{ user.id }}">
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <div class="d-flex align-items-center mb-2">
                            <div class="avatar avatar-md me-3">
                                {% if user.avatar %}
                                    <img src="{{ user.avatar.url }}" alt="{{ user.get_full_name }}" class="rounded-circle">
                                {% else %}
                                    <div class="avatar-initial rounded-circle bg-primary">
                                        {{ user.first_name|first|upper }}{{ user.last_name|first|upper }}
                                    </div>
                                {% endif %}
                            </div>
                            <div>
                                <h6 class="mb-0">
                                    <a href="{% url 'accounts:user_detail' user.id %}" class="text-decoration-none">
                                        {{ user.get_full_name|default:user.username }}
                                    </a>
                                </h6>
                                <small class="text-muted">{{ user.email }}</small>
                            </div>
                        </div>
                        
                        <div class="mb-2">
                            {% if user.is_active %}
                                <span class="badge status-badge active-badge">Active</span>
                            {% elif user.is_verified %}
                                <span class="badge status-badge pending-badge">Pending</span>
                            {% else %}
                                <span class="badge status-badge inactive-badge">Inactive</span>
                            {% endif %}
                            
                            {% if user.is_staff %}
                                <span class="badge bg-info">Staff</span>
                            {% endif %}
                            
                            {% if user.is_superuser %}
                                <span class="badge bg-danger">Admin</span>
                            {% endif %}
                        </div>
                        
                        <div class="text-muted small mb-3">
                            <div><i class="fe fe-calendar me-1"></i> Joined: {{ user.date_joined|date:"M d, Y" }}</div>
                            {% if user.last_login %}
                                <div><i class="fe fe-clock me-1"></i> Last login: {{ user.last_login|timesince }} ago</div>
                            {% else %}
                                <div><i class="fe fe-clock me-1"></i> Never logged in</div>
                            {% endif %}
                        </div>
                        
                        <div class="action-buttons">
                            <a href="{% url 'accounts:user_detail' user.id %}" class="btn btn-sm btn-outline-primary">
                                <i class="fe fe-eye me-1"></i> View
                            </a>
                            <a href="{% url 'accounts:user_update' user.id %}" class="btn btn-sm btn-outline-secondary">
                                <i class="fe fe-edit me-1"></i> Edit
                            </a>
                            {% if user.is_active %}
                                <button type="button" class="btn btn-sm btn-outline-warning deactivate-user" 
                                        data-user-id="{{ user.id }}">
                                    <i class="fe fe-pause me-1"></i> Deactivate
                                </button>
                            {% else %}
                                <button type="button" class="btn btn-sm btn-outline-success activate-user" 
                                        data-user-id="{{ user.id }}">
                                    <i class="fe fe-play me-1"></i> Activate
                                </button>
                            {% endif %}
                            <a href="{% url 'accounts:user_delete' user.id %}" class="btn btn-sm btn-outline-danger">
                                <i class="fe fe-trash-2 me-1"></i> Delete
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loading-overlay d-flex align-items-center justify-content-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12">
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="fe fe-users fs-1 text-muted mb-3"></i>
                <h5 class="text-muted">No users found</h5>
                <p class="text-muted mb-4">There are no users matching your current filters.</p>
                <a href="{% url 'accounts:user_create' %}" class="btn btn-primary">
                    <i class="fe fe-plus me-1"></i> Create First User
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Pagination -->
{% if is_paginated %}
<div class="row">
    <div class="col-12">
        <nav aria-label="Users pagination">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?{% if search_query %}search={{ search_query }}&{% endif %}{% if selected_role %}role={{ selected_role }}&{% endif %}{% if selected_status %}status={{ selected_status }}&{% endif %}page=1">
                            <i class="fe fe-chevrons-left"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?{% if search_query %}search={{ search_query }}&{% endif %}{% if selected_role %}role={{ selected_role }}&{% endif %}{% if selected_status %}status={{ selected_status }}&{% endif %}page={{ page_obj.previous_page_number }}">
                            <i class="fe fe-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="?{% if search_query %}search={{ search_query }}&{% endif %}{% if selected_role %}role={{ selected_role }}&{% endif %}{% if selected_status %}status={{ selected_status }}&{% endif %}page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?{% if search_query %}search={{ search_query }}&{% endif %}{% if selected_role %}role={{ selected_role }}&{% endif %}{% if selected_status %}status={{ selected_status }}&{% endif %}page={{ page_obj.next_page_number }}">
                            <i class="fe fe-chevron-right"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?{% if search_query %}search={{ search_query }}&{% endif %}{% if selected_role %}role={{ selected_role }}&{% endif %}{% if selected_status %}status={{ selected_status }}&{% endif %}page={{ page_obj.paginator.num_pages }}">
                            <i class="fe fe-chevrons-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>
{% endif %}

{% endblock content %}

{% block extra_js %}
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script>
$(document).ready(function() {
    // Initialize Select2
    $('#role, #status').select2({
        theme: 'bootstrap-5',
        width: '100%'
    });
    
    // Clear filters
    $('#clear-filters').click(function() {
        $('#search').val('');
        $('#role').val('').trigger('change');
        $('#status').val('').trigger('change');
        $('#filter-form').submit();
    });
    
    // Bulk selection
    let selectedUsers = new Set();
    
    $('.user-checkbox').change(function() {
        const userId = $(this).val();
        const userCard = $(this).closest('.user-card');
        
        if ($(this).is(':checked')) {
            selectedUsers.add(userId);
            userCard.addClass('selected');
        } else {
            selectedUsers.delete(userId);
            userCard.removeClass('selected');
        }
        
        updateBulkActions();
    });
    
    function updateBulkActions() {
        const count = selectedUsers.size;
        $('#selected-count').text(count);
        
        if (count > 0) {
            $('#bulk-actions').addClass('show');
        } else {
            $('#bulk-actions').removeClass('show');
        }
    }
    
    // Bulk actions
    $('#bulk-activate, #bulk-deactivate, #bulk-delete').click(function() {
        if (selectedUsers.size === 0) {
            alert('Please select users first.');
            return;
        }
        
        const action = $(this).attr('id').replace('bulk-', '');
        const userIds = Array.from(selectedUsers);
        
        if (action === 'delete' && !confirm('Are you sure you want to delete the selected users?')) {
            return;
        }
        
        // Show loading
        selectedUsers.forEach(userId => {
            $(`.user-card[data-user-id="${userId}"] .loading-overlay`).show();
        });
        
        // Perform bulk action via AJAX
        $.ajax({
            url: '{% url "accounts:api_user_list" %}',
            method: 'POST',
            data: {
                'action': action,
                'user_ids': userIds,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function() {
                alert('An error occurred. Please try again.');
            },
            complete: function() {
                // Hide loading
                selectedUsers.forEach(userId => {
                    $(`.user-card[data-user-id="${userId}"] .loading-overlay`).hide();
                });
            }
        });
    });
    
    // Individual user actions
    $('.activate-user, .deactivate-user').click(function() {
        const userId = $(this).data('user-id');
        const action = $(this).hasClass('activate-user') ? 'activate' : 'deactivate';
        const userCard = $(this).closest('.user-card');
        
        userCard.find('.loading-overlay').show();
        
        $.ajax({
            url: '{% url "accounts:api_user_detail" pk="0" %}'.replace('0', userId),
            method: 'PATCH',
            data: {
                'action': action,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function() {
                alert('An error occurred. Please try again.');
            },
            complete: function() {
                userCard.find('.loading-overlay').hide();
            }
        });
    });
    
    // Auto-submit form on filter change
    $('#search').on('input', debounce(function() {
        $('#filter-form').submit();
    }, 500));
    
    $('#role, #status').change(function() {
        $('#filter-form').submit();
    });
    
    // Debounce function
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
});
</script>
{% endblock extra_js %}