{{define "content"}}
<div class="page-header">
    <h1>Accounts</h1>
</div>

<div class="accounts-grid">
    <!-- Users Column -->
    <div class="accounts-column">
        <div class="column-header">
            <h2>Users</h2>
            <span class="count">{{.UsersTotalCount}} user{{if ne .UsersTotalCount 1}}s{{end}}</span>
        </div>

        <div class="search-controls">
            <input type="text"
                   name="filter"
                   id="users-filter"
                   placeholder="Search by display name or email..."
                   value="{{.UsersFilter}}"
                   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="users-feedback" class="feedback-area"></div>

        {{if .Users}}
        <div class="table-container">
            <table class="users-table compact-table">
                <thead>
                    <tr>
                        <th>Display Name</th>
                        <th>OAuth</th>
                        <th>Admin</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="users-table-body" hx-trigger="userUpdated from:body" hx-get="/users/search?filter={{.UsersFilter}}" 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">(none)</em>{{end}}
                        </td>
                        <td class="oauth-identities">
                            {{range .OAuthIdentities}}
                            <span class="provider {{.Provider}}" title="{{.Email}}">{{.Provider}}</span>
                            {{end}}
                        </td>
                        <td class="user-admin">
                            {{if .IsAdmin}}<span class="admin-badge admin">Admin</span>{{end}}
                        </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="#users-feedback"
                                    hx-swap="innerHTML"
                                    hx-confirm="Delete user permanently?">
                                Del
                            </button>
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
        {{else}}
        <div class="empty-state">
            <p>No users found.</p>
        </div>
        {{end}}
    </div>

    <!-- Invitations Column -->
    <div class="accounts-column">
        <div class="column-header">
            <h2>Invitations</h2>
            <span class="count">{{.InvitationsTotalCount}} invitation{{if ne .InvitationsTotalCount 1}}s{{end}}</span>
            <button class="btn-small btn-primary" onclick="openCreateModal()">+ New</button>
        </div>

        <div class="search-controls">
            <input type="text"
                   name="filter"
                   id="invitations-filter"
                   placeholder="Search by email..."
                   value="{{.InvitationsEmailFilter}}"
                   hx-get="/invitations/search"
                   hx-trigger="input changed delay:300ms, keyup[key=='Enter']"
                   hx-target="#invitations-table-body"
                   hx-swap="innerHTML"
                   hx-include="#invitations-status-filter"
                   class="search-input">
            <select name="status_filter"
                    id="invitations-status-filter"
                    hx-get="/invitations/search"
                    hx-trigger="change"
                    hx-target="#invitations-table-body"
                    hx-swap="innerHTML"
                    hx-include="#invitations-filter"
                    class="status-filter">
                <option value="0" {{if eq .InvitationsStatusFilter 0}}selected{{end}}>All</option>
                <option value="1" {{if eq .InvitationsStatusFilter 1}}selected{{end}}>Pending</option>
                <option value="2" {{if eq .InvitationsStatusFilter 2}}selected{{end}}>Redeemed</option>
                <option value="3" {{if eq .InvitationsStatusFilter 3}}selected{{end}}>Expired</option>
                <option value="4" {{if eq .InvitationsStatusFilter 4}}selected{{end}}>Revoked</option>
            </select>
        </div>

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

        {{if .Invitations}}
        <div class="table-container">
            <table class="invitations-table compact-table">
                <thead>
                    <tr>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Expires</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="invitations-table-body" hx-trigger="invitationUpdated from:body" hx-get="/invitations/search?filter={{.InvitationsEmailFilter}}&status_filter={{.InvitationsStatusFilter}}" hx-swap="innerHTML">
                    {{range .Invitations}}
                    <tr class="invitation-row status-{{.StatusName}}" id="invitation-{{.InvitationCodeShort}}">
                        <td class="invitation-email" title="{{.Email}}">{{.Email}}</td>
                        <td class="invitation-status">
                            <span class="status-badge {{.StatusName}}">{{.StatusName}}</span>
                        </td>
                        <td class="invitation-expires">{{.ExpiresAt}}</td>
                        <td class="invitation-actions">
                            {{if eq .StatusName "pending"}}
                            <button class="btn-small"
                                    hx-post="/invitations/{{.InvitationCode}}/resend"
                                    hx-target="#invitations-feedback"
                                    hx-swap="innerHTML"
                                    title="Resend email">
                                Resend
                            </button>
                            <button class="btn-small btn-danger"
                                    hx-post="/invitations/{{.InvitationCode}}/revoke"
                                    hx-target="#invitations-feedback"
                                    hx-swap="innerHTML"
                                    hx-confirm="Revoke invitation?">
                                Revoke
                            </button>
                            {{else}}
                            <button class="btn-small btn-danger"
                                    hx-post="/invitations/{{.InvitationCode}}/delete"
                                    hx-target="#invitations-feedback"
                                    hx-swap="innerHTML">
                                Del
                            </button>
                            {{end}}
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
        {{else}}
        <div class="empty-state">
            <p>No invitations found.</p>
        </div>
        {{end}}
    </div>
