{% extends "layout.html" %}

{% block title %}Settings - {{ console_display_name() }}{% endblock %}

{% block header_title %}{{ console_display_name() }} v{{ get_version() }}{% endblock %}

{% block head %}
<link href="/static/css/pages/settings.css?v=20251206-v1" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="session-container history-mode">
    <div class="main-panel">
        <!-- Header -->
        <div class="tabs-wrapper">
            <div class="history-page-title">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-sm">
                    <circle cx="12" cy="12" r="3"></circle>
                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                </svg>
                SETTINGS
            </div>
            <div class="terminal-controls">
                {% set _tenant = is_multitenant if is_multitenant is defined else is_multitenant_posture() %}
                {% if _tenant %}
                <a href="/profile" class="btn-new-session">PROFILE</a>
                {% endif %}
            </div>
        </div>

        <!-- Content -->
        <div class="terminal-container flex-1 overflow-y-auto">
            <!-- Settings Navigation Tabs -->
            <nav class="admin-nav">
                <button class="admin-nav-item active" data-section="mcp">MCP Servers</button>
                <button class="admin-nav-item" data-section="skills">Skills</button>
            </nav>

            <!-- MCP Servers Section -->
            <div id="section-mcp" class="settings-section active">
                <!-- MCP Settings -->
                <div class="profile-section">
                    <div class="profile-section-header">MCP Settings</div>
                    <div class="settings-grid">
                        <div class="setting-item">
                            <span class="setting-label">MCP Enabled</span>
                            <div class="toggle-wrapper">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="mcp-enabled" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <span id="mcp-enabled-label" class="setting-value">Yes</span>
                            </div>
                        </div>
                        <div class="setting-item">
                            <span class="setting-label">Include Global Servers</span>
                            <div class="toggle-wrapper">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="include-global" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <span id="include-global-label" class="setting-value">Yes</span>
                            </div>
                        </div>
                        <div class="setting-item">
                            <span class="setting-label">Max Custom Servers</span>
                            <span id="max-servers" class="setting-value">10</span>
                        </div>
                    </div>
                </div>

                <!-- Platform Servers -->
                <div class="profile-section">
                    <div class="profile-section-header">Platform Servers</div>
                    <div class="info-box">
                        These servers are provided by the platform. Use the tool ID in your session's tools array.
                    </div>
                    <div id="global-servers" class="server-list">
                        <div class="empty-state">Loading platform servers...</div>
                    </div>
                </div>

                <!-- User Servers -->
                <div class="profile-section">
                    <div class="profile-section-header">
                        Your Servers
                        <button id="btn-add-server" class="btn-new-session btn-add">+ ADD SERVER</button>
                    </div>
                    <div id="user-servers" class="server-list">
                        <div class="empty-state">Loading your servers...</div>
                    </div>
                </div>
            </div>

            <!-- Skills Section -->
            <div id="section-skills" class="settings-section">
                <!-- System Skills -->
                <div class="profile-section">
                    <div class="profile-section-header">System Skills</div>
                    <div class="info-box">
                        System skills are automatically loaded based on your task and tools. They provide domain-specific workflows and best practices.
                    </div>
                    <div id="system-skills" class="server-list">
                        <div class="empty-state">Loading system skills...</div>
                    </div>
                </div>

                <!-- User Skills -->
                <div class="profile-section">
                    <div class="profile-section-header">
                        Your Custom Skills
                        <button id="btn-add-skill" class="btn-new-session btn-add">+ CREATE SKILL</button>
                    </div>
                    <div class="info-box">
                        Create custom skills to teach the agent your specific workflows and methodologies.
                    </div>
                    <div id="user-skills" class="server-list">
                        <div class="empty-state">Loading your skills...</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Add/Edit Skill Modal -->
<div id="skill-modal" class="modal-overlay hidden">
    <div class="modal" style="max-width: 700px;">
        <div class="modal-header">
            <h3 class="modal-title" id="skill-modal-title">Create Skill</h3>
            <button class="modal-close" id="skill-modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <form id="skill-form">
                <input type="hidden" id="skill-edit-id">
                
                <div class="form-group">
                    <label class="form-label" for="skill-id">Skill ID *</label>
                    <input type="text" id="skill-id" class="form-input" placeholder="my-custom-workflow" required pattern="^[a-z][a-z0-9-]*$" minlength="3" maxlength="50">
                    <div class="form-hint">Lowercase letters, numbers, and hyphens (3-50 chars)</div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="skill-name">Display Name *</label>
                    <input type="text" id="skill-name" class="form-input" placeholder="My Custom Workflow" required>
                </div>

                <div class="form-group">
                    <label class="form-label" for="skill-description">Description</label>
                    <input type="text" id="skill-description" class="form-input" placeholder="A workflow for...">
                </div>

                <div class="form-group">
                    <label class="form-label" for="skill-content">Skill Content (Markdown) *</label>
                    <textarea id="skill-content" class="form-input" rows="12" required placeholder="# My Workflow

