{% extends "base.html" %}

{% block title %}Tusk Admin{% endblock %}

{% block content %}
<div class="studio-shell w-full" x-data="adminSidebar()">
    <aside class="r-sidebar relative" x-data="resizableSidebar('admin')">
        <div class="resize-handle" @mousedown="startResize($event)"></div>

        <div class="side-section">
            <div class="side-label"><span>PostgreSQL Servers</span></div>
            {% if pg_connections %}
                {% for c in pg_connections %}
                <div class="side-item"
                     :class="connId === '{{ c.id }}' ? 'active' : ''"
                     @click="selectServer('{{ c.id }}', '{{ c.name }}')">
                    <span class="dot" :class="connId === '{{ c.id }}' ? 'green' : 'gray'"></span>
                    <i data-lucide="database"></i>
                    <span>{{ c.name }}</span>
                </div>
                {% endfor %}
            {% else %}
                <div class="side-empty">No PostgreSQL connections</div>
                <a href="/" class="side-item" style="color:var(--brand)">Add one in Studio</a>
            {% endif %}
        </div>

        <div class="side-section">
            <div class="side-label"><span>Actions</span></div>
            <button @click="$dispatch('open-backup-options')" :disabled="!connId"
                    class="btn btn-sm" style="width:100%;justify-content:flex-start;margin-top:4px">
                <i data-lucide="hard-drive-download"></i> Create Backup
            </button>
            <button @click="$dispatch('open-backups')" :disabled="!connId"
                    class="btn btn-sm" style="width:100%;justify-content:flex-start;margin-top:4px">
                <i data-lucide="archive"></i> View Backups
            </button>
        </div>
    </aside>

