{% extends "base.html" %}

{% block title %}مدیریت کاربران{% endblock %}

{% block content %}
    <div class="section-container">
        <div class="section-header">
            <h2><i class="fas fa-user-plus"></i> افزودن کاربر جدید</h2>
        </div>
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="flash-message {{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        <div class="table-container">
            <table class="users-table">
                <tr>
                    <th>نام کاربری</th>
                    <th>رمز عبور</th>
                    <th>نقش</th>
                    <th>عملیات</th>
                </tr>
                <tr>
                    <td><input type="text" id="newUsername"></td>
                    <td><input type="password" id="newPassword"></td>
                    <td>
                        <select id="newRole">
                            <option value="reader">خواننده</option>
                            <option value="editor">ویرایشگر</option>
                            <option value="admin">ادمین</option>
                        </select>
                    </td>
                    <td><button onclick="addUser()">افزودن</button></td>
                </tr>
            </table>
        </div>
    </div>
    
    <div class="section-container">
        <div class="section-header">
            <h2><i class="fas fa-users"></i> لیست کاربران</h2>
        </div>
        <p>نکته:به دلیل حفظ امنیت سیستم ، پسوردها به صورت رمزنگاری شده ذخیره می شوند و به صورت مستقیم قابل دسترسی و یا نمایش نمی باشند.</p>
        <div class="table-container">
            <table class="users-table">
                <thead>
                    <tr>
                        <th>نام کاربری</th>
                        <th>رمز عبور</th>
                        <th>نقش</th>
                        <th>عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                        <tr>
                            <td><input type="text" id="editUsername_{{ user[0] }}" value="{{ user[1] }}"></td>
                            <td>
                                {% if user_role == 'owner' or (user_role == 'admin' and user[2] not in ['admin', 'owner']) %}
                                    <input type="password" id="editPassword_{{ user[0] }}" placeholder="رمز جدید را وارد کنید...">
                                {% else %}
                                    <input type="password" id="editPassword_{{ user[0] }}" placeholder="بدون دسترسی" disabled>
                                {% endif %}
                            </td>
                            <td>
                                {% if user[2] == 'reader' %}خواننده{% endif %}
                                {% if user[2] == 'editor' %}ویرایشگر{% endif %}
                                {% if user[2] == 'admin' %}ادمین{% endif %}
                                {% if user[2] == 'owner' %}مالک{% endif %}
                            </td>
                            <td>
                                <button onclick="editUser('{{ user[0] }}')">ذخیره</button>
                                {% if (user_role == 'admin' and user[2] not in ['admin', 'owner']) or (user_role == 'owner' and user[0] != current_user.id) %}
                                    <button class="delete-btn" onclick="openUserDeleteModal('{{ user[0] }}', '{{ user[1] }}')">حذف</button>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal Structure for User Deletion -->
    <div id="userDeleteModal" class="modal">
        <div class="modal-content delete-modal-content">
            <span class="close" onclick="closeUserDeleteModal()">&times;</span>
            <h2><i class="fas fa-trash-alt"></i> تایید حذف</h2>
            <div class="delete-modal-body">
                <p id="userDeleteConfirmMessage">آیا از حذف این کاربر مطمئن هستید؟</p>
                <div class="warning-notice">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>این عملیات غیرقابل بازگشت است.</span>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="cancel-btn" onclick="closeUserDeleteModal()"><i class="fas fa-times"></i> انصراف</button>
                <button type="button" class="delete-btn" onclick="confirmUserDelete()"><i class="fas fa-trash-alt"></i> حذف کاربر</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <script>
    // Variables for user deletion
    let userIdToDelete = null;
    let userNameToDelete = '';

    // Open user delete confirmation modal
    function openUserDeleteModal(userId, userName) {
        userIdToDelete = userId;
        userNameToDelete = userName;
        
        const modal = document.getElementById('userDeleteModal');
        const messageElement = document.getElementById('userDeleteConfirmMessage');
        
        if (!modal || !messageElement) {
            console.error("User delete modal elements not found.");
            return;
        }
        
        // Update confirmation message with username
        messageElement.textContent = `آیا از حذف کاربر "${userName}" مطمئن هستید؟`;
        
        // Show modal
        modal.style.display = 'block';
    }

    // Close user delete confirmation modal
    function closeUserDeleteModal() {
        const modal = document.getElementById('userDeleteModal');
        if (modal) {
            modal.style.display = 'none';
        }
        
        // Clear ID and name
        userIdToDelete = null;
        userNameToDelete = '';
    }

    // Confirm user deletion
    function confirmUserDelete() {
        if (!userIdToDelete) {
            closeUserDeleteModal();
            return;
        }
        
        fetch(`/delete_user/${userIdToDelete}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.message || 'خطا در ارتباط با سرور');
                });
            }
            return response.json();
        })
        .then(result => {
            if (result.status === 'success') {
                // Replace alert with showToast
                showToast(`کاربر "${userNameToDelete}" با موفقیت حذف شد`, 'success');
                // Reload page to reflect changes
                location.reload();
            } else {
                // Replace alert with showToast
                showToast('خطا: ' + (result.message || 'خطای نامشخص رخ داده است'), 'error');
            }
            closeUserDeleteModal();
        })
        .catch(error => {
            // Replace alert with showToast
            showToast('خطا در حذف: ' + error.message, 'error');
            closeUserDeleteModal();
        });
    }

    // Close modal if clicking outside
    window.addEventListener('click', function(event) {
        const modal = document.getElementById('userDeleteModal');
        if (event.target === modal) {
            closeUserDeleteModal();
        }
    });
    </script>
    <style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.7);
    }

    .modal-content {
        background-color: #fff;
        margin: 10% auto;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        position: relative;
        width: 80%;
        max-width: 500px;
    }

    .delete-modal-content {
        max-width: 500px;
    }

    .delete-modal-body {
        margin: 20px 0;
        text-align: center;
    }

    #userDeleteConfirmMessage {
        font-size: 1.1em;
        margin-bottom: 15px;
    }

    .warning-notice {
        background-color: #fff3e0;
        border: 1px solid #ffcc80;
        color: #e65100;
        padding: 10px;
        border-radius: 4px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .warning-notice i {
        font-size: 1.5em;
        margin-left: 10px;
    }

    .close {
        color: #aaa;
        float: left;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .form-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }

    .cancel-btn {
        background-color: #f0f0f0;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
    }

    .delete-btn {
        background-color: #f44336;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
    }

    .delete-btn:hover {
        background-color: #d32f2f;
    }
    </style>
{% endblock %}