src/components/UploadCurrentRFP.svelte

<script lang="ts">

  import { nextStep, currentRfp, type CurrentRFPDocument } from '../stores/appStore'

  import { createEventDispatcher } from 'svelte'

  

  const dispatch = createEventDispatcher()

  

  let uploadedFile: File | null = null

  let dragActive = false

  let extractedContent = ''

  let documentInfo: any = null

  let isProcessing = false

  let showFullContent = false

  

  // RFP metadata fields

  let rfpName = ''

  let bidNumber = ''

  

  async function handleFileUpload(event: Event) {

    const target = event.target as HTMLInputElement

    if (target.files && target.files[0]) {

      uploadedFile = target.files[0]

      await processRfpDocument()

    }

  }

  

  async function handleDrop(event: DragEvent) {

    event.preventDefault()

    dragActive = false

    

    if (event.dataTransfer?.files && event.dataTransfer.files[0]) {

      uploadedFile = event.dataTransfer.files[0]

      await processRfpDocument()

    }

  }

  

  async function processRfpDocument() {

    if (!uploadedFile) return

    

    isProcessing = true

    try {

      // Upload to backend for real content extraction

      const formData = new FormData()

      formData.append('file', uploadedFile)

      

      const response = await fetch('/api/upload-current-rfp', {

        method: 'POST',

        body: formData

      })

      

      if (!response.ok) {

        throw new Error(`Upload failed: ${response.statusText}`)

      }

      

      const result = await response.json()

      

      if (result.success) {

        documentInfo = result.document

        extractedContent = result.content || ''

        

        // Create metadata for app store

        const rfpMetadata: CurrentRFPDocument = {

          id: result.document.id,

          name: result.document.name,

          size: uploadedFile.size,

          uploadDate: result.document.uploadDate,

          fileType: result.document.fileType,

          pageCount: 1, // Will be updated by backend if available

          quality: extractedContent.length > 1000 ? 'Good' : 'Fair',

          keyTopics: ['Document Content'],

          wordCount: extractedContent.split(' ').length,

          rfpName: rfpName.trim() || undefined,

          bidNumber: bidNumber.trim() || undefined

        }

        

        // Store metadata in app store

        currentRfp.set(rfpMetadata)

        

        console.log('✅ Current RFP uploaded and processed successfully')

      } else {

        throw new Error('Upload failed')

      }

    } catch (error) {

      console.error('Error processing RFP:', error)

      alert('Failed to process RFP document: ' + error.message)

    } finally {

      isProcessing = false

    }

  }

  

  function proceedToQuestions() {

    nextStep()

  }

  

  function removeCurrentRfp() {

    uploadedFile = null

    currentRfp.set(null)

    extractedContent = ''

    documentInfo = null

    showFullContent = false

  }

</script>

