{{/* Admin surface — full admin panel with category/section navigation.
     Categories and sections mirror the SPA's ADMIN_SECTIONS structure.
     Server-rendered sections: roles, routing, providers, models, teams, users, settings.
     Hybrid sections: container div + JS loader fills content. */}}

{{define "surface-admin"}}
<div class="admin-surface">
    {{/* ── Category bar (top) ───────────────── */}}
    <div class="admin-cat-bar">
        {{$cat := .Data.Category}}
        <button class="admin-cat{{if eq $cat "people"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/users'">People</button>
        <button class="admin-cat{{if eq $cat "ai"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/providers'">AI</button>
        <button class="admin-cat{{if eq $cat "routing"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/health'">Routing</button>
        <button class="admin-cat{{if eq $cat "system"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/settings'">System</button>
        <button class="admin-cat{{if eq $cat "monitoring"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/usage'">Monitoring</button>
        <div class="admin-cat-spacer"></div>
        <a href="{{.BasePath}}/" class="admin-back-link">← Chat</a>
    </div>

    <div class="admin-body">
        {{/* ── Section sidebar ──────────────── */}}
        <nav class="admin-sidebar">
            {{$section := .Section}}
            {{$bp := .BasePath}}
            {{if eq $cat "people"}}
                <a href="{{$bp}}/admin/users" class="admin-nav-link{{if eq $section "users"}} active{{end}}">Users</a>
                <a href="{{$bp}}/admin/teams" class="admin-nav-link{{if eq $section "teams"}} active{{end}}">Teams</a>
                <a href="{{$bp}}/admin/groups" class="admin-nav-link{{if eq $section "groups"}} active{{end}}">Groups</a>
            {{else if eq $cat "ai"}}
                <a href="{{$bp}}/admin/providers" class="admin-nav-link{{if eq $section "providers"}} active{{end}}">Providers</a>
                <a href="{{$bp}}/admin/models" class="admin-nav-link{{if eq $section "models"}} active{{end}}">Models</a>
                <a href="{{$bp}}/admin/presets" class="admin-nav-link{{if eq $section "presets"}} active{{end}}">Personas</a>
                <a href="{{$bp}}/admin/roles" class="admin-nav-link{{if eq $section "roles"}} active{{end}}">Roles</a>
                <a href="{{$bp}}/admin/knowledgeBases" class="admin-nav-link{{if eq $section "knowledgeBases"}} active{{end}}">Knowledge</a>
                <a href="{{$bp}}/admin/memory" class="admin-nav-link{{if eq $section "memory"}} active{{end}}">Memory</a>
            {{else if eq $cat "routing"}}
                <a href="{{$bp}}/admin/health" class="admin-nav-link{{if eq $section "health"}} active{{end}}">Health</a>
                <a href="{{$bp}}/admin/routing" class="admin-nav-link{{if eq $section "routing"}} active{{end}}">Routing</a>
                <a href="{{$bp}}/admin/capabilities" class="admin-nav-link{{if eq $section "capabilities"}} active{{end}}">Capabilities</a>
            {{else if eq $cat "system"}}
                <a href="{{$bp}}/admin/settings" class="admin-nav-link{{if eq $section "settings"}} active{{end}}">Settings</a>
                <a href="{{$bp}}/admin/storage" class="admin-nav-link{{if eq $section "storage"}} active{{end}}">Storage</a>
                <a href="{{$bp}}/admin/extensions" class="admin-nav-link{{if eq $section "extensions"}} active{{end}}">Extensions</a>
            {{else if eq $cat "monitoring"}}
                <a href="{{$bp}}/admin/usage" class="admin-nav-link{{if eq $section "usage"}} active{{end}}">Usage</a>
                <a href="{{$bp}}/admin/audit" class="admin-nav-link{{if eq $section "audit"}} active{{end}}">Audit</a>
                <a href="{{$bp}}/admin/stats" class="admin-nav-link{{if eq $section "stats"}} active{{end}}">Stats</a>
            {{end}}
        </nav>

        {{/* ── Content area ─────────────────── */}}
        <div class="admin-content">
            {{if eq .Section "roles"}}{{template "admin-roles" .}}
            {{else if eq .Section "routing"}}{{template "admin-routing" .}}
            {{else if eq .Section "providers"}}{{template "admin-providers" .}}
            {{else if eq .Section "models"}}{{template "admin-models" .}}
            {{else if eq .Section "teams"}}{{template "admin-teams" .}}
            {{else if eq .Section "users"}}{{template "admin-users" .}}
            {{else if eq .Section "settings"}}{{template "admin-settings" .}}
            {{else}}
                {{/* Hybrid: container for JS-loaded sections */}}
                <div class="admin-page" id="adminHybridContainer" data-section="{{.Section}}">
                    <div class="admin-loading">Loading {{.Section}}…</div>
                </div>
            {{end}}
        </div>
    </div>
</div>
{{end}}

