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

{% block page_actions %}
<a href="#" class="btn btn-primary" onclick="showCreateUserModal()">
    <i class="bi bi-person-plus me-2"></i>Add User
</a>
{% endblock %}

{% block content %}
<div class="fade-in">
    <!-- Search Form -->
    <div class="search-form">
        <form method="GET" class="row g-3">
            <div class="col-md-8">
                <label for="search" class="form-label">Search Users</label>
                <input type="text" class="form-control" id="search" name="search" value="{{ search }}"
                    placeholder="Search by name, email, or username...">
            </div>
            <div class="col-md-2">
                <label for="size" class="form-label">Per Page</label>
                <select class="form-select" name="size" id="size">
                    <option value="10" {% if pagination.size==10 %}selected{% endif %}>10</option>
                    <option value="20" {% if pagination.size==20 %}selected{% endif %}>20</option>
                    <option value="50" {% if pagination.size==50 %}selected{% endif %}>50</option>
                    <option value="100" {% if pagination.size==100 %}selected{% endif %}>100</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="bi bi-search me-1"></i>Search
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Results Info -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="text-muted">
            Showing {{ ((pagination.page - 1) * pagination.size) + 1 }} to
            {{ (pagination.page * pagination.size) if (pagination.page * pagination.size) < pagination.total else
                pagination.total }} of {{ pagination.total }} users </div>
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-secondary" onclick="selectAll()">
                        <i class="bi bi-check-all me-1"></i>Select All
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="clearSelection()">
                        <i class="bi bi-x-square me-1"></i>Clear
                    </button>
                </div>
        </div>

        <!-- Users Table -->
        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th width="40">
                                <input type="checkbox" class="form-check-input" id="selectAllCheckbox">
                            </th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Username</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th width="150">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input user-checkbox" value="{{ user.id }}">
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-2"
                                        style="width: 32px; height: 32px;">
                                        <i class="bi bi-person"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">{{ user.full_name or user.name }}</div>
                                        {% if user.en_name %}
                                        <small class="text-muted">{{ user.en_name }}</small>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="text-truncate-custom">{{ user.email or '-' }}</span>
                            </td>
                            <td>
                                <code class="text-muted">{{ user.name }}</code>
                            </td>
                            <td>
                                {% if user.status == 1 %}
                                <span class="badge bg-success badge-status">Active</span>
                                {% else %}
                                <span class="badge bg-secondary badge-status">Inactive</span>
                                {% endif %}

                                {% if user.locked == 1 %}
                                <span class="badge bg-danger badge-status ms-1">Locked</span>
                                {% endif %}
                            </td>
                            <td>
                                <small class="text-muted">
                                    {{ user.created_at.strftime('%Y-%m-%d') if user.created_at else '-' }}
                                </small>
                            </td>
                            <td>
                                <div class="btn-group-action">
                                    <a href="#" class="btn btn-outline-success btn-action btn-sm" title="Edit User"
                                        data-action="edit-user" data-user-id="{{ user.id }}"
                                        data-user-name="{{ user.name }}"
                                        data-user-full-name="{{ user.full_name or '' }}"
                                        data-user-en-name="{{ user.en_name or '' }}"
                                        data-user-email="{{ user.email or '' }}" data-user-status="{{ user.status }}"
                                        data-user-locked="{{ user.locked }}">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-danger btn-action btn-sm"
                                        title="Delete User" data-action="delete-user" data-user-id="{{ user.id }}"
                                        data-user-name="{{ user.name }}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <i class="bi bi-person-x" style="font-size: 3rem;"></i>
                                <p class="mt-3 mb-0">No users found</p>
                                {% if search %}
                                <p class="small">Try adjusting your search criteria</p>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        {% if pagination.pages > 1 %}
        <nav aria-label="User pagination" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item {% if pagination.page <= 1 %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page=1&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-double-left"></i>
                    </a>
                </li>
                <li class="page-item {% if pagination.page <= 1 %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.page - 1 }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>

                {% for page_num in range(max(1, pagination.page - 2), min(pagination.pages + 1, pagination.page + 3)) %}
                <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
                    <a class="page-link"
                        href="?page={{ page_num }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        {{ page_num }}
                    </a>
                </li>
                {% endfor %}

                <li class="page-item {% if pagination.page >= pagination.pages %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.page + 1 }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
                <li class="page-item {% if pagination.page >= pagination.pages %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.pages }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-double-right"></i>
                    </a>
                </li>
            </ul>
        </nav>
        {% endif %}
    </div>

    <!-- Create User Modal -->
    <div class="modal fade" id="createUserModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="createUserForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="createUserError"></div>
                        <div class="mb-3">
                            <label for="createUserName" class="form-label">Username <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="createUserName" name="name" required
                                maxlength="50">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="createUserPassword" class="form-label">Password <span
                                    class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="createUserPassword" name="password" required
                                minlength="6">
                            <div class="form-text">Minimum 6 characters</div>
                        </div>
                        <div class="mb-3">
                            <label for="createUserMobile" class="form-label">Mobile</label>
                            <input type="text" class="form-control" id="createUserMobile" name="mobile"
                                maxlength="100">
                        </div>
                        <div class="mb-3">
                            <label for="createUserFullName" class="form-label">Full Name</label>
                            <input type="text" class="form-control" id="createUserFullName" name="full_name"
                                maxlength="100">
                        </div>
                        <div class="mb-3">
                            <label for="createUserEnName" class="form-label">English Name</label>
                            <input type="text" class="form-control" id="createUserEnName" name="en_name" maxlength="100">
                        </div>
                        <div class="mb-3">
                            <label for="createUserEmail" class="form-label">Email</label>
                            <input type="email" class="form-control" id="createUserEmail" name="email" maxlength="255">
                        </div>
                        <div class="mb-3">
                            <label for="createUserStatus" class="form-label">Status</label>
                            <select class="form-select" id="createUserStatus" name="status">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="createUserLocked" name="locked">
                                <label class="form-check-label" for="createUserLocked">
                                    Account Locked
                                </label>
                                <div class="form-text">Locked accounts cannot log in</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="createUserBtn">
                            <span class="spinner-border spinner-border-sm d-none me-2" id="createUserSpinner"></span>
                            Create User
                        </button>
                    </div>
                </form>
            </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 user <strong id="deleteUserName"></strong>?</p>
                    <p class="text-danger small mb-0">This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete User</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editUserForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="editUserError"></div>
                        <input type="hidden" id="editUserId" name="id">
                        <div class="mb-3">
                            <label for="editUserName" class="form-label">Username <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editUserName" name="name" required
                                maxlength="50">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="editUserFullName" class="form-label">Full Name</label>
                            <input type="text" class="form-control" id="editUserFullName" name="full_name"
                                maxlength="100">
                        </div>
                        <div class="mb-3">
                            <label for="editUserEnName" class="form-label">English Name</label>
                            <input type="text" class="form-control" id="editUserEnName" name="en_name" maxlength="100">
                        </div>
                        <div class="mb-3">
                            <label for="editUserEmail" class="form-label">Email</label>
                            <input type="email" class="form-control" id="editUserEmail" name="email" maxlength="255">
                        </div>
                        <div class="mb-3">
                            <label for="editUserStatus" class="form-label">Status</label>
                            <select class="form-select" id="editUserStatus" name="status">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editUserLocked" name="locked">
                                <label class="form-check-label" for="editUserLocked">
                                    Account Locked
                                </label>
                                <div class="form-text">Locked accounts cannot log in</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="editUserBtn">
                            <span class="spinner-border spinner-border-sm d-none me-2" id="editUserSpinner"></span>
                            Update User
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endblock %}

    {% block extra_scripts %}
    <script>
        let selectedUserId = null;

        function selectAll() {
            const checkboxes = document.querySelectorAll('.user-checkbox');
            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            checkboxes.forEach(cb => cb.checked = true);
            selectAllCheckbox.checked = true;
        }

        function clearSelection() {
            const checkboxes = document.querySelectorAll('.user-checkbox');
            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            checkboxes.forEach(cb => cb.checked = false);
            selectAllCheckbox.checked = false;
        }

        function confirmDelete(userId, userName) {
            selectedUserId = userId;
            document.getElementById('deleteUserName').textContent = userName;
            const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
            modal.show();
        }

        function showCreateUserModal() {
            // Reset form
            document.getElementById('createUserForm').reset();
            document.getElementById('createUserStatus').value = '1';
            document.getElementById('createUserLocked').checked = false;
            document.getElementById('createUserError').classList.add('d-none');

            // Clear any previous validation states
            const inputs = document.querySelectorAll('#createUserModal input, #createUserModal select');
            inputs.forEach(input => {
                input.classList.remove('is-invalid');
            });

            const modal = new bootstrap.Modal(document.getElementById('createUserModal'));
            modal.show();
        }

        function showEditUserModal(userId, userName, fullName, enName, email, status, locked) {
            // Reset form and populate with current values
            document.getElementById('editUserForm').reset();
            document.getElementById('editUserId').value = userId;
            document.getElementById('editUserName').value = userName;
            document.getElementById('editUserFullName').value = fullName || '';
            document.getElementById('editUserEnName').value = enName || '';
            document.getElementById('editUserEmail').value = email || '';
            document.getElementById('editUserStatus').value = status;
            document.getElementById('editUserLocked').checked = locked === 1;
            document.getElementById('editUserError').classList.add('d-none');

            // Clear any previous validation states
            const inputs = document.querySelectorAll('#editUserModal input, #editUserModal select');
            inputs.forEach(input => {
                input.classList.remove('is-invalid');
            });

            const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
            modal.show();
        }

        // Edit User Form Submission
        document.getElementById('editUserForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const submitBtn = document.getElementById('editUserBtn');
            const spinner = document.getElementById('editUserSpinner');
            const errorDiv = document.getElementById('editUserError');
            const userId = document.getElementById('editUserId').value;

            // Show loading state
            submitBtn.disabled = true;
            spinner.classList.remove('d-none');
            errorDiv.classList.add('d-none');

            try {
                const formData = new FormData(this);
                const userData = {
                    name: formData.get('name'),
                    full_name: formData.get('full_name') || null,
                    en_name: formData.get('en_name') || null,
                    email: formData.get('email') || null,
                    status: parseInt(formData.get('status')),
                    locked: formData.get('locked') ? 1 : 0
                };

                const response = await fetch(`{{ api_prefix }}/users/${userId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(userData)
                });

                if (response.ok) {
                    // Success - close modal and reload page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
                    modal.hide();
                    showSuccessToast('User updated successfully');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    // Handle error
                    const errorData = await response.json();
                    errorDiv.textContent = errorData.detail || 'Failed to update user';
                    errorDiv.classList.remove('d-none');
                }
            } catch (error) {
                errorDiv.textContent = 'Network error: ' + error.message;
                errorDiv.classList.remove('d-none');
            } finally {
                // Hide loading state
                submitBtn.disabled = false;
                spinner.classList.add('d-none');
            }
        });

        // Create User Form Submission
        document.getElementById('createUserForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const submitBtn = document.getElementById('createUserBtn');
            const spinner = document.getElementById('createUserSpinner');
            const errorDiv = document.getElementById('createUserError');

            // Show loading state
            submitBtn.disabled = true;
            spinner.classList.remove('d-none');
            errorDiv.classList.add('d-none');

            try {
                const formData = new FormData(this);
                const userData = {
                    name: formData.get('name'),
                    password: formData.get('password'),
                    mobile: formData.get('mobile') || null,
                    full_name: formData.get('full_name') || null,
                    en_name: formData.get('en_name') || null,
                    email: formData.get('email') || null,
                    status: parseInt(formData.get('status')),
                    locked: formData.get('locked') ? 1 : 0
                };

                const response = await fetch('{{ api_prefix }}/users', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(userData)
                });

                if (response.ok) {
                    // Success - close modal and reload page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('createUserModal'));
                    modal.hide();
                    showSuccessToast('User created successfully');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    // Handle error
                    const errorData = await response.json();
                    errorDiv.textContent = errorData.detail || 'Failed to create user';
                    errorDiv.classList.remove('d-none');
                }
            } catch (error) {
                errorDiv.textContent = 'Network error: ' + error.message;
                errorDiv.classList.remove('d-none');
            } finally {
                // Hide loading state
                submitBtn.disabled = false;
                spinner.classList.add('d-none');
            }
        });

        document.getElementById('confirmDeleteBtn').addEventListener('click', async function () {
            if (!selectedUserId) return;

            const submitBtn = this;
            const originalText = submitBtn.textContent;

            // Show loading state
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Deleting...';

            try {
                const response = await fetch(`{{ api_prefix }}/users/${selectedUserId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });

                if (response.ok) {
                    // Success - close modal and reload page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                    modal.hide();
                    showSuccessToast('User deleted successfully');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    // Handle error
                    const errorData = await response.json();
                    showErrorToast('Error deleting user: ' + (errorData.detail || 'Unknown error'));
                }
            } catch (error) {
                showErrorToast('Network error: ' + error.message);
            } finally {
                // Restore button state
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            }
        });

        // Event delegation for action buttons
        document.addEventListener('DOMContentLoaded', function () {
            document.addEventListener('click', function (e) {
                const button = e.target.closest('[data-action]');
                if (!button) return;

                e.preventDefault();
                const action = button.dataset.action;

                switch (action) {
                    case 'edit-user':
                        const userId = button.dataset.userId;
                        const userName = button.dataset.userName;
                        const fullName = button.dataset.userFullName;
                        const enName = button.dataset.userEnName;
                        const email = button.dataset.userEmail;
                        const status = parseInt(button.dataset.userStatus);
                        const locked = parseInt(button.dataset.userLocked);
                        showEditUserModal(userId, userName, fullName, enName, email, status, locked);
                        break;

                    case 'delete-user':
                        confirmDelete(button.dataset.userId, button.dataset.userName);
                        break;
                }
            });
        });

        // Handle select all checkbox
        document.getElementById('selectAllCheckbox').addEventListener('change', function () {
            const checkboxes = document.querySelectorAll('.user-checkbox');
            checkboxes.forEach(cb => cb.checked = this.checked);
        });
    </script>
    {% endblock %}