<template>
  <AppLayout title="Enrollment Details">
    <div class="space-y-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold tracking-tight">Enrollment Details</h1>
          <p class="text-muted-foreground">
            View enrollment information and student details
          </p>
        </div>
        <div class="flex space-x-3">
          <Button variant="outline" as-child>
            <Link :href="route('enrollment.edit', enrollment.id)">
              <Edit class="mr-2 h-4 w-4" />
              Edit Enrollment
            </Link>
          </Button>
          <Button variant="outline" as-child>
            <Link :href="route('enrollment.index')">
              <ArrowLeft class="mr-2 h-4 w-4" />
              Back to Enrollments
            </Link>
          </Button>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Enrollment Information -->
        <div class="lg:col-span-2 space-y-6">
          <!-- Enrollment Details Card -->
          <Card>
            <CardHeader>
              <CardTitle>Enrollment 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-lg font-medium">
                    {{ enrollment.student?.user?.name }}
                  </p>
                  <p class="text-sm text-muted-foreground">ID: {{ enrollment.student?.student_id }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Status</Label>
                  <div class="mt-1">
                    <Badge :variant="enrollment.is_active ? 'default' : 'secondary'">
                      {{ enrollment.is_active ? 'Active' : 'Inactive' }}
                    </Badge>
                  </div>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Classroom</Label>
                  <p class="text-lg font-medium">{{ enrollment.classroom?.name }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Academic Year</Label>
                  <p class="text-lg font-medium">{{ enrollment.academic_year?.name }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Enrolled Date</Label>
                  <p class="text-lg font-medium">{{ formatDate(enrollment.enrolled_at) }}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <!-- Student Information Card -->
          <Card v-if="enrollment.student">
            <CardHeader>
              <CardTitle>Student 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-lg font-medium">
                    {{ enrollment.student.user?.name }}
                  </p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Email</Label>
                  <p class="text-lg font-medium">{{ enrollment.student.user?.email || 'N/A' }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Student ID</Label>
                  <p class="text-lg font-medium">{{ enrollment.student.student_id }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Date of Birth</Label>
                  <p class="text-lg font-medium">{{ enrollment.student.date_of_birth ? formatDate(enrollment.student.date_of_birth) : 'N/A' }}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <!-- Classroom Subjects -->
          <Card v-if="enrollment.classroom?.subjects?.length">
            <CardHeader>
              <CardTitle>Classroom Subjects</CardTitle>
            </CardHeader>
            <CardContent>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div v-for="subject in enrollment.classroom.subjects" :key="subject.id"
                     class="p-3 border rounded-lg">
                  <p class="font-medium">{{ subject.name }}</p>
                  <p class="text-sm text-muted-foreground">{{ subject.code }}</p>
                  <p class="text-sm text-muted-foreground" v-if="subject.teacher?.user">
                    Teacher: {{ subject.teacher.user.name }}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

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

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

          <!-- Enrollment History -->
          <Card v-if="enrollmentHistory?.length">
            <CardHeader>
              <CardTitle>Enrollment History</CardTitle>
            </CardHeader>
            <CardContent>
              <div class="space-y-3">
                <div v-for="historyItem in enrollmentHistory" :key="historyItem.id"
                     class="p-3 border rounded-lg">
                  <p class="font-medium">{{ historyItem.classroom?.name }}</p>
                  <p class="text-sm text-muted-foreground">{{ historyItem.academic_year?.name }}</p>
                  <p class="text-sm">{{ formatDate(historyItem.enrolled_at) }}</p>
                  <Badge :variant="historyItem.is_active ? 'default' : 'secondary'" class="mt-1">
                    {{ historyItem.is_active ? 'Active' : 'Inactive' }}
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </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 { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Edit, ArrowLeft } from 'lucide-vue-next'

interface Enrollment {
  id: number
  is_active: boolean
  enrolled_at: string
  student?: {
    id: number
    student_id: string
    date_of_birth?: string
    user?: {
      name: string
      email?: string
    }
    guardians?: Array<{
      id: number
      relationship: string
      phone?: string
      user?: {
        name: string
        email?: string
      }
    }>
  }
  classroom?: {
    id: number
    name: string
    subjects?: Array<{
      id: number
      name: string
      code: string
      teacher?: {
        user?: {
          name: string
        }
      }
    }>
  }
  academic_year?: {
    id: number
    name: string
  }
}

interface Result {
  id: number
  marks: number
  grade: string
  points: number
  subject?: {
    name: string
  }
  exam_type?: {
    name: string
  }
}

const props = defineProps<{
  enrollment: Enrollment
  enrollmentHistory?: Enrollment[]
  recentResults?: Result[]
}>()

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const getGradeVariant = (grade: string) => {
  switch (grade) {
    case 'A':
    case 'A+':
      return 'default'
    case 'B':
    case 'B+':
      return 'secondary'
    case 'C':
    case 'C+':
      return 'outline'
    default:
      return 'destructive'
  }
}
</script>