</div>

<!-- 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>

<!-- Create Invitation Modal -->
<dialog id="create-modal">
    <article>
        <header>
            <h3>Create Invitation</h3>
            <button aria-label="Close" class="close" onclick="document.getElementById('create-modal').close()"></button>
        </header>
        <form id="create-form" hx-post="/invitations/create" hx-target="#create-feedback" hx-swap="innerHTML">
            <label for="create-email">Email Address</label>
            <input type="email" id="create-email" name="email" placeholder="user@example.com" required>

            <label for="create-expires">Expires In (days)</label>
            <input type="number" id="create-expires" name="expires_in_days" value="30" min="1" max="365">
            <small>Default: 30 days</small>

            <div id="create-feedback"></div>
        </form>
        <footer>
            <button type="button" class="secondary" onclick="document.getElementById('create-modal').close()">Cancel</button>
            <button type="submit" form="create-form">Create & Send</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');

    feedback.innerHTML = '<p>Saving...</p>';

    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 (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();
        htmx.trigger(document.getElementById('users-table-body'), 'userUpdated');
    })
    .catch(err => {
        feedback.innerHTML = `<p class="error">${err.message}</p>`;
    });
}

function openCreateModal() {
    document.getElementById('create-email').value = '';
    document.getElementById('create-expires').value = '30';
    document.getElementById('create-feedback').innerHTML = '';
    document.getElementById('create-modal').showModal();
}

// Handle successful invitation creation and actions
document.body.addEventListener('htmx:afterRequest', function(evt) {
    const path = evt.detail.pathInfo.requestPath;
    if (path === '/invitations/create' && evt.detail.successful) {
        const response = evt.detail.xhr.responseText;
        if (response.includes('alert-success')) {
            setTimeout(() => {
                document.getElementById('create-modal').close();
                // Reload page to refresh the invitations list
                window.location.reload();
            }, 1500);
        }
    } else if (path.startsWith('/invitations/') && evt.detail.successful) {
        // Invitation actions (revoke, resend, delete) - reload page to refresh
        window.location.reload();
    } else if (path.startsWith('/users/') && path.includes('/delete') && evt.detail.successful) {
        // User delete - reload page to refresh
        window.location.reload();
    }
});
</script>

<style>
.accounts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.accounts-column {
    min-width: 0;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.column-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.column-header .count {
    color: var(--pico-muted-color);
    font-size: 0.9rem;
}

.column-header .btn-primary {
    margin-left: auto;
}

.search-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.search-input {
    flex: 1;
    min-width: 0;
}

.status-filter {
    width: 100px;
}

.table-container {
    overflow-x: auto;
}

.compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

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

.compact-table th {
    font-weight: 600;
    white-space: nowrap;
}

.user-display-name, .invitation-email {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oauth-identities {
    display: flex;
    gap: 0.25rem;
}

.provider {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
}

.provider.discord { background-color: #5865F2; color: white; }
.provider.google { background-color: #4285F4; color: white; }
.provider.github { background-color: #333; color: white; }
.provider.apple { background-color: #000; color: white; }
.provider.steam { background-color: #1b2838; color: white; }
.provider.twitch { background-color: #9146FF; color: white; }

.admin-badge {
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
}

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

.status-badge {
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.status-badge.pending { background-color: #ffc107; color: #000; }
.status-badge.redeemed { background-color: #28a745; color: white; }
.status-badge.expired { background-color: #6c757d; color: white; }
.status-badge.revoked { background-color: #dc3545; color: white; }

.invitation-row.status-redeemed,
.invitation-row.status-expired,
.invitation-row.status-revoked {
    opacity: 0.6;
}

.user-actions, .invitation-actions {
    display: flex;
    gap: 0.25rem;
    white-space: nowrap;
}

.btn-small {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
}

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

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

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.no-name {
    color: var(--pico-muted-color);
    font-size: 0.8rem;
}

.feedback-area {
    min-height: 0;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--pico-muted-color);
}

.alert {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#edit-modal article, #create-modal article {
    max-width: 450px;
}

#edit-modal small, #create-modal small {
    display: block;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    color: var(--pico-muted-color);
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 1200px) {
    .accounts-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{{end}}