{% extends "base.html" %}

{% block title %}Download Manager{% endblock %}

{% block content %}
<div class="ldr-download-manager-container">
    <div class="ldr-manager-header">
        <h1>Download Manager</h1>
        <div class="ldr-header-actions">
            <div class="ldr-btn-group" style="margin-right: 15px;">
                <button class="btn btn-success" onclick="downloadAllNew()"
                        {% if not enable_pdf_storage %}
                        disabled
                        title="PDF storage is disabled. Click the storage mode button to enable."
                        {% else %}
                        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="ldr-collection-selector" style="margin: 0 15px;">
                <label for="target-collection" style="font-size: 0.9em; color: var(--text-secondary, #999); margin-right: 8px;">
                    <i class="fas fa-folder"></i> Target Collection:
                </label>
                <select id="target-collection" class="form-control" style="width: 200px; display: inline-block;">
                    <option value="">Loading collections...</option>
                </select>
            </div>
            <div class="ldr-btn-group ldr-download-buttons">
                <button class="btn btn-success" id="download-pdfs" disabled
                        {% if not enable_pdf_storage %}
                        title="PDF storage is disabled. Click the storage mode button to enable."
                        {% else %}
                        title="Download PDF files and save to library"
                        {% endif %}>
                    <i class="fas fa-file-pdf"></i> Get PDFs (<span class="ldr-selected-count-pdf">0</span>)
                </button>
                <button class="btn btn-info" id="download-text-db" disabled
                        title="Extract text without saving PDF files">
                    <i class="fas fa-file-alt"></i> Text Only (<span class="ldr-selected-count-text-db">0</span>)
                </button>
            </div>
        </div>
    </div>

    <!-- Library Storage Settings Info -->
    <div class="ldr-library-settings-info">
        <div class="ldr-info-banner">
            <div class="ldr-info-icon">
                <i class="fas fa-info-circle"></i>
            </div>
            <div class="ldr-info-content">
                <h4>Library Storage Settings</h4>
                {% if pdf_storage_mode == 'database' %}
                <button class="ldr-storage-mode-btn ldr-info-message" onclick="showStorageModeModal()" title="Click to change storage mode">
                    <i class="fas fa-database"></i>
                    <strong>PDF Storage: Encrypted Database</strong> - PDFs encrypted in your personal database. Portable, isolated per-user.
                    <i class="fas fa-pen" style="margin-left: 8px; opacity: 0.6; font-size: 0.85em;"></i>
                </button>
                {% elif pdf_storage_mode == 'filesystem' %}
                <button class="ldr-storage-mode-btn ldr-warning-message" onclick="showStorageModeModal()" title="Click to change storage mode">
                    <i class="fas fa-hdd"></i>
                    <strong>PDF Storage: Filesystem</strong> - PDFs saved unencrypted to disk. Faster for large files.
                    <i class="fas fa-pen" style="margin-left: 8px; opacity: 0.6; font-size: 0.85em;"></i>
                </button>
                {% else %}
                <button class="ldr-storage-mode-btn ldr-warning-message" onclick="showStorageModeModal()" title="Click to change storage mode">
                    <i class="fas fa-file-alt"></i>
                    <strong>PDF Storage: Text Only</strong> - Only extracted text stored. Re-download PDFs when needed.
                    <i class="fas fa-pen" style="margin-left: 8px; opacity: 0.6; font-size: 0.85em;"></i>
                </button>
                {% endif %}

                <p class="ldr-info-message">
                    <i class="fas fa-lock"></i>
                    Text content is always stored in the encrypted database.
                </p>

                {% if shared_library %}
                <p class="ldr-warning-message">
                    <i class="fas fa-users"></i>
                    <strong>Shared Library Mode:</strong> All users share the same library directory.
                </p>
                {% endif %}

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

    <!-- Summary Stats -->
    <div class="ldr-summary-stats">
        <div class="ldr-stat-card">
            <h3>{{ total_researches }}</h3>
            <p>Total Research Sessions</p>
        </div>
        <div class="ldr-stat-card">
            <h3>{{ total_resources }}</h3>
            <p>Total Resources</p>
        </div>
        <div class="ldr-stat-card">
            <h3>{{ already_downloaded }}</h3>
            <p>Already Downloaded</p>
        </div>
        <div class="ldr-stat-card">
            <h3>{{ available_to_download }}</h3>
            <p>Available to Download</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="ldr-filters-section">
        <div class="ldr-filter-row">
            <div class="ldr-filter-group">
                <label>Research Mode</label>
                <select id="filter-mode" class="form-control">
                    <option value="">All Modes</option>
                    <option value="quick">Quick</option>
                    <option value="detailed">Detailed</option>
                </select>
            </div>

            <div class="ldr-filter-group ldr-date-range">
                <label>Date Range</label>
                <div class="ldr-date-inputs">
                    <input type="date" id="filter-from" class="form-control" placeholder="From">
                    <span class="ldr-date-separator">to</span>
                    <input type="date" id="filter-to" class="form-control" placeholder="To">
                </div>
            </div>

            <div class="ldr-filter-group">
                <label>Rating</label>
                <select id="filter-rating" class="form-control">
                    <option value="">All Ratings</option>
                    <option value="5">⭐⭐⭐⭐⭐ 5 Stars</option>
                    <option value="4">⭐⭐⭐⭐ 4+ Stars</option>
                    <option value="3">⭐⭐⭐ 3+ Stars</option>
                </select>
            </div>

            <div class="ldr-filter-group">
                <label>PDF Status</label>
                <select id="filter-pdfs" class="form-control">
                    <option value="">All Research</option>
                    <option value="yes">Has PDFs</option>
                    <option value="no">No PDFs</option>
                </select>
            </div>

            <div class="ldr-filter-group ldr-search-group">
                <label>Search</label>
                <div class="ldr-search-wrapper">
                    <i class="fas fa-search"></i>
                    <input type="text" id="search-research" class="form-control"
                           placeholder="Search titles or queries...">
                </div>
            </div>
        </div>

        <div class="ldr-bulk-actions">
            <button class="ldr-btn-bulk" onclick="selectAll()">Select All</button>
            <button class="ldr-btn-bulk" onclick="selectNone()">Select None</button>
            <button class="ldr-btn-bulk" onclick="selectFiltered()">Select Filtered</button>
        </div>
    </div>

    <!-- Research List -->
    <div class="ldr-research-list">
        {% for research in research_list %}
        <div class="ldr-research-item" data-id="{{ research.id }}"
             data-mode="{{ research.mode }}"
             data-rating="{{ research.rating or 0 }}"
             data-date="{{ research.created_at }}"
             data-downloadable="{{ research.downloadable_count }}"
             data-downloaded="{{ research.downloaded_count }}">

            <!-- Checkbox and Basic Info -->
            <div class="ldr-research-header">
                <input type="checkbox" class="ldr-research-select" value="{{ research.id }}"
                       data-resources="{{ research.total_resources }}"
                       data-downloadable="{{ research.downloadable_count }}">

                <div class="ldr-research-info">
                    <h3>{{ research.title or research.query[:80] }}</h3>
                    <div class="ldr-research-meta">
                        <span class="ldr-meta-item">
                            <i class="fas fa-calendar"></i> <span class="ldr-research-date" data-date="{{ research.created_at }}">{{ research.created_at }}</span>
                        </span>
                        <span class="ldr-meta-item">
                            <i class="fas fa-clock"></i> <span class="ldr-research-duration" data-seconds="{{ research.duration_seconds }}">{{ research.duration_seconds }}s</span>
                        </span>
                        <span class="ldr-meta-item ldr-mode-badge {{ research.mode }}">
                            {{ research.mode|replace('_', ' ')|title }}
                        </span>
                        {% if research.rating %}
                        <span class="ldr-meta-item">
                            <i class="fas fa-star"></i> {{ research.rating }}/5
                        </span>
                        {% endif %}
                        {% if research.total_cost %}
                        <span class="ldr-meta-item">
                            <i class="fas fa-dollar-sign"></i> {{ research.total_cost|round(3) }}
                        </span>
                        {% endif %}
                    </div>
                </div>

                <div class="ldr-research-stats">
                    <div class="ldr-stat">
                        <strong>{{ research.total_resources }}</strong>
                        <small>Total Sources</small>
                    </div>
                    <div class="ldr-stat">
                        <strong>{{ research.downloadable_count }}</strong>
                        <small>PDFs Available</small>
                    </div>
                    <div class="ldr-stat {{ 'ldr-success' if research.downloaded_count > 0 else '' }}">
                        <strong>{{ research.downloaded_count }}</strong>
                        <small>Downloaded</small>
                    </div>
                </div>
            </div>

            <!-- Expandable Details -->
            <details class="ldr-research-details">
                <summary>
                    View Sources ({{ research.total_resources }})
                    <div class="ldr-domain-preview">
                        {% for domain, count in research.top_domains[:5] %}
                        <span class="ldr-domain-chip">{{ domain }} ({{ count }})</span>
                        {% endfor %}
                    </div>
                </summary>

                <div class="ldr-sources-breakdown">
                    <!-- Domain breakdown -->
                    <div class="ldr-breakdown-section">
                        <h4>Sources by Domain</h4>
                        <div class="ldr-domain-list">
                            {% for domain, info in research.domains.items() %}
                            <div class="ldr-domain-item">
                                <span class="ldr-domain-name">{{ domain }}</span>
                                <span class="ldr-domain-stats">
                                    {{ info.total }} total |
                                    {{ info.pdfs }} PDFs |
                                    {{ info.downloaded }} downloaded
                                </span>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Individual sources preview -->
                    <div class="ldr-breakdown-section">
                        <h4>Downloadable PDFs</h4>
                        <div class="ldr-source-list">
                            {% for source in research.pdf_sources[:10] %}
                            <div class="ldr-source-item">
                                <i class="fas fa-file-pdf"></i>
                                <span class="ldr-source-title">{{ source.document_title|truncate(60) }}</span>
                                <span class="ldr-source-domain">{{ source.domain }}</span>
                                {% if source.download_status == 'completed' %}
                                <span class="badge badge-success">Downloaded</span>
                                {% endif %}
                            </div>
                            {% endfor %}
                            {% if research.pdf_sources|length > 10 %}
                            <div class="ldr-source-item ldr-more">
                                ... and {{ research.pdf_sources|length - 10 }} more PDFs
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </details>

            <!-- Action Buttons -->
            <div class="ldr-research-actions">
                <button class="btn btn-sm" onclick="viewResearch('{{ research.id }}')">
                    <i class="fas fa-eye"></i> View Research
                </button>
                <button class="btn btn-sm btn-success"
                        onclick="downloadResearch('{{ research.id }}', 'pdf')"
                        {% if not enable_pdf_storage %}
                        disabled
                        title="PDF downloads are disabled. Enable PDF storage in Settings"
                        {% else %}
                        title="Download PDFs from this research"
                        {% endif %}>
                    <i class="fas fa-file-pdf"></i> PDFs
                </button>
                <button class="btn btn-sm btn-info"
                        onclick="downloadResearch('{{ research.id }}', 'text_only')"
                        title="Extract text from this research without saving PDF files">
                    <i class="fas fa-file-alt"></i> Text Only
                </button>
                {% if research.downloaded_count > 0 %}
                <button class="btn btn-sm" onclick="viewDownloaded('{{ research.id }}')">
                    <i class="fas fa-folder-open"></i> View Downloaded
                </button>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </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="ldr-overall-progress">
                    <div class="ldr-progress-bar">
                        <div class="ldr-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="ldr-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' %}
