{% extends "base.html" %}

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

{% block extra_head %}
<link rel="stylesheet" href="/static/css/collection_details.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 class="fas fa-arrow-left"></i> Back to Collections
            </a>
        </div>
        <h1 id="collection-title"><i 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 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">
                <i class="fas fa-upload"></i> Upload Files
            </a>
            <button id="index-collection-btn" class="ldr-btn-collections ldr-btn-collections-success ldr-btn-lg">
                <i 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">
                <i 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">
                <i class="fas fa-trash"></i> Delete Collection
            </button>
        </div>
    </div>

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

        <div class="ldr-stats-grid">
            <div class="ldr-stat-card">
                <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">
                <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">
                <div class="ldr-stat-value" id="stat-unindexed-docs">-</div>
                <div class="ldr-stat-label">Not Indexed</div>
            </div>
            <div class="ldr-stat-card">
                <div class="ldr-stat-value" id="stat-total-chunks">-</div>
                <div class="ldr-stat-label">Total Chunks</div>
            </div>
        </div>
    </div>

    <!-- Embedding Settings -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i class="fas fa-brain"></i> Embedding Settings</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 class="fas fa-spinner fa-spin"></i> Loading settings...
                    </div>
                </div>
                <p class="ldr-form-text ldr-text-muted">
                    <i 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 class="fas fa-info-circle"></i> Default embedding settings for new collections can be changed in
                    <a href="/library/embedding-settings" style="color: #667eea;">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 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 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>

    <!-- Documents List -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i 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 class="fas fa-spinner fa-spin"></i> Loading documents...
            </div>
        </div>

        <div id="no-documents-message" class="ldr-empty-state" style="display: none;">
            <i class="fas fa-file fa-3x"></i>
            <p>No documents in this collection yet</p>
            <a href="/library/collections/{{ collection_id }}/upload" class="ldr-btn-collections ldr-btn-collections-primary">
                <i class="fas fa-upload"></i> Upload Files
            </a>
        </div>
    </div>
</div>

<!-- Upload Files Modal -->
<div id="upload-files-modal" class="ldr-modal">
    <div class="ldr-modal-content">
        <div class="ldr-modal-header">
            <h3>Upload Files to Collection</h3>
            <span class="ldr-close">&times;</span>
        </div>
        <div class="ldr-modal-body">
            <form id="upload-files-form">
                <div class="ldr-form-group">
                    <label>Upload Files (PDF, TXT, MD, HTML)</label>

                    <!-- Drag and drop zone -->
                    <div id="drop-zone" class="ldr-drop-zone">
                        <i class="fas fa-cloud-upload-alt fa-3x"></i>
                        <p class="ldr-drop-zone-text">Drag and drop files here</p>
                        <p class="ldr-drop-zone-subtext">or</p>
                        <button type="button" class="ldr-btn-collections ldr-btn-collections-primary" onclick="document.getElementById('files-input').click()">
                            <i class="fas fa-folder-open"></i> Browse Files
                        </button>
                        <input type="file" id="files-input" name="files" multiple accept=".pdf,.txt,.md,.html,.htm" style="display: none;">
                    </div>

                    <!-- Selected files preview -->
                    <div id="selected-files" class="ldr-selected-files" style="display: none;">
                        <p><strong>Selected files:</strong></p>
                        <ul id="file-list"></ul>
                    </div>

                    <p class="ldr-form-help">Accepted formats: PDF, TXT, MD, HTML. Text will be extracted and stored securely.</p>
                </div>
                <div id="upload-progress" class="ldr-upload-progress" style="display: none;">
                    <div class="ldr-progress-bar">
                        <div class="ldr-progress-fill"></div>
                    </div>
                    <p class="ldr-progress-text"></p>
                </div>
                <div id="upload-results" class="ldr-upload-results" style="display: none;"></div>
                <div class="ldr-form-actions">
                    <button type="button" class="ldr-btn-collections ldr-btn-collections-secondary" id="cancel-upload-btn">Cancel</button>
                    <button type="submit" class="ldr-btn-collections ldr-btn-collections-primary" id="upload-submit-btn">Upload Files</button>
                </div>
            </form>
        </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 src="/static/js/deletion/confirmation_modal.js"></script>
<script src="/static/js/deletion/delete_manager.js"></script>
<script src="/static/js/collection_details.js"></script>
{% endblock %}