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

{% block title %}Users - Admin Panel{% endblock %}

{% block content %}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-md-8">
                <label for="search" class="form-label">Search Users</label>
                <input type="text" id="search" name="search" placeholder="Search by username or email..." 
                       value="{{ request.args.get('search', '') }}" class="form-control">
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-search me-2"></i>Search
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-header bg-transparent border-0">
        <h5 class="card-title mb-0">
            <i class="fas fa-users me-2 text-primary"></i>
            User Management
        </h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="border-0">ID</th>
                        <th class="border-0">Username</th>
                        <th class="border-0">Email</th>
                        <th class="border-0">Status</th>
                        <th class="border-0">Role</th>
                        <th class="border-0">Last Login</th>
                        <th class="border-0">Created</th>
                        <th class="border-0 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users.items %}
                    <tr>
                        <td>
                            <span class="badge bg-secondary">#{{ user.id }}</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 32px; height: 32px;">
                                    <i class="fas fa-user text-primary"></i>
                                </div>
                                <span class="fw-medium">{{ user.username }}</span>
                            </div>
                        </td>
                        <td>
                            <span class="text-muted">{{ user.email }}</span>
                        </td>
                        <td>
                            <span class="badge bg-{{ 'success' if user.is_active else 'danger' }}">
                                <i class="fas fa-{{ 'check-circle' if user.is_active else 'times-circle' }} me-1"></i>
                                {{ 'Active' if user.is_active else 'Inactive' }}
                            </span>
                        </td>
                        <td>
                            <span class="badge bg-{{ 'primary' if user.is_admin else 'secondary' }}">
                                <i class="fas fa-{{ 'crown' if user.is_admin else 'user' }} me-1"></i>
                                {{ 'Admin' if user.is_admin else 'User' }}
                            </span>
                        </td>
                        <td>
                            <small class="text-muted">
                                {{ user.last_login.strftime('%m/%d/%Y %H:%M') if user.last_login else 'Never' }}
                            </small>
                        </td>
                        <td>
                            <small class="text-muted">
                                {{ user.created_at.strftime('%m/%d/%Y') }}
                            </small>
                        </td>
                        <td class="text-center">
                            <div class="btn-group" role="group">
                                <a href="{{ url_for('admin.user_detail', user_id=user.id) }}" 
                                   class="btn btn-outline-info btn-sm" 
                                   title="View User Details"
                                   data-bs-toggle="tooltip">
                                    <i class="fas fa-eye"></i>
                                    <span class="d-none d-lg-inline ms-1">View</span>
                                </a>
                                <button type="button" 
                                        class="btn btn-outline-secondary btn-sm reset-password-btn"
                                        data-user-id="{{ user.id }}"
                                        data-username="{{ user.username }}"
                                        data-email="{{ user.email }}"
                                        title="Reset User Password"
                                        data-bs-toggle="tooltip">
                                    <i class="fas fa-key"></i>
                                    <span class="d-none d-lg-inline ms-1">Reset</span>
                                </button>
                                <button type="button" 
                                        class="btn btn-{{ 'warning' if user.is_active else 'success' }} btn-sm"
                                        onclick="toggleUserStatus({{ user.id }}, '{{ 'warning' if user.is_active else 'success' }}')"
                                        title="{{ 'Deactivate User' if user.is_active else 'Activate User' }}"
                                        data-bs-toggle="tooltip">
                                    <i class="fas fa-{{ 'ban' if user.is_active else 'check' }}"></i>
                                    <span class="d-none d-lg-inline ms-1">{{ 'Deactivate' if user.is_active else 'Activate' }}</span>
                                </button>
                                {% if user.id != current_user.id %}
                                <button type="button" 
                                        class="btn btn-outline-danger btn-sm"
                                        onclick="deleteUser({{ user.id }})"
                                        title="Delete User Permanently"
                                        data-bs-toggle="tooltip">
                                    <i class="fas fa-trash"></i>
                                    <span class="d-none d-lg-inline ms-1">Delete</span>
                                </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Pagination -->
{% if users.pages > 1 %}
<div class="d-flex justify-content-between align-items-center mt-4">
    <div class="text-muted">
        Showing {{ users.items|length }} of {{ users.total }} users
    </div>
    <nav aria-label="User pagination">
        <ul class="pagination pagination-sm mb-0">
            {% if users.has_prev %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('admin.users', page=users.prev_num, search=request.args.get('search', '')) }}">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </li>
            {% endif %}
            
            {% for page_num in users.iter_pages() %}
                {% if page_num %}
                    {% if page_num != users.page %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('admin.users', page=page_num, search=request.args.get('search', '')) }}">
                            {{ page_num }}
                        </a>
                    </li>
                    {% else %}
                    <li class="page-item active">
                        <span class="page-link">{{ page_num }}</span>
                    </li>
                    {% endif %}
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
                {% endif %}
            {% endfor %}
            
            {% if users.has_next %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('admin.users', page=users.next_num, search=request.args.get('search', '')) }}">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Reset password functionality
    document.querySelectorAll('.reset-password-btn').forEach(button => {
        button.addEventListener('click', function() {
            const userId = this.dataset.userId;
            const username = this.dataset.username;
            const email = this.dataset.email;
            
            if (!confirm(`Are you sure you want to reset the password for user "${username}"?\n\nThis will generate a new temporary password and invalidate their current password.`)) {
                return;
            }
            
            // Show loading state
            const originalHtml = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span class="d-none d-lg-inline ms-1">Resetting...</span>';
            this.disabled = true;
            
            fetch(`/admin/user/${userId}/reset-password`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    showPasswordResetModal(data);
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while resetting the password');
            })
            .finally(() => {
                // Restore button state
                this.innerHTML = originalHtml;
                this.disabled = false;
            });
        });
    });
});

