{% extends "base.html" %}
{% from "components/settings_form.html" import render_setting %}
{% from "components/custom_dropdown.html" import render_dropdown %}

{% set active_page = 'settings' %}

{% block title %}Settings - Deep Research System{% endblock %}

{% block extra_head %}
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="/static/css/settings.css">
<link rel="stylesheet" href="/static/css/custom_dropdown.css">
<link rel="stylesheet" href="/static/css/settings-mobile-fix.css">
{% endblock %}

{% block content %}
<div class="ldr-page active" id="settings">
    <div class="ldr-settings-container">
        <div class="ldr-page-header">
            <h1>Settings</h1>
            <p class="ldr-settings-description">
                Configure your research environment by adjusting the settings below. All settings are automatically saved when you make changes.
            </p>
            <p class="ldr-support-note">
                <span class="ldr-support-label">Learn & Get Help:</span>
                <a href="https://github.com/LearningCircuit/local-deep-research/wiki" target="_blank" title="Tips, guides, and tutorials">
                    <i class="fas fa-book"></i> Wiki
                </a>
                ·
                <a href="https://github.com/LearningCircuit/local-deep-research/tree/main/docs" target="_blank" title="Technical documentation">
                    <i class="fas fa-file-alt"></i> Docs
                </a>
                ·
                <a href="https://discord.gg/ttcqQeFcJ3" target="_blank" title="Get help from the community">
                    <i class="fab fa-discord"></i> Discord
                </a>
                ·
                <a href="https://www.reddit.com/r/LocalDeepResearch/" target="_blank" title="Discussions and showcases">
                    <i class="fab fa-reddit"></i> Reddit
                </a>
                ·
                <a href="https://github.com/LearningCircuit/local-deep-research/issues" target="_blank" title="Report bugs or suggest ideas">
                    <i class="fas fa-bug"></i> Feedback
                </a>
            </p>
        </div>

        {% if not has_encryption %}
            <div class="ldr-alert ldr-alert-warning">
                <i class="fas fa-exclamation-triangle"></i> <strong>Security Warning:</strong>
                Database encryption is not available. Your API keys and data are stored unencrypted.
                <br><small>Install SQLCipher for secure storage. See documentation for details.</small>
            </div>
        {% endif %}

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="ldr-alert ldr-alert-{{ category }}">
                        <i class="fas {% if category == 'success' %}fa-check-circle{% else %}fa-exclamation-circle{% endif %}"></i> {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div id="settings-alert" style="display:none"></div>

        <div class="ldr-card">
            <div class="ldr-card-content">
                <div class="ldr-search-controls">
                    <input type="text" id="settings-search" class="ldr-search-input" placeholder="Search settings by name, description or category...">
                </div>

                <div class="ldr-settings-tabs">
                    <div class="ldr-settings-tab active" data-tab="all">All Settings</div>
                    <div class="ldr-settings-tab" data-tab="llm">Language Models</div>
                    <div class="ldr-settings-tab" data-tab="search">Search Engines</div>
                    <div class="ldr-settings-tab" data-tab="report">Reports</div>
                    <div class="ldr-settings-tab" data-tab="app">Application</div>
                    <div class="ldr-settings-tab" data-tab="notifications">Notifications</div>
                    <div class="ldr-settings-tab" data-tab="domains">Domain Classification</div>
                </div>

                <form id="settings-form" class="ldr-settings-form" method="POST" action="{{ url_for('settings.save_settings') }}">
                    <!-- JavaScript intercepts and uses save_all_settings endpoint, form action is fallback -->
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div id="settings-content">
                        <div class="ldr-loading-spinner ldr-centered">
                            <div class="ldr-spinner"></div>
                            <p>Loading settings...</p>
                        </div>
                    </div>

                    <div class="ldr-toggle-raw-config" id="toggle-raw-config">
                        <i class="fas fa-code"></i> <span id="toggle-text">Show JSON Configuration</span>
                    </div>

                    <div id="raw-config" class="ldr-raw-config-section" style="display: none;">
                        <div class="ldr-section-header">
                            <h3>Advanced JSON Configuration</h3>
                            <p class="ldr-section-description">
                                Use this editor to directly modify configuration values. You can add new parameters not shown in the UI, and they will be preserved across saves. Changes here override the UI settings.
                            </p>
                        </div>
                        <div id="json-editor-container">
                            <textarea id="raw_config_editor" class="ldr-json-editor"></textarea>
                        </div>
                    </div>

                    <div class="ldr-form-actions">
                        <button type="button" id="reset-to-defaults-button" class="btn btn-warning">
                            <i class="fas fa-sync-alt"></i> Reset to Defaults
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save All Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script src="/static/js/components/custom_dropdown.js"></script>
<script src="/static/js/components/checkbox_handler.js"></script>
<script src="/static/js/components/settings.js"></script>
{% endblock %}