{{define "css-admin"}}
<style>
    /* ── Admin surface layout ───────────────── */
    .admin-surface { display: flex; flex-direction: column; height: 100%; font-family: inherit; }
    .admin-cat-bar {
        display: flex; align-items: center; gap: 2px;
        padding: 6px 12px; border-bottom: 1px solid var(--border, #2a2a2a);
        flex-shrink: 0; background: var(--bg-secondary, #1a1a1e);
    }
    .admin-cat {
        background: none; border: none; color: var(--text-secondary, #888);
        padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
    }
    .admin-cat:hover { background: var(--hover, #252528); color: var(--text-primary, #e0e0e0); }
    .admin-cat.active { background: var(--bg-tertiary, #252528); color: var(--text-primary, #e0e0e0); font-weight: 600; }
    .admin-cat-spacer { flex: 1; }
    .admin-back-link { color: var(--text-secondary, #888); text-decoration: none; font-size: 13px; padding: 5px 8px; }
    .admin-back-link:hover { color: var(--text-primary, #e0e0e0); }

    .admin-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
    .admin-sidebar {
        width: 160px; border-right: 1px solid var(--border, #2a2a2a);
        padding: 8px; overflow-y: auto; flex-shrink: 0;
    }
    .admin-nav-link {
        display: block; padding: 6px 10px; border-radius: 6px;
        color: var(--text-primary, #e0e0e0); text-decoration: none;
        font-size: 13px; margin-bottom: 2px;
    }
    .admin-nav-link.active { background: var(--bg-tertiary, #252528); }
    .admin-nav-link:hover { background: var(--bg-secondary, #1a1a1e); }
    .admin-content { flex: 1; overflow-y: auto; padding: 20px; }

    /* ── Shared admin styles ────────────────── */
    .admin-page h2 { font-size: 18px; margin: 0 0 8px; }
    .section-hint { font-size: 13px; color: var(--text-secondary, #888); margin: 0 0 16px; }
    .settings-section { padding: 16px; background: var(--bg-secondary, #1a1a1e); border-radius: 8px; border: 1px solid var(--border, #2a2a2a); margin-bottom: 16px; }
    .form-row { display: flex; flex-wrap: wrap; gap: 12px; }
    .form-group { margin-bottom: 8px; }
    .form-group label { display: block; font-size: 12px; color: var(--text-secondary, #888); margin-bottom: 4px; }
    .form-group select, .form-group input, .form-group textarea {
        padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border, #2a2a2a);
        background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0); font-size: 13px; width: 100%;
    }
    .btn-small { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
    .btn-primary { background: var(--accent, #5865f2); color: white; }
    .btn-primary:hover { opacity: 0.9; }
    .btn-danger { background: var(--error, #ef4444); color: white; }
    .btn-danger:hover { opacity: 0.9; }
    .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
    .admin-inline-form { padding: 16px; background: var(--bg-secondary, #1a1a1e); border-radius: 8px; border: 1px solid var(--border, #2a2a2a); margin-bottom: 16px; }
    .empty-hint { font-size: 13px; color: var(--text-secondary, #888); padding: 12px 0; }
    .admin-loading { font-size: 13px; color: var(--text-tertiary, #666); padding: 20px; text-align: center; }

    /* ── Tables ──────────────────────────────── */
    .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .admin-table th {
        text-align: left; padding: 8px; font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.5px;
        color: var(--text-tertiary, #666); border-bottom: 1px solid var(--border, #2a2a2a);
    }
    .admin-table td { padding: 8px; border-bottom: 1px solid var(--border, #2a2a2a); vertical-align: top; }
    .admin-table tr:hover td { background: var(--hover, rgba(255,255,255,0.02)); }
    .admin-badge {
        display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
    }
    .admin-badge-admin { background: rgba(239,68,68,0.15); color: #ef4444; }
    .admin-badge-user { background: rgba(59,130,246,0.15); color: #3b82f6; }
    .admin-badge-active { background: rgba(34,197,94,0.15); color: #22c55e; }
    .admin-badge-inactive { background: rgba(239,68,68,0.15); color: #ef4444; }
    .admin-badge-global { background: rgba(168,85,247,0.15); color: #a855f7; }
    .admin-badge-team { background: rgba(59,130,246,0.15); color: #3b82f6; }
    .admin-badge-personal { background: rgba(234,179,8,0.15); color: #eab308; }

    /* ── Toolbar ─────────────────────────────── */
    .admin-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .admin-search {
        padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border, #2a2a2a);
        background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0);
        font-size: 13px; min-width: 200px;
    }
</style>
{{end}}

{{define "scripts-admin"}}
<script nonce="{{.CSPNonce}}">
// Hybrid section loader — for admin sections not yet server-rendered.
// Detects the data-section on the hybrid container and calls the
// appropriate legacy loader if ui-admin.js is loaded.
(function() {
    const container = document.getElementById('adminHybridContainer');
    if (!container) return;
    const section = container.dataset.section;
    if (!section) return;

    // Wait for UI and admin loaders to be available
    function tryLoad() {
        if (typeof UI === 'undefined' || typeof UI.loadAdminUsers === 'undefined') {
            setTimeout(tryLoad, 100);
            return;
        }
        container.innerHTML = '';
        const LOADERS = {
            groups: () => UI.loadAdminGroups(),
            presets: () => UI.loadAdminPresets(),
            knowledgeBases: () => typeof KnowledgeUI !== 'undefined' ? KnowledgeUI.openAdminPanel() : null,
            memory: () => typeof MemoryUI !== 'undefined' ? MemoryUI.openAdminPanel() : null,
            storage: () => typeof loadAdminStorage === 'function' ? loadAdminStorage() : null,
            extensions: () => UI.loadAdminExtensions(),
            health: () => UI.loadAdminHealth(),
            capabilities: () => UI.loadAdminCapabilities(),
            usage: () => UI.loadAdminUsage(),
            audit: () => UI.loadAuditLog(),
            stats: () => UI.loadAdminStats(),
        };
        const loader = LOADERS[section];
        if (loader) loader();
        else container.innerHTML = '<div class="empty-hint">Section not found</div>';
    }
    tryLoad();
})();
</script>
{{end}}