// Horizontal bar layout for file results

// Replace the entire displayUploadedFiles function with this:
function displayUploadedFiles(results) {
    console.log('📁 Displaying file results:', results);
    
    result.innerHTML = '';
    
    const header = document.createElement('div');
    header.innerHTML = '<h3>📁 Files Uploaded</h3>';
    result.appendChild(header);
    
    results.forEach((fileResult, index) => {
        const fileContainer = document.createElement('div');
        fileContainer.style.cssText = `
            margin-bottom: 15px;
            padding: 15px;
            border: 2px solid #4CAF50;
            border-radius: 8px;
            background-color: #f0f8f0;
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        `;
        
        // Left: File info
        const fileInfo = document.createElement('div');
        fileInfo.style.cssText = `
            flex: 1;
            min-width: 180px;
        `;
        
        const fileName = document.createElement('div');
        fileName.innerHTML = `<strong>📄 ${fileResult.file.name}</strong>`;
        fileName.style.marginBottom = '5px';
        fileInfo.appendChild(fileName);
        
        const fileSize = document.createElement('div');
        fileSize.innerHTML = `📊 ${(fileResult.originalSize / 1024).toFixed(1)} KB`;
        fileSize.style.cssText = `
            font-size: 14px;
            color: #666;
        `;
        fileInfo.appendChild(fileSize);
        
        fileContainer.appendChild(fileInfo);
        
        // Middle: Action buttons
        const buttonContainer = document.createElement('div');
        buttonContainer.style.cssText = `
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        `;
        
        // Share button
        const shareButton = document.createElement('button');
        shareButton.textContent = '🔗 Copy';
        shareButton.className = 'share-button';
        shareButton.style.cssText = `padding: 6px 10px; font-size: 13px;`;
        shareButton.addEventListener('click', () => {
            navigator.clipboard.writeText(fileResult.url).then(() => {
                shareButton.textContent = '✅ Copied!';
                setTimeout(() => {
                    shareButton.textContent = '🔗 Copy';
                }, 2000);
            });
        });
        buttonContainer.appendChild(shareButton);
        
        // View button
        const viewButton = document.createElement('button');
        viewButton.textContent = '👁️ View';
        viewButton.className = 'view-button';
        viewButton.style.cssText = `padding: 6px 10px; font-size: 13px;`;
        viewButton.addEventListener('click', () => {
            window.open(fileResult.url, '_blank');
        });
        buttonContainer.appendChild(viewButton);
        
        // QR Code button
        const qrButton = document.createElement('button');
        qrButton.textContent = '📱 QR';
        qrButton.className = 'qr-button';
        qrButton.style.cssText = `
            background-color: #9C27B0;
            color: white;
            padding: 6px 10px;
            font-size: 13px;
        `;
        qrButton.addEventListener('click', () => {
            showQRCode(fileResult.url, fileResult.file.name);
        });
        buttonContainer.appendChild(qrButton);
        
        fileContainer.appendChild(buttonContainer);
        
        // Right: Image thumbnail (if it's an image)
        if (isImageFile(fileResult.file)) {
            const thumbnail = document.createElement('img');
            thumbnail.src = fileResult.url;
            thumbnail.alt = fileResult.file.name;
            thumbnail.style.cssText = `
                width: 60px;
                height: 60px;
                object-fit: cover;
                border-radius: 6px;
                border: 1px solid #ddd;
                flex-shrink: 0;
            `;
            
            thumbnail.onerror = () => {
                thumbnail.style.display = 'none';
            };
            
            fileContainer.appendChild(thumbnail);
        }
        
        result.appendChild(fileContainer);
    });
}