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

{% block title %}Embedding Settings{% endblock %}

{% block extra_head %}<link rel="stylesheet" href="/static/css/embedding_settings.css">{% endblock %}

{% block content %}
<div class="ldr-library-container">
    <div class="ldr-library-header">
        <h1>Default Embedding Settings</h1>
        <p class="ldr-subtitle">Configure default embedding models for new collections and semantic search</p>
    </div>

    <!-- Understanding Embeddings Help Panel -->
    {% call help_panel('embedding-how', 'Understanding Embeddings', icon='brain', collapsed=true, dismissible=true) %}
    <div class="ldr-help-steps">
        {{ help_step(1, "What are Embeddings?", "Embeddings convert text into numbers (vectors) that capture meaning. Similar concepts have similar vectors.") }}
        {{ help_step(2, "Document Chunk Size", "Maximum size of each chunk — characters for the recursive and semantic splitters, tokens for the token and sentence splitters. Larger chunks keep more context per search result but less precision; smaller chunks are more granular but may lose context.") }}
        {{ help_step(3, "Text Splitter", "Recursive: uses natural breaks. Semantic: AI-powered grouping (slower). Token-based: respects LLM limits.") }}
        {{ help_step(4, "Why Lock Settings?", "Mixing different embedding models causes inconsistent search results. Each collection uses one model.") }}
    </div>
    {{ help_tip("<strong>Recommended:</strong> Start with defaults. Only change if you understand the trade-offs.") }}
    {% endcall %}

    <!-- Important Warning -->
    <div class="ldr-alert ldr-alert-warning" style="margin-bottom: 2rem;">
        <div style="display: flex; align-items: flex-start; gap: 1rem;">
            <i aria-hidden="true" class="fas fa-exclamation-triangle" style="font-size: 1.5rem; margin-top: 0.25rem;"></i>
            <div>
                <h4 style="margin: 0 0 0.5rem 0;">Important: Existing Collections</h4>
                <p style="margin: 0 0 0.5rem 0;">
                    <strong>Changing these settings will only affect NEW collections.</strong>
                    Existing collections keep their original embedding settings to ensure data integrity and search consistency.
                </p>
                <p style="margin: 0;">
                    <i aria-hidden="true" class="fas fa-lock"></i> Once a collection is indexed, its embedding settings are locked.
                    To change settings for an existing collection, you must re-index the entire collection, which will delete the current index.
                </p>
            </div>
        </div>
    </div>

    <!-- Test Panel -->
    <div class="ldr-rag-operations-panel">
        <h2><i aria-hidden="true" class="fas fa-vial"></i> Test Configuration</h2>
        <p class="ldr-text-muted" style="margin-bottom: 15px;">
            Test the currently selected embedding model to ensure it's working correctly.
        </p>

        <div class="ldr-operations-grid">
            <button class="ldr-btn ldr-btn-success ldr-btn-lg" onclick="testConfiguration()" id="test-config-btn">
                <i aria-hidden="true" class="fas fa-play"></i> Test Embedding Model
            </button>
        </div>

        <div id="test-result" style="margin-top: 15px; display: none;">
            <!-- Test results will appear here -->
        </div>
    </div>

    <!-- Configuration Panel -->
    <div class="ldr-rag-config-panel">
        <h2><i aria-hidden="true" class="fas fa-cog"></i> Configuration</h2>

        <div class="ldr-config-grid">
            <!-- Saved Default Settings -->
            <div class="ldr-config-section">
                <h3>Saved Default Settings</h3>
                <div id="saved-default-settings" class="ldr-info-box">
                    <div class="ldr-loading-spinner">
                        <i aria-hidden="true" class="fas fa-spinner fa-spin"></i> Loading...
                    </div>
                </div>
                <p class="ldr-form-text ldr-text-muted">
                    <i aria-hidden="true" class="fas fa-info-circle"></i> These are your saved defaults for new collections. Change them using the form below.
                </p>
            </div>

            <!-- Default Embedding Configuration -->
            <div class="ldr-config-section">
                <h3>Default Embedding Configuration</h3>
                <div>
                    <div class="ldr-form-group">
                        <label for="embedding-provider">Provider</label>
                        <select id="embedding-provider" class="ldr-form-control">
                            <option value="">Loading providers...</option>
                        </select>
                    </div>

                    <div class="ldr-form-group" id="ollama-url-group" style="display: none;">
                        <label for="ollama-url">Ollama URL</label>
                        <input type="text" id="ollama-url" class="ldr-form-control" placeholder="http://localhost:11434">
                        <small class="ldr-form-text ldr-text-muted">
                            URL of the Ollama server for embedding models. Leave empty to use the default LLM Ollama URL.
                        </small>
                    </div>

                    <div class="ldr-form-group" id="ollama-num-ctx-group" style="display: none;">
                        <label for="ollama-num-ctx">{{ tooltip("Ollama Context Window (num_ctx)", "Token budget passed to Ollama for each embedding call. If your chunks tokenize to more than this, Ollama returns HTTP 500 and indexing fails. Increase if you see 'input length exceeds the context length'. Default 8192 is safe for chunk sizes up to ~5000 characters.") }}</label>
                        <input type="number" id="ollama-num-ctx" class="ldr-form-control" value="8192" min="512" max="131072" step="512">
                        <small class="ldr-form-text ldr-text-muted">
                            Tokens. Must exceed the largest chunk after tokenization. Increase if Ollama returns "input length exceeds the context length".
                        </small>
                    </div>

                    <div class="ldr-form-group">
                        <label for="embedding-model">Model</label>
                        <select id="embedding-model" class="ldr-form-control">
                            <!-- Options loaded dynamically -->
                        </select>
                        <small class="ldr-form-text ldr-text-muted">
                            <span id="model-description"></span>
                        </small>
                    </div>

                    <div class="ldr-form-group" id="openai-embedding-batch-size-group" hidden>
                        <label for="openai-embedding-batch-size">Embedding Request Batch Size</label>
                        <input type="number" id="openai-embedding-batch-size" class="ldr-form-control"
                            value="5" min="1" step="1" required
                            aria-describedby="openai-embedding-batch-size-help openai-embedding-batch-size-error">
                        <small id="openai-embedding-batch-size-help" class="ldr-form-text ldr-text-muted">
                            Defaults to 5 chunks per request for conservative local compatibility. This controls request batching, not document chunk characters. Cloud OpenAI users may increase it for higher throughput.
                        </small>
                        <div id="openai-embedding-batch-size-error" class="ldr-field-error" aria-live="polite"></div>
                    </div>

                    <div class="ldr-form-row">
                        <div class="ldr-form-group ldr-col-md-6">
                            <label for="chunk-size">{{ tooltip("Document Chunk Size", "Maximum size of each chunk. Larger values keep more context but reduce search precision; smaller values are more granular but may cut off important context.") }}</label>
                            <input type="number" id="chunk-size" class="ldr-form-control" value="1000" min="100" max="5000" step="100">
                            <small class="ldr-form-text ldr-text-muted">Characters for recursive/semantic; tokens for token and sentence (sentence is capped by the tokenizer's max length).</small>
                        </div>
                        <div class="ldr-form-group ldr-col-md-6">
                            <label for="chunk-overlap">{{ tooltip("Chunk Overlap", "Content shared between adjacent chunks to prevent important info from being cut at boundaries. Usually 10-20% of the chunk size.") }}</label>
                            <input type="number" id="chunk-overlap" class="ldr-form-control" value="200" min="0" max="1000" step="50">
                            <small class="ldr-form-text ldr-text-muted">Ignored by the semantic splitter (always 0).</small>
                        </div>
                    </div>

                    <div class="ldr-form-row">
                        <div class="ldr-form-group ldr-col-md-6">
                            <label for="splitter-type">{{ tooltip("Text Splitter Type", "Method used to split documents into chunks.") }}</label>
                            <select id="splitter-type" class="ldr-form-control">
                                <option value="recursive">Recursive (Default - uses separators)</option>
                                <option value="token">Token-based (Good for LLM context)</option>
                                <option value="sentence">Sentence-based (Clean boundaries)</option>
                                <option value="semantic">Semantic (Smart grouping - slower)</option>
                            </select>
                            <small class="ldr-form-text ldr-text-muted">
                                Recursive and semantic respect text separators; token and sentence ignore them.
                            </small>
                        </div>
                        <div class="ldr-form-group ldr-col-md-6">
                            <label for="distance-metric">Distance Metric</label>
                            <select id="distance-metric" class="ldr-form-control">
                                <option value="cosine">Cosine Similarity (Recommended)</option>
                                <option value="l2">Euclidean Distance (L2)</option>
                                <option value="dot_product">Dot Product</option>
                            </select>
                            <small class="ldr-form-text ldr-text-muted">
                                Cosine similarity recommended for text embeddings
                            </small>
                        </div>
                        <div class="ldr-form-group ldr-col-md-6">
                            <label for="index-type">{{ tooltip("Index Type", "Flat: exact but slow for large collections. HNSW: approximate but 50x faster for >10K docs. IVF: good balance for frequently updated collections.") }}</label>
                            <select id="index-type" class="ldr-form-control">
                                <option value="flat">Flat (Exact search, &lt;10K docs)</option>
                                <option value="hnsw">HNSW (Fast, large collections)</option>
                                <option value="ivf">IVF (Balanced, updates)</option>
                            </select>
                            <small class="ldr-form-text ldr-text-muted">
                                HNSW recommended for &gt;10K documents (50-60× faster)
                            </small>
                        </div>
                    </div>

                    <div class="ldr-form-group">
                        <label>
                            <input type="checkbox" id="normalize-vectors" checked>
                            Normalize vectors (L2)
                        </label>
                        <small class="ldr-form-text ldr-text-muted" style="display: block; margin-left: 25px;">
                            <i aria-hidden="true" class="fas fa-info-circle"></i> Recommended: Ensures fair comparison regardless of document length
                        </small>
                    </div>

                    <div class="ldr-form-group">
                        <label for="text-separators">Text Separators (Advanced)</label>
                        <textarea id="text-separators" class="ldr-form-control" rows="3"
                            placeholder='["\n\n", "\n", ". ", " ", ""]'></textarea>
                        <small class="ldr-form-text ldr-text-muted">
                            JSON array of separators. Default works for 80% of use cases. Used by recursive and semantic splitters only — token and sentence ignore this. For code, add language-specific separators like "\nclass", "\ndef".
                        </small>
                    </div>

                    <small class="ldr-form-text ldr-text-muted ldr-mt-2">
                        <i aria-hidden="true" class="fas fa-info-circle"></i> Changes save automatically. These settings are used as defaults for new collections; existing collections continue using their current settings unless re-indexed.
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Provider Information Panel -->
    <div class="ldr-rag-stats-panel">
        <h2><i aria-hidden="true" class="fas fa-info-circle"></i> Provider Information</h2>
        <div id="provider-info" class="ldr-stats-grid">
            <div class="ldr-loading-spinner">
                <i aria-hidden="true" class="fas fa-spinner fa-spin"></i> Loading provider information...
            </div>
        </div>
    </div>
</div>

<script defer src="/static/js/embedding_settings.js"></script>
{% endblock %}