src/components/SelectQuestions.svelte

<script lang="ts">
  import { questions, nextStep } from '../stores/appStore'
  
  let searchTerm = ''
  let selectedPriority = 'all'
  let sortBy = 'order'
  
  $: filteredQuestions = $questions.filter(q => {
    const matchesSearch = q.text.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesPriority = selectedPriority === 'all' || q.priority === selectedPriority
    return matchesSearch && matchesPriority
  }).sort((a, b) => {
    if (sortBy === 'priority') {
      const priorityOrder = { high: 0, medium: 1, low: 2 }
      return priorityOrder[a.priority] - priorityOrder[b.priority]
    }
    return 0 // Keep original order
  })
  
  $: selectedCount = $questions.filter(q => q.selected).length
  
  function toggleQuestion(id: string) {
    questions.update(current => 
      current.map(q => 
        q.id === id ? { ...q, selected: !q.selected } : q
      )
    )
  }
  
  function updatePriority(id: string, priority: 'high' | 'medium' | 'low') {
    questions.update(current => 
      current.map(q => 
        q.id === id ? { ...q, priority } : q
      )
    )
  }
  
  function selectAll() {
    questions.update(current => 
      current.map(q => ({ ...q, selected: true }))
    )
  }
  
  function deselectAll() {
    questions.update(current => 
      current.map(q => ({ ...q, selected: false }))
    )
  }
  
  function proceedToNextStep() {
    if (selectedCount > 0) {
      nextStep()
    }
  }
  
  function getPriorityColor(priority: string) {
    switch (priority) {
      case 'high': return 'from-red-500 to-orange-500'
      case 'medium': return 'from-yellow-500 to-orange-500'
      case 'low': return 'from-green-500 to-blue-500'
      default: return 'from-gray-500 to-gray-600'
    }
  }
  
  function getPriorityBadgeColor(priority: string) {
    switch (priority) {
      case 'high': return 'bg-red-100 text-red-800 border-red-200'
      case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200'
      case 'low': return 'bg-green-100 text-green-800 border-green-200'
      default: return 'bg-gray-100 text-gray-800 border-gray-200'
    }
  }
</script>