<!-- Main Content — uses mockup classes from tusk-app.css -->
<main class="dash-page" x-data="adminPage()" style="flex:1;overflow:auto">
    <template x-if="!connId">
        <div class="dash-empty" style="display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--fg-3);text-align:center">
            <div>
                <i data-lucide="database" style="width:48px;height:48px;color:var(--fg-4);margin-bottom:14px"></i>
                <div style="font-family:var(--serif);font-size:24px;color:var(--fg)">Select a PostgreSQL server</div>
                <div style="font-size:13px;margin-top:6px">SQLite connections don't have admin features.</div>
            </div>
        </div>
    </template>

    <template x-if="connId">
        <div :key="connId">
            <!-- Server header -->
            <div class="dash-head">
                <div>
                    <div style="display:flex;align-items:center;gap:10px">
                        <span class="dot green"></span>
                        <span class="dash-title" x-text="connName"></span>
                    </div>
                    <div class="dash-desc mono" id="server-version" style="font-family:var(--font-mono);font-size:12px"></div>
                </div>
                <div class="flex gap-2">
                    <button @click="$dispatch('open-backup-options')" class="btn"><i data-lucide="hard-drive-download"></i>Backup now</button>
                    <button @click="refreshAll()" class="btn"><i data-lucide="refresh-cw"></i>Refresh</button>
                </div>
            </div>

            <!-- Stats — 4 dash-cards with serif numbers -->
            <div id="admin-stats"
                 :hx-get="'/api/admin/' + connId + '/stats'"
                 hx-trigger="adminRefresh from:body, every 5s"
                 hx-swap="innerHTML"
                 class="dash-grid"
                 style="margin-bottom:20px">
                <div class="dash-card span-3"><div class="dash-card-h"><div class="l">Connections</div></div><div class="dash-card-v" style="color:var(--fg-3)">—</div></div>
                <div class="dash-card span-3"><div class="dash-card-h"><div class="l">Active queries</div></div><div class="dash-card-v" style="color:var(--fg-3)">—</div></div>
                <div class="dash-card span-3"><div class="dash-card-h"><div class="l">Cache hit ratio</div></div><div class="dash-card-v" style="color:var(--fg-3)">—</div></div>
                <div class="dash-card span-3"><div class="dash-card-h"><div class="l">Database size</div></div><div class="dash-card-v" style="color:var(--fg-3)">—</div></div>
            </div>

            <!-- Active Processes -->
            <div class="card" style="margin-bottom:18px" x-data="{ filterUser: '', filterDb: '' }">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="activity" style="width:14px;height:14px"></i>Active Processes
                    </div>
                    <div class="flex aic gap-2">
                        <input type="text" x-model.debounce.300ms="filterUser"
                               @input="$nextTick(() => htmx.trigger('#processes-list', 'refresh'))"
                               placeholder="Filter user…" style="width:128px">
                        <input type="text" x-model.debounce.300ms="filterDb"
                               @input="$nextTick(() => htmx.trigger('#processes-list', 'refresh'))"
                               placeholder="Filter db…" style="width:128px">
                        <button @click="htmx.trigger('#processes-list', 'refresh')" class="btn btn-sm btn-ghost">
                            <i data-lucide="refresh-cw"></i> Refresh
                        </button>
                    </div>
                </div>
                <div id="processes-list"
                     :hx-get="'/api/admin/' + connId + '/processes' +
                              ((filterUser || filterDb) ? ('?' +
                                  (filterUser ? 'user=' + encodeURIComponent(filterUser) : '') +
                                  (filterUser && filterDb ? '&' : '') +
                                  (filterDb ? 'database=' + encodeURIComponent(filterDb) : '')) : '')"
                     hx-trigger="adminRefresh from:body, every 5s, refresh"
                     hx-swap="innerHTML">
                    <div style="padding:14px;color:var(--fg-3)">Loading…</div>
                </div>
            </div>

            <!-- Locks Monitor -->
            <div class="card" style="margin-bottom:18px" x-data="{ showAll: false }">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="lock" style="width:14px;height:14px"></i>Lock Monitor
                    </div>
                    <div class="flex aic gap-2">
                        <label class="flex aic gap-2 text-sm">
                            <input type="checkbox" x-model="showAll"
                                   @change="$nextTick(() => htmx.trigger('#locks-list', 'refresh'))">
                            Show all locks
                        </label>
                    </div>
                </div>
                <div id="locks-list"
                     :hx-get="'/api/admin/' + connId + (showAll ? '/locks/all' : '/locks')"
                     hx-trigger="revealed, refresh, adminRefresh from:body"
                     hx-swap="innerHTML">
                    <div style="padding:14px;color:var(--fg-3)">Loading…</div>
                </div>
            </div>

            <!-- Table Maintenance -->
            <div class="card" style="margin-bottom:18px">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="wrench" style="width:14px;height:14px"></i>Table Maintenance
                    </div>
                    <button @click="htmx.trigger('#bloat-list', 'refresh')" class="btn btn-sm btn-ghost">
                        <i data-lucide="refresh-cw"></i> Refresh
                    </button>
                </div>
                <div style="overflow-x:auto">
                    <table class="dtable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Table</th>
                                <th>Size</th>
                                <th>Dead Tuples</th>
                                <th>Bloat %</th>
                                <th>Last Vacuum</th>
                                <th>Last Analyze</th>
                                <th style="text-align:right">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="bloat-list"
                               :hx-get="'/api/admin/' + connId + '/tables/bloat'"
                               hx-trigger="revealed, refresh, adminRefresh from:body"
                               hx-swap="innerHTML">
                            <tr><td colspan="7" style="padding:14px;color:var(--fg-3)">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Extensions -->
            <div class="card" style="margin-bottom:18px" x-data="{ showAll: false }">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="puzzle" style="width:14px;height:14px"></i>Extensions
                    </div>
                    <div class="flex aic gap-2">
                        <label class="flex aic gap-2 text-sm">
                            <input type="checkbox" x-model="showAll"
                                   @change="$nextTick(() => htmx.trigger('#extensions-list', 'refresh'))">
                            Show available
                        </label>
                    </div>
                </div>
                <div id="extensions-list"
                     :hx-get="'/api/admin/' + connId + '/extensions?show_all=' + showAll"
                     hx-trigger="revealed, refresh, adminRefresh from:body"
                     hx-swap="innerHTML">
                    <div style="padding:14px;color:var(--fg-3)">Loading…</div>
                </div>
            </div>

            <!-- Database Settings -->
            <div class="card" style="margin-bottom:18px" x-data="{ showAll: false, search: '' }">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="settings" style="width:14px;height:14px"></i>Database Settings
                    </div>
                    <div class="flex aic gap-2">
                        <input type="text" x-model.debounce.250ms="search"
                               placeholder="Filter…" style="width:128px">
                        <label class="flex aic gap-2 text-sm">
                            <input type="checkbox" x-model="showAll"
                                   @change="$nextTick(() => htmx.trigger('#settings-list', 'refresh'))">
                            Show all
                        </label>
                    </div>
                </div>
                <div style="overflow-x:auto;max-height:384px;overflow-y:auto">
                    <table class="dtable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Setting</th>
                                <th>Value</th>
                                <th>Default</th>
                                <th>Category</th>
                                <th>Description</th>
                                <th style="text-align:right">Action</th>
                            </tr>
                        </thead>
                        <tbody id="settings-list"
                               :hx-get="'/api/admin/' + connId + '/settings' + (showAll ? '' : '?important_only=true')"
                               hx-trigger="revealed, refresh, adminRefresh from:body"
                               hx-swap="innerHTML"
                               x-effect="(() => { const q = (search || '').toLowerCase(); $el.querySelectorAll('tr[data-setting]').forEach(r => { r.hidden = q && !r.dataset.setting.toLowerCase().includes(q); }); })()">
                            <tr><td colspan="6" style="padding:14px;color:var(--fg-3)">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Scheduled Tasks -->
            <div class="card" style="margin-bottom:18px">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="clock" style="width:14px;height:14px"></i>Scheduled Tasks
                    </div>
                    <div class="flex aic gap-2">
                        <button @click="$dispatch('open-schedule-modal')" class="btn btn-sm btn-brand">
                            <i data-lucide="plus"></i> Add Schedule
                        </button>
                        <button @click="htmx.trigger('#scheduled-jobs-list', 'refresh')" class="btn btn-sm btn-ghost">
                            <i data-lucide="refresh-cw"></i> Refresh
                        </button>
                    </div>
                </div>
                <div id="scheduled-jobs-list">
                    <div style="padding:14px;color:var(--fg-3)">Loading…</div>
                </div>
            </div>

            <!-- Roles Management -->
            <div class="card" style="margin-bottom:18px">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="users" style="width:14px;height:14px"></i>Roles &amp; Users
                    </div>
                    <div class="flex aic gap-2">
                        <button @click="$dispatch('open-role-modal')" class="btn btn-sm btn-brand">
                            <i data-lucide="plus"></i> New Role
                        </button>
                    </div>
                </div>
                <div style="overflow-x:auto">
                    <table class="dtable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Role</th>
                                <th>Login</th>
                                <th>Superuser</th>
                                <th>Create DB</th>
                                <th>Create Role</th>
                                <th>Member Of</th>
                                <th style="text-align:right">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="roles-list"
                               :hx-get="'/api/admin/' + connId + '/roles'"
                               hx-trigger="revealed, rolesChanged from:body, adminRefresh from:body"
                               hx-swap="innerHTML">
                            <tr><td colspan="7" style="padding:14px;color:var(--fg-3)">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Slow Queries -->
            <div class="card" style="margin-bottom:18px" x-data="{ orderBy: 'total_time' }">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="snail" style="width:14px;height:14px"></i>Slow Queries
                    </div>
                    <div class="flex aic gap-2">
                        <select x-model="orderBy"
                                @change="$nextTick(() => htmx.trigger('#slow-queries-list', 'refresh'))"
                                style="width:120px">
                            <option value="total_time">Total Time</option>
                            <option value="mean_time">Avg Time</option>
                            <option value="calls">Calls</option>
                        </select>
                        <button @click="resetSlowQueries()" class="btn btn-sm btn-ghost" title="Reset statistics">Reset</button>
                    </div>
                </div>
                <div style="overflow-x:auto;max-height:320px;overflow-y:auto">
                    <table class="dtable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Query</th>
                                <th style="text-align:right">Calls</th>
                                <th style="text-align:right">Total Time</th>
                                <th style="text-align:right">Avg Time</th>
                                <th style="text-align:right">Rows</th>
                                <th style="text-align:right">Cache %</th>
                            </tr>
                        </thead>
                        <tbody id="slow-queries-list"
                               :hx-get="'/api/admin/' + connId + '/slow-queries?order_by=' + orderBy + '&limit=20'"
                               hx-trigger="revealed, refresh, adminRefresh from:body"
                               hx-swap="innerHTML">
                            <tr><td colspan="6" style="padding:14px;color:var(--fg-3)">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Index Usage -->
            <div class="card" style="margin-bottom:18px" x-data="{ unusedOnly: false }">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="list-tree" style="width:14px;height:14px"></i>Index Usage
                    </div>
                    <div class="flex aic gap-2">
                        <label class="flex aic gap-2 text-sm">
                            <input type="checkbox" x-model="unusedOnly"
                                   @change="$nextTick(() => htmx.trigger('#index-usage-list', 'refresh'))">
                            Unused only
                        </label>
                    </div>
                </div>
                <div style="overflow-x:auto;max-height:320px;overflow-y:auto">
                    <table class="dtable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Index</th>
                                <th>Table</th>
                                <th style="text-align:right">Size</th>
                                <th style="text-align:right">Scans</th>
                                <th style="text-align:right">Tuples Read</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="index-usage-list"
                               :hx-get="'/api/admin/' + connId + '/indexes' + (unusedOnly ? '?unused_only=true' : '')"
                               hx-trigger="revealed, refresh, adminRefresh from:body"
                               hx-swap="innerHTML">
                            <tr><td colspan="6" style="padding:14px;color:var(--fg-3)">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Replication -->
            <div class="card" style="margin-bottom:18px">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="copy" style="width:14px;height:14px"></i>Replication
                    </div>
                    <button @click="htmx.trigger('#replication-content', 'refresh')" class="btn btn-sm btn-ghost">
                        <i data-lucide="refresh-cw"></i> Refresh
                    </button>
                </div>
                <div id="replication-content"
                     :hx-get="'/api/admin/' + connId + '/replication'"
                     hx-trigger="revealed, refresh, adminRefresh from:body"
                     hx-swap="innerHTML"
                     style="padding:16px">
                    <div style="color:var(--fg-3)">Loading…</div>
                </div>
            </div>

            <!-- Server Logs -->
            <div class="card" style="margin-bottom:18px" x-data="{ logLevel: '', logSearch: '' }">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="scroll-text" style="width:14px;height:14px"></i>Server Logs
                    </div>
                    <div class="flex aic gap-2">
                        <input type="text" x-model.debounce.400ms="logSearch"
                               @input="$nextTick(() => htmx.trigger('#logs-content', 'refresh'))"
                               placeholder="Search…" style="width:192px">
                        <select x-model="logLevel"
                                @change="$nextTick(() => htmx.trigger('#logs-content', 'refresh'))"
                                style="width:120px">
                            <option value="">All Levels</option>
                            <option value="ERROR">ERROR</option>
                            <option value="WARNING">WARNING</option>
                            <option value="LOG">LOG</option>
                            <option value="FATAL">FATAL</option>
                        </select>
                    </div>
                </div>
                <div id="logs-content"
                     :hx-get="'/api/admin/' + connId + '/logs?limit=100' +
                              (logLevel ? '&level=' + logLevel : '') +
                              (logSearch ? '&search=' + encodeURIComponent(logSearch) : '')"
                     hx-trigger="revealed, refresh, adminRefresh from:body"
                     hx-swap="innerHTML"
                     style="padding:16px;max-height:384px;overflow:auto">
                    <div style="color:var(--fg-3)">Loading…</div>
                </div>
            </div>

            <!-- PITR -->
            <div class="card" style="margin-bottom:18px">
                <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
                        <i data-lucide="timer" style="width:14px;height:14px"></i>Point-In-Time Recovery
                    </div>
                    <div class="flex aic gap-2">
                        <button @click="createBaseBackup()" class="btn btn-sm btn-brand">
                            <i data-lucide="hard-drive"></i> Base Backup
                        </button>
                    </div>
                </div>
                <div id="pitr-content"
                     :hx-get="'/api/admin/' + connId + '/pitr'"
                     hx-trigger="revealed, refresh, adminRefresh from:body"
                     hx-swap="innerHTML"
                     style="padding:16px">
                    <div style="color:var(--fg-3)">Loading…</div>
                </div>
            </div>
        </div>
    </template>
