<!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 - Search Engines</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="icon" type="image/png" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <!-- Sidebar content (keep as is) -->
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page active" id="search-engines-settings">
                <div class="page-header">
                    <div class="results-header">
                        <h1>Search Engines Configuration</h1>
                        <div class="results-actions">
                            <a href="{{ url_for('research.settings_page') }}" class="btn btn-outline">
                                <i class="fas fa-arrow-left"></i> Back to Settings
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-content">
                        <h2>Search Engines Configuration File</h2>
                        <p>To edit your search engines configuration, open this file with your preferred text editor:</p>
                        <div class="file-path">{{ search_engines_file_path }}</div>
                        
                        <button onclick="openFileLocation('{{ search_engines_file_path }}')" class="btn btn-primary">
                            <i class="fas fa-folder-open"></i> Open Containing Folder
                        </button>
                        
                        <h3 class="mt-4">Edit Raw Configuration</h3>
                        <div id="editor-container">
                            <div class="editor-header">
                                <h3>Search Engines Configuration (TOML format)</h3>
                                <span class="editor-lang">TOML</span>
                            </div>
                            <textarea id="raw_config_editor" class="config-raw-editor" rows="25">{{ raw_config }}</textarea>
                            <div class="form-actions">
                                <button type="button" class="btn btn-primary" onclick="saveRawConfig()">
                                    <i class="fas fa-save"></i> Save Configuration
                                </button>
                                <button type="button" class="btn btn-outline" onclick="resetEditor()">
                                    <i class="fas fa-undo"></i> Reset Changes
                                </button>
                            </div>
                        </div>
                        
                        <h3 class="mt-4">Structure Reference</h3>
                        <p>Search engines are defined in TOML format with the following structure:</p>
                        <pre class="config-example">
# Define a search engine named "example_engine"
[example_engine]
module_path = "local_deep_research.web_search_engines.engines.search_engine_example"
class_name = "ExampleSearchEngine"
requires_api_key = false  # or true if API key is required
reliability = 0.9  # Value between 0 and 1
strengths = ["strength1", "strength2"]  # Array of strengths
weaknesses = ["weakness1", "weakness2"]  # Array of weaknesses
supports_full_search = true  # Whether this engine supports retrieving full content

# Optional: Define which API key environment variable to use
api_key_env = "EXAMPLE_API_KEY"  # Only needed if requires_api_key is true

# Default parameters for this search engine
[example_engine.default_params]
max_results = 20
param1 = "value1"
param2 = true

# Special setting to define the default search engine
DEFAULT_SEARCH_ENGINE = "wikipedia"
                        </pre>
                        
                        <h3 class="mt-4">Available Search Engines</h3>
                        <p>The following search engines are currently defined:</p>
                        <ul id="available-engines">
                            {% for engine_name in engine_names %}
                            <li><strong>{{ engine_name }}</strong></li>
                            {% endfor %}
                        </ul>
                        
                        <div class="alert alert-info mt-4">
                            <i class="fas fa-info-circle"></i> Changes to search engines configuration will take effect after restarting the application.
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Original config for reset functionality
        const originalConfig = document.getElementById('raw_config_editor').value;
        
        function openFileLocation(filePath) {
            // Create a hidden form and submit it to a route that will open the file location
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = "{{ url_for('research.open_file_location') }}";
            
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'file_path';
            input.value = filePath;
            
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        }
        
        function resetEditor() {
            if (confirm('Are you sure you want to reset all changes?')) {
                document.getElementById('raw_config_editor').value = originalConfig;
            }
        }
        
        function saveRawConfig() {
            const rawConfig = document.getElementById('raw_config_editor').value;
            
            fetch('{{ url_for("research.save_search_engines_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. Changes will take effect after restarting the application.');
                    // Reload the page to refresh the content
                    window.location.reload();
                } else {
                    alert('Error saving configuration: ' + data.error);
                }
            })
            .catch(error => {
                alert('Error saving configuration: ' + error);
            });
        }
    </script>
</body>
</html>