{{/*
    Settings surface (Phase 2b).
    Server renders a full-page settings layout (replaces the modal).
    Reuses existing settings-handlers.js + ui-settings.js for interactions.
*/}}

{{define "surface-settings"}}
<div class="surface-settings">
    <div class="settings-nav">
        <div class="settings-nav-title">Settings</div>
        {{$section := .Section}}
        <a href="{{.BasePath}}/settings/general" class="settings-nav-link{{if eq $section "general"}} active{{end}}">General</a>
        <a href="{{.BasePath}}/settings/appearance" class="settings-nav-link{{if eq $section "appearance"}} active{{end}}">Appearance</a>
        <a href="{{.BasePath}}/settings/providers" class="settings-nav-link{{if eq $section "providers"}} active{{end}}">My Providers</a>
        <a href="{{.BasePath}}/settings/models" class="settings-nav-link{{if eq $section "models"}} active{{end}}">My Models</a>
        <a href="{{.BasePath}}/settings/personas" class="settings-nav-link{{if eq $section "personas"}} active{{end}}">My Presets</a>
        <a href="{{.BasePath}}/settings/roles" class="settings-nav-link{{if eq $section "roles"}} active{{end}}">Model Roles</a>
        <a href="{{.BasePath}}/settings/knowledge" class="settings-nav-link{{if eq $section "knowledge"}} active{{end}}">Knowledge Bases</a>
        <a href="{{.BasePath}}/settings/memory" class="settings-nav-link{{if eq $section "memory"}} active{{end}}">Memory</a>
        <a href="{{.BasePath}}/settings/notifications" class="settings-nav-link{{if eq $section "notifications"}} active{{end}}">Notifications</a>
        <a href="{{.BasePath}}/settings/usage" class="settings-nav-link{{if eq $section "usage"}} active{{end}}">Usage</a>
        <div class="settings-nav-sep"></div>
        <a href="{{.BasePath}}/" class="settings-nav-link settings-nav-back">← Back to Chat</a>
    </div>
    <div class="settings-content" id="settingsContentMount">
        {{/* Content rendered by section-specific JS or server template */}}
        <div class="settings-content-inner" id="settingsSection" data-section="{{.Section}}">
            {{if eq .Section "general"}}{{template "settings-general" .}}
            {{else if eq .Section "appearance"}}{{template "settings-appearance" .}}
            {{else}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
            {{end}}
        </div>
    </div>
</div>
{{end}}

{{define "settings-general"}}
<div class="settings-section">
    <h2>Profile</h2>
    <div class="form-group">
        <label>Display Name</label>
        <input type="text" id="settingsDisplayName" value="{{if .User}}{{.User.display_name}}{{end}}" placeholder="Your name">
    </div>
    <div class="form-group">
        <label>Email</label>
        <input type="email" id="settingsEmail" value="{{if .User}}{{.User.email}}{{end}}" disabled>
    </div>
    <button class="btn-small btn-primary" onclick="Pages.saveProfile()">Save</button>
</div>

<div class="settings-section" style="margin-top:16px">
    <h2>Password</h2>
    <div class="form-group">
        <label>Current Password</label>
        <input type="password" id="settingsCurrentPw">
    </div>
    <div class="form-group">
        <label>New Password</label>
        <input type="password" id="settingsNewPw">
    </div>
    <div class="form-group">
        <label>Confirm Password</label>
        <input type="password" id="settingsConfirmPw">
    </div>
    <button class="btn-small btn-primary" onclick="Pages.changePassword()">Change Password</button>
</div>
{{end}}

{{define "settings-appearance"}}
<div class="settings-section">
    <h2>Theme</h2>
    <div id="themeToggle" class="settings-toggle-group">
        <button class="theme-btn" data-theme="dark">Dark</button>
        <button class="theme-btn" data-theme="light">Light</button>
    </div>
</div>
<div class="settings-section" style="margin-top:16px">
    <h2>Editor Keymap</h2>
    <div id="keymapToggle" class="settings-toggle-group">
        <button class="theme-btn" data-keymap="standard">Standard</button>
        <button class="theme-btn" data-keymap="vim">Vim</button>
        <button class="theme-btn" data-keymap="emacs">Emacs</button>
    </div>
</div>
<div class="settings-section" style="margin-top:16px">
    <h2>UI Scale</h2>
    <div class="form-group">
        <input type="range" id="settingsScale" min="80" max="120" step="5" value="100">
        <span id="scaleValue">100%</span>
    </div>
    <h2>Message Font Size</h2>
    <div class="form-group">
        <input type="range" id="settingsMsgFont" min="12" max="20" step="1" value="14">
        <span id="msgFontValue">14px</span>
    </div>
</div>
{{end}}

{{define "css-settings"}}
<style>
    .surface-settings {
        display: flex;
        height: 100%;
        overflow: hidden;
    }
    .settings-nav {
        width: 200px;
        border-right: 1px solid var(--border, #2a2a2a);
        padding: 12px;
        overflow-y: auto;
        flex-shrink: 0;
    }
    .settings-nav-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary, #888);
        margin-bottom: 12px;
    }
    .settings-nav-link {
        display: block;
        padding: 6px 10px;
        border-radius: 6px;
        color: var(--text-primary, #e0e0e0);
        text-decoration: none;
        font-size: 13px;
        margin-bottom: 2px;
    }
    .settings-nav-link.active { background: var(--bg-tertiary, #252528); }
    .settings-nav-link:hover { background: var(--bg-secondary, #1a1a1e); }
    .settings-nav-sep {
        margin: 12px 0;
        border-top: 1px solid var(--border, #2a2a2a);
    }
    .settings-nav-back { color: var(--text-secondary, #888); }
    .settings-content {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
    }
    .settings-section {
        padding: 16px;
        background: var(--bg-secondary, #1a1a1e);
        border-radius: 8px;
        border: 1px solid var(--border, #2a2a2a);
        max-width: 600px;
    }
    .settings-section h2 {
        font-size: 15px;
        margin: 0 0 12px;
    }
    .settings-toggle-group {
        display: flex;
        gap: 6px;
    }
    .settings-toggle-group .theme-btn {
        padding: 6px 14px;
        border: 1px solid var(--border, #2a2a2a);
        border-radius: 6px;
        background: var(--bg-primary, #0e0e10);
        color: var(--text-primary, #e0e0e0);
        cursor: pointer;
        font-size: 13px;
    }
    .settings-toggle-group .theme-btn.active {
        background: var(--accent, #5865f2);
        border-color: var(--accent, #5865f2);
        color: white;
    }
    .settings-placeholder {
        padding: 20px;
        color: var(--text-secondary, #888);
    }
    .form-group { margin-bottom: 8px; }
    .form-group label {
        display: block;
        font-size: 12px;
        color: var(--text-secondary, #888);
        margin-bottom: 4px;
    }
    .form-group input, .form-group select, .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%;
        max-width: 300px;
    }
    .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; }

    @media (max-width: 768px) {
        .settings-nav { width: 160px; font-size: 12px; }
    }
</style>
{{end}}

{{define "scripts-settings"}}
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/marked.min.js"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/purify.min.js"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-core.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
<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}}">
    // Settings surface boot
    document.addEventListener('DOMContentLoaded', () => {
        const section = document.getElementById('settingsSection')?.dataset.section;
        if (!section) return;

        // Appearance: wire up theme/keymap buttons and sliders
        if (section === 'appearance' && typeof UI !== 'undefined') {
            UI.loadAppearanceSettings();
            UI.initAppearance();
        }

        // Dynamic sections: let existing JS populate the container
        const dynamicSections = {
            providers:     () => typeof UI !== 'undefined' && UI.loadProviderList(),
            models:        () => typeof UI !== 'undefined' && UI.loadUserModels(),
            personas:      () => typeof UI !== 'undefined' && UI.loadUserPresets(),
            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(),
        };
        if (dynamicSections[section]) {
            dynamicSections[section]();
        }
    });
</script>
{{end}}