</main>
{% endblock %}

{% block modals %}
<!-- Role Modal -->
<div x-data="roleModal()"
     x-show="open"
     x-on:open-role-modal.window="openCreate()"
     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" style="background:rgba(0,0,0,.5)" @click="open = false"></div>
    <div class="card" style="position:relative;padding:24px;width:450px;box-shadow:var(--shadow-xl)" @click.stop>
        <h3 style="font-size:17px;font-weight:600;margin-bottom:16px" x-text="isEdit ? 'Edit Role' : 'Create Role'"></h3>
        <form @submit.prevent="saveRole()" style="display:flex;flex-direction:column;gap:14px">
            <div>
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Role Name</label>
                <input x-model="form.name" :disabled="isEdit" placeholder="my_user" required style="width:100%">
            </div>
            <div>
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Password (optional for roles without login)</label>
                <input x-model="form.password" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;" style="width:100%">
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
                <label class="flex aic gap-2" style="cursor:pointer">
                    <input type="checkbox" x-model="form.login">
                    <span class="text-sm">Can Login</span>
                </label>
                <label class="flex aic gap-2" style="cursor:pointer">
                    <input type="checkbox" x-model="form.superuser">
                    <span class="text-sm">Superuser</span>
                </label>
                <label class="flex aic gap-2" style="cursor:pointer">
                    <input type="checkbox" x-model="form.createdb">
                    <span class="text-sm">Create Database</span>
                </label>
                <label class="flex aic gap-2" style="cursor:pointer">
                    <input type="checkbox" x-model="form.createrole">
                    <span class="text-sm">Create Role</span>
                </label>
            </div>
            <div class="flex gap-3" style="justify-content:flex-end;padding-top:10px;border-top:1px solid var(--border)">
                <button type="button" @click="open = false" class="btn">Cancel</button>
                <button type="submit" class="btn btn-brand">Save</button>
            </div>
        </form>
    </div>
</div>

<!-- Role Grants Modal -->
<div x-data="{ open: false, roleName: '' }"
     x-show="open"
     x-on:open-role-grants.window="open = true; roleName = $event.detail.name"
     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" style="background:rgba(0,0,0,.5)" @click="open = false"></div>
    <div class="card" style="position:relative;width:700px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl)" @click.stop>
        <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)">
            <h3 style="font-size:17px;font-weight:600">Grants for <span class="mono" x-text="roleName"></span></h3>
            <button @click="open = false" class="icon-btn" style="font-size:20px">&times;</button>
        </div>
        <div id="role-grants-content" style="flex:1;overflow:auto">
            <div style="padding:14px;color:var(--fg-3)">Select a role to view its grants.</div>
        </div>
    </div>
