polylan-submitter/opus_submitter/src/components/SubmissionForm.vue

<template>
  <div class="card bg-base-100 shadow-xl">
    <div class="card-body">
      <h2 class="card-title text-xl mb-6">
        <i class="mdi mdi-check-circle text-2xl text-primary"></i>
        Submit Solution
      </h2>
      
       <form @submit.prevent="handleSubmit" class="space-y-6">
         <!-- Detected Puzzles Summary -->
         <div v-if="Object.keys(responsesByPuzzle).length > 0" class="alert alert-info">
           <i class="mdi mdi-information-outline text-xl"></i>
           <div class="flex-1">
             <h4 class="font-bold">Detected Puzzles ({{ Object.keys(responsesByPuzzle).length }})</h4>
             <div class="text-sm space-y-1 mt-1">
               <div v-for="(data, puzzleName) in responsesByPuzzle" :key="puzzleName" class="flex justify-between">
                 <span>{{ puzzleName }}</span>
                 <span class="badge badge-ghost badge-sm ml-2">{{ data.files.length }} file(s)</span>
               </div>
             </div>
           </div>
         </div>
         
         <!-- File Upload -->
         <FileUpload v-model="submissionFiles" :puzzles="puzzles" />
         
         <!-- Manual Selection Warning -->
         <div v-if="filesNeedingManualSelection.length > 0" class="alert alert-warning">
           <i class="mdi mdi-alert-circle text-xl"></i>
           <div class="flex-1">
             <div class="font-bold">Manual Puzzle Selection Required</div>
             <div class="text-sm">
               {{ filesNeedingManualSelection.length }} file(s) have low OCR confidence for puzzle names. 
               Please select the correct puzzle for each file before submitting.
             </div>
           </div>
         </div>
        
        <!-- Notes -->
        <div class="form-control">
          <div class="flex-1">
            <label class="flex label">
              <span class="label-text font-medium">Notes (Optional)</span>
              <span class="label-text-alt">{{ notesLength }}/500</span>
            </label>
            <textarea 
              v-model="notes"
              class="flex textarea textarea-bordered h-24 w-full resize-none"
              placeholder="Add any notes about your solution, approach, or interesting findings..."
              maxlength="500"
            ></textarea>
          </div>
        </div>
        
        <!-- Manual Validation Request -->
        <div class="form-control">
          <label class="label cursor-pointer justify-start gap-3">
            <input 
              type="checkbox" 
              v-model="manualValidationRequested"
              class="checkbox checkbox-primary"
            />
            <div class="flex-1">
              <span class="label-text font-medium">Request manual validation</span>
              <div class="label-text-alt text-xs opacity-70 mt-1">
                Check this if you want an admin to manually review your submission, even if OCR confidence is high.
                <br>
                <em>Note: This will be automatically checked if any OCR confidence is below 50%.</em>
              </div>
            </div>
          </label>
        </div>
        
        <!-- Submit Button -->
        <div class="card-actions justify-end">
          <button 
            type="submit"
            class="btn btn-primary"
            :disabled="!canSubmit"
          >
            <span v-if="isSubmitting" class="loading loading-spinner loading-sm"></span>
            <span v-if="isSubmitting">Submitting...</span>
            <span v-else-if="filesNeedingManualSelection.length > 0">
              Select Puzzles ({{ filesNeedingManualSelection.length }} remaining)
            </span>
            <span v-else>Submit Solution</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import FileUpload from '@/components/FileUpload.vue'
import type { SteamCollectionItem, SubmissionFile } from '@/types'

interface Props {
  puzzles: SteamCollectionItem[]
  findPuzzleByName: (name: string) => SteamCollectionItem | null
}

interface Emits {
  submit: [submissionData: { files: SubmissionFile[], notes?: string, manualValidationRequested?: boolean }]
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const submissionFiles = ref<SubmissionFile[]>([])
const notes = ref('')
const manualValidationRequested = ref(false)
const isSubmitting = ref(false)

const notesLength = computed(() => notes.value.length)

const canSubmit = computed(() => {
  const hasFiles = submissionFiles.value.length > 0
  const noManualSelectionNeeded = !submissionFiles.value.some(file => file.needsManualPuzzleSelection)
  
  return hasFiles && 
         !isSubmitting.value &&
         noManualSelectionNeeded
})

// Group files by detected puzzle
const responsesByPuzzle = computed(() => {
  const grouped: Record<string, { puzzle: SteamCollectionItem | null, files: SubmissionFile[] }> = {}
  
  submissionFiles.value.forEach(file => {
    // Use manual puzzle selection if available, otherwise fall back to OCR
    const puzzleName = file.manualPuzzleSelection || file.ocrData?.puzzle
    
    if (puzzleName) {
      if (!grouped[puzzleName]) {
        grouped[puzzleName] = {
          puzzle: props.findPuzzleByName(puzzleName),
          files: []
        }
      }
      grouped[puzzleName].files.push(file)
    }
  })
  
  return grouped
})

// Count files that need manual puzzle selection
const filesNeedingManualSelection = computed(() => {
  return submissionFiles.value.filter(file => file.needsManualPuzzleSelection)
})

// Check if any OCR confidence is below 50%
const hasLowConfidence = computed(() => {
  return submissionFiles.value.some(file => {
    if (!file.ocrData?.confidence) return false
    return file.ocrData.confidence.cost < 0.5 || 
           file.ocrData.confidence.cycles < 0.5 || 
           file.ocrData.confidence.area < 0.5
  })
})

// Auto-check manual validation when confidence is low
watch(hasLowConfidence, (newValue) => {
  if (newValue && !manualValidationRequested.value) {
    manualValidationRequested.value = true
  }
}, { immediate: true })

const handleSubmit = async () => {
  if (!canSubmit.value) return
  
  isSubmitting.value = true
  
  try {
    // Emit the files and notes for the parent to handle API submission
    emit('submit', {
      files: submissionFiles.value,
      notes: notes.value.trim() || undefined,
      manualValidationRequested: manualValidationRequested.value
    })
    
    // Reset form
    submissionFiles.value = []
    notes.value = ''
    manualValidationRequested.value = false
    
  } catch (error) {
    console.error('Submission error:', error)
  } finally {
    isSubmitting.value = false
  }
}
</script>