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

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Student Information -->
        <div class="lg:col-span-2 space-y-6">
          <!-- Personal Information -->
          <Card>
            <CardHeader>
              <CardTitle>Personal 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">Full Name</Label>
                  <p class="text-sm">{{ student.first_name }} {{ student.last_name }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Email</Label>
                  <p class="text-sm">{{ student.user?.email || 'Not provided' }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Date of Birth</Label>
                  <p class="text-sm">{{ formatDate(student.date_of_birth) }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Gender</Label>
                  <p class="text-sm capitalize">{{ student.gender }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Phone</Label>
                  <p class="text-sm">{{ student.phone || 'Not provided' }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Emergency Contact</Label>
                  <p class="text-sm">{{ student.emergency_contact || 'Not provided' }}</p>
                </div>
                <div class="col-span-2">
                  <Label class="text-sm font-medium text-muted-foreground">Address</Label>
                  <p class="text-sm">{{ student.address || 'Not provided' }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Admission Date</Label>
                  <p class="text-sm">{{ formatDate(student.admission_date) }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Status</Label>
                  <Badge :variant="student.is_active ? 'default' : 'secondary'">
                    {{ student.is_active ? 'Active' : 'Inactive' }}
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>

          <!-- Current Enrollment -->
          <Card v-if="currentEnrollment">
            <CardHeader>
              <CardTitle>Current Enrollment</CardTitle>
            </CardHeader>
            <CardContent>
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Classroom</Label>
                  <p class="text-sm font-medium">{{ currentEnrollment.classroom?.name }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Academic Year</Label>
                  <p class="text-sm">{{ currentEnrollment.academicYear?.name }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Enrolled Date</Label>
                  <p class="text-sm">{{ formatDate(currentEnrollment.enrolled_at) }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Status</Label>
                  <Badge :variant="currentEnrollment.is_active ? 'default' : 'secondary'">
                    {{ currentEnrollment.is_active ? 'Active' : 'Inactive' }}
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>

          <!-- Recent Results -->
          <Card v-if="student.results?.length">
            <CardHeader>
              <CardTitle>Recent Results</CardTitle>
            </CardHeader>
            <CardContent>
              <div class="space-y-3">
                <div v-for="result in student.results" :key="result.id"
                     class="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p class="font-medium">{{ result.subject?.name }}</p>
                    <p class="text-sm text-muted-foreground">{{ result.examType?.name }}</p>
                  </div>
                  <div class="text-right">
                    <p class="font-medium">{{ result.marks }}/100</p>
                    <Badge :variant="getGradeVariant(result.grade)">{{ result.grade }}</Badge>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
          <!-- Guardians -->
          <Card v-if="student.guardians?.length">
            <CardHeader>
              <CardTitle>Guardians</CardTitle>
            </CardHeader>
            <CardContent>
              <div class="space-y-3">
                <div v-for="guardian in student.guardians" :key="guardian.id"
                     class="p-3 border rounded-lg">
                  <p class="font-medium">{{ guardian.user?.name || `${guardian.first_name} ${guardian.last_name}` }}</p>
                  <p class="text-sm text-muted-foreground">{{ guardian.pivot?.relationship || 'Guardian' }}</p>
                  <p class="text-sm">{{ guardian.phone || guardian.user?.email }}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <!-- Enrollment History -->
          <Card v-if="student.enrollments?.length">
            <CardHeader>
              <CardTitle>Enrollment History</CardTitle>
            </CardHeader>
            <CardContent>
              <div class="space-y-3">
                <div v-for="enrollment in student.enrollments" :key="enrollment.id"
                     class="p-3 border rounded-lg">
                  <p class="font-medium">{{ enrollment.classroom?.name }}</p>
                  <p class="text-sm text-muted-foreground">{{ enrollment.academicYear?.name }}</p>
                  <p class="text-sm">{{ formatDate(enrollment.enrolled_at) }}</p>
                  <Badge :variant="enrollment.is_active ? 'default' : 'secondary'" class="mt-1">
                    {{ enrollment.is_active ? 'Active' : 'Inactive' }}
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { computed } from 'vue'
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'

interface Student {
  id: number
  student_id: string
  first_name: string
  last_name: string
  date_of_birth: string
  gender: string
  address?: string
  phone?: string
  emergency_contact?: string
  admission_date: string
  is_active: boolean
  user?: {
    email: string
    name: string
  }
  guardians?: Array<{
    id: number
    first_name: string
    last_name: string
    phone?: string
    user?: {
      name: string
      email: string
    }
    pivot?: {
      relationship: string
    }
  }>
  enrollments?: Array<{
    id: number
    enrolled_at: string
    is_active: boolean
    classroom?: {
      name: string
    }
    academicYear?: {
      name: string
    }
  }>
  results?: Array<{
    id: number
    marks: number
    grade: string
    points: number
    subject?: {
      name: string
    }
    examType?: {
      name: string
    }
  }>
}

const props = defineProps<{
  student: Student
  currentEnrollment?: 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>