function showPasswordResetModal(data) {
    const modalHtml = `
        <div class="modal fade" id="passwordResetModal" tabindex="-1" aria-labelledby="passwordResetModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title" id="passwordResetModalLabel">
                            <i class="fas fa-check-circle me-2"></i>Password Reset Successful
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-success">
                            <i class="fas fa-info-circle me-2"></i>
                            Password has been reset for user <strong>${data.username}</strong> (${data.email})
                        </div>
                        
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="mb-0"><i class="fas fa-key me-2"></i>Temporary Password</h6>
                            </div>
                            <div class="card-body">
                                <div class="input-group">
                                    <input type="password" class="form-control" id="tempPassword" value="${data.temporary_password}" readonly>
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility()">
                                        <i class="fas fa-eye" id="passwordToggleIcon"></i>
                                    </button>
                                    <button class="btn btn-outline-primary" type="button" onclick="copyToClipboard('tempPassword')">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                                <small class="text-muted">The user can log in with this temporary password and should change it immediately.</small>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0"><i class="fas fa-link me-2"></i>Password Reset Link</h6>
                            </div>
                            <div class="card-body">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="resetUrl" value="${data.reset_url}" readonly>
                                    <button class="btn btn-outline-primary" type="button" onclick="copyToClipboard('resetUrl')">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                                <small class="text-muted">Send this link to the user so they can set their own password. Link expires in 15 minutes.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.getElementById('passwordResetModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('passwordResetModal'));
    modal.show();
    
    // Clean up modal after it's hidden
    document.getElementById('passwordResetModal').addEventListener('hidden.bs.modal', function () {
        this.remove();
    });
}

function togglePasswordVisibility() {
    const passwordField = document.getElementById('tempPassword');
    const toggleIcon = document.getElementById('passwordToggleIcon');
    
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        toggleIcon.className = 'fas fa-eye-slash';
    } else {
        passwordField.type = 'password';
        toggleIcon.className = 'fas fa-eye';
    }
}

function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    element.setSelectionRange(0, 99999); // For mobile devices
    
    navigator.clipboard.writeText(element.value).then(function() {
        // Show temporary success feedback
        const button = event.target.closest('button');
        const originalHtml = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check"></i> Copied!';
        button.classList.add('btn-success');
        button.classList.remove('btn-outline-primary');
        
        setTimeout(() => {
            button.innerHTML = originalHtml;
            button.classList.remove('btn-success');
            button.classList.add('btn-outline-primary');
        }, 2000);
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
        alert('Could not copy to clipboard');
    });
}

function toggleUserStatus(userId, status) {
    const button = event.target.closest('button');
    const isActive = status === 'warning';
    const action = isActive ? 'deactivate' : 'activate';
    
    if (!confirm(`Are you sure you want to ${action} this user?`)) {
        return;
    }
    
    fetch(`/admin/user/${userId}/toggle`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while updating user status');
    });
}

function deleteUser(userId) {
    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
        return;
    }
    
    fetch('/admin/delete_user', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ user_id: userId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            location.reload();
        } else {
            alert('Error: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while deleting the user');
    });
}
</script>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
.avatar-sm {
    font-size: 0.875rem;
}

.table th {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    vertical-align: middle;
}

.btn-group .btn {
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

/* Action buttons responsiveness */
@media (max-width: 1199.98px) {
    .btn-group .btn span {
        display: none !important;
    }
    
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
        min-width: 32px;
    }
}

/* Reset password button styling */
.reset-password-btn:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Modal improvements */
.modal-lg {
    max-width: 800px;
}

.input-group .form-control {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.alert-success {
    border-left: 4px solid #28a745;
}
</style>
{% endblock %}