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

{% 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 aria-hidden="true" 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 aria-hidden="true" class="fas fa-file-alt"></i> Docs
                </a>
                ·
                <a href="https://github.com/LearningCircuit/local-deep-research/blob/main/docs/CONFIGURATION.md" target="_blank" title="Complete reference of all settings, defaults, and environment variables">
                    <i aria-hidden="true" class="fas fa-cogs"></i> Config Reference
                </a>
                ·
                <a href="https://discord.gg/ttcqQeFcJ3" target="_blank" title="Get help from the community">
                    <i aria-hidden="true" class="fab fa-discord"></i> Discord
                </a>
                ·
                <a href="https://www.reddit.com/r/LocalDeepResearch/" target="_blank" title="Discussions and showcases">
                    <i aria-hidden="true" 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 aria-hidden="true" class="fas fa-bug"></i> Feedback
                </a>
            </p>
            <p class="ldr-community-note">
                <i aria-hidden="true" class="fas fa-lightbulb"></i>
                We're always looking for new ideas and recommendations! If you have suggestions for features, improvements, or if you encounter bugs or things that don't work optimally, please share them on
                <a href="https://github.com/LearningCircuit/local-deep-research/issues" target="_blank">GitHub Issues</a>. Your feedback helps make Local Deep Research better for everyone.
            </p>
        </div>

        <!-- Mobile navigation spacer - ensures page content doesn't overlap mobile nav -->
        <div class="ldr-mobile-nav-spacer" aria-hidden="true"></div>

        {% if not has_encryption %}
            <div class="ldr-alert ldr-alert-warning">
                <i aria-hidden="true" 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 }}" role="{{ 'alert' if category in ('error', 'warning') else 'status' }}">
                        <i aria-hidden="true" class="fas {% if category == 'success' %}fa-check-circle{% else %}fa-exclamation-circle{% endif %}"></i> {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div id="settings-alert" class="ldr-settings-alert-container" role="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" role="tablist" tabindex="0" aria-label="Settings categories">
                    <div class="ldr-settings-tab active" data-tab="all" role="tab" aria-selected="true">All Settings</div>
                    <div class="ldr-settings-tab" data-tab="llm" role="tab" aria-selected="false">Language Models</div>
                    <div class="ldr-settings-tab" data-tab="search" role="tab" aria-selected="false">Search Engines</div>
                    <div class="ldr-settings-tab" data-tab="report" role="tab" aria-selected="false">Reports</div>
                    <div class="ldr-settings-tab" data-tab="app" role="tab" aria-selected="false">Application</div>
                    <div class="ldr-settings-tab" data-tab="notifications" role="tab" aria-selected="false">Notifications</div>
                    <div class="ldr-settings-tab" data-tab="domains" role="tab" aria-selected="false">Domain Classification</div>
                </div>

                <form id="settings-form" class="ldr-settings-form" method="POST" action="{{ url_for('settings.save_settings') }}" novalidate>
                    <!-- 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" role="status">
                            <div class="ldr-spinner"></div>
                            <p>Loading settings...</p>
                        </div>
                    </div>

                    <div class="ldr-toggle-raw-config" id="toggle-raw-config">
                        <i aria-hidden="true" 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 aria-hidden="true" class="fas fa-sync-alt"></i> Reset to Defaults
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i aria-hidden="true" class="fas fa-save"></i> Save All Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Mobile navigation spacer at end of content -->
        <div class="ldr-mobile-nav-spacer ldr-settings-end-spacer" aria-hidden="true"></div>
    </div>
</div>
{% endblock %}

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