## Step 1: First do this
- Detail 1
- Detail 2

## Step 2: Then do this
..."></textarea>
                    <div class="form-hint">Write instructions in Markdown format. The agent will follow these when the skill is activated.</div>
                </div>

                <details class="advanced-options">
                    <summary class="form-label cursor-pointer select-none">Trigger Settings</summary>
                    <div class="pt-md">
                        <div class="form-group">
                            <label class="form-label" for="skill-keywords">Keywords (comma-separated)</label>
                            <input type="text" id="skill-keywords" class="form-input" placeholder="sales, prospect, lead">
                            <div class="form-hint">Skill loads when task contains these words</div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="skill-tools">Tool IDs (comma-separated)</label>
                            <input type="text" id="skill-tools" class="form-input" placeholder="mcp, browser">
                            <div class="form-hint">Skill loads when session has these tools</div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="skill-priority">Priority (1-10)</label>
                            <input type="number" id="skill-priority" class="form-input" value="5" min="1" max="10">
                            <div class="form-hint">Lower = higher priority (loads first)</div>
                        </div>
                    </div>
                </details>

                <div id="skill-form-error" class="form-error hidden"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-server-action" id="skill-btn-cancel">Cancel</button>
            <button type="submit" form="skill-form" class="btn-new-session" id="skill-btn-submit">Create Skill</button>
        </div>
    </div>
</div>

<!-- View Skill Modal (Read-only for system skills) -->
<div id="view-skill-modal" class="modal-overlay hidden">
    <div class="modal" style="max-width: 700px;">
        <div class="modal-header">
            <h3 class="modal-title" id="view-skill-title">Skill Details</h3>
            <button class="modal-close" id="view-skill-close">&times;</button>
        </div>
        <div class="modal-body">
            <div id="view-skill-content" style="white-space: pre-wrap; font-family: monospace; font-size: 13px; max-height: 400px; overflow-y: auto;"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-server-action" id="view-skill-btn-close">Close</button>
            <button type="button" class="btn-new-session" id="view-skill-btn-fork">Fork to Customize</button>
        </div>
    </div>
</div>

<!-- Add Server Modal -->
<div id="add-server-modal" class="modal-overlay hidden">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add MCP Server</h3>
            <button class="modal-close" id="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <form id="add-server-form">
                <div class="form-group">
                    <label class="form-label" for="server-name">Server Name *</label>
                    <input type="text" id="server-name" class="form-input" placeholder="my-server" required pattern="^[a-z0-9][a-z0-9-]*[a-z0-9]$" minlength="3" maxlength="50">
                    <div class="form-hint">Lowercase letters, numbers, and hyphens only (3-50 chars)</div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="server-url">Server URL *</label>
                    <input type="url" id="server-url" class="form-input" placeholder="https://api.example.com/mcp" required>
                    <div class="form-hint">Must be HTTPS. Internal IPs are blocked for security.</div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="server-type">Server Type</label>
                    <select id="server-type" class="form-select">
                        <option value="sse">SSE (Server-Sent Events)</option>
                        <option value="http">HTTP (JSON-RPC)</option>
                        <option value="streamable_http">Streamable HTTP (POST with SSE responses)</option>
                    </select>
                    <div class="form-hint">SSE: Real-time streaming. HTTP: Request/response. Streamable HTTP: For services like AnySite MCP.</div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="auth-method">Authentication</label>
                    <select id="auth-method" class="form-select">
                        <option value="api_key">API Key</option>
                        <option value="bearer">Bearer Token</option>
                        <option value="none">None</option>
                    </select>
                </div>

                <div class="form-group" id="api-key-group">
                    <label class="form-label" for="api-key">API Key</label>
                    <input type="password" id="api-key" class="form-input" placeholder="sk-...">
                    <div class="form-hint">Will be encrypted at rest (AES-256)</div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="display-name">Display Name</label>
                    <input type="text" id="display-name" class="form-input" placeholder="My Custom Server">
                </div>

                <!-- Advanced Options (collapsible) -->
                <details class="advanced-options">
                    <summary class="form-label cursor-pointer select-none">Advanced Options</summary>
                    <div class="pt-md">
                        <div class="form-group">
                            <label class="form-label" for="timeout">Timeout (seconds)</label>
                            <input type="number" id="timeout" class="form-input" value="30" min="5" max="300">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="retry-attempts">Retry Attempts</label>
                            <input type="number" id="retry-attempts" class="form-input" value="3" min="0" max="10">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="retry-delay">Retry Delay (seconds)</label>
                            <input type="number" id="retry-delay" class="form-input" value="5" min="1" max="60">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="max-concurrent">Max Concurrent Requests</label>
                            <input type="number" id="max-concurrent" class="form-input" value="5" min="1" max="50">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="message-endpoint">Message Endpoint (SSE only)</label>
                            <input type="url" id="message-endpoint" class="form-input" placeholder="https://api.example.com/mcp/message">
                            <div class="form-hint">Optional: Explicit POST endpoint for sending messages (if different from main URL)</div>
                        </div>

                        <div class="form-group">
                            <div class="setting-item border-none p-0">
                                <span class="setting-label">Auto Reconnect</span>
                                <div class="toggle-wrapper">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="auto-reconnect" checked>
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="setting-item border-none p-0">
                                <span class="setting-label">Verify Connection on Add</span>
                                <div class="toggle-wrapper">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="verify-connection">
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-hint">If enabled, tests MCP protocol before saving the server</div>
                        </div>
                    </div>
                </details>

                <div id="form-error" class="form-error hidden"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-server-action" id="btn-cancel">Cancel</button>
            <button type="submit" form="add-server-form" class="btn-new-session">Add Server</button>
        </div>
    </div>
