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

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Teacher 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">{{ teacher.first_name }} {{ teacher.last_name }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Email</Label>
                  <p class="text-sm">{{ teacher.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(teacher.date_of_birth) }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Gender</Label>
                  <p class="text-sm capitalize">{{ teacher.gender }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Phone</Label>
                  <p class="text-sm">{{ teacher.phone || 'Not provided' }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Qualification</Label>
                  <p class="text-sm">{{ teacher.qualification }}</p>
                </div>
                <div class="col-span-2">
                  <Label class="text-sm font-medium text-muted-foreground">Address</Label>
                  <p class="text-sm">{{ teacher.address || 'Not provided' }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Hire Date</Label>
                  <p class="text-sm">{{ formatDate(teacher.hire_date) }}</p>
                </div>
                <div>
                  <Label class="text-sm font-medium text-muted-foreground">Status</Label>
                  <Badge :variant="teacher.is_active ? 'default' : 'secondary'">
                    {{ teacher.is_active ? 'Active' : 'Inactive' }}
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
          <!-- Subjects -->
          <Card v-if="teacher.subjects?.length">
            <CardHeader>
              <CardTitle>Teaching Subjects</CardTitle>
            </CardHeader>
            <CardContent>
              <div class="space-y-2">
                <div v-for="subject in teacher.subjects" :key="subject.id"
                     class="p-2 border rounded-lg">
                  <p class="font-medium">{{ subject.name }}</p>
                  <p class="text-sm text-muted-foreground">{{ subject.code }}</p>
                </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 { 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<{
  teacher: any
}>()

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