</div>

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

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

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

.ldr-download-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ldr-download-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Colored download button styles */
.ldr-download-buttons .btn {
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}

.ldr-download-buttons .btn.btn-success {
    background: var(--success-color, #28a745);
    color: white;
    border: 1px solid var(--success-color, #28a745);
}

.ldr-download-buttons .btn.btn-success:hover:not(:disabled) {
    background: #218838;
    border-color: #1e7e34;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 136, 56, 0.3);
}

.ldr-download-buttons .btn.btn-warning {
    background: var(--warning-color, #ffc107);
    color: #212529;
    border: 1px solid var(--warning-color, #ffc107);
}

.ldr-download-buttons .btn.btn-warning:hover:not(:disabled) {
    background: #e0a800;
    border-color: #d39e00;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(224, 168, 0, 0.3);
}

.ldr-download-buttons .btn.btn-info {
    background: var(--info-color, #17a2b8);
    color: white;
    border: 1px solid var(--info-color, #17a2b8);
}

.ldr-download-buttons .btn.btn-info:hover:not(:disabled) {
    background: #138496;
    border-color: #117a8b;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(19, 132, 150, 0.3);
}

/* Library Settings Info Banner */
.ldr-library-settings-info {
    margin-bottom: 25px;
}

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

.ldr-info-banner .ldr-info-icon {
    font-size: 24px;
    color: var(--primary-color, #0d6efd);
    flex-shrink: 0;
}

.ldr-info-banner .ldr-info-content {
    flex: 1;
}

.ldr-info-banner h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #212529);
}

.ldr-info-banner p {
    margin: 8px 0;
    font-size: 14px;
}

.ldr-info-banner .ldr-warning-message {
    color: #ff9800;
    background: rgba(255, 152, 0, 0.15);
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #ff9800;
}

.ldr-info-banner .ldr-info-message {
    color: #0dcaf0;
    background: rgba(13, 202, 240, 0.15);
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #0dcaf0;
}

.ldr-info-banner .ldr-settings-link {
    margin-top: 10px;
    display: inline-block;
}

.ldr-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.ldr-stat-card {
    background: var(--card-bg, #2a2a2a);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color, #333);
}

.ldr-stat-card h3 {
    font-size: 32px;
    margin: 0;
    color: var(--primary-color);
}

.ldr-stat-card p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

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

.ldr-filter-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.ldr-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
}

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

.ldr-filter-group .form-control {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    background: var(--input-bg, #1a1a1a);
    color: var(--text-primary, #e4e4e4);
    font-size: 14px;
    transition: all 0.2s;
}

.ldr-filter-group .form-control:focus {
    outline: none;
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    background: var(--input-bg, #1a1a1a);
}

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

/* Date Range Group */
.ldr-filter-group.ldr-date-range {
    min-width: 280px;
}

.ldr-date-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ldr-date-inputs input {
    flex: 1;
}

.ldr-date-separator {
    color: var(--text-secondary, #666);
    font-size: 14px;
    font-weight: 500;
}

/* Search Group */
.ldr-filter-group.ldr-search-group {
    flex: 1;
    min-width: 250px;
}

.ldr-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ldr-search-wrapper i {
    position: absolute;
    left: 12px;
    color: var(--text-secondary, #999);
    font-size: 14px;
}

.ldr-search-wrapper input {
    padding-left: 36px;
    width: 100%;
}

.ldr-research-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ldr-research-item {
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s;
}

.ldr-research-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ldr-research-item.selected {
    background: var(--card-bg, #3a3a3a);
    border-color: var(--primary-color, #007bff);
}

.ldr-research-header {
    display: flex;
    align-items: start;
    gap: 20px;
}

.ldr-research-select {
    margin-top: 5px;
}

.ldr-research-info {
    flex: 1;
}

.ldr-research-info h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.ldr-research-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 14px;
    color: var(--text-secondary);
}

.ldr-research-stats {
    display: flex;
    gap: 30px;
}

.ldr-research-stats .ldr-stat {
    text-align: center;
    padding: 10px;
}

.ldr-research-stats strong {
    display: block;
    font-size: 24px;
    color: var(--text-primary);
}

.ldr-research-stats small {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 5px;
}

.ldr-research-stats .ldr-stat.ldr-success strong {
    color: var(--success-color);
}

.ldr-research-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.ldr-research-details summary {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ldr-domain-preview {
    display: flex;
    gap: 10px;
}

.ldr-domain-chip {
    padding: 2px 8px;
    background: var(--card-bg, #2a2a2a);
    border-radius: 12px;
    font-size: 12px;
}

.ldr-sources-breakdown {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.ldr-breakdown-section h4 {
    margin: 0 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ldr-domain-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ldr-domain-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    background: var(--input-bg, #1a1a1a);
    border-radius: 4px;
    font-size: 13px;
}

.ldr-source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.ldr-source-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--input-bg, #1a1a1a);
    border-radius: 4px;
    font-size: 13px;
}

.ldr-source-item i {
    color: var(--danger-color);
}

.ldr-research-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.ldr-research-actions .btn {
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #333);
    color: var(--text-primary, #e4e4e4);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    white-space: nowrap;
}

.ldr-research-actions .btn:hover {
    background: var(--primary-color, #007bff);
    color: white;
    border-color: var(--primary-color, #007bff);
}

.ldr-research-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Colored button variants for research actions */
.ldr-research-actions .btn.btn-success {
    background: var(--success-color, #28a745);
    color: white;
    border-color: var(--success-color, #28a745);
}

.ldr-research-actions .btn.btn-success:hover:not(:disabled) {
    background: #218838;
    border-color: #1e7e34;
}

.ldr-research-actions .btn.btn-warning {
    background: var(--warning-color, #ffc107);
    color: #212529;
    border-color: var(--warning-color, #ffc107);
}

.ldr-research-actions .btn.btn-warning:hover:not(:disabled) {
    background: #e0a800;
    border-color: #d39e00;
}

.ldr-research-actions .btn.btn-info {
    background: var(--info-color, #17a2b8);
    color: white;
    border-color: var(--info-color, #17a2b8);
}

.ldr-research-actions .btn.btn-info:hover:not(:disabled) {
    background: #138496;
    border-color: #117a8b;
}

.ldr-bulk-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.ldr-bulk-actions .ldr-btn-bulk {
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    color: var(--text-primary, #e4e4e4);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

.ldr-bulk-actions .ldr-btn-bulk:hover {
    background: var(--primary-color, #007bff);
    color: #ffffff;
    border-color: var(--primary-color, #007bff);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--card-bg, #2a2a2a);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color, #333);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color, #333);
}

.modal-header h2 {
    margin: 0;
    color: var(--text-primary, #e4e4e4);
}

.modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color, #333);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-footer .btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #333);
    background: var(--card-bg, #2a2a2a);
    color: var(--text-primary, #e4e4e4);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-footer .btn:hover {
    background: var(--primary-color, #007bff);
    color: white;
}

.modal-footer .btn.btn-secondary {
    background: var(--secondary-color, #6c757d);
    color: white;
    border-color: var(--secondary-color, #6c757d);
}

.modal-footer .btn.btn-secondary:hover {
    background: #5a6268;
    border-color: #545b62;
    color: white;
}

.modal-footer .btn-danger {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.modal-footer .btn-danger:hover {
    background: #c82333;
    border-color: #bd2130;
}

/* Progress Modal */
.ldr-overall-progress {
    margin-bottom: 25px;
}

.ldr-overall-progress p {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.ldr-progress-bar {
    height: 35px;
    background: var(--input-bg, #1a1a1a);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color, #333);
}

.ldr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #45a049);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    position: relative;
}

.ldr-progress-fill::after {
    content: attr(data-percent);
    position: absolute;
    right: 10px;
    color: white;
    font-size: 14px;
}

.ldr-download-log {
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background: var(--input-bg, #1a1a1a);
    border-radius: 8px;
    border: 1px solid var(--border-color, #333);
}

.ldr-download-entry {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 4px solid var(--border-color, #333);
    background: var(--card-bg, #2a2a2a);
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-primary, #e4e4e4);
}

.ldr-download-entry.success {
    border-left-color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.ldr-download-entry.ldr-error {
    border-left-color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

.ldr-download-entry.cancelled {
    border-left-color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
}
.ldr-download-entry.skipped {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
}
.ldr-download-entry .ldr-error {
    display: block;
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 4px;
    font-style: italic;
}
</style>

<script>
let selectedResearches = new Set();

// Load collections for dropdown
async function loadCollections() {
    try {
        const response = await fetch('/library/api/collections/list');
        const data = await response.json();

        const select = document.getElementById('target-collection');
        select.innerHTML = ''; // Clear loading message

        if (data.success && data.collections && data.collections.length > 0) {
            data.collections.forEach(collection => {
                const option = document.createElement('option');
                option.value = collection.id;
                option.textContent = collection.name;

                // Select "Library" as default if it exists
                if (collection.name === 'Library') {
                    option.selected = true;
                }

                select.appendChild(option);
            });
        } else {
            // Fallback if no collections
            const option = document.createElement('option');
            option.value = '';
            option.textContent = 'No collections available';
            select.appendChild(option);
        }
    } catch (error) {
        console.error('Error loading collections:', error);
        const select = document.getElementById('target-collection');
        select.innerHTML = '<option value="">Error loading collections</option>';
    }
}

// Load collections on page load
loadCollections();

// Handle checkbox selection
document.querySelectorAll('.ldr-research-select').forEach(checkbox => {
    checkbox.addEventListener('change', (e) => {
        const researchId = e.target.value;
        const item = e.target.closest('.ldr-research-item');

        if (e.target.checked) {
            selectedResearches.add(researchId);
            item.classList.add('selected');
        } else {
            selectedResearches.delete(researchId);
            item.classList.remove('selected');
        }

        updateSelectedCount();
    });
});

function updateSelectedCount() {
    const count = selectedResearches.size;

    // Update all count displays
    document.querySelectorAll('.ldr-selected-count-pdf, .ldr-selected-count-text-db').forEach(el => {
        el.textContent = count;
    });

    // Enable/disable buttons based on count and settings
    const pdfBtn = document.getElementById('download-pdfs');
    const textDbBtn = document.getElementById('download-text-db');

    if (pdfBtn) {
        pdfBtn.disabled = count === 0 {% if not enable_pdf_storage %}|| true{% endif %};
    }
    if (textDbBtn) {
        textDbBtn.disabled = count === 0;
    }
}

// Bulk selection
function selectAll() {
    document.querySelectorAll('.ldr-research-select').forEach(cb => {
        cb.checked = true;
        cb.dispatchEvent(new Event('change'));
    });
}

function selectNone() {
    document.querySelectorAll('.ldr-research-select').forEach(cb => {
        cb.checked = false;
        cb.dispatchEvent(new Event('change'));
    });
}

function selectFiltered() {
    document.querySelectorAll('.ldr-research-item:not([style*="display: none"]) .ldr-research-select').forEach(cb => {
        cb.checked = true;
        cb.dispatchEvent(new Event('change'));
    });
}

// Download functions
document.getElementById('download-pdfs')?.addEventListener('click', () => {
    if (selectedResearches.size === 0) return;
    document.getElementById('download-progress-modal').style.display = 'block';
    startBulkDownload(Array.from(selectedResearches), 'pdf');
});

document.getElementById('download-text-db')?.addEventListener('click', () => {
    if (selectedResearches.size === 0) return;
    document.getElementById('download-progress-modal').style.display = 'block';
    startBulkDownload(Array.from(selectedResearches), 'text_only');
});

let currentDownloadController = null;

async function startBulkDownload(researchIds, mode = 'pdf') {
    // Get CSRF token from meta tag
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Get selected collection_id
    const collectionSelect = document.getElementById('target-collection');
    const collectionId = collectionSelect ? collectionSelect.value : null;

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

    // Set modal title based on mode
    const modalTitles = {
        'pdf': 'Downloading PDFs',
        'text_only': 'Extracting Text to Database'
    };
    document.querySelector('#download-progress-modal h2').textContent = modalTitles[mode] || 'Processing';

    try {
        const requestBody = {
            research_ids: researchIds,
            mode: mode
        };

        // Add collection_id if selected
        if (collectionId) {
            requestBody.collection_id = collectionId;
        }

        const response = await fetch('/library/api/download-bulk', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify(requestBody),
            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));
                    updateProgress(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('Download error:', error);
        }
    } finally {
        currentDownloadController = null;
    }
}

function updateProgress(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}%`;
    progressBar.setAttribute('data-percent', `${data.progress}%`);
    currentCount.textContent = data.current;
    totalCount.textContent = data.total;

    if (data.file) {
        const entry = document.createElement('div');
        entry.className = `ldr-download-entry ${data.status === 'error' ? 'ldr-error' : data.status}`;
        entry.innerHTML = `
            <strong>${data.file}</strong>
            <span>${data.status}</span>
            ${data.error ? `<span class="ldr-error">${data.error}</span>` : ''}
        `;
        log.appendChild(entry);
        log.scrollTop = log.scrollHeight;
    }
}

// Individual research download
function downloadResearch(researchId, mode = 'pdf') {
    document.getElementById('download-progress-modal').style.display = 'block';
    startBulkDownload([researchId], mode);
}

// Navigation
function viewResearch(researchId) {
    window.open(`/results/${researchId}`, '_blank');
}

function viewDownloaded(researchId) {
    window.location.href = `/library?research=${researchId}`;
}

// Filters
document.getElementById('filter-mode').addEventListener('change', filterResearch);
document.getElementById('filter-rating').addEventListener('change', filterResearch);
document.getElementById('filter-pdfs').addEventListener('change', filterResearch);
document.getElementById('search-research').addEventListener('input', filterResearch);

function filterResearch() {
    const mode = document.getElementById('filter-mode').value;
    const rating = document.getElementById('filter-rating').value;
    const pdfFilter = document.getElementById('filter-pdfs').value;
    const search = document.getElementById('search-research').value.toLowerCase();

    document.querySelectorAll('.ldr-research-item').forEach(item => {
        let show = true;

        if (mode && item.dataset.mode !== mode) show = false;
        if (rating && parseInt(item.dataset.rating) < parseInt(rating)) show = false;

        // Handle PDF filter
        if (pdfFilter) {
            const downloadable = parseInt(item.dataset.downloadable || 0);
            const downloaded = parseInt(item.dataset.downloaded || 0);
            const availablePdfs = downloadable - downloaded;

            if (pdfFilter === 'yes' && availablePdfs <= 0) show = false;
            if (pdfFilter === 'no' && availablePdfs > 0) show = false;
        }

        if (search && !item.textContent.toLowerCase().includes(search)) show = false;

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

// Close 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';

        // Add cancellation message
        const log = document.getElementById('download-log');
        const entry = document.createElement('div');
        entry.className = 'download-entry cancelled';
        entry.innerHTML = '<strong style="color: #f44336;">Download process cancelled</strong>';
        log.appendChild(entry);

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

// Download ALL PDFs function
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 {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

        // First, queue all undownloaded articles
        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
        document.getElementById('download-progress-modal').style.display = 'block';
        document.querySelector('#download-progress-modal h2').textContent = 'Downloading ALL PDFs';

        // 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 = '';

        btn.innerHTML = originalContent;
        btn.disabled = false;

        // Create abort controller
        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));
                    updateProgress(data);

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

    } catch (error) {
        if (error.name === 'AbortError') {
            console.log('Download cancelled by user');
        } 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;
    }
}

// Extract ALL Text function
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 {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

        // Show progress modal
        document.getElementById('download-progress-modal').style.display = 'block';
        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 = '';

        currentDownloadController = new AbortController();

        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);

                    if (data.complete) {
                        currentDownloadController = null;
                        setTimeout(() => {
                            closeProgressModal();
                            alert(`Text extraction complete! Extracted ${data.total} documents to encrypted database.`);
                        }, 2000);
                    }
                }
            }
        }

    } catch (error) {
        if (error.name === 'AbortError') {
            console.log('Text extraction cancelled by user');
        } else {
            console.error('Failed to start text extraction:', error);
            alert('Failed to start text extraction. Please try again.');
        }
    } 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 = `ldr-download-entry ${data.status}`;

        let statusIcon = data.status === 'success' ? '✓' : '✗';
        let statusText = data.status === 'success' ? 'Text extracted' : (data.error || 'Extraction failed');

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

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

// Format dates and durations on page load
document.addEventListener('DOMContentLoaded', function() {
    // Format dates
    document.querySelectorAll('.ldr-research-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'
                });
            }
        }
    });

    // Format durations
    document.querySelectorAll('.ldr-research-duration').forEach(span => {
        const seconds = parseInt(span.dataset.seconds);
        if (!isNaN(seconds)) {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const secs = seconds % 60;

            let duration = '';
            if (hours > 0) duration += hours + 'h ';
            if (minutes > 0) duration += minutes + 'm ';
            duration += secs + 's';

            span.textContent = duration;
        }
    });
});
</script>
{% endblock %}