src/components/UploadSection_NEW.svelte

<script lang="ts">
  import { previousRfps, nextStep } from '../stores/appStore'
  import { parseDocument } from '../utils/documentParser'
  
  let dragActive = false
  let isProcessing = false
  let uploadedFiles: File[] = []
  let processingStatus = ''
  let analysisResults: any[] = []
  
  // For accuracy, we'll scan the local folder as well
  let folderPath = 'c:\\Users\\varun\\Downloads\\RFP Svelt\\public\\previous-rfps'
  
  async function handleFileUpload(event: Event) {
    const target = event.target as HTMLInputElement
    if (target.files) {
      await processFiles(Array.from(target.files))
    }
  }
  
  async function processFiles(files: File[]) {
    isProcessing = true
    processingStatus = 'Analyzing documents for accuracy...'
    uploadedFiles = [...uploadedFiles, ...files]
    
    try {
      for (const file of files) {
        processingStatus = `Processing ${file.name}...`
        const content = await parseDocument(file)
        
        // Enhanced analysis for accuracy
        const analysis = analyzeDocumentQuality(content, file.name)
        analysisResults.push(analysis)
        
        const rfpDocument = {
          id: `rfp-${Date.now()}-${Math.random()}`,
          name: file.name,
          content: content,
          size: file.size,
          uploadDate: new Date().toISOString(),
          pageCount: Math.ceil(content.length / 2000), // Estimate pages
          quality: analysis.quality,
          keyTopics: analysis.topics,
          wordCount: content.split(' ').length
        }
        
        previousRfps.update(current => [...current, rfpDocument])
      }
      
      processingStatus = 'Analysis complete! Documents ready for AI reference.'
    } catch (error) {
      console.error('Error processing files:', error)
      processingStatus = 'Error processing some files. Please check format and try again.'
    } finally {
      setTimeout(() => {
        isProcessing = false
        processingStatus = ''
      }, 2000)
    }
  }
  
  function analyzeDocumentQuality(content: string, filename: string) {
    const wordCount = content.split(' ').length
    const hasQuestions = /\?|what|how|when|where|why|describe|explain|provide/gi.test(content)
    const hasAnswers = content.length > 5000 // Substantial content
    const hasStructure = /section|chapter|\d+\.|bullet|•/gi.test(content)
    
    let quality = 'Basic'
    let score = 0
    
    if (wordCount > 1000) score += 25
    if (wordCount > 5000) score += 25
    if (hasQuestions) score += 20
    if (hasAnswers) score += 20
    if (hasStructure) score += 10
    
    if (score >= 80) quality = 'Excellent'
    else if (score >= 60) quality = 'Good'
    else if (score >= 40) quality = 'Fair'
    
    // Extract key topics
    const topics = extractKeyTopics(content)
    
    return {
      quality,
      score,
      topics,
      wordCount,
      hasQuestions,
      hasAnswers,
      hasStructure,
      recommendations: getRecommendations(score, hasQuestions, hasAnswers)
    }
  }
  
  function extractKeyTopics(content: string) {
    const businessTerms = [
      'security', 'compliance', 'implementation', 'timeline', 'budget', 'experience',
      'methodology', 'team', 'project management', 'deliverables', 'support',
      'training', 'maintenance', 'scalability', 'performance', 'integration'
    ]
    
    return businessTerms.filter(term => 
      content.toLowerCase().includes(term)
    ).slice(0, 5)
  }
  
  function getRecommendations(score: number, hasQuestions: boolean, hasAnswers: boolean) {
    const recommendations = []
    
    if (score < 40) {
      recommendations.push('Consider adding more detailed RFP responses')
    }
    if (!hasQuestions) {
      recommendations.push('Include documents with both questions and answers')
    }
    if (!hasAnswers) {
      recommendations.push('Add more comprehensive response content')
    }
    if (score >= 80) {
      recommendations.push('Excellent reference material for AI training')
    }
    
    return recommendations
  }
  
  function handleDrop(event: DragEvent) {
    event.preventDefault()
    dragActive = false
    
    if (event.dataTransfer?.files) {
      processFiles(Array.from(event.dataTransfer.files))
    }
  }
  
  function handleDragOver(event: DragEvent) {
    event.preventDefault()
    dragActive = true
  }
  
  function handleDragLeave() {
    dragActive = false
  }
  
  function removeDocument(id: string) {
    previousRfps.update(current => current.filter(doc => doc.id !== id))
    uploadedFiles = uploadedFiles.filter((_, index) => $previousRfps[index]?.id !== id)
  }
  
  function proceedToNextStep() {
    if ($previousRfps.length > 0) {
      nextStep()
    }
  }
  
  function getQualityColor(quality: string) {
    switch (quality) {
      case 'Excellent': return 'text-green-600 bg-green-100 border-green-200'
      case 'Good': return 'text-blue-600 bg-blue-100 border-blue-200'
      case 'Fair': return 'text-yellow-600 bg-yellow-100 border-yellow-200'
      default: return 'text-gray-600 bg-gray-100 border-gray-200'
    }
  }
