<!-- PDF Storage Mode Selection Modal -->
<div id="storage-mode-modal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 650px;">
        <div class="modal-header">
            <h2><i class="fas fa-database"></i> PDF Storage Mode</h2>
            <button class="ldr-close" onclick="closeStorageModeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <p style="margin-bottom: 20px;">Choose where to store downloaded PDFs:</p>

            <div class="ldr-storage-mode-options">
                <label class="ldr-storage-mode-option" data-mode="database">
                    <input type="radio" name="storage_mode" value="database" {% if pdf_storage_mode == 'database' %}checked{% endif %}>
                    <div class="ldr-option-content">
                        <div class="ldr-option-header">
                            <i class="fas fa-database" style="color: #28a745;"></i>
                            <strong>Database (Encrypted)</strong>
                            <span class="badge badge-success">Recommended</span>
                        </div>
                        <p class="ldr-option-description">PDFs stored encrypted in your personal database. Secure and portable, but increases database size.</p>
                    </div>
                </label>

                <label class="ldr-storage-mode-option" data-mode="filesystem">
                    <input type="radio" name="storage_mode" value="filesystem" {% if pdf_storage_mode == 'filesystem' %}checked{% endif %}>
                    <div class="ldr-option-content">
                        <div class="ldr-option-header">
                            <i class="fas fa-hdd" style="color: #ffc107;"></i>
                            <strong>Filesystem (Unencrypted)</strong>
                        </div>
                        <p class="ldr-option-description">PDFs saved to disk unencrypted. Faster for large files, compatible with external tools.</p>
                        <div class="ldr-option-warning">
                            <i class="fas fa-exclamation-triangle"></i> Files visible to anyone with disk access
                        </div>
                    </div>
                </label>

                <label class="ldr-storage-mode-option" data-mode="none">
                    <input type="radio" name="storage_mode" value="none" {% if pdf_storage_mode == 'none' %}checked{% endif %}>
                    <div class="ldr-option-content">
                        <div class="ldr-option-header">
                            <i class="fas fa-file-alt" style="color: #6c757d;"></i>
                            <strong>Text Only</strong>
                        </div>
                        <p class="ldr-option-description">Only extracted text stored. Smallest footprint, re-download PDFs when needed.</p>
                    </div>
                </label>
            </div>
        </div>
        <div class="modal-footer">
            <button id="storage-mode-confirm-btn" class="btn btn-primary" onclick="confirmStorageModeChange()">
                <i class="fas fa-check"></i> Save
            </button>
            <button class="btn btn-secondary" onclick="closeStorageModeModal()">Cancel</button>
        </div>
    </div>
</div>

<style>
/* Storage Mode Modal */
#storage-mode-modal .modal-content {
    color: var(--text-primary, #e4e4e4);
}

#storage-mode-modal .modal-body p {
    color: var(--text-primary, #e4e4e4);
}

#storage-mode-modal .ldr-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary, #aaa);
    padding: 0;
    line-height: 1;
}

#storage-mode-modal .ldr-close:hover {
    color: var(--text-primary, #fff);
}

/* Storage Mode Modal Options */
.ldr-storage-mode-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.ldr-storage-mode-option:hover {
    border-color: var(--primary-color, #4a9eff);
    background: rgba(74, 158, 255, 0.05);
}

.ldr-storage-mode-option:has(input:checked) {
    border-color: var(--primary-color, #4a9eff);
    background: rgba(74, 158, 255, 0.1);
}

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

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

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

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

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

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

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

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

/* Storage Mode Button styling */
.ldr-storage-mode-btn {
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    transition: all 0.2s;
    color: inherit;
    background: inherit;
}

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

button.ldr-storage-mode-btn.ldr-warning-message {
    color: #ff9800 !important;
    background: rgba(255, 152, 0, 0.15) !important;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #ff9800;
}

.ldr-storage-mode-btn:hover {
    filter: brightness(1.1);
    transform: translateX(2px);
}
</style>

<script>
// Storage Mode Modal Functions
function showStorageModeModal() {
    document.getElementById('storage-mode-modal').style.display = 'flex';
}

function closeStorageModeModal() {
    document.getElementById('storage-mode-modal').style.display = 'none';
}

async function confirmStorageModeChange() {
    const selectedMode = document.querySelector('input[name="storage_mode"]:checked')?.value;
    if (!selectedMode) {
        alert('Please select a storage mode');
        return;
    }

    const btn = document.getElementById('storage-mode-confirm-btn');
    const originalContent = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
    btn.disabled = true;

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

        const response = await fetch('/settings/save_all_settings', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({
                'research_library.pdf_storage_mode': selectedMode
            })
        });

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

        const result = await response.json();

        if (result.status === 'success') {
            closeStorageModeModal();
            location.reload();
        } else {
            throw new Error(result.message || 'Failed to update setting');
        }

    } catch (error) {
        console.error('Failed to update storage mode:', error);
        alert('Failed to update PDF storage mode. Please try again or use the Settings page.');
        btn.innerHTML = originalContent;
        btn.disabled = false;
    }
}

// Close modal when clicking outside
document.getElementById('storage-mode-modal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeStorageModeModal();
    }
});
</script>
