{% extends "base.html" %}
{% from "components/custom_dropdown.html" import render_dropdown %}
{% from "components/help_macros.html" import tooltip, help_panel, help_step, help_tip, label_with_tooltip %}

{% set active_page = 'new-research' %}

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

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

{% block content %}
<div class="ldr-page active" id="new-research">
    <div class="ldr-page-header">
        <h1>Start New Research</h1>
    </div>
    <!-- Alert container for form validation and error messages -->
    <div id="research-alert" class="ldr-settings-alert-container" role="alert" aria-atomic="true" style="display:none"></div>
    <div class="ldr-card ldr-research-card">
        <div class="ldr-card-content">
            <form id="research-form">
                <div class="ldr-form-group">
                    <label for="query">Research Query</label>
                    <textarea id="query" name="query" rows="3" placeholder="Enter your research topic or question..." autofocus aria-required="true"></textarea>
                    <div class="ldr-search-hints">
                        <div class="ldr-hint-row">
                            <span class="ldr-hint-item">
                                <i aria-hidden="true" class="fas fa-play ldr-hint-icon"></i>
                                <span class="ldr-hint-text"><kbd>Enter</kbd> to search</span>
                            </span>
                            <span class="ldr-hint-item">
                                <i aria-hidden="true" class="fas fa-level-down-alt ldr-hint-icon"></i>
                                <span class="ldr-hint-text"><kbd>Shift</kbd>+<kbd>Enter</kbd> for new line</span>
                            </span>
                            <span class="ldr-hint-item">
                                <i aria-hidden="true" class="fas fa-home ldr-hint-icon"></i>
                                <span class="ldr-hint-text"><kbd>Esc</kbd> returns here from anywhere</span>
                            </span>
                            <span class="ldr-hint-item">
                                <i aria-hidden="true" class="fas fa-bars ldr-hint-icon"></i>
                                <span class="ldr-hint-text"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>1-4</kbd> to navigate menu</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="ldr-form-group">
                    <fieldset>
                        <legend id="mode-legend">Research Mode</legend>
                        <div class="ldr-mode-selection">
                            <input type="radio" id="mode-quick" name="research_mode" value="quick" checked class="sr-only">
                            <label for="mode-quick" class="ldr-mode-option active" data-mode="quick" tabindex="0">
                                <div class="ldr-mode-icon"><i aria-hidden="true" class="fas fa-bolt" ></i></div>
                                <div class="ldr-mode-info">
                                    <h2>Quick Summary</h2>
                                    <p>Generated in a few minutes</p>
                                </div>
                            </label>

                            <input type="radio" id="mode-detailed" name="research_mode" value="detailed" class="sr-only">
                            <label for="mode-detailed" class="ldr-mode-option" data-mode="detailed" tabindex="-1">
                                <div class="ldr-mode-icon"><i aria-hidden="true" class="fas fa-microscope" ></i></div>
                                <div class="ldr-mode-info">
                                    <h2>Detailed Report <span class="ldr-mode-badge">Advanced</span></h2>
                                    <p>Multi-section analysis {{ tooltip("?", "Generates comprehensive report with extensive source analysis. Duration varies by topic complexity and search settings.", position='right') }}</p>
                                </div>
                            </label>
                        </div>
                    </fieldset>
                </div>

                <!-- Advanced Options - positioned before start for configuration -->
                <button type="button" id="advanced-options-toggle" class="ldr-advanced-options-toggle ldr-open" aria-expanded="true" aria-controls="advanced-options-panel">
                    <span class="ldr-toggle-text">Advanced Options</span>
                    <i aria-hidden="true" class="fas fa-chevron-up" ></i>
                    <span class="sr-only">Click to collapse advanced options</span>
                </button>

                <div class="ldr-advanced-options-panel ldr-expanded" id="advanced-options-panel" role="group" aria-labelledby="advanced-options-toggle">
                    <div class="ldr-form-row">
                        <!-- Model Provider Selection -->
                        <div class="ldr-form-group ldr-half">
                            <label for="model_provider">{{ tooltip("Model Provider", "Local (Ollama, LM Studio): Free, private, runs on your hardware but slower. Cloud (OpenAI, Anthropic): Faster, smarter, but costs per request and sends data externally.") }}</label>
                            <select id="model_provider" name="model_provider" class="ldr-form-control" data-initial-value="{{ settings.llm_provider }}">
                                <!-- Will be populated dynamically -->
                                <option value="">Loading providers...</option>
                            </select>
                            <span class="ldr-input-help">Local = runs on your computer | Cloud = external API</span>
                        </div>

                        <!-- Custom Endpoint (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="endpoint_container" style="display: none;">
                            <label for="custom_endpoint">{{ tooltip("Custom Endpoint", "OpenAI-compatible API URL. Must include /v1 path (e.g., https://api.example.com/v1). Used for self-hosted or alternative API providers.") }}</label>
                            <input type="text" id="custom_endpoint" name="custom_endpoint" class="ldr-form-control" placeholder="https://your-endpoint-url/v1" value="{{ settings.llm_openai_endpoint_url }}">
                            <span class="ldr-input-help">Enter the OpenAI-compatible API endpoint URL</span>
                        </div>

                        <!-- Ollama URL (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="ollama_url_container" style="display: none;">
                            <label for="ollama_url">{{ tooltip("Ollama Endpoint", "Where Ollama is running. Default localhost:11434. If connection fails, check that Ollama is installed and running (ollama serve).") }}</label>
                            <input type="text" id="ollama_url" name="ollama_url" class="ldr-form-control" placeholder="http://localhost:11434" value="{{ settings.llm_ollama_url }}">
                            <span class="ldr-input-help">Enter the Ollama endpoint URL</span>
                        </div>

                        <!-- LM Studio URL (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="lmstudio_url_container" style="display: none;">
                            <label for="lmstudio_url">{{ tooltip("LM Studio Endpoint", "Where LM Studio server is running. Default localhost:1234. Enable 'Local Server' in LM Studio settings first.") }}</label>
                            <input type="text" id="lmstudio_url" name="lmstudio_url" class="ldr-form-control" placeholder="http://localhost:1234" value="{{ settings.llm_lmstudio_url }}">
                            <span class="ldr-input-help">Enter the LM Studio endpoint URL</span>
                        </div>

                        <!-- Context Window Size (for local providers, hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="context_window_container" style="display: none;">
                            <label for="context_window">{{ tooltip("Context Window Size", "How much text the model can 'see' at once. Too small: model forgets earlier info. Too large: uses more RAM/VRAM. Only adjust if you see 'context exceeded' errors.") }}</label>
                            <input type="number" id="context_window" name="context_window" class="ldr-form-control" min="512" max="131072" step="512" value="{{ settings.llm_local_context_window_size }}">
                            <span class="ldr-input-help">Context window size in tokens (512-131072)</span>
                        </div>

                        <!-- OpenAI API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="openai_api_key_container" style="display: none;">
                            <label for="openai_api_key">OpenAI API Key</label>
                            <input type="password" id="openai_api_key" name="openai_api_key" class="ldr-form-control"
                                   placeholder="sk-..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at platform.openai.com</span>
                        </div>

                        <!-- Anthropic API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="anthropic_api_key_container" style="display: none;">
                            <label for="anthropic_api_key">Anthropic API Key</label>
                            <input type="password" id="anthropic_api_key" name="anthropic_api_key" class="ldr-form-control"
                                   placeholder="sk-ant-..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at console.anthropic.com</span>
                        </div>

                        <!-- Google API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="google_api_key_container" style="display: none;">
                            <label for="google_api_key">Google API Key</label>
                            <input type="password" id="google_api_key" name="google_api_key" class="ldr-form-control"
                                   placeholder="AIza..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at aistudio.google.com</span>
                        </div>

                        <!-- OpenRouter API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="openrouter_api_key_container" style="display: none;">
                            <label for="openrouter_api_key">OpenRouter API Key</label>
                            <input type="password" id="openrouter_api_key" name="openrouter_api_key" class="ldr-form-control"
                                   placeholder="sk-or-..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at openrouter.ai</span>
                        </div>

                        <!-- xAI API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="xai_api_key_container" style="display: none;">
                            <label for="xai_api_key">xAI API Key</label>
                            <input type="password" id="xai_api_key" name="xai_api_key" class="ldr-form-control"
                                   placeholder="xai-..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at x.ai</span>
                        </div>

                        <!-- IONOS API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="ionos_api_key_container" style="display: none;">
                            <label for="ionos_api_key">IONOS API Key</label>
                            <input type="password" id="ionos_api_key" name="ionos_api_key" class="ldr-form-control"
                                   placeholder="..." autocomplete="off">
                            <span class="ldr-input-help">Get your key from IONOS AI Model Hub</span>
                        </div>

                        <!-- OpenAI Endpoint API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="openai_endpoint_api_key_container" style="display: none;">
                            <label for="openai_endpoint_api_key">Endpoint API Key</label>
                            <input type="password" id="openai_endpoint_api_key" name="openai_endpoint_api_key" class="ldr-form-control"
                                   placeholder="API key (if required)" autocomplete="off">
                            <span class="ldr-input-help">API key for your OpenAI-compatible endpoint</span>
                        </div>

                        <!-- Ollama API Key (hidden by default, optional for authenticated instances) -->
                        <div class="ldr-form-group ldr-half" id="ollama_api_key_container" style="display: none;">
                            <label for="ollama_api_key">Ollama API Key (Optional)</label>
                            <input type="password" id="ollama_api_key" name="ollama_api_key" class="ldr-form-control"
                                   placeholder="Optional, for authenticated instances" autocomplete="off">
                            <span class="ldr-input-help">Only needed for authenticated Ollama instances</span>
                        </div>
                    </div>

                    <div class="ldr-form-row">
                        <!-- Model Selection -->
                        <div class="ldr-form-group ldr-half">
                            {{ render_dropdown(
                                input_id="model",
                                dropdown_id="model-dropdown",
                                placeholder="Enter or select a model",
                                label="Language Model",
                                help_text="Select or enter a custom model name",
                                show_refresh=True,
                                refresh_aria_label="Refresh model list",
                                data_initial_value=settings.llm_model
                            ) }}
                        </div>

                        <!-- Search Engine Selection -->
                        <div class="ldr-form-group ldr-half">
                            {{ render_dropdown(
                                input_id="search_engine",
                                dropdown_id="search-engine-dropdown",
                                placeholder="Select a search engine",
                                label="Search Engine",
                                help_text="Select the search engine to use for research",
                                show_refresh=True,
                                refresh_aria_label="Refresh search engine list",
                                data_initial_value=settings.search_tool
                            ) }}
                        </div>
                    </div>

                    <div class="ldr-form-row">
                        <!-- Search Iterations -->
                        <div class="ldr-form-group ldr-half">
                            <label for="iterations">{{ tooltip("Search Iterations", "Each cycle: AI generates follow-up questions based on what it found, then searches again. Searches run in parallel. More iterations = deeper coverage but longer wait.") }}</label>
                            <input type="number" id="iterations" name="iterations" class="ldr-form-control" min="1" value="{{ settings.search_iterations }}">
                            <span class="ldr-input-help">More iterations = deeper research (even 20+ can make sense for Focused Iteration, depending on context window size)</span>
                        </div>

                        <!-- Questions Per Iteration -->
                        <div class="ldr-form-group ldr-half">
                            <label for="questions_per_iteration">{{ tooltip("Questions Per Iteration", "Follow-up questions per cycle. Multiplies with iterations: 3 questions × 4 iterations = 12 searches. More = broader but slower/costlier.") }}</label>
                            <input type="number" id="questions_per_iteration" name="questions_per_iteration" class="ldr-form-control" min="1" value="{{ settings.search_questions_per_iteration }}">
                            <span class="ldr-input-help">Lower is generally better (1-2 recommended). Prefer increasing iterations for deeper research.</span>
                        </div>
                    </div>

                    <div class="ldr-form-row">
                        <!-- Search Strategy -->
                        <div class="ldr-form-group ldr-half">
                            <label for="strategy">{{ tooltip("Search Strategy", "Source-Based: Full report with inline citations. Focused Quick: Concise Q&A. Focused Comprehensive: Detailed answer with citations. Topic Organization: Groups results by theme.") }}</label>
                            <select id="strategy" name="strategy" class="ldr-form-control">
                                {% for s in strategies %}
                                <option value="{{ s.name }}" {% if settings.search_strategy == s.name %}selected{% endif %}>{{ s.label }}</option>
                                {% endfor %}
                            </select>
                            <span class="ldr-input-help">Focused Iteration works best with >16,000 context window</span>
                        </div>

                    </div>
                </div>

                <!-- Start Research Button -->
                <div class="ldr-form-actions">
                    <button type="submit" class="btn btn-primary" id="start-research-btn"><i aria-hidden="true" class="fas fa-rocket"></i> Start Research</button>
                </div>

                <!-- Audio Notifications -->
                <div class="ldr-form-options">
                    <div class="ldr-form-option">
                        <label for="notification-toggle" class="ldr-checkbox-label">
                            <input type="checkbox" id="notification-toggle" checked>
                            <span class="ldr-checkbox-text">Sound notifications when complete</span>
                        </label>
                    </div>
                </div>
            </form>

            <!-- How Research Works Help Panel -->
            {% call help_panel('research-workflow', 'How Research Works', icon='lightbulb', collapsed=true, dismissible=true) %}
            <div class="ldr-help-steps">
                {{ help_step(1, "Query Analysis", "Your research question is analyzed to identify key concepts and generate initial search queries.") }}
                {{ help_step(2, "Source Discovery", "The search engine finds relevant sources. Each iteration generates follow-up questions to explore the topic deeper.") }}
                {{ help_step(3, "Content Analysis", "The AI reads and analyzes each source, extracting key information relevant to your query.") }}
                {{ help_step(4, "Report Generation", "Findings are synthesized into a comprehensive report with citations and references.") }}
            </div>
            {{ help_tip("<strong>Tip:</strong> For academic research, select ArXiv or PubMed as your search engine. For general topics, SearXNG provides the broadest coverage.") }}
            {% endcall %}
        </div>
    </div>
</div>
{% endblock %}

{% block component_scripts %}
<script defer src="/static/js/components/custom_dropdown.js"></script>
<script defer src="/static/js/components/research.js"></script>
<script defer src="/static/js/research_form.js"></script>
<script defer src="/static/js/pdf_upload_handler.js"></script>
{% endblock %}