{{define "content"}}
<div class="page-header">
    <h1>User Management</h1>
    <span>{{.TotalCount}} user{{if ne .TotalCount 1}}s{{end}}</span>
</div>

<div class="search-controls">
    <input type="text"
           name="filter"
           placeholder="Search by display name or email..."
           value="{{.Filter}}"
           hx-get="/users/search"
           hx-trigger="input changed delay:300ms, keyup[key=='Enter']"
           hx-target="#users-table-body"
           hx-swap="innerHTML"
           hx-include="this"
           class="search-input">
</div>

<div id="feedback" class="feedback-area"></div>

{{if .Users}}
<table class="users-table">
    <thead>
        <tr>
            <th>Display Name</th>
            <th>User ID</th>
            <th>OAuth Identities</th>
            <th>Admin</th>
            <th>Created</th>
            <th>Last Login</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody id="users-table-body" hx-trigger="userUpdated from:body" hx-get="/users/search?filter={{.Filter}}" hx-swap="innerHTML">
        {{range .Users}}
        <tr class="user-row" id="user-{{.UserID}}">
            <td class="user-display-name">
                {{if .DisplayName}}{{.DisplayName}}{{else}}<em class="no-name">(no display name)</em>{{end}}
            </td>
            <td class="user-id" title="{{.UserID}}">
                <code>{{.UserID}}</code>
            </td>
            <td class="oauth-identities">
                {{range .OAuthIdentities}}
                <div class="oauth-identity">
                    <span class="provider {{.Provider}}">{{.Provider}}</span>
                    <span class="email">{{.Email}}</span>
                </div>
                {{else}}
                <em>No identities</em>
                {{end}}
            </td>
            <td class="user-admin">
                {{if .IsAdmin}}
                <span class="admin-badge admin">Admin</span>
                {{else}}
                <span class="admin-badge user">User</span>
                {{end}}
            </td>
            <td class="user-created">{{.CreatedAt}}</td>
            <td class="user-last-login">{{.LastLoginAt}}</td>
            <td class="user-actions">
                <button class="btn-small"
                        onclick="openEditModal('{{.UserID}}', '{{.DisplayName}}', {{.IsAdmin}})">
                    Edit
                </button>
                <button class="btn-small btn-danger"
                        hx-post="/users/{{.UserID}}/delete"
                        hx-target="#feedback"
                        hx-swap="innerHTML"
                        hx-confirm="Are you sure you want to permanently delete this user? This cannot be undone.">
                    Delete
                </button>
            </td>
        </tr>
        {{end}}
    </tbody>
</table>
{{else}}
<div class="empty-state">
    <p>No users found.</p>
</div>
{{end}}

<!-- Edit User Modal -->
<dialog id="edit-modal">
    <article>
        <header>
            <h3>Edit User</h3>
            <button aria-label="Close" class="close" onclick="document.getElementById('edit-modal').close()"></button>
        </header>
        <form id="edit-form">
            <input type="hidden" id="edit-user-id" name="user_id">

            <label for="edit-display-name">Display Name</label>
            <input type="text" id="edit-display-name" name="display_name" placeholder="Display name (3-20 chars, alphanumeric + underscore)">
            <small>Leave empty to clear the display name</small>

            <fieldset>
                <label>
                    <input type="checkbox" id="edit-is-admin" name="is_admin" value="true">
                    Grant admin access
                </label>
            </fieldset>

            <div id="edit-feedback"></div>
        </form>
        <footer>
            <button type="button" class="secondary" onclick="document.getElementById('edit-modal').close()">Cancel</button>
            <button type="button" onclick="saveUserChanges()">Save Changes</button>
        </footer>
    </article>
</dialog>

<script>
let originalIsAdmin = false;

function openEditModal(userId, displayName, isAdmin) {
    document.getElementById('edit-user-id').value = userId;
    document.getElementById('edit-display-name').value = displayName || '';
    document.getElementById('edit-is-admin').checked = isAdmin;
    document.getElementById('edit-feedback').innerHTML = '';
    originalIsAdmin = isAdmin;
    document.getElementById('edit-modal').showModal();
}

function saveUserChanges() {
    const userId = document.getElementById('edit-user-id').value;
    const displayName = document.getElementById('edit-display-name').value;
    const isAdmin = document.getElementById('edit-is-admin').checked;
    const feedback = document.getElementById('edit-feedback');

    console.log('saveUserChanges called:', {userId, displayName, isAdmin, originalIsAdmin});
    feedback.innerHTML = '<p>Saving...</p>';

    // Update display name
    const formData = new FormData();
    formData.append('display_name', displayName);

    fetch(`/users/${userId}/set-display-name`, {
        method: 'POST',
        body: formData
    })
    .then(resp => {
        if (!resp.ok) {
            return resp.text().then(text => { throw new Error(text); });
        }
        return resp.text();
    })
    .then(html => {
        // If admin status changed, update that too
        if (isAdmin !== originalIsAdmin) {
            const adminFormData = new FormData();
            adminFormData.append('is_admin', isAdmin ? 'true' : 'false');

            return fetch(`/users/${userId}/set-admin`, {
                method: 'POST',
                body: adminFormData
            }).then(resp => {
                if (!resp.ok) {
                    return resp.text().then(text => { throw new Error(text); });
                }
                return resp.text();
            });
        }
        return html;
    })
    .then(() => {
        document.getElementById('edit-modal').close();
        // Trigger table refresh
        htmx.trigger(document.getElementById('users-table-body'), 'userUpdated');
    })
    .catch(err => {
        feedback.innerHTML = `<p class="error">${err.message}</p>`;
    });
}
</script>

<style>
.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th, .users-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.user-id code {
    font-size: 0.75rem;
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oauth-identity {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.25rem;
}

.provider {
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.provider.discord {
    background-color: #5865F2;
    color: white;
}

.provider.google {
    background-color: #4285F4;
    color: white;
}

.email {
    font-size: 0.85rem;
}

.admin-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.admin-badge.admin {
    background-color: #dc3545;
    color: white;
}

.admin-badge.user {
    background-color: #6c757d;
    color: white;
}

.no-name {
    color: var(--pico-muted-color);
}

.search-controls {
    margin-bottom: 1rem;
}

.search-input {
    width: 100%;
    max-width: 400px;
}

.feedback-area {
    margin-bottom: 1rem;
}

.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.user-actions {
    display: flex;
    gap: 0.25rem;
}

#edit-modal article {
    max-width: 500px;
}

#edit-modal small {
    display: block;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    color: var(--pico-muted-color);
}
</style>
{{end}}