</div>

<!-- Backup Options Modal — pick format / tables, run with progress -->
<div x-data="backupOptionsModal()"
     x-show="open"
     x-on:open-backup-options.window="reset(); open = true; loadTables()"
     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" style="background:rgba(0,0,0,.5)" @click="open = false"></div>
    <div class="card" style="position:relative;padding:24px;width:560px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl)" @click.stop>
        <div class="flex aic jcb" style="margin-bottom:16px">
            <h3 style="font-size:17px;font-weight:600">Create Backup</h3>
            <button @click="open = false" class="icon-btn" style="font-size:20px">&times;</button>
        </div>
        <div style="display:flex;flex-direction:column;gap:14px;overflow:auto">
            <div>
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:8px">Format</label>
                <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
                    <label :style="format === 'plain' ? 'border-color:var(--brand)' : ''" style="border:1px solid var(--border);border-radius:8px;padding:12px;cursor:pointer">
                        <input type="radio" x-model="format" value="plain" style="display:none">
                        <div style="font-weight:500;font-size:12.5px">Plain (.sql.gz)</div>
                        <div class="text-xs" style="color:var(--fg-3);margin-top:4px">Portable. Restore with psql.</div>
                    </label>
                    <label :style="format === 'custom' ? 'border-color:var(--brand)' : ''" style="border:1px solid var(--border);border-radius:8px;padding:12px;cursor:pointer">
                        <input type="radio" x-model="format" value="custom" style="display:none">
                        <div style="font-weight:500;font-size:12.5px">Custom (.dump)</div>
                        <div class="text-xs" style="color:var(--fg-3);margin-top:4px">Compressed. pg_restore.</div>
                    </label>
                    <label :style="format === 'directory' ? 'border-color:var(--brand)' : ''" style="border:1px solid var(--border);border-radius:8px;padding:12px;cursor:pointer">
                        <input type="radio" x-model="format" value="directory" style="display:none">
                        <div style="font-weight:500;font-size:12.5px">Directory (.tar.gz)</div>
                        <div class="text-xs" style="color:var(--fg-3);margin-top:4px">Parallel-friendly, archived.</div>
                    </label>
                </div>
            </div>
            <div>
                <label class="flex aic gap-2" style="cursor:pointer;margin-bottom:8px">
                    <input type="checkbox" x-model="filterTables">
                    <span class="text-sm">Only specific tables</span>
                </label>
                <div x-show="filterTables" style="border:1px solid var(--border);border-radius:8px;padding:8px;max-height:192px;overflow:auto;background:var(--surface-2)">
                    <input type="text" x-model="tableFilter" placeholder="Search tables…" style="width:100%;font-size:11.5px;margin-bottom:8px">
                    <template x-for="t in availableTables.filter(t => !tableFilter || t.qualified.toLowerCase().includes(tableFilter.toLowerCase()))" :key="t.qualified">
                        <label class="flex aic gap-2 text-sm" style="padding:2px 4px;border-radius:4px">
                            <input type="checkbox" :value="t.qualified" x-model="selectedTables">
                            <span class="mono text-xs" x-text="t.qualified"></span>
                        </label>
                    </template>
                    <div x-show="!availableTables.length" class="text-xs" style="color:var(--fg-3);padding:8px">Loading tables…</div>
                </div>
            </div>
            <div x-show="running" style="background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:12px">
                <div class="text-sm" style="color:var(--fg-3);margin-bottom:8px">
                    <i data-lucide="loader" class="animate-spin" style="width:14px;height:14px;display:inline"></i>
                    <span x-text="phase || 'starting'"></span>
                </div>
                <div style="height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden">
                    <div style="height:100%;background:var(--brand);transition:width .25s" :style="`width: ${progressPct}%`"></div>
                </div>
            </div>
        </div>
        <div class="flex gap-3" style="justify-content:flex-end;padding-top:14px;margin-top:14px;border-top:1px solid var(--border)">
            <button @click="open = false" :disabled="running" class="btn">Cancel</button>
            <button @click="run()" :disabled="running" class="btn btn-brand">
                <span x-show="!running">Create Backup</span>
                <span x-show="running">Running…</span>
            </button>
        </div>
    </div>
</div>

<!-- Backups Modal -->
<div x-data="backupsModal()"
     x-show="backupsOpen"
     x-on:open-backups.window="backupsOpen = true; $nextTick(() => htmx.trigger('#backups-content', 'refresh'))"
     x-on:keydown.escape.window="backupsOpen = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0" style="background:rgba(0,0,0,.5)" @click="backupsOpen = false"></div>
    <div class="card" style="position:relative;padding:24px;width:550px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl)" @click.stop>
        <div class="flex aic jcb" style="margin-bottom:16px">
            <h3 style="font-size:17px;font-weight:600">Database Backups</h3>
            <button @click="backupsOpen = false" class="icon-btn" style="font-size:20px">&times;</button>
        </div>
        <div id="backups-content"
             :hx-get="connId ? '/api/admin/' + connId + '/backups' : ''"
             hx-trigger="refresh"
             hx-swap="innerHTML"
             style="flex:1;overflow:auto">
            <div style="color:var(--fg-3)">Loading…</div>
        </div>
    </div>
</div>

<!-- Create Database from Backup Modal -->
<div x-data="createDbModal()"
     x-show="createDbOpen"
     x-on:open-create-db.window="openModal($event.detail)"
     x-on:keydown.escape.window="createDbOpen = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0" style="background:rgba(0,0,0,.5)" @click="createDbOpen = false"></div>
    <div class="card" style="position:relative;padding:24px;width:450px;box-shadow:var(--shadow-xl)" @click.stop>
        <h3 style="font-size:17px;font-weight:600;margin-bottom:16px">Create Database from Backup</h3>
        <div style="display:flex;flex-direction:column;gap:14px">
            <div style="background:var(--surface-2);border-radius:8px;padding:12px;font-size:12.5px">
                <div style="color:var(--fg-3);margin-bottom:4px">Backup file:</div>
                <div class="mono" style="color:var(--brand)" x-text="backupFile"></div>
            </div>
            <div>
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Target connection</label>
                <select x-model="targetConnId" style="width:100%">
                    <template x-for="c in availableConns" :key="c.id">
                        <option :value="c.id" x-text="c.name + ' (' + (c.database || c.host) + ')'"></option>
                    </template>
                </select>
                <p class="text-xs" style="color:var(--fg-3);margin-top:4px">
                    The new database is created on this server. Pick a different connection to restore the backup elsewhere — useful for local diagnostics.
                </p>
            </div>
            <div>
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">New Database Name</label>
                <input x-model="dbName" type="text" placeholder="my_new_database" style="width:100%">
                <p class="text-xs" style="color:var(--fg-3);margin-top:4px">Use lowercase letters, numbers, and underscores</p>
            </div>
            <div style="background:rgba(176,119,0,.10);border:1px solid rgba(176,119,0,.30);border-radius:8px;padding:12px;font-size:12.5px;color:var(--accent-amber)">
                This will create a new database and restore the backup into it.
            </div>
        </div>
        <div class="flex gap-3" style="justify-content:flex-end;padding-top:14px;margin-top:14px;border-top:1px solid var(--border)">
            <button @click="createDbOpen = false" class="btn">Cancel</button>
            <button @click="createDatabase()" class="btn" style="background:var(--green);color:white;border-color:var(--green)">Create Database</button>
        </div>
    </div>