<div class="space-y-8">
  <!-- Control Panel -->
  <div class="bg-gradient-to-r from-white/80 to-purple-50/80 backdrop-blur-sm rounded-3xl p-8 border border-purple-200/50 shadow-xl">
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-600 rounded-xl flex items-center justify-center text-white text-xl">
          🔍
        </div>
        <div>
          <h3 class="text-xl font-bold text-slate-800">Question Selection</h3>
          <p class="text-slate-600">Choose questions to process with AI</p>
        </div>
      </div>
      
      <div class="text-right">
        <div class="text-2xl font-bold text-purple-600">{selectedCount}</div>
        <div class="text-sm text-slate-600">Selected</div>
      </div>
    </div>
    
    <!-- Search and Filters -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <!-- Search -->
      <div class="col-span-2">
        <label class="block text-sm font-medium text-slate-700 mb-2">Search Questions</label>
        <div class="relative">
          <input
            type="text"
            bind:value={searchTerm}
            placeholder="Search by keyword..."
            class="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white/70 backdrop-blur-sm"
          />
          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400">
            🔍
          </div>
        </div>
      </div>
      
      <!-- Priority Filter -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Filter by Priority</label>
        <select
          bind:value={selectedPriority}
          class="w-full py-3 px-4 border border-slate-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white/70 backdrop-blur-sm"
        >
          <option value="all">All Priorities</option>
          <option value="high">High Priority</option>
          <option value="medium">Medium Priority</option>
          <option value="low">Low Priority</option>
        </select>
      </div>
      
      <!-- Sort -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Sort By</label>
        <select
          bind:value={sortBy}
          class="w-full py-3 px-4 border border-slate-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white/70 backdrop-blur-sm"
        >
          <option value="order">Original Order</option>
          <option value="priority">Priority Level</option>
        </select>
      </div>
    </div>
    
    <!-- Bulk Actions -->
    <div class="flex space-x-4">
      <button
        on:click={selectAll}
        class="flex-1 bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-green-600 hover:to-emerald-700 transition-all duration-300 shadow-lg hover:shadow-xl"
      >
        Select All
      </button>
      <button
        on:click={deselectAll}
        class="flex-1 bg-gradient-to-r from-gray-500 to-gray-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-gray-600 hover:to-gray-700 transition-all duration-300 shadow-lg hover:shadow-xl"
      >
        Deselect All
      </button>
    </div>
  </div>
  
  <!-- Questions List -->
  <div class="space-y-4">
    {#each filteredQuestions as question, index}
      <div class="bg-white/70 backdrop-blur-sm rounded-2xl border border-slate-200/50 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden {
        question.selected ? 'ring-2 ring-purple-400 ring-opacity-50' : ''
      }">
        <div class="p-6">
          <div class="flex items-start space-x-4">
            <!-- Selection Checkbox -->
            <div class="flex-shrink-0 pt-1">
              <button
                on:click={() => toggleQuestion(question.id)}
                class="w-6 h-6 rounded-md border-2 flex items-center justify-center transition-all duration-200 {
                  question.selected 
                    ? 'bg-purple-500 border-purple-500 text-white' 
                    : 'border-slate-300 hover:border-purple-400'
                }"
              >
                {#if question.selected}
                  ✓
                {/if}
              </button>
            </div>
            
            <!-- Question Content -->
            <div class="flex-1 min-w-0">
              <div class="flex items-center justify-between mb-3">
                <div class="flex items-center space-x-3">
                  <span class="inline-flex items-center justify-center w-8 h-8 bg-purple-100 text-purple-600 rounded-lg text-sm font-bold">
                    {index + 1}
                  </span>
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border {getPriorityBadgeColor(question.priority)}">
                    {question.priority.toUpperCase()} PRIORITY
                  </span>
                </div>
                
                <!-- Priority Selector -->
                <select
                  value={question.priority}
                  on:change={(e) => updatePriority(question.id, e.target.value)}
                  class="text-sm border border-slate-300 rounded-lg px-3 py-1 bg-white/80 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                >
                  <option value="high">High</option>
                  <option value="medium">Medium</option>
                  <option value="low">Low</option>
                </select>
              </div>
              
              <p class="text-slate-700 leading-relaxed text-lg">{question.text}</p>
              
              <!-- Question Stats -->
              <div class="mt-4 flex items-center space-x-6 text-sm text-slate-500">
                <div class="flex items-center space-x-1">
                  <span>📊</span>
                  <span>Estimated AI Processing: 30-45 seconds</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span>🎯</span>
                  <span>Will generate 2-3 citations</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Selected Indicator -->
        {#if question.selected}
          <div class="bg-gradient-to-r {getPriorityColor(question.priority)} px-6 py-3">
            <div class="flex items-center justify-between text-white">
              <div class="flex items-center space-x-2">
                <span>✨</span>
                <span class="font-semibold">Selected for AI Processing</span>
              </div>
              <div class="text-sm opacity-80">
                {question.priority} priority
              </div>
            </div>
          </div>
        {/if}
      </div>
    {/each}
  </div>
  
  <!-- Continue Button -->
  {#if selectedCount > 0}
    <div class="bg-gradient-to-r from-white/80 to-green-50/80 backdrop-blur-sm rounded-3xl p-8 border border-green-200/50 shadow-xl">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl flex items-center justify-center text-white text-xl">
            ✅
          </div>
          <div>
            <h3 class="text-xl font-bold text-slate-800">Ready to Process</h3>
            <p class="text-slate-600">{selectedCount} questions selected for AI generation</p>
          </div>
        </div>
        
        <button
          on:click={proceedToNextStep}
          class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-8 py-4 rounded-2xl font-bold text-lg hover:from-green-600 hover:to-emerald-700 transition-all duration-300 shadow-lg hover:shadow-xl"
        >
          <div class="flex items-center space-x-2">
            <span>🚀</span>
            <span>Start AI Processing</span>
          </div>
        </button>
      </div>
      
      <!-- Processing Preview -->
      <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white/60 rounded-xl p-4 text-center">
          <div class="text-2xl font-bold text-green-600">{selectedCount}</div>
          <div class="text-sm text-slate-600">Questions to Process</div>
        </div>
        <div class="bg-white/60 rounded-xl p-4 text-center">
          <div class="text-2xl font-bold text-blue-600">{Math.ceil(selectedCount * 0.75)}</div>
          <div class="text-sm text-slate-600">Estimated Minutes</div>
        </div>
        <div class="bg-white/60 rounded-xl p-4 text-center">
          <div class="text-2xl font-bold text-purple-600">{selectedCount * 3}</div>
          <div class="text-sm text-slate-600">Expected Citations</div>
        </div>
      </div>
    </div>
  {:else}
    <div class="bg-gradient-to-r from-white/80 to-orange-50/80 backdrop-blur-sm rounded-3xl p-8 border border-orange-200/50 shadow-xl text-center">
      <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-500 rounded-2xl flex items-center justify-center text-white text-3xl mx-auto mb-4">
        ⚠️
      </div>
      <h3 class="text-xl font-bold text-slate-800 mb-2">No Questions Selected</h3>
      <p class="text-slate-600">Please select at least one question to proceed with AI processing.</p>
    </div>
  {/if}
</div>