{% extends "base.html" %}

{% block title %}Tusk - User Management{% endblock %}

{% block header_actions %}
<button onclick="window.dispatchEvent(new CustomEvent('open-create-user'))" class="btn" style="background:var(--green);color:#fff;border-color:var(--green)">
    <i data-lucide="user-plus"></i>Add user
</button>
{% endblock %}

{% block content %}
<main class="dash-page" x-data="usersPage()" style="flex:1;overflow:auto">
    <div class="dash-head">
        <div>
            <div class="dash-title">User management</div>
            <div class="dash-desc">Manage users, groups, and permissions.</div>
        </div>
        <div class="nav-tabs">
            <button class="nav-tab" :class="activeTab === 'users' && 'active'" @click="activeTab = 'users'"><i data-lucide="users"></i>Users</button>
            <button class="nav-tab" :class="activeTab === 'groups' && 'active'" @click="activeTab = 'groups'"><i data-lucide="layers"></i>Groups</button>
            <button class="nav-tab" :class="activeTab === 'audit' && 'active'" @click="activeTab = 'audit'"><i data-lucide="history"></i>Audit log</button>
        </div>
    </div>

    <!-- Users tab -->
    <div x-show="activeTab === 'users'" class="card" style="overflow:hidden">
        <table class="dtable" style="width:100%">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Groups</th>
                    <th>Status</th>
                    <th>Last login</th>
                    <th style="text-align:right">Actions</th>
                </tr>
            </thead>
            <tbody id="users-table"
                   hx-get="/api/users/"
                   hx-trigger="load, usersChanged from:body"
                   hx-swap="innerHTML">
                <tr><td colspan="7" style="padding:24px;text-align:center;color:var(--fg-3)">Loading…</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Groups tab -->
    <div x-show="activeTab === 'groups'" x-cloak>
        <div id="groups-grid" class="dash-grid"
             hx-get="/api/groups/" hx-trigger="load" hx-swap="innerHTML">
            <div style="color:var(--fg-3);grid-column:span 12">Loading…</div>
        </div>
    </div>

    <!-- Audit tab -->
    <div x-show="activeTab === 'audit'" x-cloak
         x-data="{ search: '', actionFilter: '', offset: 0, limit: 50,
                   refresh() { htmx.trigger('#audit-table', 'refresh'); } }">
        <div style="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center">
            <input name="search" type="text" x-model.debounce.300ms="search"
                   @input="offset = 0; refresh()"
                   placeholder="Search user / resource / details / IP…"
                   style="width:280px">
            <select name="action" x-model="actionFilter" @change="offset = 0; refresh()" style="width:200px">
                <option value="">All actions</option>
                <option value="login">Login</option>
                <option value="logout">Logout</option>
                <option value="user.create">User create</option>
                <option value="user.update">User update</option>
                <option value="user.delete">User delete</option>
                <option value="password.change">Password change</option>
                <option value="group.assign">Group assign</option>
                <option value="data.export">Data export</option>
            </select>
            <button @click="refresh()" class="btn btn-sm"><i data-lucide="refresh-cw"></i>Refresh</button>
            <a :href="'/api/audit/export?format=csv' +
                       (actionFilter ? '&action=' + actionFilter : '') +
                       (search ? '&search=' + encodeURIComponent(search) : '')"
               class="btn btn-sm">
                <i data-lucide="download"></i>Export CSV
            </a>
        </div>
        <div class="card" style="overflow:hidden">
            <table class="dtable" style="width:100%">
                <thead>
                    <tr>
                        <th>Timestamp</th>
                        <th>User</th>
                        <th>Action</th>
                        <th>Resource</th>
                        <th>Details</th>
                        <th>IP address</th>
                    </tr>
                </thead>
                <tbody id="audit-table"
                       :hx-get="'/api/audit/?limit=' + limit + '&offset=' + offset +
                                (actionFilter ? '&action=' + actionFilter : '') +
                                (search ? '&search=' + encodeURIComponent(search) : '')"
                       hx-trigger="load, refresh" hx-swap="innerHTML">
                    <tr><td colspan="6" style="padding:24px;text-align:center;color:var(--fg-3)">Loading…</td></tr>
                </tbody>
            </table>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12.5px;color:var(--fg-3)">
            <span>Page <span x-text="Math.floor(offset / limit) + 1"></span></span>
            <div style="display:flex;gap:6px">
                <button @click="offset = Math.max(0, offset - limit); refresh()"
                        :disabled="offset === 0" class="btn btn-sm">
                    Previous
                </button>
                <button @click="offset += limit; refresh()" class="btn btn-sm">
                    Next
                </button>
            </div>
        </div>
    </div>

    <!-- Create User Modal -->
    <div x-data="{ open: false }"
         x-show="open"
         x-on:open-create-user.window="open = true"
         x-on:keydown.escape.window="open = false"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center">
        <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
        <div class="relative bg-[#161b22] border border-[#30363d] rounded-lg w-full max-w-md p-6" @click.stop>
            <h3 class="text-lg font-semibold mb-4">Create New User</h3>
            <form hx-post="/api/users/"
                  hx-swap="none"
                  @htmx:after-request.camel="if ($event.detail.successful) { open = false; $el.reset(); htmx.trigger(document.body, 'usersChanged') }">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">Username *</label>
                        <input type="text" name="username" required
                            class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Password *</label>
                        <input type="password" name="password" required minlength="8"
                            class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Display Name</label>
                        <input type="text" name="display_name"
                            class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Email</label>
                        <input type="email" name="email"
                            class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div class="flex items-center gap-2">
                        <input type="checkbox" name="is_admin" id="create-is-admin" class="rounded">
                        <label for="create-is-admin" class="text-sm">Administrator</label>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" @click="open = false" class="px-4 py-2 rounded-lg text-sm hover:bg-[#21262d]">Cancel</button>
                    <button type="submit" class="px-4 py-2 rounded-lg text-sm bg-[#238636] hover:bg-[#2ea043]">Create User</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div x-show="editOpen"
         x-on:keydown.escape.window="editOpen = false"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center">
        <div class="absolute inset-0 bg-black/60" @click="editOpen = false"></div>
        <div class="relative bg-[#161b22] border border-[#30363d] rounded-lg w-full max-w-lg p-6" @click.stop>
            <h3 class="text-lg font-semibold mb-4">Edit User</h3>
            <form @submit.prevent="updateUser()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">Username</label>
                        <input type="text" :value="editData.username" disabled
                            class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm opacity-50">
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium mb-2">Display Name</label>
                            <input type="text" x-model="editData.display_name"
                                class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-2">Email</label>
                            <input type="email" x-model="editData.email"
                                class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-indigo-500">
                        </div>
                    </div>
                    <div class="flex items-center gap-4">
                        <label class="flex items-center gap-2">
                            <input type="checkbox" x-model="editData.is_admin" class="rounded accent-indigo-500">
                            <span class="text-sm">Administrator</span>
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" x-model="editData.is_active" class="rounded accent-indigo-500">
                            <span class="text-sm">Active</span>
                        </label>
                    </div>

                    <!-- Groups Assignment -->
                    <div>
                        <label class="block text-sm font-medium mb-2">Groups</label>
                        <div class="grid grid-cols-2 gap-2 bg-[#0d1117] border border-[#30363d] rounded-lg p-3 max-h-40 overflow-y-auto">
                            <template x-for="g in allGroups" :key="g.id">
                                <label class="flex items-center gap-2 p-1.5 rounded hover:bg-[#21262d] cursor-pointer">
                                    <input type="checkbox" :value="g.id"
                                        :checked="editData.group_ids.includes(g.id)"
                                        @change="toggleGroup(g.id, $el.checked)"
                                        class="rounded accent-indigo-500">
                                    <span class="text-sm" x-text="g.name"></span>
                                </label>
                            </template>
                            <template x-if="allGroups.length === 0">
                                <div class="text-[#8b949e] text-sm col-span-2">No groups available</div>
                            </template>
                        </div>
                        <p class="text-xs text-[#8b949e] mt-1">Select groups to assign to this user</p>
                    </div>
                </div>
                <div class="flex justify-between mt-6 pt-4 border-t border-[#30363d]">
                    <button type="button" @click="resetPasswordOpen = true" class="px-4 py-2 rounded-lg text-sm text-yellow-400 hover:bg-yellow-500/20">
                        Reset Password
                    </button>
                    <div class="flex gap-3">
                        <button type="button" @click="editOpen = false" class="px-4 py-2 rounded-lg text-sm hover:bg-[#21262d]">Cancel</button>
                        <button type="submit" class="px-4 py-2 rounded-lg text-sm bg-[#238636] hover:bg-[#2ea043]">Save Changes</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Reset Password Modal -->
    <div x-show="resetPasswordOpen"
         x-on:keydown.escape.window="resetPasswordOpen = false"
         x-cloak
         class="fixed inset-0 z-[60] flex items-center justify-center">
        <div class="absolute inset-0 bg-black/60" @click="resetPasswordOpen = false"></div>
        <div class="relative bg-[#161b22] border border-[#30363d] rounded-lg w-full max-w-sm p-6" @click.stop>
            <h3 class="text-lg font-semibold mb-4">Reset Password</h3>
            <form @submit.prevent="resetPassword()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">New Password *</label>
                        <input type="password" x-model="newPassword" required minlength="8"
                            class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" @click="resetPasswordOpen = false" class="px-4 py-2 rounded-lg text-sm hover:bg-[#21262d]">Cancel</button>
                    <button type="submit" class="px-4 py-2 rounded-lg text-sm bg-yellow-600 hover:bg-yellow-500">Reset Password</button>
                </div>
            </form>
        </div>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script>
    function usersPage() {
        return {
            activeTab: 'users',
            editOpen: false,
            resetPasswordOpen: false,
            editData: { id: '', username: '', display_name: '', email: '', is_admin: false, is_active: true, group_ids: [] },
            allGroups: [],
            originalGroupIds: [],
            newPassword: '',

            async editUser(userId) {
                try {
                    const [userRes, groupsRes] = await Promise.all([
                        fetch(`/api/users/${userId}`),
                        fetch('/api/groups/')
                    ]);
                    const userData = await userRes.json();
                    const groupsData = await groupsRes.json();

                    if (userData.error) {
                        tuskToast('Error: ' + userData.error, 'error');
                        return;
                    }

                    const u = userData.user;
                    this.editData = {
                        id: u.id,
                        username: u.username,
                        display_name: u.display_name || '',
                        email: u.email || '',
                        is_admin: u.is_admin,
                        is_active: u.is_active,
                        group_ids: (userData.groups || []).map(g => g.id),
                    };
                    this.originalGroupIds = [...this.editData.group_ids];
                    this.allGroups = groupsData.groups || [];
                    this.editOpen = true;
                } catch (e) {
                    tuskToast('Failed to load user data', 'error');
                }
            },

            toggleGroup(groupId, checked) {
                if (checked && !this.editData.group_ids.includes(groupId)) {
                    this.editData.group_ids.push(groupId);
                } else if (!checked) {
                    this.editData.group_ids = this.editData.group_ids.filter(id => id !== groupId);
                }
            },

            async updateUser() {
                try {
                    // Update user profile
                    const res = await fetch(`/api/users/${this.editData.id}`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            display_name: this.editData.display_name,
                            email: this.editData.email,
                            is_admin: this.editData.is_admin,
                            is_active: this.editData.is_active,
                        }),
                    });
                    const result = await res.json();
                    if (!result.success) {
                        tuskToast('Error: ' + (result.error || 'Failed to update'), 'error');
                        return;
                    }

                    // Update group memberships
                    const toAdd = this.editData.group_ids.filter(id => !this.originalGroupIds.includes(id));
                    const toRemove = this.originalGroupIds.filter(id => !this.editData.group_ids.includes(id));

                    for (const gid of toAdd) {
                        await fetch(`/api/users/${this.editData.id}/groups`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ group_id: gid }),
                        });
                    }
                    for (const gid of toRemove) {
                        await fetch(`/api/users/${this.editData.id}/groups/${gid}/remove`, { method: 'POST' });
                    }

                    this.editOpen = false;
                    tuskToast('User updated successfully', 'success');
                    htmx.trigger(document.body, 'usersChanged');
                } catch (e) {
                    tuskToast('Failed to update user', 'error');
                }
            },

            async resetPassword() {
                if (!this.newPassword || this.newPassword.length < 6) {
                    tuskToast('Password must be at least 6 characters', 'warning');
                    return;
                }
                try {
                    const res = await fetch(`/api/users/${this.editData.id}/password`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ password: this.newPassword }),
                    });
                    const result = await res.json();
                    if (result.success) {
                        this.resetPasswordOpen = false;
                        this.newPassword = '';
                        tuskToast('Password reset successfully', 'success');
                    } else {
                        tuskToast('Error: ' + (result.error || 'Failed'), 'error');
                    }
                } catch (e) {
                    tuskToast('Failed to reset password', 'error');
                }
            },
        };
    }
</script>
{% endblock %}