{% extends "base.html" %}

{% block title %}Research Library{% endblock %}

{% block content %}
<div class="library-container">
    <div class="library-header">
        <h1>Research Library</h1>
        <div class="header-actions">
            <button class="btn btn-secondary" onclick="showSyncModal()" title="Check if files exist and sync with filesystem">
                <i class="fas fa-sync"></i> Sync Library
            </button>
            <div class="btn-group">
                <button class="btn btn-success"
                        {% if not enable_pdf_storage %}
                        disabled
                        title="PDF storage is disabled. Click the storage mode button above to enable."
                        data-toggle="tooltip"
                        {% else %}
                        onclick="downloadAllNew()"
                        title="Download PDF files from all your research sources and save to library"
                        {% endif %}>
                    <i class="fas fa-file-pdf"></i> Get All Research PDFs
                </button>
                <button class="btn btn-info"
                        onclick="downloadAllAsText()"
                        title="Extract text from all research sources without saving PDF files">
                    <i class="fas fa-file-alt"></i> Text Only (from PDFs)
                </button>
            </div>
            <div class="library-stats">
                <span class="stat-item">
                    <i class="fas fa-file-pdf"></i>
                    <span id="total-pdfs">{{ stats.total_pdfs }}</span> PDFs
                </span>
                <span class="stat-item">
                    <i class="fas fa-hdd"></i>
                    <span id="total-size">{{ stats.total_size_mb|round(1) }}</span> MB
                </span>
                <span class="stat-item">
                    <i class="fas fa-folder"></i>
                    <span id="storage-path" title="{{ storage_path }}">{{ storage_path|truncate(30) }}</span>
                </span>
            </div>
        </div>
    </div>

    <!-- Library Status Bar -->
    <div class="library-status-bar">
        <div class="status-item">
            <span class="status-label">Storage Mode:</span>
            {% if shared_library %}
                <span class="badge badge-warning">
                    <i class="fas fa-users"></i> Shared Library
                </span>
            {% else %}
                <span class="badge badge-success">
                    <i class="fas fa-user-lock"></i> Private Library
                </span>
            {% endif %}
        </div>

        <div class="status-item">
            <span class="status-label">PDF Storage:</span>
            {% if pdf_storage_mode == 'database' %}
                <button class="btn btn-sm btn-success" onclick="showStorageModeModal()" title="Click to change storage mode">
                    <i class="fas fa-database"></i> Database (Encrypted)
                </button>
            {% elif pdf_storage_mode == 'filesystem' %}
                <button class="btn btn-sm btn-warning" onclick="showStorageModeModal()" title="Click to change storage mode">
                    <i class="fas fa-hdd"></i> Filesystem (Unencrypted)
                </button>
            {% else %}
                <button class="btn btn-sm btn-secondary" onclick="showStorageModeModal()" title="Click to change storage mode">
                    <i class="fas fa-file-alt"></i> Text Only
                </button>
            {% endif %}
        </div>

        <div class="status-item">
            <a href="/settings#research-library" class="btn btn-sm btn-outline-primary">
                <i class="fas fa-cog"></i> Configure Settings
            </a>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="filters-section">
        <div class="filter-row">
            <!-- Collection Filter -->
            <div class="filter-group">
                <label>Collection</label>
                <select id="filter-collection" class="form-control">
                    <option value="">All Collections</option>
                    {% for collection in collections %}
                    <option value="{{ collection.id }}" {% if selected_collection == collection.id %}selected{% endif %}>
                        {{ collection.name }}{% if collection.is_default %} (Default){% endif %} ({{ collection.document_count }})
                    </option>
                    {% endfor %}
                </select>
            </div>

            <!-- Domain Filter -->
            <div class="filter-group">
                <label>Domain</label>
                <select id="filter-domain" class="form-control">
                    <option value="">All Domains</option>
                    <option value="arxiv.org">arXiv</option>
                    <option value="pubmed">PubMed</option>
                    <option value="semanticscholar.org">Semantic Scholar</option>
                    <option value="other">Other Domains</option>
                    {% for domain in unique_domains %}
                    <option value="{{ domain }}">{{ domain }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Research Filter -->
            <div class="filter-group">
                <label>Research</label>
                <select id="filter-research" class="form-control">
                    <option value="">All Research</option>
                    {% for research in research_list %}
                    <option value="{{ research.id }}">{{ research.title or research.query[:50] }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Date Filter -->
            <div class="filter-group">
                <label>Downloaded</label>
                <select id="filter-date" class="form-control">
                    <option value="">All Time</option>
                    <option value="today">Today</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                </select>
            </div>

            <!-- Search -->
            <div class="filter-group flex-grow">
                <label>Search</label>
                <input type="text" id="search-documents" class="form-control"
                       placeholder="Search titles, authors, DOI...">
            </div>

            <!-- View Toggle -->
            <div class="filter-group">
                <label>&nbsp;</label>
                <div class="btn-group view-toggle">
                    <button class="btn btn-sm active" data-view="grid">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="btn btn-sm" data-view="list">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Documents Grid/List -->
    <div id="documents-container" class="documents-grid">
        {% for doc in documents %}
        <div class="document-card" data-domain="{{ doc.domain }}"
             data-research="{{ doc.research_id }}" data-doc-id="{{ doc.id }}">

            <!-- Card Header with badges -->
            <div class="card-header">
                {% if doc.is_arxiv %}
                    <span class="badge badge-arxiv">arXiv</span>
                {% elif doc.is_pubmed %}
                    <span class="badge badge-pubmed">PubMed</span>
                {% elif doc.file_type == 'pdf' %}
                    <i class="fas fa-file-pdf text-danger"></i>
                {% else %}
                    <i class="fas fa-file-alt"></i>
                {% endif %}
            </div>

            <!-- Card Body -->
            <div class="card-body" onclick="window.location.href='/library/document/{{ doc.id }}'">
                <!-- Large action buttons -->
                <div class="ldr-action-buttons" onclick="event.stopPropagation()">
                    {% if doc.has_pdf %}
                    <a href="/library/document/{{ doc.id }}/pdf" target="_blank" class="ldr-action-btn ldr-action-btn-pdf">
                        <i class="fas fa-file-pdf"></i> View PDF
                    </a>
                    {% endif %}
                    {% if doc.has_text_db %}
                    <a href="/library/document/{{ doc.id }}/txt" target="_blank" class="ldr-action-btn ldr-action-btn-txt">
                        <i class="fas fa-file-alt"></i> View Text
                    </a>
                    {% endif %}
                    {% if doc.has_rag_indexed %}
                    <a href="/library/document/{{ doc.id }}/chunks" class="ldr-action-btn ldr-action-btn-rag" title="{{ doc.rag_chunk_count }} chunks indexed">
                        <i class="fas fa-brain"></i> RAG Indexed
                    </a>
                    {% endif %}
                    {% if not doc.has_pdf and not doc.has_text_db %}
                    <div class="ldr-action-btn ldr-action-btn-none">
                        <i class="fas fa-exclamation-triangle"></i> Not Downloaded
                    </div>
                    {% endif %}
                </div>
                <h3 class="doc-title" title="{{ doc.document_title }}">
                    {{ doc.document_title or doc.file_name }}
                </h3>

                {% if doc.authors %}
                <p class="doc-authors">{{ doc.authors|join(', ')|truncate(50) }}</p>
                {% endif %}

                <div class="doc-metadata">
                    <span class="meta-item">
                        <i class="fas fa-calendar"></i>
                        <span class="download-date" data-date="{{ doc.downloaded_at }}">{{ doc.downloaded_at }}</span>
                    </span>
                    <span class="meta-item">
                        <i class="fas fa-file"></i>
                        {{ (doc.file_size / 1024 / 1024)|round(1) }} MB
                    </span>
                    {% if doc.doi %}
                    <span class="meta-item">
                        <i class="fas fa-fingerprint"></i>
                        DOI: {{ doc.doi|truncate(20) }}
                    </span>
                    {% endif %}
                </div>

                <!-- Research Info -->
                <div class="research-info">
                    <span class="research-link">
                        From: <a href="/results/{{ doc.research_id }}" onclick="event.stopPropagation()">
                            {{ doc.research_title|truncate(40) }}
                        </a>
                    </span>
                </div>
            </div>

            <!-- Card Footer -->
            <div class="card-footer">
                <div class="doc-tags">
                    {% if doc.domain_category %}
                    <span class="tag">{{ doc.domain_category }}</span>
                    {% endif %}
                    <span class="tag">{{ doc.domain|truncate(20) }}</span>
                </div>
                <div class="doc-actions" onclick="event.stopPropagation()">
                    {% if doc.has_pdf %}
                    <button class="btn-delete-blob" onclick="DeleteManager.deleteDocumentBlob('{{ doc.id }}', {onSuccess: () => location.reload()})"
                            title="Remove PDF only (keep text). Text content will be preserved for searching.">
                        <i class="fas fa-file-pdf"></i><i class="fas fa-times" style="font-size: 0.6em; margin-left: -2px;"></i>
                    </button>
                    {% endif %}
                    <button class="btn-delete-doc" onclick="DeleteManager.deleteDocument('{{ doc.id }}', {onSuccess: () => location.reload()})"
                            title="Permanently delete this document, including PDF and text content. This cannot be undone.">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Empty State -->
    {% if not documents %}
    <div class="empty-state">
        <i class="fas fa-book fa-3x"></i>
        <h3>No documents in your library yet</h3>
        {% if not enable_pdf_storage %}
        <div class="empty-state-info">
            <p><strong>PDF storage is set to Text Only mode.</strong></p>
            <p>Choose how to store your research PDFs:</p>
            <ul style="text-align: left; margin: 10px auto; max-width: 500px;">
                <li><strong>Database (Recommended):</strong> PDFs encrypted in your personal database. Secure, portable, isolated per-user.</li>
                <li><strong>Filesystem:</strong> Faster for large files, but stored unencrypted on disk.</li>
                <li><strong>Text Only:</strong> Current mode - only extracted text is stored.</li>
            </ul>
            <p>Text content is always stored encrypted in your personal database.</p>
        </div>
        <div class="empty-state-actions">
            <button class="btn btn-primary" onclick="window.location.href='/settings#research-library'">
                <i class="fas fa-cog"></i> Configure Library Settings
            </button>
            <button class="btn btn-secondary" onclick="window.location.href='/library/download-manager'">
                <i class="fas fa-download"></i> Download Manager
            </button>
        </div>
        {% else %}
        <p>Start downloading PDFs from your research to build your library</p>
        <button class="btn btn-primary" onclick="window.location.href='/library/download-manager'">
            <i class="fas fa-download"></i> Go to Download Manager
        </button>
        {% endif %}
    </div>
    {% endif %}
</div>

<!-- PDF Viewer Modal -->
<div id="pdf-modal" class="pdf-modal">
    <div class="pdf-modal-content">
        <div class="pdf-modal-header">
            <h2 id="pdf-title" class="pdf-title">PDF Viewer</h2>
            <div class="pdf-header-actions">
                <button class="pdf-action-btn"
                        {% if enable_pdf_storage %}
                        onclick="downloadCurrentPDF()"
                        title="Download PDF"
                        {% else %}
                        disabled
                        title="PDF downloads are disabled. Enable in Settings → Research Library"
                        data-toggle="tooltip"
                        {% endif %}>
                    <i class="fas fa-download"></i>
                </button>
                <button class="pdf-action-btn" onclick="openPDFInNewTab()" title="Open in new tab">
                    <i class="fas fa-external-link-alt"></i>
                </button>
                <button class="pdf-close-btn" onclick="closePDFModal()" title="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="pdf-modal-body">
            <iframe id="pdf-viewer" class="pdf-viewer-frame"></iframe>
        </div>
    </div>
</div>

<!-- Text Viewer Modal -->
<div id="text-modal" class="pdf-modal">
    <div class="pdf-modal-content">
        <div class="pdf-modal-header">
            <h2 id="text-title" class="pdf-title">Text Viewer</h2>
            <div class="pdf-header-actions">
                <button class="pdf-action-btn" onclick="copyTextContent()" title="Copy to clipboard">
                    <i class="fas fa-copy"></i>
                </button>
                <button class="pdf-action-btn" onclick="downloadTextContent()" title="Download as .txt">
                    <i class="fas fa-download"></i>
                </button>
                <button class="pdf-close-btn" onclick="closeTextModal()" title="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="pdf-modal-body">
            <div id="text-viewer" class="text-viewer-content"></div>
        </div>
    </div>
</div>

<!-- Download Progress Modal -->
<div id="download-progress-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Download Progress</h2>
        </div>
        <div class="modal-body">
            <div class="overall-progress">
                <div class="progress-bar">
                    <div class="progress-fill" id="overall-progress" style="width: 0%"></div>
                </div>
                <p><span id="current-count">0</span> / <span id="total-count">0</span> files</p>
            </div>
            <div class="download-log" id="download-log">
                <!-- Download entries will be added here -->
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeProgressModal()">Close</button>
            <button class="btn btn-danger" onclick="cancelDownloads()">Cancel</button>
        </div>
    </div>
</div>

{% include 'components/storage_mode_modal.html' %}

<!-- Sync Library Modal -->
<div id="sync-library-modal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 600px;">
        <div class="modal-header">
            <h2><i class="fas fa-sync"></i> Sync Library with Filesystem</h2>
            <button class="close" onclick="closeSyncModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="sync-explanation">
                <h3>What does Library Sync do?</h3>
                <p>The sync feature ensures your database stays consistent with the actual PDF files on your disk. It performs a comprehensive check to:</p>
                <ul>
                    <li><strong>Verify file existence:</strong> Checks if all PDFs referenced in the database still exist on disk</li>
                    <li><strong>Update file status:</strong> Marks missing files so they can be re-downloaded if needed</li>
                    <li><strong>Clean up database:</strong> Removes references to permanently deleted files</li>
                    <li><strong>Detect external changes:</strong> Finds files that were moved, renamed, or deleted outside the app</li>
                </ul>

                <h3>When should you use this?</h3>
                <ul>
                    <li>After manually deleting PDF files from the storage folder</li>
                    <li>After moving the library folder to a different location</li>
                    <li>If you're experiencing "file not found" errors when opening PDFs</li>
                    <li>After a system crash or unexpected shutdown</li>
                    <li>Periodically to ensure database integrity</li>
                </ul>

                <div class="sync-warning" style="background: var(--warning-bg, #3d3313); padding: 10px; border-radius: 5px; margin-top: 15px; border: 1px solid var(--warning-border, #5a4a1a);">
                    <i class="fas fa-info-circle" style="color: var(--warning-text, #ffc107);"></i>
                    <strong>Note:</strong> This operation only checks files - it doesn't modify or delete any PDFs. Missing files can be re-downloaded using the Download Manager.
                </div>
            </div>

            <div id="sync-progress" style="display: none; margin-top: 20px;">
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 0%"></div>
                </div>
                <p id="sync-status">Checking files...</p>
            </div>

            <div id="sync-results" style="display: none; margin-top: 20px;">
                <h3>Sync Results</h3>
                <div class="sync-stats" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;">
                    <div style="background: var(--success-bg, #1a3a1f); padding: 10px; border-radius: 5px; border: 1px solid var(--success-border, #28a745);">
                        <i class="fas fa-check-circle" style="color: var(--success-text, #28a745);"></i>
                        <strong>Files Found:</strong> <span id="files-found">0</span>
                    </div>
                    <div style="background: var(--danger-bg, #3a1a1f); padding: 10px; border-radius: 5px; border: 1px solid var(--danger-border, #dc3545);">
                        <i class="fas fa-exclamation-circle" style="color: var(--danger-text, #dc3545);"></i>
                        <strong>Files Missing:</strong> <span id="files-missing">0</span>
                    </div>
                </div>
                <div id="missing-files-action" style="display: none; margin-top: 15px; padding: 10px; background: var(--info-bg, #1a2a3a); border-radius: 5px; border: 1px solid var(--info-border, #17a2b8);">
                    <p><strong>Missing files detected!</strong> These files have been marked in the database and can be re-downloaded.</p>
                    <button class="btn btn-primary" onclick="goToDownloadManager()">Go to Download Manager</button>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button id="sync-start-btn" class="btn btn-primary" onclick="performSync()">
                <i class="fas fa-play"></i> Start Sync
            </button>
            <button id="sync-close-btn" class="btn btn-secondary" onclick="closeSyncModal()">Close</button>
        </div>
    </div>
</div>

<style>
.library-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Library Status Bar */
.library-status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 15px 20px;
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    margin-bottom: 20px;
}

.library-status-bar .status-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.library-status-bar .status-label {
    font-weight: 600;
    color: var(--text-secondary, #6c757d);
    font-size: 14px;
}

.library-status-bar .badge {
    padding: 6px 12px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
}

.library-status-bar .badge-button {
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.library-status-bar .badge-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

.library-status-bar .badge-button:active {
    transform: translateY(0);
}

.library-status-bar .badge-secondary {
    background: #6c757d;
    color: white;
}

.library-status-bar .badge-success {
    background: #28a745;
    color: white;
}

.library-status-bar .badge-warning {
    background: #ff9800;
    color: white;
}

.library-status-bar .status-hint {
    color: var(--info-color, #0dcaf0);
    font-size: 14px;
    cursor: help;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-group {
    display: flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: 4px 0 0 4px;
}

.btn-group .btn:last-child {
    border-radius: 0 4px 4px 0;
}

.btn-info {
    background: #17a2b8;
    color: white;
    border: 1px solid #17a2b8;
}

.btn-info:hover {
    background: #138496;
    border-color: #117a8b;
}

.library-stats {
    display: flex;
    gap: 15px;
    padding: 10px;
    background: var(--card-bg, #2a2a2a);
    border-radius: 8px;
    border: 1px solid var(--border-color, #333);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.filters-section {
    background: var(--card-bg, #2a2a2a);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #333);
}

.filter-row {
    display: flex;
    gap: 15px;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #999);
}

/* Fix form controls for dark theme */
.filter-group .form-control {
    background: var(--input-bg, #1a1a1a);
    color: var(--text-primary, #e4e4e4);
    border: 1px solid var(--border-color, #333);
}

.filter-group .form-control:focus {
    background: var(--input-bg, #1a1a1a);
    color: var(--text-primary, #e4e4e4);
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.filter-group select.form-control option {
    background: var(--input-bg, #1a1a1a);
    color: var(--text-primary, #e4e4e4);
}

/* View toggle buttons */
.view-toggle button {
    background: var(--input-bg, #1a1a1a);
    color: var(--text-secondary, #999);
    border: 1px solid var(--border-color, #333);
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle button:hover {
    background: var(--hover-bg, #2a2a2a);
    color: var(--text-primary, #e4e4e4);
}

.view-toggle button.active {
    background: var(--primary-color, #007bff);
    color: white;
    border-color: var(--primary-color, #007bff);
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.document-card {
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    transition: all 0.2s;
    cursor: pointer;
}

.document-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.badge-arxiv {
    background: #b31b1b;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.badge-pubmed {
    background: #0066cc;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.card-body {
    padding: 15px;
    position: relative;
}

/* Large action buttons */
.ldr-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.ldr-action-btn {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    flex: 1;
    min-width: 120px;
    justify-content: center;
}

.ldr-action-btn-pdf {
    background: #dc3545;
    color: white;
}

.ldr-action-btn-pdf:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    color: white;
}

.ldr-action-btn-txt {
    background: #17a2b8;
    color: white;
}

.ldr-action-btn-txt:hover {
    background: #138496;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    color: white;
}

.ldr-action-btn-rag {
    background: #6f42c1;
    color: white;
    cursor: default;
}

.ldr-action-btn-none {
    background: #6c757d;
    color: white;
    cursor: default;
    opacity: 0.7;
}

.doc-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.doc-authors {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 10px;
}

.doc-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.file-location {
    margin-top: 10px;
    padding: 10px;
    background: var(--bg-secondary, #1a1a1a);
    border-radius: 4px;
    font-size: 12px;
}

.file-location summary {
    cursor: pointer;
    user-select: none;
}

.location-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.location-info code {
    flex: 1;
    padding: 5px;
    background: var(--bg-primary, #1a1a1a);
    border-radius: 4px;
    overflow-x: auto;
    color: var(--text-primary, #e4e4e4);
}

.research-info {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
}

.card-footer {
    padding: 10px 15px;
    background: var(--bg-secondary, #1a1a1a);
    border-top: 1px solid var(--border-color, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.doc-actions {
    display: flex;
    gap: 8px;
}

.doc-actions button {
    background: transparent;
    border: 1px solid var(--border-color, #444);
    color: var(--text-secondary, #999);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.doc-actions button:hover {
    background: var(--bg-tertiary, #333);
    color: var(--text-primary, #e4e4e4);
}

.doc-actions .btn-delete-doc:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    color: #dc3545;
}

.doc-actions .btn-delete-blob:hover {
    background: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
    color: #ffc107;
}

.tag {
    padding: 2px 8px;
    background: var(--bg-tertiary, #333);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-secondary, #999);
}

/* List View */
.documents-list .document-card {
    display: flex;
    align-items: center;
    padding: 15px;
}

.documents-list .card-header,
.documents-list .card-body,
.documents-list .card-footer {
    border: none;
    padding: 0;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state-info {
    max-width: 600px;
    margin: 20px auto;
    text-align: left;
    background: var(--card-bg, #2a2a2a);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
    color: var(--text-primary, #e4e4e4);
}

.empty-state-info p {
    margin: 10px 0;
    line-height: 1.6;
}

.empty-state-info ol {
    margin: 15px 0;
    padding-left: 25px;
}

.empty-state-info ol li {
    margin: 8px 0;
    line-height: 1.6;
}

.empty-state-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 20px;
    background: var(--bg-secondary, #1a1a1a);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color, #333);
}

.progress-fill {
    height: 100%;
    background: var(--primary-color, #007bff);
    transition: width 0.3s ease;
}

/* Download log */
.download-log {
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
}

.download-entry {
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 4px 0;
    background: var(--card-bg, #2a2a2a);
    border-radius: 4px;
    border: 1px solid var(--border-color, #333);
}

.download-entry.success {
    border-left: 3px solid #28a745;
}

.download-entry.failed {
    border-left: 3px solid #dc3545;
}

.download-entry.skipped {
    border-left: 3px solid #ffc107;
}

.modal-content {
    background: var(--card-bg, #2a2a2a);
    margin: 2% auto;
    padding: 20px;
    width: 90%;
    max-width: 1200px;
    border-radius: 8px;
    color: var(--text-primary, #e4e4e4);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header .close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary, #999);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-header .close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e4e4e4);
}

/* Enhanced PDF Viewer Modal */
.pdf-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pdf-modal-content {
    background: var(--bg-primary, #1a1a1a);
    margin: 20px auto;
    width: 95%;
    height: calc(100vh - 40px);
    max-width: 1600px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pdf-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-secondary, #2a2a2a);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pdf-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #e4e4e4);
    margin: 0;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdf-action-btn,
.pdf-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #a0a0a0);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.pdf-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e4e4e4);
}

.pdf-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.pdf-modal-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
    background: #525252;
    border-radius: 0 0 12px 12px;
}

.pdf-viewer-frame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 12px 12px;
}

/* Text viewer styles */
.text-viewer-content {
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-y: auto;
    background: var(--bg-primary, #1a1a1a);
    color: var(--text-primary, #e4e4e4);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 0 0 12px 12px;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .pdf-modal-content {
        background: #1a1a1a;
    }

    .pdf-modal-header {
        background: #2a2a2a;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .pdf-modal-content {
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .pdf-modal-header {
        border-radius: 0;
    }

    .pdf-modal-body,
    .pdf-viewer-frame {
        border-radius: 0;
    }
}
</style>

<script>
// Store current PDF data globally
let currentPDFData = null;

// Route to appropriate viewer based on availability
function openDocument(docId, hasPdf, hasTextDb) {
    // Prefer PDF if available, otherwise fall back to text
    if (hasPdf) {
        openPDF(docId);
    } else if (hasTextDb) {
        openText(docId);
    } else {
        console.error('No content available for document', docId);
        alert('No content available for this document');
    }
}

// Open PDF in modal
function openPDF(docId) {
    fetch(`/library/api/document/${docId}/pdf-url`)
        .then(res => res.json())
        .then(data => {
            currentPDFData = data;
            document.getElementById('pdf-viewer').src = data.url;
            document.getElementById('pdf-title').textContent = data.title;
            document.getElementById('pdf-modal').style.display = 'block';

            // Add escape key listener
            document.addEventListener('keydown', handleEscapeKey);
        });
}

// Close PDF modal
function closePDFModal() {
    document.getElementById('pdf-modal').style.display = 'none';
    document.getElementById('pdf-viewer').src = '';
    currentPDFData = null;

    // Remove escape key listener
    document.removeEventListener('keydown', handleEscapeKey);
}

// Handle escape key
function handleEscapeKey(e) {
    if (e.key === 'Escape') {
        closePDFModal();
    }
}

// Download current PDF
function downloadCurrentPDF() {
    if (currentPDFData && currentPDFData.url) {
        const link = document.createElement('a');
        link.href = currentPDFData.url;
        link.download = currentPDFData.title + '.pdf';
        link.click();
    }
}

// Open PDF in new tab
function openPDFInNewTab() {
    if (currentPDFData && currentPDFData.url) {
        window.open(currentPDFData.url, '_blank');
    }
}

// Close modal when clicking outside
document.getElementById('pdf-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closePDFModal();
    }
});

// Text viewer functions
let currentTextData = null;

function openText(docId) {
    fetch(`/library/api/document/${docId}/text`)
        .then(res => res.json())
        .then(data => {
            currentTextData = data;
            document.getElementById('text-viewer').textContent = data.text_content;
            document.getElementById('text-title').textContent = data.title;
            document.getElementById('text-modal').style.display = 'block';

            // Add escape key listener
            document.addEventListener('keydown', handleTextEscapeKey);
        })
        .catch(err => {
            console.error('Error loading text:', err);
            alert('Failed to load text content');
        });
}

function closeTextModal() {
    document.getElementById('text-modal').style.display = 'none';
    document.getElementById('text-viewer').textContent = '';
    currentTextData = null;

    // Remove escape key listener
    document.removeEventListener('keydown', handleTextEscapeKey);
}

function handleTextEscapeKey(e) {
    if (e.key === 'Escape') {
        closeTextModal();
    }
}

function copyTextContent() {
    if (currentTextData && currentTextData.text_content) {
        navigator.clipboard.writeText(currentTextData.text_content)
            .then(() => {
                // Show toast notification
                const btn = event.target.closest('button');
                const originalHTML = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-check"></i>';
                setTimeout(() => {
                    btn.innerHTML = originalHTML;
                }, 2000);
            })
            .catch(err => {
                console.error('Failed to copy:', err);
                alert('Failed to copy to clipboard');
            });
    }
}

function downloadTextContent() {
    if (currentTextData && currentTextData.text_content) {
        const blob = new Blob([currentTextData.text_content], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = (currentTextData.title || 'document') + '.txt';
        link.click();
        URL.revokeObjectURL(url);
    }
}

// Close text modal when clicking outside (wait for DOM to load)
document.addEventListener('DOMContentLoaded', function() {
    const textModal = document.getElementById('text-modal');
    if (textModal) {
        textModal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeTextModal();
            }
        });
    }
});

// Copy path to clipboard
function copyPath(path) {
    navigator.clipboard.writeText(path);
    // Show toast notification
}

// Filter documents
document.getElementById('filter-collection').addEventListener('change', function() {
    // Collection filter requires server-side reload
    const collection = this.value;
    const urlParams = new URLSearchParams(window.location.search);
    if (collection) {
        urlParams.set('collection', collection);
    } else {
        urlParams.delete('collection');
    }
    window.location.search = urlParams.toString();
});

document.getElementById('filter-domain').addEventListener('change', filterDocuments);
document.getElementById('filter-research').addEventListener('change', filterDocuments);
document.getElementById('filter-date').addEventListener('change', filterDocuments);
document.getElementById('search-documents').addEventListener('input', filterDocuments);

function filterDocuments() {
    const domain = document.getElementById('filter-domain').value;
    const research = document.getElementById('filter-research').value;
    const search = document.getElementById('search-documents').value.toLowerCase();

    document.querySelectorAll('.document-card').forEach(card => {
        let show = true;

        if (domain && card.dataset.domain !== domain) {
            show = false;
        }
        if (research && card.dataset.research !== research) {
            show = false;
        }
        if (search && !card.textContent.toLowerCase().includes(search)) {
            show = false;
        }

        card.style.display = show ? '' : 'none';
    });
}

// Current download controller for cancellation
let currentDownloadController = null;

// Download all as text for RAG
async function downloadAllAsText() {
    const btn = event.target.closest('button');
    const originalContent = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Extracting...';
    btn.disabled = true;

    try {
        // Get CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

        // Show progress modal
        showDownloadProgressModal();
        document.querySelector('#download-progress-modal h2').textContent = 'Text Extraction to Database';

        // Reset progress
        document.getElementById('overall-progress').style.width = '0%';
        document.getElementById('current-count').textContent = '0';
        document.getElementById('total-count').textContent = '0';
        document.getElementById('download-log').innerHTML = '';

        // Create abort controller for cancellation
        currentDownloadController = new AbortController();

        // Start streaming text extraction
        const response = await fetch('/library/api/download-all-text', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({}),
            signal: currentDownloadController.signal
        });

        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        while (true) {
            const {done, value} = await reader.read();
            if (done) break;

            const chunk = decoder.decode(value);
            const lines = chunk.split('\n');

            for (const line of lines) {
                if (line.startsWith('data: ')) {
                    const data = JSON.parse(line.slice(6));
                    updateTextExtractionProgress(data);

                    // Check if extraction is complete
                    if (data.complete) {
                        currentDownloadController = null;
                        setTimeout(() => {
                            closeProgressModal();
                            const message = saveFiles
                                ? `Text extraction complete! Extracted ${data.total} documents to encrypted database and txt/ folder for RAG.`
                                : `Text extraction complete! Extracted ${data.total} documents to encrypted database only.`;
                            alert(message);
                        }, 2000);
                    }
                }
            }
        }

    } catch (error) {
        if (error.name === 'AbortError') {
            console.log('Text extraction cancelled by user');
            const log = document.getElementById('download-log');
            const entry = document.createElement('div');
            entry.className = 'download-entry cancelled';
            entry.innerHTML = '<strong>Text extraction cancelled by user</strong>';
            log.appendChild(entry);
        } else {
            console.error('Failed to start text extraction:', error);
            alert('Failed to start text extraction. Please try again.');
        }
        btn.innerHTML = originalContent;
        btn.disabled = false;
    } finally {
        btn.innerHTML = originalContent;
        btn.disabled = false;
        currentDownloadController = null;
    }
}

// Update text extraction progress
function updateTextExtractionProgress(data) {
    const progressBar = document.getElementById('overall-progress');
    const currentCount = document.getElementById('current-count');
    const totalCount = document.getElementById('total-count');
    const log = document.getElementById('download-log');

    progressBar.style.width = `${data.progress}%`;
    currentCount.textContent = data.current;
    totalCount.textContent = data.total;

    if (data.file) {
        const entry = document.createElement('div');
        entry.className = `download-entry ${data.status}`;

        let statusIcon = '';
        let statusText = '';

        if (data.status === 'success') {
            statusIcon = '✓';
            statusText = 'Text extracted';
        } else if (data.status === 'failed') {
            statusIcon = '✗';
            statusText = data.error || 'Extraction failed';
        }

        entry.innerHTML = `
            <span class="status-icon">${statusIcon}</span>
            <div class="entry-details">
                <strong>${data.file}</strong>
                <span class="entry-url" style="color: #888; font-size: 0.85em; display: block; word-break: break-all;">${data.url}</span>
                <span class="status-text">${statusText}</span>
            </div>
        `;

        log.appendChild(entry);
        log.scrollTop = log.scrollHeight;
    }
}

// Download all new articles with progress
async function downloadAllNew() {
    const btn = event.target.closest('button');
    const originalContent = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Preparing...';
    btn.disabled = true;

    try {
        // Get CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

        // First, queue all undownloaded articles to get the list
        const queueResponse = await fetch('/library/api/queue-all-undownloaded', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            }
        });

        if (!queueResponse.ok) {
            throw new Error(`HTTP error! status: ${queueResponse.status}`);
        }

        const queueResult = await queueResponse.json();

        if (queueResult.queued === 0) {
            alert('No new articles to download. All available articles have already been downloaded.');
            btn.innerHTML = originalContent;
            btn.disabled = false;
            return;
        }

        // Show progress modal
        showDownloadProgressModal();

        // Reset progress
        document.getElementById('overall-progress').style.width = '0%';
        document.getElementById('current-count').textContent = '0';
        document.getElementById('total-count').textContent = queueResult.queued;
        document.getElementById('download-log').innerHTML = '';

        // Start the bulk download with the research IDs
        btn.innerHTML = originalContent;
        btn.disabled = false;

        // Create abort controller for cancellation
        currentDownloadController = new AbortController();

        // Start streaming download
        const downloadResponse = await fetch('/library/api/download-bulk', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({research_ids: queueResult.research_ids || []}),
            signal: currentDownloadController.signal
        });

        const reader = downloadResponse.body.getReader();
        const decoder = new TextDecoder();

        while (true) {
            const {done, value} = await reader.read();
            if (done) break;

            const chunk = decoder.decode(value);
            const lines = chunk.split('\n');

            for (const line of lines) {
                if (line.startsWith('data: ')) {
                    const data = JSON.parse(line.slice(6));
                    updateDownloadProgress(data);

                    // Check if download is complete
                    if (data.complete) {
                        currentDownloadController = null;
                        setTimeout(() => {
                            closeProgressModal();
                            location.reload();
                        }, 2000);
                    }
                }
            }
        }

    } catch (error) {
        if (error.name === 'AbortError') {
            console.log('Download cancelled by user');
            const log = document.getElementById('download-log');
            const entry = document.createElement('div');
            entry.className = 'download-entry cancelled';
            entry.innerHTML = '<strong>Download cancelled by user</strong>';
            log.appendChild(entry);
        } else {
            console.error('Failed to start downloads:', error);
            alert('Failed to start downloads. Please try again.');
        }
        btn.innerHTML = originalContent;
        btn.disabled = false;
    } finally {
        currentDownloadController = null;
    }
}

// Show download progress modal
function showDownloadProgressModal() {
    document.getElementById('download-progress-modal').style.display = 'block';
}

// Update download progress
function updateDownloadProgress(data) {
    const progressBar = document.getElementById('overall-progress');
    const currentCount = document.getElementById('current-count');
    const totalCount = document.getElementById('total-count');
    const log = document.getElementById('download-log');

    // Fix negative total count
    const actualTotal = Math.abs(data.total);

    progressBar.style.width = `${data.progress}%`;
    currentCount.textContent = data.current;
    totalCount.textContent = actualTotal;

    if (data.file) {
        const entry = document.createElement('div');
        entry.className = `download-entry ${data.status}`;

        let statusIcon = '';
        let statusText = '';

        if (data.status === 'success') {
            statusIcon = '✓';
            statusText = 'Downloaded';
        } else if (data.status === 'skipped') {
            statusIcon = '⊘';
            // Use the error field which contains the skip reason
            statusText = data.error || data.skip_reason || 'Skipped';
        } else if (data.status === 'failed') {
            statusIcon = '✗';
            statusText = data.error || data.skip_reason || 'Failed';
        }

        entry.innerHTML = `
            <span class="status-icon">${statusIcon}</span>
            <div class="entry-details">
                <strong>${data.file}</strong>
                <span class="status-text">${statusText}</span>
            </div>
        `;

        log.appendChild(entry);
        log.scrollTop = log.scrollHeight;
    }
}

// Close progress modal
function closeProgressModal() {
    document.getElementById('download-progress-modal').style.display = 'none';
}

// Cancel downloads
function cancelDownloads() {
    if (currentDownloadController) {
        currentDownloadController.abort();
        currentDownloadController = null;

        // Update UI to show cancellation
        const progressBar = document.getElementById('overall-progress');
        progressBar.style.backgroundColor = '#f44336';

        // Close modal after a delay
        setTimeout(() => {
            closeProgressModal();
            location.reload();
        }, 1500);
    } else {
        // If no active download, just close modal
        closeProgressModal();
    }
}

// Show sync modal
function showSyncModal() {
    document.getElementById('sync-library-modal').style.display = 'block';
    // Reset modal state
    document.getElementById('sync-progress').style.display = 'none';
    document.getElementById('sync-results').style.display = 'none';
    document.querySelector('.sync-explanation').style.display = 'block';
    document.getElementById('sync-start-btn').style.display = 'inline-block';
    document.getElementById('sync-start-btn').disabled = false;
    document.getElementById('sync-start-btn').innerHTML = '<i class="fas fa-play"></i> Start Sync';
}

// Close sync modal
function closeSyncModal() {
    document.getElementById('sync-library-modal').style.display = 'none';
}

// Go to download manager
function goToDownloadManager() {
    window.location.href = '/library/download-manager';
}

// Perform the actual sync
async function performSync() {
    const btn = document.getElementById('sync-start-btn');
    const originalContent = btn.innerHTML;

    // Update UI to show progress
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Syncing...';
    btn.disabled = true;
    document.querySelector('.sync-explanation').style.display = 'none';
    document.getElementById('sync-progress').style.display = 'block';
    document.getElementById('sync-status').textContent = 'Checking files in your library...';

    try {
        // Get CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const response = await fetch('/library/api/sync-library', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const stats = await response.json();

        // Show results
        document.getElementById('sync-progress').style.display = 'none';
        document.getElementById('sync-results').style.display = 'block';
        document.getElementById('files-found').textContent = stats.files_found;
        document.getElementById('files-missing').textContent = stats.files_missing;

        // Show action for missing files if any
        if (stats.files_missing > 0) {
            document.getElementById('missing-files-action').style.display = 'block';
        } else {
            document.getElementById('missing-files-action').style.display = 'none';
        }

        // Hide start button, only show close
        btn.style.display = 'none';

        // Update the library stats if sync completed successfully
        if (stats.files_found >= 0) {
            // Optionally reload to refresh the document list
            setTimeout(() => {
                if (stats.files_missing === 0) {
                    location.reload();
                }
            }, 2000);
        }

    } catch (error) {
        console.error('Sync failed:', error);
        document.getElementById('sync-progress').style.display = 'none';
        document.getElementById('sync-status').textContent = 'Sync failed. Please try again.';
        alert('Failed to sync library. Please check your connection and try again.');

        // Reset button
        btn.innerHTML = originalContent;
        btn.disabled = false;
        document.querySelector('.sync-explanation').style.display = 'block';
    }
}

// Format dates on page load
document.addEventListener('DOMContentLoaded', function() {
    // Initialize date formatting
    document.querySelectorAll('.download-date').forEach(span => {
        const dateStr = span.dataset.date;
        if (dateStr) {
            const date = new Date(dateStr);
            if (!isNaN(date)) {
                span.textContent = date.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric'
                });
            }
        }
    });
});

// View toggle
document.querySelectorAll('.view-toggle button').forEach(btn => {
    btn.addEventListener('click', () => {
        const view = btn.dataset.view;
        const container = document.getElementById('documents-container');

        document.querySelectorAll('.view-toggle button').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        if (view === 'list') {
            container.classList.remove('documents-grid');
            container.classList.add('documents-list');
        } else {
            container.classList.remove('documents-list');
            container.classList.add('documents-grid');
        }
    });
});
</script>

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

<!-- Deletion JS Module -->
<script src="/static/js/deletion/confirmation_modal.js"></script>
<script src="/static/js/deletion/delete_manager.js"></script>
{% endblock %}