<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { Head, router } from '@inertiajs/vue3'
import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'

defineOptions({ layout: AppLayout })

const props = defineProps({
  screening: {
    type: Object,
    required: true,
  },
  passed: {
    type: Boolean,
    required: true,
  },
  score: {
    type: Number,
    required: true,
  },
  totalQuestions: {
    type: Number,
    required: true,
  },
  categories: {
    type: Array,
    required: true,
  },
})

const handleStartCategory = (categoryId) => {
  router.post('/sessions', {
    category_id: categoryId,
    screening_id: props.screening.id,
  })
}

const bottomBackButtonRef = ref(null)
const showStickyBack = ref(false)

let observer = null

onMounted(() => {
  if (!bottomBackButtonRef.value) return
  observer = new IntersectionObserver(
    ([entry]) => { showStickyBack.value = !entry.isIntersecting },
    { threshold: 0 }
  )
  observer.observe(bottomBackButtonRef.value.$el || bottomBackButtonRef.value)
})

onUnmounted(() => {
  observer?.disconnect()
})
</script>

<template>
    <Head title="Screening Result" />

    <div class="max-w-4xl mx-auto px-4 py-8">
        <!-- Sticky back button -->
        <Transition
            enter-active-class="transition-all duration-200 ease-out"
            enter-from-class="opacity-0 translate-x-4"
            enter-to-class="opacity-100 translate-x-0"
            leave-active-class="transition-all duration-150 ease-in"
            leave-from-class="opacity-100 translate-x-0"
            leave-to-class="opacity-0 translate-x-4"
        >
            <div v-if="showStickyBack" class="fixed top-[88px] right-6 z-40">
                <AppButton variant="ghost" size="lg" href="/" data-cy="sticky-back">
                    <ArrowLeftIcon class="h-5 w-5" />
                    Back
                </AppButton>
            </div>
        </Transition>

        <h1 class="text-3xl font-bold text-white mb-6">Pre-Screening Result</h1>

        <!-- Score Display -->
        <div class="rounded-lg p-6 mb-8" :class="passed ? 'bg-green-500/10 border border-green-500/30' : 'bg-red-500/10 border border-red-500/30'">
            <div class="text-center">
                <p class="text-5xl font-bold mb-2" :class="passed ? 'text-green-500' : 'text-red-500'" data-cy="screening-score">
                    {{ score }} / {{ totalQuestions }}
                </p>
                <p class="text-xl font-semibold" :class="passed ? 'text-green-400' : 'text-red-400'" :data-cy="passed ? 'result-passed' : 'result-failed'">
                    {{ passed ? 'Passed' : 'No Go' }}
                </p>
                <p class="text-gray-400 mt-2">
                    {{ passed ? 'You may proceed to select a category for detailed assessment.' : 'The pre-screening score is below the required threshold. You cannot proceed at this time.' }}
                </p>
            </div>
        </div>

        <!-- Passed: Show category picker -->
        <div v-if="passed" data-cy="category-select">
            <h2 class="text-2xl font-semibold text-white mb-4">Select a Category</h2>
            <div class="space-y-3">
                <div
                    v-for="category in categories"
                    :key="category.id"
                    class="rounded-lg p-4 flex items-center justify-between hover:bg-white/5 transition-colors"
                >
                    <span class="text-white font-medium">{{ category.name }}</span>
                    <AppButton size="md" @click="handleStartCategory(category.id)">
                        Start
                    </AppButton>
                </div>
            </div>
        </div>

        <!-- Bottom back button -->
        <div class="mt-12 pt-8 border-t border-white/[0.06]">
            <AppButton ref="bottomBackButtonRef" variant="ghost" size="lg" href="/" data-cy="back-to-landing">
                <ArrowLeftIcon class="h-5 w-5" />
                Back
            </AppButton>
        </div>
    </div>
</template>
