src/components/SidebarClean.svelte

<script lang="ts">

  import { 

    currentStep, 

    nextStep, 

    prevStep, 

    referenceDocuments, 

    loadReferenceDocuments,

    uploadReferenceDocument,

    deleteReferenceDocument,

    getDocumentContent,

    isLoading,

    error 

  } from '../stores/appStore'

  import { onMount, onDestroy } from 'svelte'

  

  let hasStoredRfps = false

  let selectedCategory = 'it-staffing'

  let showCategoryDropdown = false

  let isUploading = false

  

  const categories = [

    { value: 'it-staffing', label: 'IT Staffing' },

    { value: 'ai-rfps', label: 'AI RFPs' }

  ]

  

  onMount(async () => {

    // Load reference documents from backend on component mount

    try {

      await loadReferenceDocuments()

      hasStoredRfps = $referenceDocuments.length > 0

      console.log(`✅ Loaded ${$referenceDocuments.length} documents from backend on page load`)

    } catch (err) {

      console.warn('Failed to load reference documents from backend:', err)

      // Continue without backend - app should still work

      hasStoredRfps = false

    }

  })

  

  // Auto-refresh documents every 30 seconds to keep in sync

  let refreshInterval: number;

  onMount(() => {

    refreshInterval = setInterval(async () => {

      try {

        await loadReferenceDocuments()

      } catch (err) {

        console.warn('Background refresh failed:', err)

      }

    }, 30000) // 30 seconds

  })

  

  onDestroy(() => {

    if (refreshInterval) clearInterval(refreshInterval)

  })

  

  // Subscribe to reference documents changes

  $: hasStoredRfps = $referenceDocuments.length > 0

  

  async function handleReferenceUpload(event: Event) {

    const target = event.target as HTMLInputElement

    if (target.files) {

      const files = Array.from(target.files)

      isUploading = true

      

      try {

        // Upload each file to backend

        for (const file of files) {

          await uploadReferenceDocument(file, selectedCategory)

        }

        

        // Immediately refresh the list to show new documents

        await loadReferenceDocuments()

        

        // Reset file input

        target.value = ''

        

        console.log(`✅ Successfully uploaded ${files.length} file(s) to backend storage`)

      } catch (err) {

        console.error('❌ Upload failed:', err)

      } finally {

        isUploading = false

      }

    }

  }

  

  async function handleDeleteDocument(id: string) {

    if (confirm('Are you sure you want to delete this document?')) {

      try {

        await deleteReferenceDocument(id)

        console.log('✅ Document deleted successfully')

      } catch (err) {

        console.error('❌ Delete failed:', err)

      }

    }

  }

  

  async function viewDocumentContent(id: string) {

    try {

      const docWithContent = await getDocumentContent(id)

      console.log('📄 Document Content:', docWithContent)

      alert(`Document: ${docWithContent.name}\n\nContent Preview:\n${docWithContent.content.substring(0, 500)}${docWithContent.content.length > 500 ? '...' : ''}`)

    } catch (err) {

      console.error('❌ Failed to load content:', err)

    }

  }

  

  function clearAllReference() {

    if (confirm('Clear all reference documents from backend storage?')) {

      // Delete all documents one by one

      $referenceDocuments.forEach(async (doc) => {

        try {

          await deleteReferenceDocument(doc.id)

        } catch (err) {

          console.error('Failed to delete document:', err)

        }

      })

    }

  }

  

  function getDocumentsByCategory(category: string) {

    return $referenceDocuments.filter(doc => doc.category === category)

  }

  

  function formatDate(dateString: string): string {

    if (!dateString) return 'Unknown date';

    try {

      const date = new Date(dateString);

      if (isNaN(date.getTime())) return 'Unknown date';

      return date.toLocaleDateString();

    } catch {

      return 'Unknown date';

    }

  }

  

  const steps = [

    { 

      id: 1, 

      title: 'Upload Current RFP', 

      description: 'Upload the RFP document you are responding to'

    },

    { 

      id: 2, 

      title: 'Add Questions', 

      description: 'Add questions manually or upload document'

    },

    { 

      id: 3, 

      title: 'AI Processing', 

      description: 'AI creates responses with citations'

    },

    { 

      id: 4, 

      title: 'Review & Edit', 

      description: 'Review and edit AI-generated answers'

    },

    { 

      id: 5, 

      title: 'Export Document', 

      description: 'Export professional Word document'

    }

  ]

  

  function goToStep(stepId: number) {

    if (stepId <= $currentStep + 1) {

      currentStep.set(stepId)

    }

  }

