{% extends "base.html" %}

{% block title %}Embedding Settings{% 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>

    <!-- Important Warning -->
    <div class="ldr-alert ldr-alert-warning" style="margin-bottom: 2rem;">
        <div style="display: flex; align-items: flex-start; gap: 1rem;">
            <i 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 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>

    <!-- Configuration Panel -->
    <div class="ldr-rag-config-panel">
        <h2><i 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 class="fas fa-spinner fa-spin"></i> Loading...
                    </div>
                </div>
                <p class="ldr-form-text ldr-text-muted">
                    <i 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">Chunk Size</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">Chunk Overlap</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">Text Splitter Type</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">Index Type</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 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 class="fas fa-save"></i> Save Default Settings
                    </button>
                    <small class="ldr-form-text ldr-text-muted ldr-mt-2">
                        <i 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 class="fas fa-info-circle"></i> Provider Information</h2>
        <div id="provider-info" class="ldr-stats-grid">
            <div class="ldr-loading-spinner">
                <i class="fas fa-spinner fa-spin"></i> Loading provider information...
            </div>
        </div>
    </div>

    <!-- Test Panel -->
    <div class="ldr-rag-operations-panel">
        <h2><i 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 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>
</div>


<style>
.ldr-library-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--bg-primary, #1a1a1a);
    min-height: 100vh;
}

.ldr-library-header {
    margin-bottom: 30px;
}

.ldr-library-header h1 {
    color: var(--text-primary, #e4e4e4);
    font-size: 2em;
    margin: 0 0 10px 0;
}

.ldr-library-header .ldr-subtitle {
    color: var(--text-secondary, #999);
    font-size: 1.1em;
    margin-top: 10px;
}

.ldr-rag-config-panel,
.ldr-rag-stats-panel,
.ldr-rag-operations-panel,
.ldr-rag-documents-panel {
    background: var(--card-bg, #2a2a2a);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px var(--shadow-color, rgba(0,0,0,0.3));
    border: 1px solid var(--border-color, #333);
}

.ldr-rag-config-panel h2,
.ldr-rag-stats-panel h2,
.ldr-rag-operations-panel h2,
.ldr-rag-documents-panel h2 {
    margin-bottom: 20px;
    color: var(--text-primary, #e4e4e4);
    font-size: 1.5em;
}

.ldr-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 992px) {
    .ldr-config-grid {
        grid-template-columns: 1fr;
    }
}

.ldr-config-section {
    background: var(--input-bg, #1a1a1a);
    padding: 20px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #444);
}

.ldr-config-section h3 {
    margin-bottom: 15px;
    font-size: 1.2em;
    color: var(--text-primary, #e4e4e4);
}

.ldr-info-box {
    background: var(--card-bg, #2a2a2a);
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid var(--primary-color, #007bff);
}

.ldr-info-box .ldr-alert {
    margin: 0;
    padding: 12px;
}

.ldr-info-box:has(.ldr-alert) {
    background: transparent;
    padding: 0;
    border: none;
}

.ldr-info-box .ldr-info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, #444);
}

.ldr-info-box .ldr-info-item:last-child {
    border-bottom: none;
}

.ldr-info-box .ldr-info-label {
    font-weight: 600;
    color: var(--text-secondary, #999);
}

.ldr-info-box .ldr-info-value {
    color: var(--text-primary, #e4e4e4);
}

.ldr-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.ldr-stat-card {
    background: var(--input-bg, #1a1a1a);
    padding: 20px;
    border-radius: 6px;
    text-align: center;
    border-left: 4px solid var(--success-color, #28a745);
    border: 1px solid var(--border-color, #444);
}

.ldr-stat-card.ldr-warning {
    border-left-color: var(--warning-color, #ffc107);
}

.ldr-stat-card .ldr-stat-value {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--text-primary, #e4e4e4);
    display: block;
}

.ldr-stat-card .ldr-stat-label {
    color: var(--text-secondary, #999);
    margin-top: 10px;
    font-size: 0.9em;
}

.ldr-operations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}


/* Modal Styles */
.ldr-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ldr-modal-content {
    background: var(--card-bg, #2a2a2a);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.ldr-modal-large {
    max-width: 800px;
}

.ldr-modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color, #444);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ldr-modal-close {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-secondary, #999);
    cursor: pointer;
}

.ldr-modal-close:hover {
    color: var(--text-primary, #e4e4e4);
}

.ldr-modal-body {
    padding: 20px;
}

.ldr-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color, #444);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


.ldr-mb-2 {
    margin-bottom: 10px;
}

.ldr-mt-2 {
    margin-top: 10px;
}

.ldr-mt-3 {
    margin-top: 15px;
}

.ldr-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.ldr-col-md-6 {
    flex: 1;
}

.ldr-mt-4 {
    margin-top: 20px;
}

.ldr-loading-spinner {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary, #999);
    font-size: 1.2em;
}

.ldr-log-container {
    max-height: 300px;
    overflow-y: auto;
    background: var(--input-bg, #1a1a1a);
    padding: 15px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
    border: 1px solid var(--border-color, #444);
}

.ldr-log-entry {
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color, #444);
}

.ldr-log-entry:last-child {
    border-bottom: none;
}

.ldr-log-entry.ldr-success {
    color: var(--success-color, #28a745);
}

.ldr-log-entry.ldr-error {
    color: var(--danger-color, #dc3545);
}

.ldr-log-entry.ldr-info {
    color: var(--info-color, #17a2b8);
}

.ldr-documents-list {
    margin-top: 20px;
}

.ldr-filter-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ldr-document-item {
    background: var(--input-bg, #1a1a1a);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color, #444);
}

.ldr-document-info {
    flex: 1;
}

.ldr-document-title {
    font-weight: 600;
    color: var(--text-primary, #e4e4e4);
    margin-bottom: 5px;
}

.ldr-document-meta {
    font-size: 0.9em;
    color: var(--text-secondary, #999);
}

.ldr-document-actions {
    display: flex;
    gap: 10px;
}

.ldr-badge-indexed {
    background: var(--success-color, #28a745);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

.ldr-badge-unindexed {
    background: var(--secondary-color, #6c757d);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

.ldr-alert {
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.ldr-alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.ldr-alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.ldr-alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.ldr-alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.ldr-alert i {
    margin-right: 8px;
}

.ldr-btn-sm {
    padding: 4px 10px;
    font-size: 0.85em;
}
</style>

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