</div>

<!-- Polymarket Configuration Modal -->
<div id="polymarket-modal" class="modal-overlay hidden">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Configure Polymarket</h3>
            <button class="modal-close" id="pm-modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <form id="polymarket-form">
                <div class="form-group">
                    <div class="setting-item border-none p-0">
                        <span class="setting-label">Demo Mode</span>
                        <div class="toggle-wrapper">
                            <label class="toggle-switch">
                                <input type="checkbox" id="pm-demo-mode" checked>
                                <span class="toggle-slider"></span>
                            </label>
                            <span id="pm-demo-label" class="setting-value">Yes</span>
                        </div>
                    </div>
                    <div class="form-hint">Demo mode provides read-only access to market data without a wallet.</div>
                </div>

                <div id="pm-wallet-fields" style="display: none;">
                    <div class="form-group">
                        <label class="form-label" for="pm-wallet-address">EOA Wallet Address *</label>
                        <input type="text" id="pm-wallet-address" class="form-input" placeholder="0x..." pattern="^0x[a-fA-F0-9]{40}$">
                        <div class="form-hint">Your signing wallet address (derived from private key)</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="pm-proxy-wallet-address">Proxy Wallet Address</label>
                        <input type="text" id="pm-proxy-wallet-address" class="form-input" placeholder="0x... (optional)" pattern="^0x[a-fA-F0-9]{40}$">
                        <div class="form-hint">Address shown on your Polymarket profile (for website users)</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="pm-private-key">Private Key</label>
                        <input type="password" id="pm-private-key" class="form-input" placeholder="Leave empty to keep existing...">
                        <div class="form-hint">Your wallet's private key (encrypted at rest with AES-128)</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="pm-signature-type">Wallet Type</label>
                        <select id="pm-signature-type" class="form-input">
                            <option value="2">Proxy Wallet (Polymarket Website Users) - Recommended</option>
                            <option value="0">EOA Only (Hardware Wallet / MetaMask)</option>
                            <option value="1">Magic Wallet (Email Login)</option>
                        </select>
                        <div class="form-hint">Most users who signed up on polymarket.com should use "Proxy Wallet"</div>
                    </div>

                    <details class="advanced-options">
                        <summary class="form-label cursor-pointer select-none">Trading Limits</summary>
                        <div class="pt-md">
                            <div class="form-group">
                                <label class="form-label" for="pm-limit-order">Max Order Size (USD)</label>
                                <input type="number" id="pm-limit-order" class="form-input" value="1000" min="10" max="100000">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="pm-limit-exposure">Max Total Exposure (USD)</label>
                                <input type="number" id="pm-limit-exposure" class="form-input" value="5000" min="100" max="500000">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="pm-limit-per-market">Max Per Market (USD)</label>
                                <input type="number" id="pm-limit-per-market" class="form-input" value="2000" min="10" max="100000">
                            </div>
                            <div class="form-group">
                                <div class="setting-item border-none p-0">
                                    <span class="setting-label">Enable Autonomous Trading</span>
                                    <div class="toggle-wrapper">
                                        <label class="toggle-switch">
                                            <input type="checkbox" id="pm-autonomous-trading">
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-hint">Allow the agent to place trades without confirmation</div>
                            </div>
                        </div>
                    </details>
                </div>

                <div id="pm-form-error" class="form-error hidden"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-server-action" id="pm-btn-cancel">Cancel</button>
            <button type="button" class="btn-server-action btn-danger" id="pm-btn-delete" style="display: none;">Delete</button>
            <button type="submit" form="polymarket-form" class="btn-new-session" id="pm-btn-save">Save</button>
        </div>
    </div>
