{% extends "base.html" %}

{% block title %}Upload Files - {{ collection_name or 'Collection' }}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/collection_details.css">
<style>
/* Storage Mode Options - reused from storage_mode_modal.html */
.ldr-storage-mode-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ldr-storage-mode-option {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    background: var(--card-bg);
}

.ldr-storage-mode-option:hover {
    border-color: var(--primary-color);
    background: rgba(var(--accent-primary-rgb), 0.05);
}

.ldr-storage-mode-option:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(var(--accent-primary-rgb), 0.1);
}

.ldr-storage-mode-option input[type="radio"] {
    margin-right: 12px;
    margin-top: 4px;
}

.ldr-storage-mode-option .ldr-option-content {
    flex: 1;
}

.ldr-storage-mode-option .ldr-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ldr-storage-mode-option .ldr-option-header strong {
    color: var(--text-primary);
}

.ldr-storage-mode-option .ldr-option-header i {
    font-size: 1.2em;
}

.ldr-storage-mode-option .ldr-option-description {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin: 0;
}

.ldr-storage-mode-option .ldr-option-warning {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(var(--warning-color-rgb), 0.15);
    border-radius: 4px;
    color: var(--warning-color);
    font-size: 0.85em;
}

.ldr-storage-mode-option .ldr-option-warning i {
    margin-right: 6px;
}

.ldr-storage-mode-option .ldr-option-tip {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(var(--success-color-rgb), 0.15);
    border-radius: 4px;
    color: var(--success-color);
    font-size: 0.85em;
}

.ldr-storage-mode-option .ldr-option-tip i {
    margin-right: 6px;
}

/* Icon color classes */
.ldr-icon-success {
    color: var(--success-color);
}

.ldr-icon-warning {
    color: var(--warning-color);
}

.ldr-icon-secondary {
    color: var(--text-muted);
}
</style>
{% endblock %}

{% block content %}
<div class="ldr-rag-manager-container">
    <!-- Header -->
    <div class="ldr-rag-header">
        <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
            <a href="/library/collections/{{ collection_id }}" class="ldr-btn-collections ldr-btn-collections-secondary">
                <i aria-hidden="true" class="fas fa-arrow-left"></i> Back to Collection
            </a>
        </div>
        <h1><i aria-hidden="true" class="fas fa-cloud-upload-alt"></i> <span>Upload Files to {{ collection_name or 'Collection' }}</span></h1>
        <p class="ldr-subtitle">Add documents to your collection for indexing and search</p>
    </div>

    <!-- Upload Section -->
    <div class="ldr-rag-section" style="background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.1) 0%, rgba(var(--accent-secondary-rgb), 0.1) 100%); border: 2px solid var(--accent-primary);">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-upload"></i> 📁 Upload Documents</h2>
        </div>

        <form id="upload-files-form" enctype="multipart/form-data">
            <div class="ldr-form-group">
                <label><strong>Select Files to Upload</strong></label>

                <!-- Drag and drop zone -->
                <div id="drop-zone" class="ldr-drop-zone">
                    <i aria-hidden="true" class="fas fa-cloud-upload-alt fa-4x"></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 aria-hidden="true" class="fas fa-folder-open"></i> Browse Files
                    </button>
                    <input type="file" id="files-input" name="files" multiple 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" id="format-help">💡 Supports many formats including PDF, Word, Excel, JSON, YAML, and more. <span id="format-details"></span></p>
            </div>

            <!-- PDF Storage Mode Selection -->
            <div class="ldr-form-group" style="margin-top: 1.5rem;">
                <label><strong>PDF Storage Option</strong></label>
                <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
                    Choose how to store uploaded PDF files:
                </p>

                <div class="ldr-storage-mode-options">
                    <!-- Text Only -->
                    <label class="ldr-storage-mode-option" data-mode="none">
                        <input type="radio" name="pdf_storage" value="none" {% if upload_pdf_storage == 'none' %}checked{% endif %}>
                        <div class="ldr-option-content">
                            <div class="ldr-option-header">
                                <i aria-hidden="true" class="fas fa-file-alt ldr-icon-secondary"></i>
                                <strong>Text Only</strong>
                                {% if upload_pdf_storage == 'none' %}<span class="ldr-badge ldr-badge-secondary">Default</span>{% endif %}
                            </div>
                            <p class="ldr-option-description">Only extracted text stored. Smallest database size.</p>
                        </div>
                    </label>

                    <!-- Database (Encrypted) -->
                    <label class="ldr-storage-mode-option" data-mode="database">
                        <input type="radio" name="pdf_storage" value="database" {% if upload_pdf_storage == 'database' %}checked{% endif %}>
                        <div class="ldr-option-content">
                            <div class="ldr-option-header">
                                <i aria-hidden="true" class="fas fa-database ldr-icon-success"></i>
                                <strong>Database (Encrypted)</strong>
                                {% if upload_pdf_storage == 'database' %}<span class="ldr-badge ldr-badge-success">Default</span>{% endif %}
                            </div>
                            <p class="ldr-option-description">PDFs stored encrypted in your database. Allows viewing/downloading later.</p>
                            <div class="ldr-option-warning">
                                <i aria-hidden="true" class="fas fa-exclamation-triangle"></i> Increases database size significantly
                            </div>
                            <div class="ldr-option-tip">
                                <i aria-hidden="true" class="fas fa-lightbulb"></i> Tip: Re-upload text-only documents with this option to add the PDF
                            </div>
                        </div>
                    </label>
                </div>
            </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" onclick="window.location.href='/library/collections/{{ collection_id }}'">
                    <i aria-hidden="true" class="fas fa-times"></i> Cancel
                </button>
                <button type="submit" class="ldr-btn-collections ldr-btn-collections-primary" style="font-size: 1.2rem; padding: 1rem 2rem; min-width: 200px;">
                    <i aria-hidden="true" class="fas fa-upload"></i> 🚀 Upload Files
                </button>
            </div>
        </form>
    </div>

    <!-- Instructions Section -->
    <div class="ldr-rag-section">
        <div class="ldr-section-header">
            <h2><i aria-hidden="true" class="fas fa-info-circle"></i> Upload Instructions</h2>
        </div>

        <div style="padding: 1rem;">
            <h3>📋 Supported File Types</h3>
            <p>Documents (PDF, DOCX, TXT, MD, RTF), Spreadsheets (CSV, XLSX, XLS),
               Data (JSON, YAML, XML, TOML), Presentations (PPT, PPTX), and more.</p>
            <p><small id="full-format-list">Loading supported formats...</small></p>

            <h3>💡 Tips</h3>
            <ul>
                <li>Upload multiple files at once using drag & drop</li>
                <li>Files will be automatically processed and indexed</li>
                <li>You can track processing progress on the collection details page</li>
                <li><strong>Upgrade text-only documents:</strong> Re-upload with "Database (Encrypted)" to add PDF viewing capability</li>
            </ul>
        </div>
    </div>
</div>

<!-- All JavaScript dependencies are already loaded in base template -->

<!-- Pass collection_id to JavaScript -->
<script>
    const COLLECTION_ID = "{{ collection_id }}";
</script>
<script defer src="/static/js/collection_upload.js"></script>
{% endblock %}