</div>

<!-- Restore to existing DB modal — target connection is pre-selected
     to the current admin connection but can be swapped. -->
<div x-data="restoreModal()"
     x-show="restoreOpen"
     x-on:open-restore.window="openModal($event.detail)"
     x-on:keydown.escape.window="restoreOpen = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0" style="background:rgba(0,0,0,.5)" @click="restoreOpen = false"></div>
    <div class="card" style="position:relative;padding:24px;width:450px;box-shadow:var(--shadow-xl)" @click.stop>
        <h3 style="font-size:17px;font-weight:600;margin-bottom:16px">Restore Backup</h3>
        <div style="display:flex;flex-direction:column;gap:14px">
            <div style="background:var(--surface-2);border-radius:8px;padding:12px;font-size:12.5px">
                <div style="color:var(--fg-3);margin-bottom:4px">Backup file:</div>
                <div class="mono" style="color:var(--brand)" x-text="backupFile"></div>
            </div>
            <div>
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Target connection</label>
                <select x-model="targetConnId" style="width:100%">
                    <template x-for="c in availableConns" :key="c.id">
                        <option :value="c.id" x-text="c.name + ' (' + (c.database || c.host) + ')'"></option>
                    </template>
                </select>
                <p class="text-xs" style="color:var(--fg-3);margin-top:4px">
                    Defaults to the currently-open connection. Pick another to restore into a different DB (e.g. a local copy for diagnostics).
                </p>
            </div>
            <div style="background:rgba(204,46,61,.10);border:1px solid rgba(204,46,61,.30);border-radius:8px;padding:12px;font-size:12.5px;color:var(--red)">
                <strong>This overwrites the target database.</strong> Existing tables will be replaced.
            </div>
        </div>
        <div class="flex gap-3" style="justify-content:flex-end;padding-top:14px;margin-top:14px;border-top:1px solid var(--border)">
            <button @click="restoreOpen = false" class="btn">Cancel</button>
            <button @click="restore()" class="btn" style="background:var(--accent-amber);color:white;border-color:var(--accent-amber)">Restore</button>
        </div>
    </div>
</div>

<!-- Schedule Modal -->
<div x-data="scheduleModal()"
     x-show="scheduleOpen"
     x-on:open-schedule-modal.window="openModal()"
     x-on:keydown.escape.window="scheduleOpen = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0" style="background:rgba(0,0,0,.5)" @click="scheduleOpen = false"></div>
    <div class="card" style="position:relative;padding:24px;width:450px;box-shadow:var(--shadow-xl)" @click.stop>
        <h3 style="font-size:17px;font-weight:600;margin-bottom:16px">Add Scheduled Task</h3>
        <div style="display:flex;flex-direction:column;gap:14px">
            <div>
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Task Type</label>
                <select x-model="taskType" style="width:100%">
                    <option value="backup">Backup</option>
                    <option value="vacuum">VACUUM</option>
                    <option value="analyze">ANALYZE</option>
                </select>
            </div>
            <div x-show="taskType === 'vacuum'">
                <label class="flex aic gap-2" style="cursor:pointer">
                    <input type="checkbox" x-model="vacuumFull">
                    <span class="text-sm">VACUUM FULL (more thorough, but locks tables)</span>
                </label>
            </div>
            <div>
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:8px">Schedule Mode</label>
                <div class="flex gap-2">
                    <button @click="mode = 'recurring'" class="btn"
                            :style="mode === 'recurring' ? 'border-color:var(--brand);background:var(--brand-soft);color:var(--brand);flex:1' : 'flex:1'">
                        <i data-lucide="repeat"></i> Recurring
                    </button>
                    <button @click="mode = 'once'" class="btn"
                            :style="mode === 'once' ? 'border-color:var(--brand);background:var(--brand-soft);color:var(--brand);flex:1' : 'flex:1'">
                        <i data-lucide="calendar"></i> Run Once
                    </button>
                </div>
            </div>
            <div x-show="mode === 'recurring'">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
                    <div>
                        <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Hour (0-23)</label>
                        <input x-model.number="hour" type="number" min="0" max="23" style="width:100%">
                    </div>
                    <div>
                        <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Minute (0-59)</label>
                        <input x-model.number="minute" type="number" min="0" max="59" style="width:100%">
                    </div>
                </div>
                <div style="margin-top:14px">
                    <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Day of Week</label>
                    <select x-model="dayOfWeek" style="width:100%">
                        <option value="*">Every day</option>
                        <option value="mon">Monday</option>
                        <option value="tue">Tuesday</option>
                        <option value="wed">Wednesday</option>
                        <option value="thu">Thursday</option>
                        <option value="fri">Friday</option>
                        <option value="sat">Saturday</option>
                        <option value="sun" selected>Sunday</option>
                        <option value="mon-fri">Weekdays (Mon-Fri)</option>
                    </select>
                </div>
            </div>
            <div x-show="mode === 'once'">
                <label style="display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:4px">Date &amp; Time</label>
                <input x-model="runDatetime" type="datetime-local" style="width:100%">
            </div>
            <div style="background:var(--surface-2);border-radius:8px;padding:12px;font-size:12.5px;color:var(--fg-3)">
                <div class="flex gap-2" style="align-items:flex-start">
                    <i data-lucide="info" style="width:14px;height:14px;margin-top:2px;flex-shrink:0"></i>
                    <div>Scheduled tasks run at the specified time for the currently selected connection.</div>
                </div>
            </div>
        </div>
        <div class="flex gap-3" style="justify-content:flex-end;padding-top:14px;margin-top:14px;border-top:1px solid var(--border)">
            <button @click="scheduleOpen = false" class="btn">Cancel</button>
            <button @click="addTask()" class="btn btn-brand">Add Schedule</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Shared state for connId across Alpine components — use Alpine.store to avoid TDZ errors with hx-boost