</script>

<div class="w-80 bg-gray-900 border-r border-gray-700 flex flex-col">
  <!-- Header -->
  <div class="p-6 border-b border-gray-700">
    <h1 class="text-xl font-semibold text-white mb-1">RFP Management</h1>
    <p class="text-sm text-gray-400">AI-Powered Response Generation</p>
  </div>
  
  <!-- Steps Navigation -->
  <div class="flex-1 p-6">
    <h3 class="text-sm font-medium text-gray-300 mb-4">Workflow Steps</h3>
    
    <div class="space-y-2">
      {#each steps as step}
        <button 

          on:click={() => goToStep(step.id)}
          class="w-full text-left p-4 rounded-lg border transition-colors {
            $currentStep === step.id 
              ? 'bg-blue-500/20 border-blue-500/40 text-blue-300' 
              : $currentStep > step.id 
                ? 'bg-green-500/20 border-green-500/40 text-green-300 hover:bg-green-500/30'
                : 'bg-gray-800 border-gray-700 text-gray-400 hover:bg-gray-700'
          }"
          disabled={step.id > $currentStep + 1}
        >
          <div class="flex items-start justify-between">
            <div class="flex-1 min-w-0">
              <div class="flex items-center space-x-3 mb-1">
                <div class="flex items-center justify-center w-6 h-6 rounded-full text-xs font-medium {

                  $currentStep === step.id 

                    ? 'bg-blue-500 text-white' 

                    : $currentStep > step.id 

                      ? 'bg-green-500 text-white'

                      : 'bg-gray-600 text-gray-400'

                }">
                  {#if $currentStep > step.id}
                    ✓
                  {:else}
                    {step.id}
                  {/if}
                </div>
                <h4 class="font-medium">
                  {step.title}
                </h4>
              </div>
              
              <p class="text-sm {

                $currentStep === step.id 

                  ? 'text-blue-200' 

                  : $currentStep > step.id 

                    ? 'text-green-200'

                    : 'text-gray-500'

              }">
                {step.description}
              </p>
            </div>
          </div>
        </button>
      {/each}
    </div>
  </div>
  
  <!-- Progress -->
  <div class="p-6 border-t border-gray-700">
    <div class="flex justify-between text-sm mb-2">
      <span class="text-gray-400">Progress</span>
      <span class="font-medium text-gray-300">{Math.round(($currentStep / steps.length) * 100)}%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-2">
      <div 

        class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-300"

        style="width: {($currentStep / steps.length) * 100}%"

      ></div>
    </div>
    <p class="text-xs text-gray-500 mt-2">
      Complete each step to build your professional RFP response.
    </p>
  </div>
  
  <!-- Reference Documents Section -->
  <div class="p-6 border-t border-gray-700 bg-gray-900/50">
    <div class="mb-4">
      <div class="flex items-center justify-between mb-3">
        <h3 class="text-sm font-medium text-gray-300">Reference Documents</h3>
        <div class="flex items-center space-x-2">
          {#if hasStoredRfps}
            <span class="text-xs text-blue-400">{$referenceDocuments.length} stored</span>
          {/if}
          <button

            on:click={loadReferenceDocuments}

            class="text-xs text-gray-400 hover:text-blue-400 px-2 py-1 rounded border border-gray-600 hover:border-blue-500 transition-colors"

            disabled={$isLoading}

            title="Refresh documents"

          >
            {#if $isLoading}
              ⟳
            {:else}
              🔄
            {/if}
          </button>
        </div>
      </div>
      <p class="text-xs text-gray-500 mb-3">
        Upload previous RFPs for reference (stored in backend)
      </p>
    </div>
    
    <!-- Backend Status -->
    {#if $error}
      <div class="bg-red-500/20 border border-red-500/40 rounded px-2 py-1 mb-3">
        <p class="text-xs text-red-300">⚠️ {$error}</p>
      </div>
    {/if}
    
    <!-- Category Selection -->
    <div class="mb-3">
      <label class="text-xs text-gray-400 mb-1 block">Category:</label>
      <div class="relative">
        <select 

          bind:value={selectedCategory}

          class="w-full bg-gray-800 border border-gray-600 rounded px-2 py-1 text-xs text-gray-300 focus:border-blue-500 focus:outline-none"

          disabled={isUploading || $isLoading}

        >
          {#each categories as category}
            <option value={category.value}>{category.label}</option>
          {/each}
        </select>
      </div>
    </div>
    
    <!-- Upload Area -->
    <div class="relative">
      <input

        type="file"

        multiple

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

        on:change={handleReferenceUpload}

        disabled={isUploading || $isLoading}

        class="absolute inset-0 opacity-0 cursor-pointer w-full h-full"

      />
      <div class="border-2 border-dashed border-gray-600 rounded-lg p-3 text-center hover:border-blue-500/50 transition-colors {isUploading || $isLoading ? 'opacity-50' : ''}">
        <div class="text-gray-400 text-xs">
          {#if isUploading || $isLoading}
            🔄 Uploading to backend...
          {:else}
            📁 Upload to {categories.find(c => c.value === selectedCategory)?.label}
          {/if}
        </div>
      </div>
    </div>
    
    <!-- Reference Documents List by Category -->
    {#if $referenceDocuments.length > 0}
      <div class="space-y-3 max-h-48 overflow-y-auto">
        {#each categories as category}
          {@const categoryDocs = getDocumentsByCategory(category.value)}
          {#if categoryDocs.length > 0}
            <div class="bg-gray-800/50 rounded-lg p-2">
              <div class="flex items-center justify-between mb-2">
                <h4 class="text-xs font-medium text-gray-300">{category.label}</h4>
                <span class="text-xs text-gray-500">{categoryDocs.length}</span>
              </div>
              
              <div class="space-y-1">
                {#each categoryDocs as doc}
                  <div class="bg-gray-800 rounded p-2 text-xs">
                    <div class="flex items-center justify-between">
                      <div class="flex-1 min-w-0 cursor-pointer" on:click={() => viewDocumentContent(doc.id)}>
                        <div class="text-gray-300 font-medium truncate hover:text-blue-300">{doc.name}</div>
                        <div class="flex items-center space-x-2 text-gray-500">
                          <span>{(doc.size / 1024 / 1024).toFixed(1)} MB</span>
                          <span>•</span>
                          {#if doc.contentLength}
                            <span>{doc.contentLength} chars</span>
                            <span>•</span>
                          {/if}
                          <span class="text-xs px-1 py-0.5 bg-blue-600/20 text-blue-300 rounded">
                            {doc.fileType === '.pdf' ? 'PDF' : 
                             doc.fileType === '.docx' || doc.fileType === '.doc' ? 'DOC' : 
                             doc.fileType === '.txt' ? 'TXT' : 'FILE'}
                          </span>
                          <span>•</span>
                          {#if doc.processed}
                            <span class="text-green-400">✓ Processed</span>
                          {:else}
                            <span class="text-yellow-400">⏳ Processing</span>
                          {/if}
                        </div>
                        <div class="text-xs text-gray-600 mt-1">
                          Uploaded: {formatDate(doc.uploadDate)}
                          {#if doc.contentLength}
                            <span class="text-green-400">• Content Available ({doc.contentLength} chars)</span>
                          {/if}
                        </div>
                      </div>
                      <button

                        on:click={() => handleDeleteDocument(doc.id)}
                        class="ml-2 w-4 h-4 bg-red-500/20 hover:bg-red-500/30 rounded text-red-400 flex items-center justify-center text-xs"
                        title="Delete from backend"
                        disabled={$isLoading}
                      >
                        ×
                      </button>
                    </div>
                  </div>
                {/each}
              </div>
            </div>
          {/if}
        {/each}
        
        <button

          on:click={clearAllReference}

          class="w-full text-xs text-gray-500 hover:text-gray-400 py-1"

          disabled={$isLoading}

        >
          Clear all reference documents
        </button>
        
        <!-- Backend Info -->
        {#if $referenceDocuments.length > 0}
          <div class="mt-2 p-2 bg-gray-900/50 rounded text-xs text-gray-500">
            📁 Backend Storage: {$referenceDocuments.length} documents | 
            Categories: {categories.map(c => `${c.label} (${getDocumentsByCategory(c.value).length})`).filter(s => !s.includes('(0)')).join(', ')}
          </div>
        {:else}
          <div class="mt-2 p-2 bg-gray-900/50 rounded text-xs text-gray-500">
            💡 Upload reference documents to improve AI responses
          </div>
        {/if}
      </div>
    {/if}
  </div>
</div>