<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deep Research System - Settings</title>
    <link rel="stylesheet" href="{{ url_for('research.serve_static', path='css/styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.ico') }}">
    <style>
        .settings-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #333;
        }
        .settings-section h2 {
            margin-bottom: 1rem;
            color: #4a6cf7;
            font-size: 1.3rem;
        }
        .form-group {
            margin-bottom: 1rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        .form-control {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #333;
            border-radius: 4px;
            background-color: #1a1a1a;
            color: #f8f9fa;
        }
        .form-row {
            display: flex;
            gap: 1rem;
        }
        .form-group.half {
            flex: 1;
        }
        .input-help {
            display: block;
            font-size: 0.8rem;
            color: #8a8a8a;
            margin-top: 0.25rem;
        }
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .checkbox-group input {
            margin: 0;
        }
        .checkbox-group label {
            margin: 0;
        }
        .form-actions {
            margin-top: 2rem;
            display: flex;
            gap: 1rem;
        }
        .range-value {
            display: inline-block;
            margin-left: 0.5rem;
        }
        .config-raw {
            margin-top: 2rem;
            background-color: #0a0a0a;
            padding: 1rem;
            border-radius: 4px;
            overflow: auto;
            font-family: monospace;
            font-size: 0.9rem;
            color: #e6e6e6;
            white-space: pre;
            min-height: 200px;
            max-height: 600px;
            border: 1px solid #333;
        }
        .toggle-raw-config {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
            color: #4a6cf7;
            font-weight: 500;
            padding: 0.5rem 1rem;
            background-color: rgba(74, 108, 247, 0.1);
            border-radius: 4px;
            width: fit-content;
        }
        .toggle-raw-config:hover {
            background-color: rgba(74, 108, 247, 0.2);
        }
        .config-raw-editor {
            background-color: #0a0a0a;
            color: #e6e6e6;
            font-family: monospace;
            font-size: 0.9rem;
            padding: 1rem;
            border: 1px solid #333;
            border-radius: 4px;
            width: 100%;
            min-height: 400px;
            resize: vertical;
            display: block !important;
        }
        .alert {
            padding: 0.75rem 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: 0.25rem;
        }
        .alert-success {
            color: #d4edda;
            background-color: #1e462e;
            border-color: #c3e6cb;
        }
        .alert-error {
            color: #f8d7da;
            background-color: #462c2e;
            border-color: #f5c6cb;
        }
        .editor-header {
            background-color: var(--bg-tertiary);
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .editor-header h3 {
            margin: 0;
            font-size: 1rem;
            color: var(--text-primary);
        }
        .editor-lang {
            background-color: var(--accent-primary);
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h2 id="logo-link" style="cursor: pointer;"><i class="fas fa-atom"></i> Deep Research</h2>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li data-page="new-research"><i class="fas fa-search"></i> <a href="{{ url_for('research.index') }}">New Research</a></li>
                    <li data-page="history"><i class="fas fa-history"></i> <a href="{{ url_for('research.index') }}#history">History</a></li>
                    <li class="active" data-page="settings"><i class="fas fa-cog"></i> Settings</li>
                </ul>
            </nav>
            <div class="sidebar-footer">
                <p>v0.0.1 | <i class="fas fa-brain"></i></p>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page active" id="settings">
                <div class="page-header">
                    <h1>Settings</h1>
                </div>
                
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ category }}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <div class="card">
                    <div class="card-content">
                        <form method="POST" action="{{ url_for('research.settings_page') }}">
                            <!-- LLM Settings Section -->
                            <div class="settings-section">
                                <h2><i class="fas fa-brain"></i> LLM Settings</h2>
                                <div class="form-group">
                                    <label for="DEFAULT_MODEL">Default Model</label>
                                    <select id="DEFAULT_MODEL" name="DEFAULT_MODEL" class="form-control">
                                        <option value="mistral" {% if config.DEFAULT_MODEL == "mistral" %}selected{% endif %}>Mistral (Default)</option>
                                        <option value="llama3" {% if config.DEFAULT_MODEL == "llama3" %}selected{% endif %}>Llama3</option>
                                        <option value="mixtral" {% if config.DEFAULT_MODEL == "mixtral" %}selected{% endif %}>Mixtral</option>
                                        <option value="mpt-7b" {% if config.DEFAULT_MODEL == "mpt-7b" %}selected{% endif %}>MPT-7B</option>
                                        <option value="gpt-4o" {% if config.DEFAULT_MODEL == "gpt-4o" %}selected{% endif %}>GPT-4o (requires API key)</option>
                                        <option value="gpt-3.5-turbo" {% if config.DEFAULT_MODEL == "gpt-3.5-turbo" %}selected{% endif %}>GPT-3.5 Turbo (requires API key)</option>
                                        <option value="claude-3-5-sonnet-latest" {% if config.DEFAULT_MODEL == "claude-3-5-sonnet-latest" %}selected{% endif %}>Claude (requires API key)</option>
                                    </select>
                                    <span class="input-help">Select the default language model to use for analysis</span>
                                </div>
                                <div class="form-group">
                                    <label for="DEFAULT_TEMPERATURE">Temperature</label>
                                    <input type="range" min="0" max="1" step="0.1" class="form-control" id="DEFAULT_TEMPERATURE" name="DEFAULT_TEMPERATURE" value="{{ config.DEFAULT_TEMPERATURE }}">
                                    <span class="range-value" id="temp-value">{{ config.DEFAULT_TEMPERATURE }}</span>
                                    <span class="input-help">Higher values = more creative, lower values = more deterministic</span>
                                </div>
                                <div class="form-group">
                                    <label for="MAX_TOKENS">Max Tokens</label>
                                    <input type="number" min="1000" max="100000" step="1000" class="form-control" id="MAX_TOKENS" name="MAX_TOKENS" value="{{ config.MAX_TOKENS }}">
                                    <span class="input-help">Maximum tokens for model output</span>
                                </div>

                                <div class="form-group checkbox-group">
                                    <input type="checkbox" id="OPENAIENDPOINT" name="OPENAIENDPOINT" {% if config.OPENAIENDPOINT %}checked{% endif %}>
                                    <label for="OPENAIENDPOINT">Use OpenAI endpoint</label>
                                </div>

                                <div class="form-group">
                                    <label for="OPENROUTER_BASE_URL">OpenRouter Base URL</label>
                                    <input type="text" class="form-control" id="OPENROUTER_BASE_URL" name="OPENROUTER_BASE_URL" value="{{ config.OPENROUTER_BASE_URL }}">
                                    <span class="input-help">Base URL for OpenRouter API</span>
                                </div>
                            </div>

                            <!-- VLLM Settings Section -->
                            <div class="settings-section">
                                <h2><i class="fas fa-server"></i> VLLM Configuration</h2>
                                <div class="form-row">
                                    <div class="form-group half">
                                        <label for="VLLM_MAX_NEW_TOKENS">Max New Tokens</label>
                                        <input type="number" min="1" max="1000" class="form-control" id="VLLM_MAX_NEW_TOKENS" name="VLLM_MAX_NEW_TOKENS" value="{{ config.VLLM_MAX_NEW_TOKENS }}">
                                        <span class="input-help">Maximum new tokens for VLLM models</span>
                                    </div>
                                    <div class="form-group half">
                                        <label for="VLLM_TOP_K">Top K</label>
                                        <input type="number" min="1" max="100" class="form-control" id="VLLM_TOP_K" name="VLLM_TOP_K" value="{{ config.VLLM_TOP_K }}">
                                        <span class="input-help">Top K sampling parameter</span>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group half">
                                        <label for="VLLM_TOP_P">Top P</label>
                                        <input type="range" min="0" max="1" step="0.01" class="form-control" id="VLLM_TOP_P" name="VLLM_TOP_P" value="{{ config.VLLM_TOP_P }}">
                                        <span class="range-value" id="top-p-value">{{ config.VLLM_TOP_P }}</span>
                                        <span class="input-help">Top P sampling parameter</span>
                                    </div>
                                    <div class="form-group half">
                                        <label for="VLLM_TEMPERATURE">VLLM Temperature</label>
                                        <input type="range" min="0" max="1" step="0.1" class="form-control" id="VLLM_TEMPERATURE" name="VLLM_TEMPERATURE" value="{{ config.VLLM_TEMPERATURE }}">
                                        <span class="range-value" id="vllm-temp-value">{{ config.VLLM_TEMPERATURE }}</span>
                                        <span class="input-help">Temperature for VLLM models</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Search Settings Section -->
                            <div class="settings-section">
                                <h2><i class="fas fa-search"></i> Search Settings</h2>
                                <div class="form-group">
                                    <label for="search_tool">Default Search Engine</label>
                                    <select id="search_tool" name="search_tool" class="form-control">
                                        <option value="auto" {% if config.search_tool == "auto" %}selected{% endif %}>Auto (Intelligent selection)</option>
                                        <option value="wikipedia" {% if config.search_tool == "wikipedia" %}selected{% endif %}>Wikipedia</option>
                                        <option value="arxiv" {% if config.search_tool == "arxiv" %}selected{% endif %}>arXiv (scientific papers)</option>
                                        <option value="pubmed" {% if config.search_tool == "pubmed" %}selected{% endif %}>PubMed (medical research)</option>
                                        <option value="duckduckgo" {% if config.search_tool == "duckduckgo" %}selected{% endif %}>DuckDuckGo (web search)</option>
                                        <option value="serp" {% if config.search_tool == "serp" %}selected{% endif %}>SerpAPI (Google, requires API key)</option>
                                        <option value="google_pse" {% if config.search_tool == "google_pse" %}selected{% endif %}>Google PSE (requires API key)</option>
                                        <option value="guardian" {% if config.search_tool == "guardian" %}selected{% endif %}>Guardian (news, requires API key)</option>
                                        <option value="local_all" {% if config.search_tool == "local_all" %}selected{% endif %}>Local Documents</option>
                                    </select>
                                    <span class="input-help">Choose your primary search and research source</span>
                                </div>

                                <div class="form-row">
                                    <div class="form-group half">
                                        <label for="SEARCH_ITERATIONS">Search Iterations</label>
                                        <input type="number" min="1" max="5" class="form-control" id="SEARCH_ITERATIONS" name="SEARCH_ITERATIONS" value="{{ config.SEARCH_ITERATIONS }}">
                                        <span class="input-help">Number of research cycles to perform</span>
                                    </div>
                                    <div class="form-group half">
                                        <label for="QUESTIONS_PER_ITERATION">Questions Per Iteration</label>
                                        <input type="number" min="1" max="10" class="form-control" id="QUESTIONS_PER_ITERATION" name="QUESTIONS_PER_ITERATION" value="{{ config.QUESTIONS_PER_ITERATION }}">
                                        <span class="input-help">Follow-up questions in each cycle</span>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group half">
                                        <label for="MAX_SEARCH_RESULTS">Maximum Search Results</label>
                                        <input type="number" min="5" max="100" class="form-control" id="MAX_SEARCH_RESULTS" name="MAX_SEARCH_RESULTS" value="{{ config.MAX_SEARCH_RESULTS }}">
                                        <span class="input-help">Higher values give more comprehensive research but take longer</span>
                                    </div>
                                    
                                    <div class="form-group half">
                                        <label for="MAX_FILTERED_RESULTS">Maximum Filtered Results</label>
                                        <input type="number" min="1" max="20" class="form-control" id="MAX_FILTERED_RESULTS" name="MAX_FILTERED_RESULTS" value="{{ config.MAX_FILTERED_RESULTS }}">
                                        <span class="input-help">Results kept after relevance filtering</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="KNOWLEDGE_ACCUMULATION">Knowledge Accumulation</label>
                                    <select id="KNOWLEDGE_ACCUMULATION" name="KNOWLEDGE_ACCUMULATION" class="form-control">
                                        <option value="ITERATION" {% if config.KNOWLEDGE_ACCUMULATION == "ITERATION" %}selected{% endif %}>Iteration-based</option>
                                        <option value="NONE" {% if config.KNOWLEDGE_ACCUMULATION == "NONE" %}selected{% endif %}>None</option>
                                    </select>
                                    <span class="input-help">How to accumulate knowledge during research</span>
                                </div>

                                <div class="form-group">
                                    <label for="KNOWLEDGE_ACCUMULATION_CONTEXT_LIMIT">Knowledge Accumulation Context Limit</label>
                                    <input type="number" class="form-control" id="KNOWLEDGE_ACCUMULATION_CONTEXT_LIMIT" name="KNOWLEDGE_ACCUMULATION_CONTEXT_LIMIT" value="{{ config.KNOWLEDGE_ACCUMULATION_CONTEXT_LIMIT }}">
                                    <span class="input-help">Maximum context size for knowledge accumulation</span>
                                </div>

                                <div class="form-row">
                                    <div class="form-group half">
                                        <label for="SEARCH_REGION">Search Region</label>
                                        <input type="text" class="form-control" id="SEARCH_REGION" name="SEARCH_REGION" value="{{ config.SEARCH_REGION }}">
                                        <span class="input-help">Region code for search (e.g., us, uk, de)</span>
                                    </div>
                                    <div class="form-group half">
                                        <label for="TIME_PERIOD">Time Period</label>
                                        <select id="TIME_PERIOD" name="TIME_PERIOD" class="form-control">
                                            <option value="d" {% if config.TIME_PERIOD == "d" %}selected{% endif %}>Past day</option>
                                            <option value="w" {% if config.TIME_PERIOD == "w" %}selected{% endif %}>Past week</option>
                                            <option value="m" {% if config.TIME_PERIOD == "m" %}selected{% endif %}>Past month</option>
                                            <option value="y" {% if config.TIME_PERIOD == "y" %}selected{% endif %}>Past year</option>
                                            <option value="a" {% if config.TIME_PERIOD == "a" %}selected{% endif %}>All time</option>
                                        </select>
                                        <span class="input-help">Time period for search results</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="SEARCH_LANGUAGE">Search Language</label>
                                    <input type="text" class="form-control" id="SEARCH_LANGUAGE" name="SEARCH_LANGUAGE" value="{{ config.SEARCH_LANGUAGE }}">
                                    <span class="input-help">Language for search results</span>
                                </div>
                                
                                <div class="form-group checkbox-group">
                                    <input type="checkbox" id="SAFE_SEARCH" name="SAFE_SEARCH" {% if config.SAFE_SEARCH %}checked{% endif %}>
                                    <label for="SAFE_SEARCH">Safe Search</label>
                                </div>

                                <div class="form-group checkbox-group">
                                    <input type="checkbox" id="QUALITY_CHECK_DDG_URLS" name="QUALITY_CHECK_DDG_URLS" {% if config.QUALITY_CHECK_DDG_URLS %}checked{% endif %}>
                                    <label for="QUALITY_CHECK_DDG_URLS">Quality check URLs</label>
                                    <span class="input-help">Enable quality filtering for search results</span>
                                </div>

                                <div class="form-group checkbox-group">
                                    <input type="checkbox" id="SEARCH_SNIPPETS_ONLY" name="SEARCH_SNIPPETS_ONLY" {% if config.SEARCH_SNIPPETS_ONLY %}checked{% endif %}>
                                    <label for="SEARCH_SNIPPETS_ONLY">Use search snippets only (faster but less detailed)</label>
                                </div>
                                
                                <div class="form-group checkbox-group">
                                    <input type="checkbox" id="SKIP_RELEVANCE_FILTER" name="SKIP_RELEVANCE_FILTER" {% if config.SKIP_RELEVANCE_FILTER %}checked{% endif %}>
                                    <label for="SKIP_RELEVANCE_FILTER">Skip relevance filtering (return all results)</label>
                                </div>
                            </div>

                            <!-- Report Settings Section -->
                            <div class="settings-section">
                                <h2><i class="fas fa-file-alt"></i> Report Settings</h2>
                                <div class="form-group">
                                    <label for="SEARCHES_PER_SECTION">Searches Per Report Section</label>
                                    <input type="number" min="1" max="5" class="form-control" id="SEARCHES_PER_SECTION" name="SEARCHES_PER_SECTION" value="{{ config.SEARCHES_PER_SECTION }}">
                                    <span class="input-help">Number of searches to run per report section</span>
                                </div>
                                
                                <div class="form-group checkbox-group">
                                    <input type="checkbox" id="ENABLE_FACT_CHECKING" name="ENABLE_FACT_CHECKING" {% if config.ENABLE_FACT_CHECKING %}checked{% endif %}>
                                    <label for="ENABLE_FACT_CHECKING">Enable fact checking (may work better with large LLMs)</label>
                                </div>

                                <div class="form-group">
                                    <label for="OUTPUT_DIR">Output Directory</label>
                                    <input type="text" class="form-control" id="OUTPUT_DIR" name="OUTPUT_DIR" value="{{ config.OUTPUT_DIR }}">
                                    <span class="input-help">Directory to save research outputs</span>
                                </div>
                            </div>

                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Settings</button>
                                <a href="{{ url_for('research.index') }}" class="btn btn-outline"><i class="fas fa-times"></i> Cancel</a>
                            </div>
                        </form>

                        <div class="toggle-raw-config" onclick="toggleRawConfig()">
                            <i class="fas fa-code"></i> <span id="toggle-text">Show Raw Configuration</span>
                        </div>
                        
                        <div id="raw-config" class="config-raw" style="display: none;">
                            {{ raw_config|safe }}
                        </div>

                        <!-- Raw Configuration Editing -->
                        <div id="raw-config-editor-container" style="display: none; margin-top: 1rem;">
                            <div class="editor-header">
                                <h3>Edit Raw Configuration</h3>
                                <span class="editor-lang">TOML</span>
                            </div>
                            <textarea id="raw_config_editor" name="raw_config_editor" class="config-raw-editor" rows="20">{{ raw_config|safe }}</textarea>
                            <div class="form-actions">
                                <button type="button" class="btn btn-primary" onclick="saveRawConfig()"><i class="fas fa-save"></i> Save Raw Configuration</button>
                                <button type="button" class="btn btn-outline" onclick="cancelRawEdit()"><i class="fas fa-times"></i> Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Mobile Tab Bar -->
    <nav class="mobile-tab-bar">
        <ul>
            <li data-page="new-research">
                <a href="{{ url_for('research.index') }}">
                    <i class="fas fa-search"></i>
                    <span>Research</span>
                </a>
            </li>
            <li data-page="history">
                <a href="{{ url_for('research.index') }}#history">
                    <i class="fas fa-history"></i>
                    <span>History</span>
                </a>
            </li>
            <li class="active" data-page="settings">
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </li>
        </ul>
    </nav>

    <script>
        // Update temperature display value
        document.getElementById('DEFAULT_TEMPERATURE').addEventListener('input', function() {
            document.getElementById('temp-value').textContent = this.value;
        });

        // Update VLLM temperature display value
        document.getElementById('VLLM_TEMPERATURE').addEventListener('input', function() {
            document.getElementById('vllm-temp-value').textContent = this.value;
        });

        // Update Top P display value
        document.getElementById('VLLM_TOP_P').addEventListener('input', function() {
            document.getElementById('top-p-value').textContent = this.value;
        });

        // Make the logo clickable to go back to home
        document.getElementById('logo-link').addEventListener('click', function() {
            window.location.href = "{{ url_for('research.index') }}";
        });

        // Toggle raw configuration display
        function toggleRawConfig() {
            const rawConfig = document.getElementById('raw-config');
            const editorContainer = document.getElementById('raw-config-editor-container');
            const toggleText = document.getElementById('toggle-text');
            
            if (rawConfig.style.display === 'none') {
                rawConfig.style.display = 'block';
                editorContainer.style.display = 'block';
                toggleText.textContent = 'Hide Raw Configuration';
            } else {
                rawConfig.style.display = 'none';
                editorContainer.style.display = 'none';
                toggleText.textContent = 'Show Raw Configuration';
            }
        }

        function cancelRawEdit() {
            const rawConfig = document.getElementById('raw-config');
            const editorContainer = document.getElementById('raw-config-editor-container');
            const toggleText = document.getElementById('toggle-text');
            
            rawConfig.style.display = 'none';
            editorContainer.style.display = 'none';
            toggleText.textContent = 'Show Raw Configuration';
        }

        function saveRawConfig() {
            const rawConfig = document.getElementById('raw_config_editor').value;
            
            fetch('{{ url_for("research.save_raw_config") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ raw_config: rawConfig }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Configuration saved successfully. You may need to restart the application for changes to take effect.');
                    // Reload the page to show updated values
                    window.location.reload();
                } else {
                    alert('Error saving configuration: ' + data.error);
                }
            })
            .catch(error => {
                alert('Error saving configuration: ' + error);
            });
        }
    </script>
</body>
</html>