<div class="space-y-6">
  <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-6">
    <h3 class="text-lg font-semibold text-blue-300 mb-2">Upload Current RFP</h3>
    <p class="text-blue-300/80">Upload the RFP document you are responding to. We'll extract questions automatically (metadata only - content not stored).</p>
  </div>

  <!-- RFP Metadata Fields -->
  <div class="bg-gray-800 rounded-lg border border-gray-600 p-6">
    <h4 class="text-lg font-semibold text-white mb-4">RFP Information</h4>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label for="rfpName" class="block text-sm font-medium text-gray-300 mb-2">
          RFP Name / Title
        </label>
        <input

          id="rfpName"

          type="text"

          bind:value={rfpName}

          placeholder="e.g., IT Staff Augmentation Services"

          class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors"

        />
      </div>
      <div>
        <label for="bidNumber" class="block text-sm font-medium text-gray-300 mb-2">
          Bid Number / RFP ID
        </label>
        <input

          id="bidNumber"

          type="text"

          bind:value={bidNumber}

          placeholder="e.g., 269EMCPS-25-005"

          class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors"

        />
      </div>
    </div>
    <p class="text-sm text-gray-400 mt-2">This information will be included in the cover letter of your final document.</p>
  </div>

  <!-- Upload Area -->
  {#if !uploadedFile}
    <div 

      class="bg-gray-800 rounded-lg border-2 border-dashed border-gray-600 hover:border-blue-500/50 transition-colors"

      class:border-blue-500={dragActive}

      on:dragover|preventDefault={() => dragActive = true}
      on:dragleave|preventDefault={() => dragActive = false}
      on:drop={handleDrop}
    >
      <div class="relative p-12 text-center">
        <input

          type="file"

          accept=".pdf,.docx,.doc,.txt"

          on:change={handleFileUpload}

          class="absolute inset-0 opacity-0 cursor-pointer"

        />
        
        <div class="flex flex-col items-center space-y-4">
          <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white">
            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
              <path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 001 1h6a1 1 0 001-1V3a2 2 0 012 2v6.5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 016 11.5V5z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-xl font-semibold text-gray-200 mb-2">Upload Current RFP Document</h3>
            <p class="text-gray-300 mb-2">Click to browse or drag and drop the RFP file</p>
            <p class="text-sm text-gray-400">Supports PDF, DOCX, DOC, and TXT files</p>
          </div>
        </div>
      </div>
    </div>
  {:else}
    <!-- Current RFP Display -->
    <div class="bg-gray-800 rounded-lg border border-gray-600">
      <div class="bg-gray-700 p-4">
        <div class="flex items-center justify-between">
          <div>
            <h3 class="text-lg font-semibold text-white">Current RFP Document</h3>
            <p class="text-gray-300 text-sm">Metadata extracted (content not stored)</p>
          </div>
          <button

            on:click={removeCurrentRfp}

            class="bg-red-500/20 hover:bg-red-500/30 text-red-400 px-4 py-2 rounded-lg font-medium transition-colors"

          >
            Remove
          </button>
        </div>
      </div>
      
      <div class="p-4">
        {#if $currentRfp}
          <div class="border border-gray-600 bg-gray-700/30 rounded-lg p-4">
            <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-500/20 rounded flex items-center justify-center text-blue-300">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                      <path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 001 1h6a1 1 0 001-1V3a2 2 0 012 2v6.5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 016 11.5V5z" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <div>
                  <h4 class="font-medium text-gray-200">{$currentRfp.name}</h4>
                  <p class="text-sm text-gray-400">
                    Size: {($currentRfp.size / 1024 / 1024).toFixed(1)} MB • 
                    {$currentRfp.pageCount} pages (estimated) • 
                    {$currentRfp.quality} quality
                  </p>
                  <p class="text-xs text-blue-400 mt-1">
                    📊 Metadata Only - Content not stored for privacy
                  </p>
                </div>
              </div>
              </div>
            </div>
          </div>
        {:else}
          <div class="border border-gray-600 bg-gray-700/30 rounded-lg p-4">
            <p class="text-gray-400 text-center">No current RFP uploaded</p>
          </div>
        {/if}
        
        <!-- Processing and Content Section -->
        {#if isProcessing}
          <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 mt-4">
            <div class="flex items-center space-x-3">
              <div class="animate-spin w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full"></div>
              <span class="text-blue-300">Processing document and extracting content...</span>
            </div>
          </div>
        {:else if extractedContent}
          <div class="bg-green-500/10 border border-green-500/20 rounded-lg p-4 mt-4">
            <h5 class="font-medium text-green-300 mb-2">✓ Document Processed Successfully</h5>
            <p class="text-green-200 text-sm mb-3">Content extracted: {extractedContent.length.toLocaleString()} characters from {documentInfo?.name || 'PDF document'}</p>
            
            <div class="bg-gray-800 rounded p-3 max-h-96 overflow-y-auto">
              <pre class="text-xs text-gray-300 whitespace-pre-wrap">{showFullContent ? extractedContent : extractedContent.substring(0, 5000)}{!showFullContent && extractedContent.length > 5000 ? '...' : ''}</pre>
            </div>
            
            {#if extractedContent.length > 5000}
              <div class="mt-2 flex justify-center">
                <button

                  on:click={() => showFullContent = !showFullContent}
                  class="text-blue-400 hover:text-blue-300 text-sm underline"
                >
                  {showFullContent ? 'Show Preview Only' : `Show Full Content (${Math.round(extractedContent.length / 1000)}k characters)`}
                </button>
              </div>
            {/if}
          </div>
        {/if}
        
        {#if extractedContent}
          <div class="mt-4 flex justify-end">
            <button

              on:click={proceedToQuestions}

              class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors"

            >
              Continue to Questions →
            </button>
          </div>
        {/if}
      </div>
    </div>
  {/if}

  <!-- Tips Section -->
  <div class="bg-gray-700/50 rounded-lg p-4 border border-gray-600">
    <h3 class="text-base font-medium text-gray-200 mb-3">Upload Tips</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-300">
      <div>
        <h4 class="font-medium mb-2 text-gray-200">Best Results:</h4>
        <ul class="space-y-1">
          <li>• Upload the complete RFP document</li>
          <li>• Ensure questions are clearly formatted</li>
          <li>• Include all sections and requirements</li>
          <li>• Use high-quality, readable documents</li>
        </ul>
      </div>
      <div>
        <h4 class="font-medium mb-2 text-gray-200">What We Extract:</h4>
        <ul class="space-y-1">
          <li>• Individual questions and requirements</li>
          <li>• Section headers and structure</li>
          <li>• Evaluation criteria</li>
          <li>• Submission requirements</li>
        </ul>
      </div>
    </div>
  </div>
</div>