{% extends "base.html" %}

{% block title %}User Management — IslamInLife Quran App{% endblock %}

{% block body %}

<main style="max-width:1100px; margin:30px auto;">

    <div class="card">

        <div style="
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:20px;
        ">
            <div>
                <h2 style="color:#1a3a5c; margin:0;">
                    👥 User Management
                </h2>

                <p style="
                    margin:6px 0 0;
                    color:#7f8c8d;
                    font-size:13px;
                ">
                    Super Admin only
                </p>
            </div>

            <a href="{{ url_for('account') }}"
               class="btn-save"
               style="text-decoration:none;">
                ← My Account
            </a>
        </div>


        {% if error %}
            <div class="msg msg-error">
                {{ error }}
            </div>
        {% endif %}

        {% if success %}
            <div class="msg msg-success">
                {{ success }}
            </div>
        {% endif %}


        <div style="
            overflow-x:auto;
            border:1px solid #ddd;
            border-radius:6px;
        ">

            <table style="
                width:100%;
                border-collapse:collapse;
                font-size:13px;
            ">

                <thead>
                    <tr style="
                        background:#1a3a5c;
                        color:white;
                    ">
                        <th style="padding:10px; text-align:left;">Username</th>
                        <th style="padding:10px; text-align:left;">Display Name</th>
                        <th style="padding:10px; text-align:left;">Email</th>
                        <th style="padding:10px; text-align:center;">Verified</th>
                        <th style="padding:10px; text-align:center;">Role</th>
                        <th style="padding:10px; text-align:center;">Created</th>
                        <th style="padding:10px; text-align:center;">Actions</th>
                    </tr>
                </thead>

                <tbody>

                {% for user in users %}

                    <tr style="border-bottom:1px solid #e5e5e5;">

                        <td style="padding:10px;">
                            <strong>{{ user.username }}</strong>
                        </td>

                        <td style="padding:10px;">
                            {{ user.display_name }}
                        </td>

                        <td style="padding:10px;">
                            {{ user.email or "—" }}
                        </td>

                        <td style="padding:10px; text-align:center;">

                            {% if user.email_verified %}
                                <span style="color:#27ae60;">
                                    ✓ Verified
                                </span>
                            {% else %}
                                <span style="color:#c0392b;">
                                    ✗ Not verified
                                </span>
                            {% endif %}

                        </td>

                        <td style="padding:10px; text-align:center;">

                            {% if user.is_super_admin %}

                                <span style="
                                    background:#8e44ad;
                                    color:white;
                                    padding:4px 8px;
                                    border-radius:4px;
                                    font-size:11px;
                                ">
                                    SUPER ADMIN
                                </span>

                            {% elif user.is_admin %}

                                <span style="
                                    background:#2980b9;
                                    color:white;
                                    padding:4px 8px;
                                    border-radius:4px;
                                    font-size:11px;
                                ">
                                    ADMIN
                                </span>

                            {% else %}

                                <span style="
                                    background:#7f8c8d;
                                    color:white;
                                    padding:4px 8px;
                                    border-radius:4px;
                                    font-size:11px;
                                ">
                                    USER
                                </span>

                            {% endif %}

                        </td>

                        <td style="
                            padding:10px;
                            text-align:center;
                            white-space:nowrap;
                        ">
                            {{ user.created_at }}
                        </td>

                        <td style="
                            padding:10px;
                            text-align:center;
                            white-space:nowrap;
                        ">

                            {% if user.is_super_admin %}

                                <span style="
                                    color:#7f8c8d;
                                    font-size:12px;
                                ">
                                    🔒 Protected
                                </span>

                            {% else %}

                                <button
                                    type="button"
                                    class="btn-save"
                                    style="font-size:11px; padding:5px 8px;"
                                    onclick="editUser({{ user.id }})">
                                    ✏️ Edit
                                </button>

                                <button
                                    type="button"
                                    style="
                                        font-size:11px;
                                        padding:5px 8px;
                                        margin-left:4px;
                                        border:0;
                                        border-radius:4px;
                                        background:#e67e22;
                                        color:white;
                                        cursor:pointer;
                                    "
                                    onclick="resetPassword({{ user.id }}, '{{ user.username|e }}')">
                                    🔑 Reset
                                </button>

                                <button
                                    type="button"
                                    style="
                                        font-size:11px;
                                        padding:5px 8px;
                                        margin-left:4px;
                                        border:0;
                                        border-radius:4px;
                                        background:#c0392b;
                                        color:white;
                                        cursor:pointer;
                                    "
                                    onclick="deleteUser({{ user.id }}, '{{ user.username|e }}')">
                                    🗑️ Delete
                                </button>

                            {% endif %}

                        </td>

                    </tr>

                {% else %}

                    <tr>
                        <td colspan="7"
                            style="
                                padding:30px;
                                text-align:center;
                                color:#7f8c8d;
                            ">
                            No users found.
                        </td>
                    </tr>

                {% endfor %}

                </tbody>

            </table>

        </div>

    </div>

</main>


<script>

function editUser(userId) {
    window.location.href =
        "{{ url_for('super_admin_edit_user', user_id=0) }}"
        .replace("/0", "/" + userId);
}


function resetPassword(userId, username) {

    const newPassword = prompt(
        "Enter a new password for " + username + ":"
    );

    if (newPassword === null) {
        return;
    }

    if (newPassword.length < 4) {
        alert("Password must be at least 4 characters.");
        return;
    }

    const form = document.createElement("form");

    form.method = "POST";
    form.action =
        "{{ url_for('super_admin_reset_password', user_id=0) }}"
        .replace("/0", "/" + userId);

    const input = document.createElement("input");

    input.type = "hidden";
    input.name = "new_password";
    input.value = newPassword;

    form.appendChild(input);
    document.body.appendChild(form);

    form.submit();
}


function deleteUser(userId, username) {

    const confirmed = confirm(
        "Delete user '" + username + "'?\n\n" +
        "WARNING: This will permanently delete the user's account " +
        "and all of their personal IQA data."
    );

    if (!confirmed) {
        return;
    }

    const form = document.createElement("form");

    form.method = "POST";
    form.action =
        "{{ url_for('super_admin_delete_user', user_id=0) }}"
        .replace("/0", "/" + userId);

    document.body.appendChild(form);

    form.submit();
}

</script>

{% endblock %}