<script setup>
import { computed } from 'vue'
import { Head } from '@inertiajs/vue3'
import { ArrowDownTrayIcon } from '@heroicons/vue/24/outline'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'

defineOptions({ layout: AppLayout })

const props = defineProps({
  session: {
    type: Object,
    required: true,
  },
  score: {
    type: Number,
    required: true,
  },
  result: {
    type: String,
    required: true,
  },
  categoryName: {
    type: String,
    required: true,
  },
})

const resultDisplay = computed(() => {
  switch (props.result) {
    case 'go':
      return {
        label: 'GO',
        description: 'Pursue this opportunity.',
        bgClass: 'bg-green-500/10 border-green-500/30',
        textClass: 'text-green-500',
        badgeClass: 'bg-green-500',
      }
    case 'consult_leadership':
      return {
        label: 'Consult Leadership',
        description: 'Speak to SL or SSL leadership before proceeding.',
        bgClass: 'bg-amber-500/10 border-amber-500/30',
        textClass: 'text-amber-500',
        badgeClass: 'bg-amber-500',
      }
    case 'no_go':
    default:
      return {
        label: 'NO GO',
        description: 'Do not pursue this opportunity.',
        bgClass: 'bg-red-500/10 border-red-500/30',
        textClass: 'text-red-500',
        badgeClass: 'bg-red-500',
      }
  }
})
</script>

<template>
    <Head :title="`${categoryName} - Result`" />

    <div class="max-w-4xl mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-white mb-6">{{ categoryName }} — Result</h1>

        <!-- Result Card -->
        <div class="rounded-lg p-8 mb-8 border" :class="resultDisplay.bgClass" data-cy="session-result">
            <div class="text-center">
                <div class="mb-4">
                    <span
                        class="inline-block px-6 py-3 rounded-lg text-white text-2xl font-bold"
                        :class="resultDisplay.badgeClass"
                        :data-cy="'result-' + result"
                    >
                        {{ resultDisplay.label }}
                    </span>
                </div>
                <p class="text-5xl font-bold mb-2" :class="resultDisplay.textClass">
                    {{ score }} points
                </p>
                <p class="text-gray-400 text-lg mt-4">
                    {{ resultDisplay.description }}
                </p>
            </div>
        </div>

        <!-- Session Details -->
        <div class="bg-surface/50 rounded-lg p-6 mb-8">
            <h2 class="text-xl font-semibold text-white mb-4">Session Details</h2>
            <dl class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <dt class="text-gray-400">Category</dt>
                    <dd class="text-white font-medium">{{ categoryName }}</dd>
                </div>
                <div>
                    <dt class="text-gray-400">Completed</dt>
                    <dd class="text-white font-medium">{{ new Date(session.completed_at).toLocaleDateString() }}</dd>
                </div>
            </dl>
        </div>

        <!-- Action buttons -->
        <div class="flex justify-center gap-4">
            <AppButton variant="ghost" :href="`/sessions/${session.id}/pdf`" external>
                <ArrowDownTrayIcon class="h-5 w-5" />
                Download PDF
            </AppButton>
            <AppButton size="lg" href="/" data-cy="start-new">
                Again
            </AppButton>
        </div>
    </div>
</template>