</script>

<div class="space-y-8">
  <!-- Instructions Section -->
  <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-6 border border-blue-200">
    <div class="flex items-start space-x-4">
      <div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center text-white text-2xl">
        💡
      </div>
      <div class="flex-1">
        <h3 class="text-lg font-bold text-blue-900 mb-2">For Maximum Accuracy</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-800">
          <div>
            <h4 class="font-semibold mb-1">📁 Folder Method (Recommended)</h4>
            <p>Add PDFs to: <code class="bg-blue-200 px-2 py-1 rounded text-xs">public/previous-rfps/</code></p>
          </div>
          <div>
            <h4 class="font-semibold mb-1">📤 Upload Method</h4>
            <p>Drag & drop your best RFP responses below</p>
          </div>
        </div>
        <div class="mt-3 text-sm text-blue-700">
          <strong>Best Practice:</strong> Include 3-5 complete RFP responses with both questions and detailed answers for optimal AI accuracy.
        </div>
      </div>
    </div>
  </div>

  <!-- Upload Area -->
  <div class="bg-white rounded-2xl border-2 border-dashed border-slate-300 hover:border-blue-400 transition-colors duration-300 overflow-hidden">
    <div
      class="relative p-12 text-center {dragActive ? 'bg-blue-50' : 'bg-gray-50'}"
      on:drop={handleDrop}
      on:dragover={handleDragOver}
      on:dragleave={handleDragLeave}
    >
      <input
        type="file"
        multiple
        accept=".pdf,.docx,.doc,.txt"
        on:change={handleFileUpload}
        class="absolute inset-0 opacity-0 cursor-pointer"
      />
      
      {#if isProcessing}
        <div class="flex flex-col items-center space-y-4">
          <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
          <p class="text-blue-600 font-semibold">{processingStatus}</p>
        </div>
      {:else}
        <div class="flex flex-col items-center space-y-4">
          <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center text-white text-4xl">
            📁
          </div>
          <div>
            <h3 class="text-2xl font-bold text-gray-800 mb-2">Upload Previous RFPs</h3>
            <p class="text-gray-600 mb-4">Drop your RFP documents here or click to browse</p>
            <p class="text-sm text-gray-500">Supports PDF, DOCX, DOC, and TXT files</p>
          </div>
        </div>
      {/if}
    </div>
  </div>

  <!-- Folder Instructions -->
  <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-2xl p-6 border border-green-200">
    <div class="flex items-center space-x-3 mb-3">
      <div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center text-white text-lg">
        📂
      </div>
      <h3 class="text-lg font-bold text-green-900">Alternative: Use Local Folder</h3>
    </div>
    <p class="text-green-800 mb-3">
      For better organization and accuracy, you can add your RFP documents directly to the folder:
    </p>
    <div class="bg-white rounded-lg p-4 border border-green-200">
      <code class="text-sm text-green-700 font-mono break-all">
        {folderPath}
      </code>
    </div>
    <p class="text-sm text-green-700 mt-2">
      The system will automatically detect and analyze documents in this folder for AI reference.
    </p>
  </div>

  <!-- Document Analysis Results -->
  {#if $previousRfps.length > 0}
    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
      <div class="bg-gradient-to-r from-gray-800 to-gray-900 p-6">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center text-gray-800 text-xl">
              📊
            </div>
            <div>
              <h3 class="text-xl font-bold text-white">Document Analysis</h3>
              <p class="text-gray-300">{$previousRfps.length} documents analyzed for AI accuracy</p>
            </div>
          </div>
          <button
            on:click={proceedToNextStep}
            class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-3 rounded-xl font-semibold hover:from-green-600 hover:to-emerald-700 transition-all duration-300 shadow-lg"
          >
            Continue to Questions →
          </button>
        </div>
      </div>
      
      <div class="p-6 space-y-4">
        {#each $previousRfps as doc, index}
          <div class="border border-gray-200 rounded-xl p-4 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <div class="flex items-center space-x-3 mb-3">
                  <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 text-sm font-bold">
                    {index + 1}
                  </div>
                  <h4 class="font-semibold text-gray-800">{doc.name}</h4>
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border {getQualityColor(doc.quality)}">
                    {doc.quality} Quality
                  </span>
                </div>
                
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-3 text-sm">
                  <div>
                    <span class="text-gray-500">Words:</span>
                    <span class="font-semibold text-gray-800">{doc.wordCount?.toLocaleString()}</span>
                  </div>
                  <div>
                    <span class="text-gray-500">Pages:</span>
                    <span class="font-semibold text-gray-800">{doc.pageCount}</span>
                  </div>
                  <div>
                    <span class="text-gray-500">Size:</span>
                    <span class="font-semibold text-gray-800">{(doc.size / 1024 / 1024).toFixed(1)} MB</span>
                  </div>
                  <div>
                    <span class="text-gray-500">Score:</span>
                    <span class="font-semibold text-gray-800">{analysisResults[index]?.score || 'N/A'}/100</span>
                  </div>
                </div>
                
                {#if doc.keyTopics && doc.keyTopics.length > 0}
                  <div class="flex flex-wrap gap-2 mb-3">
                    <span class="text-sm text-gray-500">Topics:</span>
                    {#each doc.keyTopics as topic}
                      <span class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
                        {topic}
                      </span>
                    {/each}
                  </div>
                {/if}
                
                {#if analysisResults[index]?.recommendations}
                  <div class="text-sm text-gray-600">
                    <strong>AI Recommendation:</strong> {analysisResults[index].recommendations[0]}
                  </div>
                {/if}
              </div>
              
              <button
                on:click={() => removeDocument(doc.id)}
                class="ml-4 w-8 h-8 bg-red-100 hover:bg-red-200 rounded-lg flex items-center justify-center text-red-600 transition-colors"
                title="Remove document"
              >
                ×
              </button>
            </div>
          </div>
        {/each}
      </div>
    </div>
  {/if}

  <!-- Accuracy Tips -->
  <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-2xl p-6 border border-purple-200">
    <div class="flex items-start space-x-4">
      <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center text-white text-2xl">
        🎯
      </div>
      <div>
        <h3 class="text-lg font-bold text-purple-900 mb-3">Maximizing AI Accuracy</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-purple-800">
          <div>
            <h4 class="font-semibold mb-2">✅ Best Documents Include:</h4>
            <ul class="space-y-1 text-purple-700">
              <li>• Complete question-answer pairs</li>
              <li>• Technical specifications</li>
              <li>• Company methodologies</li>
              <li>• Previous winning proposals</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold mb-2">⚡ For Optimal Results:</h4>
            <ul class="space-y-1 text-purple-700">
              <li>• Upload 3-5 comprehensive RFPs</li>
              <li>• Include recent proposals (last 2 years)</li>
              <li>• Ensure documents are well-formatted</li>
              <li>• Mix different industry sectors</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>