</div>

<!-- Hyperliquid Configuration Modal -->
<div id="hyperliquid-modal" class="modal-overlay hidden">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Configure Hyperliquid</h3>
            <button class="modal-close" id="hl-modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <form id="hyperliquid-form">
                <div class="form-group">
                    <div class="setting-item border-none p-0">
                        <span class="setting-label">Demo Mode</span>
                        <div class="toggle-wrapper">
                            <label class="toggle-switch">
                                <input type="checkbox" id="hl-demo-mode" checked>
                                <span class="toggle-slider"></span>
                            </label>
                            <span id="hl-demo-label" class="setting-value">Yes</span>
                        </div>
                    </div>
                    <div class="form-hint">Demo mode provides read-only access to market data without trading.</div>
                </div>

                <div class="form-group">
                    <div class="setting-item border-none p-0">
                        <span class="setting-label">Use Testnet</span>
                        <div class="toggle-wrapper">
                            <label class="toggle-switch">
                                <input type="checkbox" id="hl-testnet" checked>
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="form-hint">Use testnet for paper trading before going live.</div>
                </div>

                <div id="hl-wallet-fields" style="display: none;">
                    <div class="form-group">
                        <label class="form-label" for="hl-wallet-address">Wallet Address *</label>
                        <input type="text" id="hl-wallet-address" class="form-input" placeholder="0x..." pattern="^0x[a-fA-F0-9]{40}$">
                        <div class="form-hint">Your Ethereum wallet address</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="hl-private-key">Private Key</label>
                        <input type="password" id="hl-private-key" class="form-input" placeholder="Leave empty to keep existing...">
                        <div class="form-hint">Your wallet's private key (encrypted at rest with AES-128)</div>
                    </div>

                    <details class="advanced-options">
                        <summary class="form-label cursor-pointer select-none">Agent Wallet (Optional)</summary>
                        <div class="pt-md">
                            <div class="form-hint mb-md">Use an agent wallet for delegated trading without exposing your main wallet.</div>
                            <div class="form-group">
                                <label class="form-label" for="hl-agent-wallet-address">Agent Wallet Address</label>
                                <input type="text" id="hl-agent-wallet-address" class="form-input" placeholder="0x... (optional)" pattern="^0x[a-fA-F0-9]{40}$">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="hl-agent-private-key">Agent Private Key</label>
                                <input type="password" id="hl-agent-private-key" class="form-input" placeholder="Leave empty to keep existing...">
                            </div>
                        </div>
                    </details>

                    <details class="advanced-options">
                        <summary class="form-label cursor-pointer select-none">Trading Limits</summary>
                        <div class="pt-md">
                            <div class="form-group">
                                <label class="form-label" for="hl-limit-order">Max Order Size (USD)</label>
                                <input type="number" id="hl-limit-order" class="form-input" value="1000" min="10" max="100000">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="hl-limit-leverage">Max Leverage</label>
                                <input type="number" id="hl-limit-leverage" class="form-input" value="5" min="1" max="50">
                            </div>
                            <div class="form-group">
                                <div class="setting-item border-none p-0">
                                    <span class="setting-label">Enable Autonomous Trading</span>
                                    <div class="toggle-wrapper">
                                        <label class="toggle-switch">
                                            <input type="checkbox" id="hl-autonomous-trading">
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-hint">Allow the agent to place trades without confirmation</div>
                            </div>
                        </div>
                    </details>
                </div>

                <div id="hl-form-error" class="form-error hidden"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-server-action" id="hl-btn-cancel">Cancel</button>
            <button type="button" class="btn-server-action btn-danger" id="hl-btn-delete" style="display: none;">Delete</button>
            <button type="submit" form="hyperliquid-form" class="btn-new-session" id="hl-btn-save">Save</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/settings.js?v=20260706-api-probe"></script>
{% endblock %}