{% 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, "Chunk Size", "Larger chunks = more context per search result but less precision. Smaller = 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>
                <form id="rag-config-form">
                    <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">
                        <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-row">
                        <div class="ldr-form-group ldr-col-md-6">
                            <label for="chunk-size">{{ tooltip("Chunk Size", "Larger chunks (1000+) keep more context but search is less precise. Smaller chunks (500-) 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 per chunk</small>
                        </div>
                        <div class="ldr-form-group ldr-col-md-6">
                            <label for="chunk-overlap">{{ tooltip("Chunk Overlap", "Characters shared between adjacent chunks. Prevents important info from being cut at boundaries. Usually 10-20% of 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">Overlap between chunks</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", "How to divide documents. Recursive: natural breaks (paragraphs, sentences). Semantic: AI groups related content (slow but smart). Token: respects model limits.") }}</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">
                                How documents are split into chunks. Semantic uses AI to find natural breakpoints (slower but smarter)
                            </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.
                            For code: add language-specific separators like "\nclass", "\ndef"
                        </small>
                    </div>

                    <button type="submit" class="ldr-btn ldr-btn-primary">
                        <i aria-hidden="true" class="fas fa-save"></i> Save Default Settings
                    </button>
                    <small class="ldr-form-text ldr-text-muted ldr-mt-2">
                        <i aria-hidden="true" class="fas fa-info-circle"></i> These settings will be used as defaults for new collections. Existing collections will continue using their current settings unless re-indexed with new defaults.
                    </small>
                </form>
            </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 %}