(function() {
    function _initAdminStore() {
        if (!Alpine.store('admin')) {
            var savedId = localStorage.getItem('tusk_admin_connId') || '';
            var savedName = localStorage.getItem('tusk_admin_connName') || '';
            Alpine.store('admin', { connId: savedId, connName: savedName });
            // If we have a saved connection, trigger HTMX after Alpine is ready
            if (savedId) {
                setTimeout(function() {
                    htmx.process(document.body);
                    htmx.trigger(document.body, 'adminRefresh');
                    lucide.createIcons();
                }, 150);
            }
        }
    }
    if (window.Alpine && Alpine.store) {
        _initAdminStore();
    } else {
        document.addEventListener('alpine:init', _initAdminStore);
    }
})();

// Accessor for convenience — persists to localStorage on write
var adminState = {
    get connId() { return Alpine.store('admin')?.connId || ''; },
    set connId(v) { Alpine.store('admin').connId = v; localStorage.setItem('tusk_admin_connId', v); },
    get connName() { return Alpine.store('admin')?.connName || ''; },
    set connName(v) { Alpine.store('admin').connName = v; localStorage.setItem('tusk_admin_connName', v); }
};

function adminSidebar() {
    return {
        get connId() { return adminState.connId; },
        selectServer(id, name) {
            adminState.connId = id;
            adminState.connName = name;
            // The :key="connId" on the main content div forces Alpine to destroy
            // and recreate all HTMX elements, so they get fresh URL bindings.
            // Wait for Alpine to finish the DOM swap, then process HTMX.
            this.$nextTick(() => {
                setTimeout(() => {
                    htmx.process(document.body);
                    htmx.trigger(document.body, 'adminRefresh');
                    lucide.createIcons();
                }, 100);
            });
        },
        async createBackup() {
            if (!adminState.connId) return;
            try {
                const res = await fetch('/api/admin/' + adminState.connId + '/backup', { method: 'POST' });
                const data = await res.json();
                // /backup is async now — returns 202+job_id immediately.
                // The global jobs poller in tusk-jobs.js shows the
                // completion toast (and download link) when pg_dump
                // finishes, even if the user navigates away.
                if (data.error) {
                    showToast(data.error, 'error');
                } else {
                    showToast(data.message || 'Backup started', 'info');
                }
            } catch (e) { showToast('Backup failed: ' + e.message, 'error'); }
        }
    };
}

// Backup Options modal — pick format, optionally restrict to specific
// tables, run with progress polling. Phases reported by the backend:
// dumping → archiving (directory only) → hashing → done.
const _BACKUP_PHASES = ['dumping', 'archiving', 'hashing', 'done'];
function backupOptionsModal() {
    return {
        open: false,
        running: false,
        format: 'plain',
        filterTables: false,
        tableFilter: '',
        availableTables: [],
        selectedTables: [],
        phase: '',
        progressId: null,
        get progressPct() {
            if (!this.phase) return 5;
            const i = _BACKUP_PHASES.indexOf(this.phase);
            return i < 0 ? 5 : Math.round((i + 1) / _BACKUP_PHASES.length * 100);
        },
        reset() {
            this.format = 'plain';
            this.filterTables = false;
            this.tableFilter = '';
            this.selectedTables = [];
            this.phase = '';
            this.running = false;
            this.progressId = null;
        },
        async loadTables() {
            if (!adminState.connId) return;
            try {
                const res = await fetch('/api/admin/' + adminState.connId + '/tables');
                const data = await res.json();
                this.availableTables = data.tables || [];
            } catch (e) {
                this.availableTables = [];
            }
        },
        async run() {
            if (!adminState.connId || this.running) return;
            this.running = true;
            this.phase = 'starting';
            this.progressId = 'p' + Math.random().toString(36).slice(2, 12);
            const body = {
                format: this.format,
                tables: this.filterTables && this.selectedTables.length ? this.selectedTables : null,
                progress_id: this.progressId,
            };
            // The backend now returns 202 + job_id immediately and the
            // pg_dump runs in a worker thread, so this fetch resolves
            // in milliseconds. The progress poller below shows live
            // phases (`dumping` → `archiving` → `hashing` → `done`)
            // for as long as the user keeps the modal open. The
            // global jobs poller (tusk-jobs.js) shows the completion
            // toast even after the modal is closed or the user
            // navigates away.
            const stop = this._startPoll();
            try {
                const res = await fetch('/api/admin/' + adminState.connId + '/backup', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(body),
                });
                const data = await res.json();
                if (data.error) {
                    showToast(data.error, 'error');
                } else {
                    showToast(data.message || 'Backup started', 'info');
                    // Close the modal — the work continues in the
                    // background. User will get a "completed" toast
                    // from the global poller when pg_dump finishes.
                    this.open = false;
                }
            } catch (e) {
                showToast('Backup failed: ' + e.message, 'error');
            } finally {
                stop();
                this.running = false;
            }
        },
        _startPoll() {
            const id = this.progressId;
            const t = setInterval(async () => {
                if (!id || !adminState.connId) return;
                try {
                    const res = await fetch('/api/admin/' + adminState.connId + '/backup/progress/' + id);
                    const data = await res.json();
                    if (data && data.phase) this.phase = data.phase;
                } catch {}
            }, 800);
            return () => clearInterval(t);
        },
    };
}

