{{/*
    Settings surface — matches switchboard-prototype-settings.jsx.
    Full-page layout: topbar + left nav + content area.
    JS (settings-handlers.js, ui-settings.js) populates dynamic sections.
*/}}

{{define "surface-settings"}}
<div class="surface-settings" style="flex-direction:column;">

    {{/* Top Bar */}}
    <div class="settings-topbar">
        <a href="{{.BasePath}}/" class="settings-topbar-back" id="settingsBackBtn">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
            Back
        </a>
        <div class="settings-topbar-sep"></div>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--text-2)"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
        <span class="settings-topbar-title">Settings</span>
    </div>

    <div style="display:flex;flex:1;min-height:0;">
        {{/* Left Nav */}}
        <div class="settings-nav">
            {{$section := .Section}}
            {{$base := .BasePath}}

            <a href="{{$base}}/settings/general" class="settings-nav-link{{if eq $section "general"}} active{{end}}">General</a>
            <a href="{{$base}}/settings/appearance" class="settings-nav-link{{if eq $section "appearance"}} active{{end}}">Appearance</a>
            <a href="{{$base}}/settings/models" class="settings-nav-link{{if eq $section "models"}} active{{end}}">Models</a>
            <a href="{{$base}}/settings/personas" class="settings-nav-link{{if eq $section "personas"}} active{{end}}">Personas</a>
            <a href="{{$base}}/settings/profile" class="settings-nav-link{{if eq $section "profile"}} active{{end}}">Profile</a>
            <a href="{{$base}}/settings/teams" class="settings-nav-link{{if eq $section "teams"}} active{{end}}">Teams</a>

            {{/* BYOK-gated nav items */}}
            <div id="settingsByokNav" style="display:none;">
                <div class="settings-nav-sep"></div>
                <a href="{{$base}}/settings/providers" class="settings-nav-link{{if eq $section "providers"}} active{{end}}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
                    My Providers
                </a>
                <a href="{{$base}}/settings/roles" class="settings-nav-link{{if eq $section "roles"}} active{{end}}">Model Roles</a>
                <a href="{{$base}}/settings/usage" class="settings-nav-link{{if eq $section "usage"}} active{{end}}">My Usage</a>
            </div>

            {{/* BYOK indicator */}}
            <div id="settingsByokIndicator" class="settings-nav-footer" style="display:none;">
                <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
                    <span style="font-size:11px;font-weight:600;color:var(--success);">BYOK Enabled</span>
                </div>
                <p style="font-size:10px;color:var(--text-3);margin:0;line-height:1.5;">Admin has enabled Bring Your Own Key</p>
            </div>
        </div>

        {{/* Content */}}
        <div class="settings-content" id="settingsContentMount">
            <div id="settingsSection" data-section="{{.Section}}">
                <h2 id="settingsSectionTitle">{{if eq .Section "general"}}General{{else if eq .Section "appearance"}}Appearance{{else if eq .Section "models"}}Models{{else if eq .Section "personas"}}Personas{{else if eq .Section "profile"}}Profile{{else if eq .Section "teams"}}Teams{{else if eq .Section "providers"}}My Providers{{else if eq .Section "roles"}}Model Roles{{else if eq .Section "usage"}}My Usage{{else if eq .Section "knowledge"}}Knowledge Bases{{else if eq .Section "memory"}}Memory{{else if eq .Section "notifications"}}Notifications{{else}}Settings{{end}}</h2>

                {{if eq .Section "general"}}
                <div class="settings-section">
                    <h3>Chat Defaults</h3>
                    <div class="form-group">
                        <label>Default Model</label>
                        <select id="settingsModel"></select>
                    </div>
                    <div class="form-group">
                        <label>System Prompt</label>
                        <textarea id="settingsSystemPrompt" rows="3" placeholder="Optional system prompt…" style="max-width:100%;"></textarea>
                    </div>
                    <div style="display:flex;gap:16px;">
                        <div class="form-group" style="flex:1;">
                            <label>Max Tokens <span id="settingsMaxHint" style="font-weight:400;color:var(--text-3);"></span></label>
                            <input type="number" id="settingsMaxTokens" placeholder="default">
                        </div>
                        <div class="form-group" style="flex:1;">
                            <label>Temperature</label>
                            <div style="display:flex;align-items:center;gap:8px;">
                                <input type="range" id="settingsTemp" min="0" max="2" step="0.1" value="0.7" style="flex:1;">
                                <span id="settingsTempValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);">0.7</span>
                            </div>
                        </div>
                    </div>
                    <label style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);cursor:pointer;margin-top:4px;">
                        <input type="checkbox" id="settingsThinking"> Show thinking blocks
                    </label>
                </div>
                {{else if eq .Section "appearance"}}
                <div class="settings-section">
                    <h3>Theme</h3>
                    <div id="themeToggle" class="toggle-group">
                        <button class="toggle-btn" data-theme="light">&#9728; Light</button>
                        <button class="toggle-btn" data-theme="dark">&#9790; Dark</button>
                        <button class="toggle-btn" data-theme="system">&#8862; System</button>
                    </div>
                </div>
                <div class="settings-section">
                    <h3>UI Scale</h3>
                    <div class="form-group">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <input type="range" id="settingsScale" min="80" max="175" step="5" value="100" style="flex:1;">
                            <span id="scaleValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">100%</span>
                        </div>
                    </div>
                    <h3 style="margin-top:16px;">Message Font Size</h3>
                    <div class="form-group">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <input type="range" id="settingsMsgFont" min="12" max="20" step="1" value="14" style="flex:1;">
                            <span id="msgFontValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">14px</span>
                        </div>
                    </div>
                </div>
                <button class="btn-md btn-primary" onclick="if(typeof UI!=='undefined')UI.saveAppearance?.()">Save</button>
                {{else if eq .Section "profile"}}
                <div class="settings-section">
                    <h3>Profile</h3>
                    <div class="form-group"><label>Display Name</label><input type="text" id="profileDisplayName" placeholder="Your display name"></div>
                    <div class="form-group"><label>Email</label><input type="email" id="profileEmail" disabled></div>
                    <button class="btn-md btn-primary" onclick="if(typeof Pages!=='undefined')Pages.saveProfile?.()">Save Profile</button>
                </div>
                <div class="settings-section" style="margin-top:20px;">
                    <h3>Change Password</h3>
                    <div class="form-group"><label>Current Password</label><input type="password" id="settingsCurrentPw" autocomplete="current-password"></div>
                    <div class="form-group"><label>New Password</label><input type="password" id="settingsNewPw" autocomplete="new-password"></div>
                    <div class="form-group"><label>Confirm New Password</label><input type="password" id="settingsConfirmPw" autocomplete="new-password"></div>
                    <button class="btn-md btn-primary" onclick="if(typeof Pages!=='undefined')Pages.changePassword?.()">Update Password</button>
                </div>
                {{else if eq .Section "providers"}}
                <div id="userProvidersDisabled" style="display:none;">
                    <div class="settings-section"><p style="color:var(--text-2);font-size:13px;">Your admin has disabled user-managed API keys (BYOK).</p></div>
                </div>
                <div style="margin-bottom:12px;">
                    <button class="btn-md btn-primary" id="providerShowAddBtn" style="display:none;">+ Add Provider</button>
                </div>
                <div id="providerAddForm" style="display:none;"></div>
                <div id="providerList"><div class="settings-placeholder">Loading providers…</div></div>
                {{else if eq .Section "personas"}}
                <div style="margin-bottom:12px;">
                    <button class="btn-md btn-primary" id="userAddPersonaBtn" style="display:none;">+ New Persona</button>
                </div>
                <div id="userAddPersonaForm" style="display:none;"></div>
                <div id="userPersonaList"><div class="settings-placeholder">Loading personas…</div></div>
                {{else if eq .Section "models"}}
                <div id="userModelList"><div class="settings-placeholder">Loading models…</div></div>
                {{else if eq .Section "roles"}}
                <div id="userRolesDisabled" class="settings-section" style="display:none;">
                    <p style="color:var(--text-2);font-size:13px;">Add a personal provider first to configure model role overrides.</p>
                </div>
                <div id="userRolesConfig"></div>
                {{else if eq .Section "usage"}}
                <div id="myUsageTotals"></div>
                {{else if eq .Section "teams"}}
                <div id="settingsDynamic"><div class="settings-placeholder">Loading teams…</div></div>
                {{else}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
                {{end}}
            </div>
        </div>
    </div>
</div>
{{end}}

{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
{{define "css-settings"}}{{end}}

{{/* Scripts */}}
{{define "scripts-settings"}}
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-settings.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/settings-handlers.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/persona-kb.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notification-prefs.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}">
    document.addEventListener('DOMContentLoaded', async () => {
        const section = document.getElementById('settingsSection')?.dataset.section;
        if (!section) return;

        // ── Settings navigation: don't pollute browser history ──
        // On first settings page load, stash the URL the user came from.
        // Tab switches use location.replace() so they don't stack in history.
        // Back button navigates directly to the stored return URL.
        const RETURN_KEY = 'sb_settings_return';
        if (!sessionStorage.getItem(RETURN_KEY)) {
            // Prefer referrer if it's on the same origin and not another settings page
            const ref = document.referrer;
            const base = (window.__BASE__ || '') + '/';
            if (ref && ref.startsWith(location.origin) && !ref.includes('/settings')) {
                sessionStorage.setItem(RETURN_KEY, ref);
            } else {
                sessionStorage.setItem(RETURN_KEY, location.origin + base);
            }
        }

        const backBtn = document.getElementById('settingsBackBtn');
        if (backBtn) {
            backBtn.addEventListener('click', (e) => {
                e.preventDefault();
                const returnURL = sessionStorage.getItem(RETURN_KEY);
                sessionStorage.removeItem(RETURN_KEY);
                location.href = returnURL || (window.__BASE__ || '') + '/';
            });
        }

        // Tab links: replace current history entry instead of pushing
        document.querySelectorAll('.settings-nav-link').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                location.replace(link.href);
            });
        });

        // Show BYOK nav if enabled
        const pageData = window.__PAGE_DATA__;
        if (pageData && pageData.BYOKEnabled) {
            const byokNav = document.getElementById('settingsByokNav');
            const byokInd = document.getElementById('settingsByokIndicator');
            if (byokNav) byokNav.style.display = '';
            if (byokInd) byokInd.style.display = '';
        }

        if (section === 'appearance' && typeof UI !== 'undefined') {
            UI.loadAppearanceSettings?.();
            UI.initAppearance?.();
        }
        if (section === 'general' && typeof UI !== 'undefined') {
            UI.loadGeneralSettings?.();
        }
        if (section === 'profile') {
            const user = window.__USER__;
            if (user) {
                const dn = document.getElementById('profileDisplayName');
                const em = document.getElementById('profileEmail');
                if (dn) dn.value = user.display_name || user.username || '';
                if (em) em.value = user.email || '';
            }
        }

        const dynamicSections = {
            providers:     () => typeof UI !== 'undefined' && UI.loadProviderList?.(),
            models:        () => typeof UI !== 'undefined' && UI.loadUserModels?.(),
            personas:      () => typeof UI !== 'undefined' && UI.loadUserPersonas?.(),
            usage:         () => typeof UI !== 'undefined' && UI.loadMyUsage?.(),
            roles:         () => typeof UI !== 'undefined' && UI.loadUserRoles?.(),
            knowledge:     () => typeof KnowledgeUI !== 'undefined' && KnowledgeUI.openManagePanel?.(),
            memory:        () => typeof MemoryUI !== 'undefined' && MemoryUI.openSettingsPanel?.(),
            notifications: () => typeof NotifPrefs !== 'undefined' && NotifPrefs.load?.(),
            teams:         () => typeof UI !== 'undefined' && UI.loadTeamsSettings?.(),
        };

        // Populate App.policies and App.models from API.
        // On chat surface, app.js does this. On settings surface, we must do it here.
        try {
            const pubData = await API.getPublicSettings();
            App.policies = pubData.policies || {};
        } catch (_) { App.policies = App.policies || {}; }
        if (typeof fetchModels === 'function') await fetchModels();

        // Wire up interactive handlers (BYOK provider form, model visibility, etc.)
        if (typeof _initSettingsListeners === 'function') _initSettingsListeners();
        // Show/hide BYOK and persona features based on policies
        if (typeof UI !== 'undefined') {
            UI.checkUserProvidersAllowed?.();
            UI.checkUserPersonasAllowed?.();
        }
        if (dynamicSections[section]) dynamicSections[section]();
    });
</script>
{{end}}