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

{% block title %}Collection Details{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/collection_details.css">
<link rel="stylesheet" href="/static/css/components/semantic-search.css">
{% endblock %}

{% block content %}
<div class="ldr-rag-manager-container">
    <!-- Back button and header -->
    <div class="ldr-rag-header">
        <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
            <a href="/library/collections" class="ldr-btn-collections ldr-btn-collections-secondary">
                <i aria-hidden="true" class="fas fa-arrow-left"></i> Back to Collections
            </a>
        </div>
        <h1 id="collection-title"><i aria-hidden="true" class="fas fa-folder-open"></i> <span id="collection-name">Loading...</span></h1>
        <p class="ldr-subtitle" id="collection-description"></p>
    </div>

    <!-- Collection Actions -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-tasks"></i> Actions</h2>
        </div>

        <div class="ldr-collection-actions-grid">
            <a href="/library/collections/{{ collection_id }}/upload" class="ldr-btn-collections ldr-btn-collections-primary ldr-btn-lg ldr-btn-featured" title="Add PDF, TXT, MD, or HTML files to this collection">
                <i aria-hidden="true" class="fas fa-upload"></i> Upload Files
            </a>
            <button id="index-collection-btn" class="ldr-btn-collections ldr-btn-collections-success ldr-btn-lg" title="Create searchable embeddings for unindexed documents">
                <i aria-hidden="true" class="fas fa-sync"></i> Index All Documents
            </button>
            <button id="reindex-collection-btn" class="ldr-btn-collections ldr-btn-collections-warning ldr-btn-lg" title="Re-process all documents. Use after changing embedding settings.">
                <i aria-hidden="true" class="fas fa-redo"></i> Re-Index All Documents
            </button>
            <button id="delete-collection-btn" class="ldr-btn-collections ldr-btn-collections-danger ldr-btn-lg" title="Delete this collection. Documents remain in library but embeddings are removed.">
                <i aria-hidden="true" class="fas fa-trash"></i> Delete Collection
            </button>
        </div>
    </div>

    <!-- Statistics -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-chart-bar"></i> Statistics</h2>
        </div>

        <div class="ldr-stats-grid">
            <div class="ldr-stat-card" title="All documents in this collection (indexed + unindexed)">
                <div class="ldr-stat-value" id="stat-total-docs">-</div>
                <div class="ldr-stat-label">Total Documents</div>
            </div>
            <div class="ldr-stat-card ldr-stat-success" title="Documents processed and searchable via semantic search">
                <div class="ldr-stat-value" id="stat-indexed-docs">-</div>
                <div class="ldr-stat-label">Indexed Documents</div>
            </div>
            <div class="ldr-stat-card ldr-stat-warning" title="Documents waiting to be indexed. Click 'Index All' to process.">
                <div class="ldr-stat-value" id="stat-unindexed-docs">-</div>
                <div class="ldr-stat-label">Not Indexed</div>
            </div>
            <div class="ldr-stat-card" title="Text chunks created for search. More chunks = more granular search results.">
                <div class="ldr-stat-value" id="stat-total-chunks">-</div>
                <div class="ldr-stat-label">Total Chunks</div>
            </div>
        </div>
    </div>

    <!-- Understanding RAG Indexing Help Panel -->
    {% call help_panel('rag-indexing', 'Understanding RAG Indexing', icon='brain', collapsed=true, dismissible=true) %}
    <div class="ldr-help-steps">
        {{ help_step(1, "Text Extraction", "Documents are parsed and text content is extracted from PDFs, HTML, Markdown, etc.") }}
        {{ help_step(2, "Chunking", "Text is split into smaller pieces (chunks) for more precise search results.") }}
        {{ help_step(3, "Embedding", "Each chunk is converted to a vector (list of numbers) that captures its meaning.") }}
        {{ help_step(4, "Semantic Search", "When you search, your query is also converted to a vector, and the most similar chunks are returned.") }}
    </div>
    {{ help_tip("<strong>Why index?</strong> Semantic search finds content by meaning, not just keywords. 'car' matches 'automobile', 'vehicle', etc.") }}
    {% endcall %}

    <!-- Embedding Settings -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-brain"></i> {{ tooltip("Embedding Settings", "Locked because changing these requires re-processing ALL documents (can take hours). Set globally in Settings → Embeddings before creating collections.") }}</h2>
        </div>

        <div class="ldr-embedding-settings-card">
            <div class="ldr-embedding-info">
                <h4>Collection's Embedding Settings</h4>
                <div id="collection-embedding-info" class="ldr-info-box">
                    <div class="ldr-loading-spinner">
                        <i aria-hidden="true" class="fas fa-spinner fa-spin"></i> Loading settings...
                    </div>
                </div>
                <p class="ldr-form-text ldr-text-muted">
                    <i aria-hidden="true" class="fas fa-lock"></i> These settings are locked for this collection to ensure embedding consistency.
                    To use different settings, you would need to re-index the entire collection.
                </p>
                <p class="ldr-form-text ldr-text-muted" style="margin-top: 10px;">
                    <i aria-hidden="true" class="fas fa-info-circle"></i> Default embedding settings for new collections can be changed in
                    <a href="/library/embedding-settings" style="color: var(--accent-primary);">Embedding Settings</a>.
                </p>
            </div>
        </div>
    </div>

    <!-- Indexing Progress -->
    <div id="indexing-progress" class="ldr-rag-section" style="display: none;">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-spinner fa-spin" id="indexing-spinner"></i> Indexing Progress</h2>
            <button id="cancel-indexing-btn" class="ldr-btn-collections ldr-btn-collections-danger" style="display: none;">
                <i aria-hidden="true" class="fas fa-times"></i> Cancel Indexing
            </button>
        </div>

        <div class="ldr-progress-container">
            <div class="ldr-progress-bar">
                <div id="progress-fill" class="ldr-progress-fill" style="width: 0%"></div>
            </div>
            <p id="progress-text" class="ldr-progress-text">Starting...</p>
        </div>

        <div id="progress-log" class="ldr-progress-log"></div>
    </div>

    <!-- Search Collection -->
    <div class="ldr-rag-section" id="collection-search-section" style="display: none;">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-search"></i> Search Collection</h2>
        </div>
        <div class="ldr-search-row" style="margin-bottom: 1rem;">
            <input type="text" id="collection-search-input" class="form-control"
                   placeholder="Search this collection semantically..."
                   aria-label="Search this collection semantically" style="flex: 1;">
            <button id="collection-search-btn" class="ldr-btn-collections ldr-btn-collections-primary">
                <i aria-hidden="true" class="fas fa-search"></i> Search
            </button>
        </div>
        <div id="collection-search-results" aria-live="polite"></div>
    </div>

    <!-- Documents List -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-file"></i> Documents</h2>
            <div class="ldr-filter-controls">
                <button class="ldr-btn-collections ldr-btn-outline-primary ldr-active" onclick="filterDocuments('all')">All</button>
                <button class="ldr-btn-collections ldr-btn-outline-success" onclick="filterDocuments('indexed')">Indexed</button>
                <button class="ldr-btn-collections ldr-btn-outline-warning" onclick="filterDocuments('unindexed')">Not Indexed</button>
            </div>
        </div>

        <div id="documents-list" class="ldr-documents-list">
            <div class="ldr-loading-spinner">
                <i aria-hidden="true" class="fas fa-spinner fa-spin"></i> Loading documents...
            </div>
        </div>

        <div id="no-documents-message" class="ldr-empty-state" style="display: none;">
            <i aria-hidden="true" class="fas fa-file fa-3x"></i>
            <p>No documents in this collection yet. Use the Upload Files button above to add documents.</p>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
{% include "components/delete_confirmation_modal.html" %}

<!-- Pass collection_id to JavaScript -->
<script>
    const COLLECTION_ID = "{{ collection_id }}";
</script>
<script defer src="/static/js/deletion/confirmation_modal.js"></script>
<script defer src="/static/js/deletion/delete_manager.js"></script>
<script defer src="/static/js/components/semantic_search.js"></script>
<script defer src="/static/js/components/library_search.js"></script>
<script defer src="/static/js/collection_details.js"></script>
{% endblock %}