<template>
  <AppLayout title="Result Details">
    <div class="space-y-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold tracking-tight">Result Details</h1>
          <p class="text-muted-foreground">
            {{ result.student?.user?.name || `${result.student?.first_name} ${result.student?.last_name}` }} - {{ result.subject?.name }}
          </p>
        </div>
        <div class="flex space-x-3">
          <Button variant="outline" as-child>
            <Link :href="route('results.edit', result.id)">
              <Edit class="mr-2 h-4 w-4" />
              Edit Result
            </Link>
          </Button>
          <Button variant="outline" as-child>
            <Link :href="route('results.index')">
              <ArrowLeft class="mr-2 h-4 w-4" />
              Back to Results
            </Link>
          </Button>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Result Information</CardTitle>
        </CardHeader>
        <CardContent class="space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Student</Label>
              <p class="text-sm">{{ result.student?.user?.name || `${result.student?.first_name} ${result.student?.last_name}` }}</p>
            </div>
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Subject</Label>
              <p class="text-sm">{{ result.subject?.name }} ({{ result.subject?.code }})</p>
            </div>
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Exam Type</Label>
              <p class="text-sm">{{ result.examType?.name }}</p>
            </div>
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Classroom</Label>
              <p class="text-sm">{{ result.classroom?.name }}</p>
            </div>
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Academic Year</Label>
              <p class="text-sm">{{ result.academicYear?.name }}</p>
            </div>
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Marks</Label>
              <p class="text-sm font-bold">{{ result.marks }}/100</p>
            </div>
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Grade</Label>
              <Badge :variant="getGradeVariant(result.grade)">{{ result.grade }}</Badge>
            </div>
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Points</Label>
              <p class="text-sm">{{ result.points }}</p>
            </div>
            <div>
              <Label class="text-sm font-medium text-muted-foreground">Entered At</Label>
              <p class="text-sm">{{ formatDate(result.entered_at) }}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { Link } from '@inertiajs/vue3'
import AppLayout from '@/layouts/AppLayout.vue'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Edit, ArrowLeft } from 'lucide-vue-next'

const props = defineProps<{
  result: any
}>()

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString()
}

const getGradeVariant = (grade: string) => {
  if (['A+', 'A', 'A-'].includes(grade)) return 'default'
  if (['B+', 'B', 'B-'].includes(grade)) return 'secondary'
  if (['C+', 'C', 'C-'].includes(grade)) return 'outline'
  return 'destructive'
}
</script>
