// Updated handlePDFDownloadReady method with popup functionality
async handlePDFDownloadReady(pdfResult) {
    try {
        console.log("Handling PDF download ready:", pdfResult);
        
        // Hide loading state
        this.isLoading = false;
        this.hideProgress();
        
        // Show the beautiful popup modal
        this.showDownloadPopup(pdfResult);
        
        // Also show a success message
        this.showSuccess('✅ PDF generated successfully! Click the popup to download.');
        
    } catch (error) {
        console.error('Error handling PDF download ready:', error);
        this.showError('Error handling PDF download: ' + error.message);
    }
}

// New method to show download popup
showDownloadPopup(pdfResult) {
    // Create modal HTML
    const modalHTML = `
        <div class="pdf-download-modal" style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        ">
            <div class="modal-content" style="
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border-radius: 20px;
                padding: 30px;
                max-width: 600px;
                width: 90%;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
                position: relative;
                color: white;
                border: 1px solid rgba(255, 255, 255, 0.2);
            ">
                <button class="close-btn" onclick="this.closest('.pdf-download-modal').remove()" style="
                    position: absolute;
                    top: 15px;
                    right: 20px;
                    background: none;
                    border: none;
                    font-size: 28px;
                    cursor: pointer;
                    color: white;
                    transition: color 0.3s ease;
                " onmouseover="this.style.color='#ff6b6b'" onmouseout="this.style.color='white'">&times;</button>
                
                <div class="modal-header" style="text-align: center; margin-bottom: 25px;">
                    <h2 style="color: white; margin-bottom: 10px; font-size: 2rem;">🎉 PDF Ready for Download!</h2>
                    <p style="color: rgba(255, 255, 255, 0.9);">Your PDF has been generated successfully</p>
                </div>
                
                <div class="download-info" style="
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 15px;
                    padding: 20px;
                    margin: 20px 0;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                ">
                    <h3 style="color: #4CAF50; margin-bottom: 15px;">📄 Download Information</h3>
                    
                    <div class="file-details" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin: 15px 0;">
                        <div class="file-detail" style="text-align: center;">
                            <div class="label" style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 5px;">File Name</div>
                            <div class="value" style="font-weight: bold; color: white;">${pdfResult.filename || 'Unknown'}</div>
                        </div>
                        <div class="file-detail" style="text-align: center;">
                            <div class="label" style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 5px;">File Size</div>
                            <div class="value" style="font-weight: bold; color: #4CAF50;">${pdfResult.file_size_mb ? pdfResult.file_size_mb + ' MB' : 'Unknown'}</div>
                        </div>
                        <div class="file-detail" style="text-align: center;">
                            <div class="label" style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 5px;">Generated</div>
                            <div class="value" style="font-weight: bold; color: white;">${this.formatDate(pdfResult.generated_at)}</div>
                        </div>
                        <div class="file-detail" style="text-align: center;">
                            <div class="label" style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 5px;">Expires</div>
                            <div class="value" style="font-weight: bold; color: #ffc107;">${this.formatDate(pdfResult.expires_at)}</div>
                        </div>
                    </div>
                    
                    <div style="margin: 20px 0;">
                        <label style="display: block; margin-bottom: 8px; font-weight: bold; color: white;">🔗 Download Link:</label>
                        <div class="download-link" style="
                            background: rgba(255, 255, 255, 0.9);
                            color: #333;
                            padding: 12px;
                            border-radius: 6px;
                            word-break: break-all;
                            font-family: monospace;
                            font-size: 12px;
                            border: 2px solid #4CAF50;
                            margin-bottom: 10px;
                        ">${pdfResult.download_url}</div>
                        <button class="copy-btn" onclick="navigator.clipboard.writeText('${pdfResult.download_url}').then(() => { this.textContent = '✅ Copied!'; this.style.background = '#4CAF50'; setTimeout(() => { this.textContent = '📋 Copy Link'; this.style.background = '#ffc107'; }, 2000); })" style="
                            background: #ffc107;
                            color: #333;
                            border: none;
                            padding: 8px 15px;
                            border-radius: 20px;
                            cursor: pointer;
                            font-size: 0.9rem;
                            margin-right: 10px;
                            transition: all 0.3s ease;
                        ">📋 Copy Link</button>
                    </div>
                </div>
                
                <div class="button-group" style="text-align: center; margin-top: 25px;">
                    <a href="${pdfResult.download_url}" target="_blank" class="download-btn" style="
                        background: linear-gradient(45deg, #4CAF50, #45a049);
                        color: white;
                        padding: 12px 25px;
                        border-radius: 25px;
                        text-decoration: none;
                        font-weight: bold;
                        margin-right: 15px;
                        display: inline-block;
                        transition: all 0.3s ease;
                        box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
                    " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(76, 175, 80, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(76, 175, 80, 0.3)'">📥 Download PDF</a>
                    <button onclick="window.open('${pdfResult.download_url}', '_blank')" style="
                        background: linear-gradient(45deg, #2196F3, #1976D2);
                        color: white;
                        border: none;
                        padding: 12px 25px;
                        border-radius: 25px;
                        cursor: pointer;
                        font-weight: bold;
                        transition: all 0.3s ease;
                        box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
                    " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(33, 150, 243, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(33, 150, 243, 0.3)'">🔗 Open in New Tab</button>
                </div>
            </div>
        </div>
    `;
    
    // Add modal to page
    document.body.insertAdjacentHTML('beforeend', modalHTML);
    
    // Close modal when clicking outside
    const modal = document.querySelector('.pdf-download-modal');
    if (modal) {
        modal.addEventListener('click', function(event) {
            if (event.target === modal) {
                modal.remove();
            }
        });
    }
    
    // Close modal with Escape key
    const escapeHandler = function(event) {
        if (event.key === 'Escape') {
            const modal = document.querySelector('.pdf-download-modal');
            if (modal) {
                modal.remove();
                document.removeEventListener('keydown', escapeHandler);
            }
        }
    };
    document.addEventListener('keydown', escapeHandler);
}

// Helper method to format dates
formatDate(dateString) {
    if (!dateString) return 'Unknown';
    const date = new Date(dateString);
    return date.toLocaleString();
}