quick preview function seems broken

script.js

@@ -986,14 +986,178 @@ function copyTags() {
     navigator.clipboard.writeText(tags);
     showToast('Tags copied to clipboard!', 'success');
 }
-
-function draftAnalysis() {
+async function draftAnalysis() {
     if (uploadedPhotos.length === 0) {
         showToast('Upload photos first for preview', 'error');
         return;
     }
-    showToast('Quick preview: Fill in artist/title for full analysis', 'success');
-    // Could implement lightweight preview mode
+
+    const artist = document.getElementById('artistInput').value.trim();
+    const title = document.getElementById('titleInput').value.trim();
+    
+    // Show loading state
+    const dropZone = document.getElementById('dropZone');
+    const spinner = document.getElementById('uploadSpinner');
+    spinner.classList.remove('hidden');
+    dropZone.classList.add('pointer-events-none');
+    startAnalysisProgressSimulation();
+
+    try {
+        // Try OCR/AI analysis if available
+        const service = getAIService();
+        let ocrResult = null;
+        
+        if (service && service.apiKey && uploadedPhotos.length > 0) {
+            try {
+                ocrResult = await service.analyzeRecordImages(uploadedPhotos.slice(0, 2)); // Limit to 2 photos for speed
+                populateFieldsFromOCR(ocrResult);
+            } catch (e) {
+                console.log('Preview OCR failed:', e);
+            }
+        }
+
+        // Generate quick preview results
+        const catNo = document.getElementById('catInput').value.trim() || ocrResult?.catalogueNumber || '';
+        const year = document.getElementById('yearInput').value.trim() || ocrResult?.year || '';
+        const detectedArtist = artist || ocrResult?.artist || 'Unknown Artist';
+        const detectedTitle = title || ocrResult?.title || 'Unknown Title';
+        
+        const baseTitle = `${detectedArtist} - ${detectedTitle}`;
+        
+        // Generate quick titles
+        const quickTitles = [
+            `${baseTitle} ${year ? `(${year})` : ''} ${catNo} VG+`.substring(0, 80),
+            `${baseTitle} Original Pressing Vinyl LP`.substring(0, 80),
+            `${detectedArtist} ${detectedTitle} ${catNo || 'LP'}`.substring(0, 80)
+        ].map((t, i) => ({
+            text: t,
+            chars: t.length,
+            style: ['Quick', 'Standard', 'Compact'][i]
+        }));
+
+        // Quick pricing estimate based on condition
+        const cost = parseFloat(document.getElementById('costInput').value) || 10;
+        const vinylCond = document.getElementById('vinylConditionInput').value;
+        const sleeveCond = document.getElementById('sleeveConditionInput').value;
+        
+        const conditionMultipliers = { 'M': 3, 'NM': 2.5, 'VG+': 1.8, 'VG': 1.2, 'G+': 0.8, 'G': 0.5 };
+        const condMult = (conditionMultipliers[vinylCond] || 1) * 0.7 + (conditionMultipliers[sleeveCond] || 1) * 0.3;
+        
+        const estimatedValue = Math.round(cost * Math.max(condMult, 1.5));
+        const suggestedPrice = Math.round(estimatedValue * 0.9);
+
+        // Render preview results
+        renderTitleOptions(quickTitles);
+        
+        // Quick pricing card
+        document.getElementById('pricingStrategy').innerHTML = `
+            <div class="pricing-card recommended">
+                <div class="flex items-center gap-2 mb-3">
+                    <span class="px-2 py-1 bg-accent/20 text-accent text-xs font-medium rounded">QUICK ESTIMATE</span>
+                </div>
+                <p class="text-3xl font-bold text-white mb-1">£${suggestedPrice}</p>
+                <p class="text-sm text-gray-400 mb-3">Suggested Buy It Now</p>
+                <div class="space-y-2 text-sm">
+                    <p class="flex justify-between"><span class="text-gray-500">Est. Value:</span> <span class="text-gray-300">£${estimatedValue}</span></p>
+                    <p class="flex justify-between"><span class="text-gray-500">Your Cost:</span> <span class="text-gray-300">£${cost.toFixed(2)}</span></p>
+                    <p class="flex justify-between"><span class="text-gray-500">Condition:</span> <span class="text-gray-300">${vinylCond}/${sleeveCond}</span></p>
+                </div>
+            </div>
+            <div class="space-y-3">
+                <h4 class="text-sm font-medium text-gray-400 uppercase tracking-wide">Preview Notes</h4>
+                <div class="p-3 bg-surface rounded-lg text-sm text-gray-400">
+                    ${ocrResult ? 
+                        `<p class="text-green-400 mb-2">✓ AI detected information from photos</p>` : 
+                        `<p class="text-yellow-400 mb-2">⚠ Add API key in Settings for auto-detection</p>`
+                    }
+                    <p>This is a quick estimate based on your cost and condition. Run "Generate Full Listing" for complete market analysis, sold comps, and optimized pricing.</p>
+                </div>
+                ${ocrResult ? `
+                    <div class="p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
+                        <p class="text-xs text-green-400 font-medium mb-1">Detected from photos:</p>
+                        <ul class="text-xs text-gray-400 space-y-1">
+                            ${ocrResult.artist ? `<li>• Artist: ${ocrResult.artist}</li>` : ''}
+                            ${ocrResult.title ? `<li>• Title: ${ocrResult.title}</li>` : ''}
+                            ${ocrResult.catalogueNumber ? `<li>• Cat#: ${ocrResult.catalogueNumber}</li>` : ''}
+                            ${ocrResult.year ? `<li>• Year: ${ocrResult.year}</li>` : ''}
+                        </ul>
+                    </div>
+                ` : ''}
+            </div>
+        `;
+
+        // Simple fee floor
+        const fees = suggestedPrice * 0.16;
+        const safeFloor = Math.ceil(cost + fees + 6);
+        
+        document.getElementById('feeFloor').innerHTML = `
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Your Cost</p>
+                <p class="text-xl font-bold text-gray-300">£${cost.toFixed(2)}</p>
+            </div>
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Est. Fees</p>
+                <p class="text-xl font-bold text-red-400">£${fees.toFixed(2)}</p>
+            </div>
+            <div class="text-center p-4 bg-surface rounded-lg">
+                <p class="text-xs text-gray-500 uppercase mb-1">Ship + Pack</p>
+                <p class="text-xl font-bold text-gray-300">£6.00</p>
+            </div>
+            <div class="text-center p-4 bg-green-500/10 rounded-lg border border-green-500/30">
+                <p class="text-xs text-green-500 uppercase mb-1">Safe Floor</p>
+                <p class="text-2xl font-bold text-green-400">£${safeFloor}</p>
+            </div>
+        `;
+
+        // Preview HTML description
+        const previewHtml = `<!-- QUICK PREVIEW - Generated by VinylVault Pro -->
+<div style="max-width: 700px; margin: 0 auto; font-family: sans-serif;">
+    <h2 style="color: #333;">${detectedArtist} - ${detectedTitle}</h2>
+    ${year ? `<p><strong>Year:</strong> ${year}</p>` : ''}
+    ${catNo ? `<p><strong>Catalogue #:</strong> ${catNo}</p>` : ''}
+    <p><strong>Condition:</strong> Vinyl ${vinylCond}, Sleeve ${sleeveCond}</p>
+    <hr style="margin: 20px 0;">
+    <p style="color: #666;">[Full description will be generated with complete market analysis]</p>
+</div>`;
+        
+        document.getElementById('htmlOutput').value = previewHtml;
+
+        // Preview tags
+        const previewTags = [
+            detectedArtist,
+            detectedTitle,
+            'vinyl',
+            'record',
+            vinylCond,
+            'lp',
+            year || 'vintage'
+        ].filter(Boolean);
+        
+        document.getElementById('tagsOutput').innerHTML = previewTags.map(t => `
+            <span class="px-3 py-1.5 bg-pink-500/10 text-pink-400 rounded-full text-sm border border-pink-500/20">${t}</span>
+        `).join('');
+
+        // Update shot list
+        renderShotList();
+
+        // Show results
+        resultsSection.classList.remove('hidden');
+        emptyState.classList.add('hidden');
+        resultsSection.scrollIntoView({ behavior: 'smooth' });
+
+        showToast('Quick preview ready! Click "Generate Full Listing" for complete analysis.', 'success');
+
+    } catch (error) {
+        console.error('Preview error:', error);
+        showToast('Preview failed: ' + error.message, 'error');
+    } finally {
+        stopAnalysisProgress();
+        setTimeout(() => {
+            spinner.classList.add('hidden');
+            dropZone.classList.remove('pointer-events-none');
+            updateAnalysisProgress('Initializing...', 0);
+        }, 300);
+    }
 }
 async function callAI(messages, temperature = 0.7) {
     const provider = localStorage.getItem('ai_provider') || 'openai';