<script setup>
import { computed } from 'vue'
import { Head, useForm } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'

defineOptions({ layout: AppLayout })

const props = defineProps({
  screening: {
    type: Object,
    required: true,
  },
  questions: {
    type: Array,
    required: true,
  },
})

// Initialize form with empty answers for all questions
const initialAnswers = {}
props.questions.forEach((_, index) => {
  initialAnswers[index + 1] = null
})

const form = useForm({
  answers: initialAnswers,
})

const handleSubmit = () => {
  form.put(`/screening/${props.screening.id}`)
}

const allAnswered = computed(() => {
  return Object.values(form.answers).every(v => v !== null)
})
</script>

<template>
    <Head title="Pre-Screening Questions" />

    <div class="max-w-4xl mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-white mb-2">Pre-Screening Questions</h1>
        <p class="text-gray-400 mb-8">Answer all 10 questions to proceed. Each "Yes" answer scores 1 point. You need at least 5 points to pass.</p>

        <div class="space-y-4 mb-8">
            <div
                v-for="(question, index) in questions"
                :key="index"
                class="bg-surface/50 rounded-lg p-5"
            >
                <div class="flex items-start gap-4">
                    <span class="text-gray-400 font-mono text-sm mt-1 shrink-0">{{ index + 1 }}.</span>
                    <div class="flex-1">
                        <p class="text-white mb-3">{{ question }}</p>
                        <div class="flex gap-4">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input
                                    type="radio"
                                    :name="`question-${index + 1}`"
                                    value="yes"
                                    v-model="form.answers[index + 1]"
                                    class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
                                />
                                <span class="text-white">Yes</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input
                                    type="radio"
                                    :name="`question-${index + 1}`"
                                    value="no"
                                    v-model="form.answers[index + 1]"
                                    class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
                                />
                                <span class="text-white">No</span>
                            </label>
                        </div>
                        <p v-if="form.errors[`answers.${index + 1}`]" class="text-red-500 text-sm mt-1">
                            {{ form.errors[`answers.${index + 1}`] }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end">
            <AppButton size="lg" @click="handleSubmit" :loading="form.processing" :disabled="!allAnswered || form.processing">
                Submit
            </AppButton>
        </div>
    </div>
</template>
