{% 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>

    <!-- Privacy & Egress -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-shield-alt"></i> Privacy &amp; Egress</h2>
        </div>
        <div class="ldr-form-group">
            <label class="ldr-collection-public-label">
                <input type="checkbox" id="collection-is-public">
                Public collection (content is not sensitive)
            </label>
            <div class="ldr-form-help" id="collection-is-public-help">
                <strong>Private</strong> (default): excluded from runs under Public-only / Adaptive-public
                egress scope, and forces local LLM/embeddings inference when used — its contents never
                reach a cloud model. Check this only for non-sensitive content you're happy to process
                with cloud inference.
                <a href="https://github.com/LearningCircuit/local-deep-research/blob/main/docs/egress-modes.md#per-collection-publicprivate" target="_blank" rel="noopener noreferrer">Learn more &#8599;</a>
            </div>
        </div>
        <div class="ldr-form-group">
            <label class="ldr-collection-public-label">
                <input type="checkbox" id="collection-agent-enabled">
                Available to the research agent
            </label>
            <div class="ldr-form-help" id="collection-agent-enabled-help">
                Checked (default): the LangGraph research agent can search this collection
                as one of its tools. Uncheck to keep it out of the agent's tool list when
                it isn't needed for agentic research. Usability switch only — it does not
                change privacy or egress.
            </div>
        </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 %}