{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Admin · Users{% endblock %}
{% block content %}
    {{ page_header('Admin', tabs=tabs, active_tab='users') }}
    <div x-data="{ addOpen: false, resetTarget: null, roleTarget: null }">
        <div class="flex justify-between items-center mb-4">
            <p class="text-sm text-slate-500">{{ users|length }} user{{ '' if users|length == 1 else 's' }}</p>
            <button @click="addOpen = true" class="inline-flex items-center gap-2 btn-primary px-3 py-1.5 rounded-md text-sm">
                <i data-lucide="user-plus" class="h-4 w-4"></i>Add user
            </button>
        </div>
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
            <table class="w-full text-sm">
                <thead class="text-xs uppercase text-slate-500">
                    <tr>
                        <th class="text-left px-5 py-2">User</th>
                        <th class="py-2 text-left">Role</th>
                        <th class="py-2 text-left">Last login</th>
                        <th class="py-2 pr-5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for u in users %}
                    {% set is_me = u.id == g.current_user.id %}
                    {% set is_last_admin = u.role == 'admin' and admin_count == 1 %}
                    <tr class="border-t border-slate-100 dark:border-slate-800">
                        <td class="px-5 py-2 font-medium">
                            {{ u.username }}
                            {% if is_me %}<span class="ml-2 text-xs text-slate-500">(you)</span>{% endif %}
                            {% if u.must_change_password %}<span class="ml-2 text-xs text-amber-600">must change pw</span>{% endif %}
                        </td>
                        <td class="py-2">
                            <span class="text-xs font-medium px-2 py-0.5 rounded border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200">{{ u.role }}</span>
                        </td>
                        <td class="py-2 text-slate-500 font-mono text-xs">{{ u.last_login }}</td>
                        <td class="py-2 pr-5 text-right">
                            <div class="inline-flex gap-1">
                                <button type="button"
                                        @click="resetTarget = { id: {{ u.id }}, username: '{{ u.username }}' }"
                                        class="text-xs px-2 py-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800">
                                    Reset password
                                </button>
                                <button type="button"
                                        @click="roleTarget = { id: {{ u.id }}, username: '{{ u.username }}', role: '{{ u.role }}' }"
                                        class="text-xs px-2 py-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800
                                               {% if is_me or is_last_admin %}opacity-40 pointer-events-none{% endif %}"
                                        title="{% if is_me %}You can't change your own role.{% elif is_last_admin %}Can't demote the only admin.{% else %}Change role{% endif %}">
                                    Change role
                                </button>
                                <form method="post" action="{{ url_for('admin_users') }}" class="inline">
                                    <input type="hidden" name="action" value="delete">
                                    <input type="hidden" name="user_id" value="{{ u.id }}">
                                    <button class="text-xs px-2 py-1 rounded text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20
                                                   {% if is_me or is_last_admin %}opacity-40 pointer-events-none{% endif %}"
                                            {% if is_me or is_last_admin %}disabled{% endif %}
                                            title="{% if is_me %}You can't delete your own account.{% elif is_last_admin %}Can't delete the only admin.{% else %}Delete user{% endif %}"
                                            onclick="return confirm('Delete {{ u.username }}?')">
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# Add user modal #}
        <div x-show="addOpen" x-transition.opacity class="fixed inset-0 z-40 bg-black/50 flex items-center justify-center p-4" style="display:none" @click.self="addOpen = false" @keydown.escape.window="addOpen = false">
            <form method="post" action="{{ url_for('admin_users') }}" class="bg-white dark:bg-slate-900 rounded-lg shadow-xl max-w-md w-full p-6 space-y-4">
                <input type="hidden" name="action" value="add">
                <h3 class="font-semibold">Add user</h3>
                <div>
                    <label class="block text-xs text-slate-500 mb-1">Username</label>
                    <input name="username" required autocomplete="off" class="w-full rounded-md text-sm">
                </div>
                <div>
                    <label class="block text-xs text-slate-500 mb-1">Password (min 8 characters)</label>
                    <input type="password" name="password" required minlength="8" autocomplete="new-password" class="w-full rounded-md text-sm">
                </div>
                <div>
                    <label class="block text-xs text-slate-500 mb-2">Role</label>
                    <div class="flex gap-2">
                        {% for r in ['admin', 'distributor', 'user'] %}
                            <label class="flex items-center gap-2 px-3 py-2 border rounded-md cursor-pointer flex-1 border-slate-200 dark:border-slate-700">
                                <input type="radio" name="role" value="{{ r }}" {% if r == 'distributor' %}checked{% endif %} class="text-indigo-600">
                                <span class="text-sm">{{ r|capitalize }}</span>
                            </label>
                        {% endfor %}
                    </div>
                </div>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="addOpen = false" class="px-3 py-1.5 text-sm">Cancel</button>
                    <button class="btn-primary px-3 py-1.5 rounded-md text-sm">Add user</button>
                </div>
            </form>
        </div>

        {# Reset password modal #}
        <div x-show="resetTarget" x-transition.opacity class="fixed inset-0 z-40 bg-black/50 flex items-center justify-center p-4" style="display:none" @click.self="resetTarget = null" @keydown.escape.window="resetTarget = null">
            <form method="post" action="{{ url_for('admin_users') }}" class="bg-white dark:bg-slate-900 rounded-lg shadow-xl max-w-md w-full p-6 space-y-4">
                <input type="hidden" name="action" value="reset_password">
                <input type="hidden" name="user_id" x-bind:value="resetTarget && resetTarget.id">
                <h3 class="font-semibold">Reset password for <span x-text="resetTarget && resetTarget.username"></span></h3>
                <div>
                    <label class="block text-xs text-slate-500 mb-1">New password (min 8 characters)</label>
                    <input type="password" name="new_password" required minlength="8" autocomplete="new-password" class="w-full rounded-md text-sm">
                </div>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="resetTarget = null" class="px-3 py-1.5 text-sm">Cancel</button>
                    <button class="btn-primary px-3 py-1.5 rounded-md text-sm">Save</button>
                </div>
            </form>
        </div>

        {# Change role modal #}
        <div x-show="roleTarget" x-transition.opacity class="fixed inset-0 z-40 bg-black/50 flex items-center justify-center p-4" style="display:none" @click.self="roleTarget = null" @keydown.escape.window="roleTarget = null">
            <form method="post" action="{{ url_for('admin_users') }}" class="bg-white dark:bg-slate-900 rounded-lg shadow-xl max-w-md w-full p-6 space-y-4">
                <input type="hidden" name="action" value="set_role">
                <input type="hidden" name="user_id" x-bind:value="roleTarget && roleTarget.id">
                <h3 class="font-semibold">Change role for <span x-text="roleTarget && roleTarget.username"></span></h3>
                <div class="flex gap-2">
                    {% for r in ['admin', 'distributor', 'user'] %}
                        <label class="flex items-center gap-2 px-3 py-2 border rounded-md cursor-pointer flex-1 border-slate-200 dark:border-slate-700">
                            <input type="radio" name="role" value="{{ r }}" x-bind:checked="roleTarget && roleTarget.role === '{{ r }}'" class="text-indigo-600">
                            <span class="text-sm">{{ r|capitalize }}</span>
                        </label>
                    {% endfor %}
                </div>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="roleTarget = null" class="px-3 py-1.5 text-sm">Cancel</button>
                    <button class="btn-primary px-3 py-1.5 rounded-md text-sm">Save</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}