<template>
    <div class="p-6 max-w-3xl mx-auto">
      <h2 class="text-2xl font-bold mb-6">📄 Student Profile</h2>
  
      <div v-if="student" class="bg-white p-6 rounded shadow-md space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <div><strong>Name:</strong> {{ student.name }}</div>
          <div><strong>Email:</strong> {{ student.email }}</div>
          <div><strong>Phone:</strong> {{ student.phone }}</div>
          <div><strong>Date of Birth:</strong> {{ formatDate(student.dob) }}</div>
          <div><strong>Gender:</strong> {{ student.gender }}</div>
          <div>
            <strong>Class:</strong>
            {{ student.class_id?.name }} - {{ student.class_id?.section }}
          </div>
        </div>
  
        <NuxtLink :to="`/students/edit?id=${student.id}`" class="inline-block mt-4 bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">
          ✏️ Edit Profile
        </NuxtLink>
      </div>
  
      <div v-else class="text-gray-500">Loading student profile...</div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { useDirectus } from '../../app/composables/useDirectus'
  
  const route = useRoute()
  const directus = useDirectus()
  const student = ref(null)
  
  const fetchStudent = async () => {
    try {
      const studentId = route.query.id
      const data = await directus.items('students').readOne(studentId, {
        fields: ['*', 'class_id.name', 'class_id.section']
      })
      student.value = data
    } catch (err) {
      console.error('Failed to load student profile:', err)
    }
  }
  
  const formatDate = (dateStr) => {
    if (!dateStr) return '-'
    return new Date(dateStr).toLocaleDateString()
  }
  
  onMounted(fetchStudent)
  </script>
  