<template>
    <div class="p-6">
      <NuxtLink to="/students" class="text-blue-600 hover:underline mb-4 inline-block">← Back to Students</NuxtLink>
  
      <div v-if="loading" class="text-gray-500">Loading student details...</div>
  
      <div v-else-if="student" class="bg-white shadow-md p-6 rounded-lg">
        <h2 class="text-2xl font-semibold mb-4">{{ student.name }}</h2>
  
        <ul class="space-y-2 text-gray-700">
          <li><strong>Email:</strong> {{ student.email }}</li>
          <li><strong>Phone:</strong> {{ student.phone }}</li>
          <li><strong>Date of Birth:</strong> {{ student.dob }}</li>
          <li><strong>Gender:</strong> {{ student.gender }}</li>
          <li><strong>Class:</strong> {{ student.class_id?.name || 'N/A' }}</li>
          <li><strong>Section:</strong> {{ student.class_id?.section || 'N/A' }}</li>
        </ul>
      </div>
  
      <div v-else class="text-red-600">
        Student not found.
      </div>
      <NuxtLink :to="`/students/${student.id}/edit`" class="text-blue-500 mt-4 block">✏️ Edit Student</NuxtLink>

    </div>
  </template>
  
  <script setup>
  import { useRoute } from 'vue-router'
  import { ref, onMounted } from 'vue'
  import { useDirectus } from '../../app/composables/useDirectus'
  
  const route = useRoute()
  const directus = useDirectus()
  
  const student = ref(null)
  const loading = ref(true)
  
  onMounted(async () => {
    try {
      const { data } = await directus.items('students').readOne(route.params.id, {
        fields: ['id', 'name', 'email', 'phone', 'dob', 'gender', 'class_id.name', 'class_id.section']
      })
      student.value = data
    } catch (error) {
      console.error('Error fetching student:', error)
    } finally {
      loading.value = false
    }
  })
  </script>
  
  <style scoped>
  </style>
  