function loadScheduledJobs() {
    const el = document.getElementById('scheduled-jobs-list');
    if (!el) return;
    fetch('/api/scheduler/jobs')
        .then(r => r.json())
        .then(data => {
            const jobs = data.jobs || [];
            if (!jobs.length) {
                el.innerHTML = '<div style="padding:14px;color:var(--fg-3)">No scheduled tasks</div>';
                return;
            }
            el.innerHTML = jobs.map(j => `
                <div style="padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
                    <div>
                        <div class="flex aic gap-2">
                            <span style="font-weight:500">${j.name || j.type || 'Task'}</span>
                            <span class="chip ${j.paused ? 'chip-amber' : 'chip-green'}">${j.paused ? 'Paused' : 'Active'}</span>
                        </div>
                        <div class="text-sm" style="color:var(--fg-3);margin-top:4px">${j.schedule || ''} ${j.next_run ? '· Next: ' + j.next_run : ''}</div>
                    </div>
                    <div class="flex aic gap-2">
                        <button onclick="runJobNow('${j.id}')" class="btn btn-sm btn-ghost" title="Run now">Run</button>
                        ${j.paused
                            ? `<button onclick="resumeJob('${j.id}')" class="btn btn-sm btn-ghost" style="color:var(--green)">Resume</button>`
                            : `<button onclick="pauseJob('${j.id}')" class="btn btn-sm btn-ghost" style="color:var(--accent-amber)">Pause</button>`
                        }
                        <button onclick="deleteJob('${j.id}')" class="btn btn-sm btn-ghost" style="color:var(--red)">Delete</button>
                    </div>
                </div>
            `).join('');
        })
        .catch(() => {
            el.innerHTML = '<div style="padding:14px;color:var(--fg-3)">No scheduled tasks</div>';
        });
}

function adminPage() {
    return {
        get connId() { return adminState.connId; },
        get connName() { return adminState.connName; },
        init() { loadScheduledJobs(); },
        refreshAll() {
            htmx.trigger(document.body, 'adminRefresh');
            loadScheduledJobs();
        },
        async resetSlowQueries() {
            if (!adminState.connId) return;
            if (!await tuskConfirm('Reset pg_stat_statements statistics? This clears all query history.')) return;
            try {
                const res = await fetch('/api/admin/' + adminState.connId + '/slow-queries/reset', { method: 'POST' });
                const data = await res.json();
                showToast(data.success ? 'Statistics reset' : ('Failed: ' + data.error), data.success ? 'success' : 'error');
                if (data.success) htmx.trigger(document.getElementById('slow-queries-list'), 'refresh');
            } catch (e) { showToast('Error: ' + e.message, 'error'); }
        },
        async createBaseBackup() {
            if (!adminState.connId) return;
            const label = await tuskPrompt('Backup label (optional):');
            if (label === null) return;
            showToast('Starting base backup...', 'info');
            try {
                const res = await fetch('/api/admin/' + adminState.connId + '/pitr/base-backup', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ label: label || undefined })
                });
                const data = await res.json();
                showToast(data.message, data.success ? 'success' : 'error');
                if (data.success) htmx.trigger(document.getElementById('pitr-content'), 'refresh');
            } catch (e) { showToast('Backup failed: ' + e.message, 'error'); }
        }
    };
}

function roleModal() {
    return {
        open: false,
        isEdit: false,
        form: { name: '', password: '', login: true, superuser: false, createdb: false, createrole: false },
        openCreate() {
            this.isEdit = false;
            this.form = { name: '', password: '', login: true, superuser: false, createdb: false, createrole: false };
            this.open = true;
        },
        editRole(name, login, superuser, createdb, createrole) {
            this.isEdit = true;
            this.form = { name, password: '', login, superuser, createdb, createrole };
            this.open = true;
        },
        async saveRole() {
            const url = this.isEdit
                ? '/api/admin/' + adminState.connId + '/roles/' + this.form.name
                : '/api/admin/' + adminState.connId + '/roles';
            const body = { ...this.form };
            if (!body.password) delete body.password;
            try {
                const res = await fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(body)
                });
                const data = await res.json();
                if (data.success) {
                    showToast(data.message, 'success');
                    this.open = false;
                    htmx.trigger(document.body, 'rolesChanged');
                } else {
                    showToast('Failed: ' + data.error, 'error');
                }
            } catch (e) { showToast('Error: ' + e.message, 'error'); }
        }
    };
}

// Make editRole callable from partial template @click
window.editRole = function(name, login, superuser, createdb, createrole) {
    const modal = document.querySelector('[x-data*="roleModal"]');
    if (modal) {
        Alpine.$data(modal).editRole(name, login, superuser, createdb, createrole);
    }
};

function backupsModal() {
    return {
        get connId() { return adminState.connId; },
        backupsOpen: false,
        showCreateDb(filename) {
            window.dispatchEvent(new CustomEvent('open-create-db', { detail: filename }));
        }
    };
}
// Make showCreateDb callable from partial
window.showCreateDb = function(filename) {
    window.dispatchEvent(new CustomEvent('open-create-db', { detail: filename }));
};

// Shared helper: load all PostgreSQL connections for the target picker
// dropdowns. Cached per-modal to avoid hammering /api/connections on
// every open.
async function _loadPgConnections() {
    try {
        const res = await fetch('/api/connections');
        const data = await res.json();
        const list = Array.isArray(data) ? data : [];
        return list.filter(c => c.type === 'postgres');
    } catch { return []; }
}

function createDbModal() {
    return {
        createDbOpen: false,
        backupFile: '',
        dbName: '',
        targetConnId: '',
        availableConns: [],
        async openModal(filename) {
            this.backupFile = filename;
            this.dbName = '';
            this.availableConns = await _loadPgConnections();
            // Default the picker to whichever connection the user is
            // viewing — the most common case is restoring back into the
            // same server. Fallback to the first PG conn if no admin
            // context is set.
            this.targetConnId = adminState.connId
                || (this.availableConns[0] && this.availableConns[0].id)
                || '';
            this.createDbOpen = true;
        },
        async createDatabase() {
            if (!this.dbName.trim()) { showToast('Please enter a database name', 'warning'); return; }
            if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(this.dbName)) {
                showToast('Invalid database name. Use letters, numbers, and underscores only.', 'warning'); return;
            }
            if (!this.targetConnId) {
                showToast('Pick a target connection', 'warning'); return;
            }
            // The route returns 202 + job_id immediately; the global
            // jobs poller surfaces the completion toast. We only show
            // a "started" notice here and close the modal.
            try {
                const res = await fetch('/api/admin/' + adminState.connId + '/databases/from-backup', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        name: this.dbName,
                        filename: this.backupFile,
                        target_conn_id: this.targetConnId,
                    })
                });
                const data = await res.json();
                if (data.error) {
                    showToast(data.error, 'error');
                } else {
                    showToast(data.message || 'Restore started', 'info');
                    this.createDbOpen = false;
                }
            } catch (e) { showToast('Failed: ' + e.message, 'error'); }
        }
    };
}

