Add RFP Questions

{#if currentMethod === 'upload'}

{#if isProcessing}

{processingStatus}

{#if processingStatus.includes('Found')}

✓ Processing complete

{/if}

{:else}

Drop RFP documents here

Browse Files

Supports PDF, DOCX, DOC files

{/if}

{#if uploadedFiles.length > 0}

Uploaded Documents

{#each uploadedFiles as file, index}

{file.name}

{(file.size / 1024 / 1024).toFixed(2)} MB

{/each}

{/if}

{:else}

Enter Questions (one per line or numbered)

</div>
        
        <button
          on:click={addManualQuestion}
          disabled={!questionText.trim()}
          class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Add Question
        </button>
      </div>
    {/if}
  </div>

{#if $questions.length > 0}
    <div class="bg-gray-800 border border-gray-600 rounded-lg p-6">
      <div class="flex items-center justify-between mb-4">
        <div>
          <h3 class="text-lg font-semibold text-white">Extracted Questions</h3>
          <p class="text-sm text-gray-400">{$questions.length} questions found</p>
        </div>
        
        <div class="flex items-center space-x-2">
          <button
            on:click={clearAllQuestions}
            class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 transition-colors"
            title="Clear all questions"
          >
            Clear All
          </button>
          <button
            on:click={proceedToAnswers}
            class="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700"
          >
            Generate AI Answers
          </button>
        </div>
      </div>
      
      <div class="space-y-3 max-h-96 overflow-y-auto">
        {#each $questions as question, index}
          <div class="border border-gray-600 bg-gray-700/50 rounded-lg p-4">
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <div class="flex items-center space-x-2 mb-2">
                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-500/20 text-blue-300">
                    Q{index + 1}
                  </span>
                  {#if question.source}
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-600 text-gray-300">
                      {question.source}
                    </span>
                  {/if}
                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
                    {question.priority === 'high' ? 'bg-red-500/20 text-red-300' : 
                      question.priority === 'medium' ? 'bg-blue-500/20 text-blue-300' : 
                      'bg-green-500/20 text-green-300'}">
                    {question.priority}
                  </span>
                </div>
                <p class="text-gray-200">{question.text}</p>
              </div>
              <button
                on:click={() => removeQuestion(question.id)}
                class="ml-4 text-red-400 hover:text-red-300"
                title="Remove question"
              >
                ×
              </button>
            </div>
          </div>
        {/each}
      </div>
    </div>
  {/if}
</div>