{% extends "layout.twig" %}

{% set errorMessages = {
    'self_demote':    'You cannot demote yourself — ask another admin.',
    'last_admin':     'Cannot demote the last remaining admin.',
    'self_tombstone': 'You cannot tombstone yourself — ask another admin.',
    'bad_action':     'Unrecognised action.',
    'not_found':      'User not found.',
    'db_error':       'Could not save. Try again.',
} %}
{% set flashMessages = {
    'promoted':   'Admin granted.',
    'demoted':    'Admin revoked.',
    'tombstoned': 'User marked as former — name and email are now hidden in the UI. Audit trail keeps the original values.',
    'restored':   'User restored.',
    'noop':       'Nothing changed.',
} %}

{% block content %}
<section class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold tracking-tight">Users</h1>
        <p class="text-slate-600 text-sm mt-1 max-w-prose dark:text-slate-400">
            Everyone who has ever signed in. Toggle admin status here; you
            cannot demote yourself or the last admin. Users are never deleted
            — to honour a privacy / right-to-be-forgotten request, mark a
            user as <em>former</em>: the live UI hides their name and email
            (the audit log keeps the original values verbatim).
        </p>
    </div>

    {% if error and errorMessages[error] is defined %}
        <div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200">
            {{ errorMessages[error] }}
        </div>
    {% endif %}
    {% if flash and flashMessages[flash] is defined %}
        <div class="rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:bg-green-900 dark:border-green-800 dark:text-green-200">
            {{ flashMessages[flash] }}
        </div>
    {% endif %}

    <div class="rounded-lg border bg-white overflow-hidden dark:bg-slate-800 dark:border-slate-700">
        {% if users is empty %}
            <div class="p-8 text-center text-slate-500 text-sm dark:text-slate-400">No users yet.</div>
        {% else %}
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-slate-600 text-xs uppercase tracking-wider dark:bg-slate-700 dark:text-slate-300">
                    <tr>
                        <th class="text-left px-4 py-2 font-semibold">Email</th>
                        <th class="text-left px-4 py-2 font-semibold">Display name</th>
                        <th class="text-left px-4 py-2 font-semibold">Last login (UTC)</th>
                        <th class="text-left px-4 py-2 font-semibold">Admin</th>
                        <th class="text-right px-4 py-2 font-semibold">&nbsp;</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                    {% for u in users %}
                        {% set isSelf       = u.id == currentUser.id %}
                        {% set isTombstoned = u.isTombstoned %}
                        {% if isTombstoned %}
                            <tr class="bg-slate-50 dark:bg-slate-900/40">
                                <td class="px-4 py-2 font-mono text-xs italic text-slate-500 dark:text-slate-400">
                                    {{ u.publicEmail }}
                                    <span class="ml-1 inline-block px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider bg-amber-100 text-amber-800 rounded dark:bg-amber-900 dark:text-amber-200">former</span>
                                </td>
                                <td class="px-4 py-2 italic text-slate-500 dark:text-slate-400">{{ u.publicDisplayName }}</td>
                                <td class="px-4 py-2 text-slate-500 font-mono text-xs dark:text-slate-400">
                                    {% if u.lastLoginAt is not null %}{{ u.lastLoginAt }}{% else %}<span class="text-slate-400 dark:text-slate-500">—</span>{% endif %}
                                </td>
                                <td class="px-4 py-2 text-slate-400 dark:text-slate-500">—</td>
                                <td class="px-4 py-2 text-right">
                                    <form method="post" action="/users/{{ u.id }}/tombstone" hx-boost="true" hx-target="body">
                                        <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                                        <input type="hidden" name="action" value="restore">
                                        <button type="submit"
                                                class="rounded-md border border-slate-300 bg-white text-slate-700 px-3 py-1 text-sm hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                                            Restore
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <form method="post" action="/users/{{ u.id }}" hx-boost="true" hx-target="body" class="contents">
                                    <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                                    <td class="px-4 py-2 font-mono text-xs">
                                        {{ u.email }}
                                        {% if isSelf %}
                                            <span class="ml-1 inline-block px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider bg-slate-100 text-slate-700 rounded dark:bg-slate-700 dark:text-slate-200">you</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-4 py-2">{{ u.displayName }}</td>
                                    <td class="px-4 py-2 text-slate-500 font-mono text-xs dark:text-slate-400">
                                        {% if u.lastLoginAt is not null %}{{ u.lastLoginAt }}{% else %}<span class="text-slate-400 dark:text-slate-500">—</span>{% endif %}
                                    </td>
                                    <td class="px-4 py-2">
                                        <label class="inline-flex items-center gap-2">
                                            <input name="is_admin" type="checkbox" value="1"
                                                   {{ u.isAdmin ? 'checked' : '' }}
                                                   {% if isSelf and u.isAdmin %}disabled title="You cannot demote yourself"{% endif %}
                                                   class="rounded border-slate-300 dark:border-slate-600">
                                            <span class="text-slate-600 dark:text-slate-400">admin</span>
                                        </label>
                                    </td>
                                    <td class="px-4 py-2 text-right">
                                        <button type="submit"
                                                class="rounded-md border border-slate-300 bg-white text-slate-700 px-3 py-1 text-sm hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                                            Save
                                        </button>
                                    </td>
                                </form>
                            </tr>
                            {% if not isSelf %}
                                <tr>
                                    <td colspan="5" class="px-4 pb-2 pt-0 text-right">
                                        <form method="post" action="/users/{{ u.id }}/tombstone" hx-boost="true" hx-target="body">
                                            <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                                            <input type="hidden" name="action" value="tombstone">
                                            <button type="submit"
                                                    class="text-xs text-amber-700 hover:underline dark:text-amber-300">
                                                Mark as former user
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
</section>
{% endblock %}