function restoreModal() {
    return {
        restoreOpen: false,
        backupFile: '',
        targetConnId: '',
        availableConns: [],
        async openModal(filename) {
            this.backupFile = filename;
            this.availableConns = await _loadPgConnections();
            this.targetConnId = adminState.connId
                || (this.availableConns[0] && this.availableConns[0].id)
                || '';
            this.restoreOpen = true;
        },
        async restore() {
            if (!this.targetConnId) {
                showToast('Pick a target connection', 'warning'); return;
            }
            try {
                const res = await fetch('/api/admin/' + adminState.connId + '/restore', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        filename: this.backupFile,
                        target_conn_id: this.targetConnId,
                    })
                });
                const data = await res.json();
                if (data.error) {
                    showToast(data.error, 'error');
                } else {
                    showToast(data.message || 'Restore started', 'info');
                    this.restoreOpen = false;
                }
            } catch (e) { showToast('Failed: ' + e.message, 'error'); }
        }
    };
}

// Make the restore modal openable from the backups partial.
window.showRestore = function(filename) {
    window.dispatchEvent(new CustomEvent('open-restore', { detail: filename }));
};

function scheduleModal() {
    return {
        scheduleOpen: false,
        taskType: 'backup',
        vacuumFull: false,
        mode: 'recurring',
        hour: 2, minute: 0,
        dayOfWeek: 'sun',
        runDatetime: '',
        openModal() {
            if (!adminState.connId) { showToast('Please select a server first', 'warning'); return; }
            this.scheduleOpen = true;
            // Set default datetime
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            tomorrow.setHours(2, 0, 0, 0);
            this.runDatetime = tomorrow.toISOString().slice(0, 16);
            this.$nextTick(() => lucide.createIcons());
        },
        async addTask() {
            const body = { connection_id: adminState.connId };
            if (this.mode === 'once') {
                if (!this.runDatetime) { showToast('Please select a date and time', 'warning'); return; }
                body.run_date = new Date(this.runDatetime).toISOString();
            } else {
                body.hour = this.hour;
                body.minute = this.minute;
                body.day_of_week = this.dayOfWeek;
            }
            if (this.taskType === 'vacuum') body.full = this.vacuumFull;
            try {
                const res = await fetch('/api/scheduler/jobs/' + this.taskType, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(body)
                });
                const data = await res.json();
                if (data.success) {
                    showToast((this.mode === 'once' ? 'One-time' : 'Recurring') + ' ' + this.taskType + ' task scheduled', 'success');
                    this.scheduleOpen = false;
                    loadScheduledJobs();
                } else { showToast('Failed: ' + data.error, 'error'); }
            } catch (e) { showToast('Error: ' + e.message, 'error'); }
        }
    };
}

// Scheduler job actions (called from HTMX partial if we add one, or keep as fetch for now)
window.runJobNow = async function(jobId) {
    try {
        const res = await fetch('/api/scheduler/jobs/' + jobId + '/run', { method: 'POST' });
        const data = await res.json();
        showToast(data.success ? 'Job triggered' : 'Failed to trigger job', data.success ? 'success' : 'error');
    } catch (e) { showToast('Error: ' + e.message, 'error'); }
};

window.pauseJob = async function(jobId) {
    try {
        const res = await fetch('/api/scheduler/jobs/' + jobId + '/pause', { method: 'POST' });
        const data = await res.json();
        if (data.success) { showToast('Job paused', 'success'); loadScheduledJobs(); }
        else showToast('Failed to pause job', 'error');
    } catch (e) { showToast('Error: ' + e.message, 'error'); }
};

window.resumeJob = async function(jobId) {
    try {
        const res = await fetch('/api/scheduler/jobs/' + jobId + '/resume', { method: 'POST' });
        const data = await res.json();
        if (data.success) { showToast('Job resumed', 'success'); loadScheduledJobs(); }
        else showToast('Failed to resume job', 'error');
    } catch (e) { showToast('Error: ' + e.message, 'error'); }
};

window.deleteJob = async function(jobId) {
    if (!await tuskConfirm('Delete this scheduled task?')) return;
    try {
        const res = await fetch('/api/scheduler/jobs/' + jobId, { method: 'DELETE' });
        const data = await res.json();
        if (data.success) { showToast('Job deleted', 'success'); loadScheduledJobs(); }
        else showToast('Failed to delete job', 'error');
    } catch (e) { showToast('Error: ' + e.message, 'error'); }
};

// ─── Edit a session-level setting ────────────────────────────────────
window.tuskEditSetting = async function(name, current) {
    if (!adminState.connId) return;
    const next = await tuskPrompt(`SET ${name} =`, current);
    if (next === null) return;
    try {
        const res = await fetch('/api/admin/' + adminState.connId + '/set-setting', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, value: next }),
        });
        const data = await res.json();
        showToast(data.message || data.error, data.success ? 'success' : 'error');
        if (data.success) htmx.trigger(document.getElementById('settings-list'), 'refresh');
    } catch (e) { showToast('Error: ' + e.message, 'error'); }
};

// ─── Trend sparklines ─────────────────────────────────────────────────
// Pulls /stats/history once per refresh and paints inline SVGs into
// every `.tusk-sparkline` element under the stats grid. Keyed off
// `data-metric`. The history endpoint already exists from v0.3.0.
window.tuskRefreshSparklines = async function() {
    if (!adminState.connId) return;
    try {
        const res = await fetch('/api/admin/' + adminState.connId + '/stats/history?limit=64');
        const data = await res.json();
        const points = data.points || [];
        if (!points.length) return;
        document.querySelectorAll('.tusk-sparkline').forEach(svg => {
            const metric = svg.dataset.metric;
            const series = points.map(p => Number(p[metric] || 0));
            const min = Math.min(...series);
            const max = Math.max(...series);
            const range = max - min || 1;
            const stride = 100 / Math.max(series.length - 1, 1);
            const path = series.map((v, i) => {
                const x = (i * stride).toFixed(1);
                const y = (28 - ((v - min) / range) * 24 - 2).toFixed(1);
                return (i === 0 ? 'M' : 'L') + x + ',' + y;
            }).join(' ');
            const fill = `${path} L100,28 L0,28 Z`;
            svg.innerHTML =
                `<path d="${fill}" fill="rgba(99,102,241,0.18)" stroke="none"/>` +
                `<path d="${path}" fill="none" stroke="#818cf8" stroke-width="1.5"/>`;
        });
    } catch {}
};
// Keep the sparklines in sync with the stat refresh cadence.
setInterval(() => window.tuskRefreshSparklines(), 5000);
</script>
{% endblock %}