<template>
  <AppLayout title="Edit Teacher">
    <div class="space-y-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold tracking-tight">Edit Teacher</h1>
          <p class="text-muted-foreground">
            Update teacher information and subject assignments
          </p>
        </div>
      </div>

      <!-- Form Card -->
      <Card>
        <CardHeader>
          <CardTitle>Teacher Information</CardTitle>
          <CardDescription>
            Update the teacher's personal and professional information
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form @submit.prevent="submit" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!-- Personal Information -->
              <div class="space-y-2">
                <Label for="first_name">First Name *</Label>
                <Input
                  id="first_name"
                  v-model="form.first_name"
                  type="text"
                  :class="{ 'border-destructive': form.errors.first_name }"
                />
                <p v-if="form.errors.first_name" class="text-sm text-destructive">
                  {{ form.errors.first_name }}
                </p>
              </div>

              <div class="space-y-2">
                <Label for="last_name">Last Name *</Label>
                <Input
                  id="last_name"
                  v-model="form.last_name"
                  type="text"
                  :class="{ 'border-destructive': form.errors.last_name }"
                />
                <p v-if="form.errors.last_name" class="text-sm text-destructive">
                  {{ form.errors.last_name }}
                </p>
              </div>

              <div class="space-y-2">
                <Label for="email">Email *</Label>
                <Input
                  id="email"
                  v-model="form.email"
                  type="email"
                  :class="{ 'border-destructive': form.errors.email }"
                />
                <p v-if="form.errors.email" class="text-sm text-destructive">
                  {{ form.errors.email }}
                </p>
              </div>

              <div class="space-y-2">
                <Label for="teacher_id">Teacher ID *</Label>
                <Input
                  id="teacher_id"
                  v-model="form.teacher_id"
                  type="text"
                  :class="{ 'border-destructive': form.errors.teacher_id }"
                />
                <p v-if="form.errors.teacher_id" class="text-sm text-destructive">
                  {{ form.errors.teacher_id }}
                </p>
              </div>

              <div class="space-y-2">
                <Label for="date_of_birth">Date of Birth *</Label>
                <Input
                  id="date_of_birth"
                  v-model="form.date_of_birth"
                  type="date"
                  :class="{ 'border-destructive': form.errors.date_of_birth }"
                />
                <p v-if="form.errors.date_of_birth" class="text-sm text-destructive">
                  {{ form.errors.date_of_birth }}
                </p>
              </div>

              <div class="space-y-2">
                <Label for="gender">Gender *</Label>
                <Select v-model="form.gender">
                  <SelectTrigger :class="{ 'border-destructive': form.errors.gender }">
                    <SelectValue placeholder="Select gender" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="male">Male</SelectItem>
                    <SelectItem value="female">Female</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
                <p v-if="form.errors.gender" class="text-sm text-destructive">
                  {{ form.errors.gender }}
                </p>
              </div>

              <div class="space-y-2">
                <Label for="phone">Phone</Label>
                <Input
                  id="phone"
                  v-model="form.phone"
                  type="tel"
                  :class="{ 'border-destructive': form.errors.phone }"
                />
                <p v-if="form.errors.phone" class="text-sm text-destructive">
                  {{ form.errors.phone }}
                </p>
              </div>

              <div class="space-y-2">
                <Label for="qualification">Qualification *</Label>
                <Select v-model="form.qualification">
                  <SelectTrigger :class="{ 'border-destructive': form.errors.qualification }">
                    <SelectValue placeholder="Select qualification" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Bachelor">Bachelor's Degree</SelectItem>
                    <SelectItem value="Master">Master's Degree</SelectItem>
                    <SelectItem value="PhD">PhD</SelectItem>
                    <SelectItem value="Diploma">Diploma</SelectItem>
                    <SelectItem value="Certificate">Certificate</SelectItem>
                  </SelectContent>
                </Select>
                <p v-if="form.errors.qualification" class="text-sm text-destructive">
                  {{ form.errors.qualification }}
                </p>
              </div>

              <div class="space-y-2">
                <Label for="hire_date">Hire Date *</Label>
                <Input
                  id="hire_date"
                  v-model="form.hire_date"
                  type="date"
                  :class="{ 'border-destructive': form.errors.hire_date }"
                />
                <p v-if="form.errors.hire_date" class="text-sm text-destructive">
                  {{ form.errors.hire_date }}
                </p>
              </div>

              <div class="space-y-2 md:col-span-2">
                <Label for="address">Address</Label>
                <Textarea
                  id="address"
                  v-model="form.address"
                  rows="3"
                  :class="{ 'border-destructive': form.errors.address }"
                />
                <p v-if="form.errors.address" class="text-sm text-destructive">
                  {{ form.errors.address }}
                </p>
              </div>

              <!-- Subject Assignment -->
              <div class="space-y-2 md:col-span-2">
                <Label>Subject Assignments</Label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-2 max-h-40 overflow-y-auto border rounded-md p-3">
                  <div v-for="subject in subjects" :key="subject.id" class="flex items-center space-x-2">
                    <Checkbox
                      :id="`subject-${subject.id}`"
                      :checked="form.subject_ids.includes(subject.id)"
                      @update:checked="toggleSubject(subject.id, $event)"
                    />
                    <Label :for="`subject-${subject.id}`" class="text-sm">
                      {{ subject.name }} ({{ subject.code }})
                    </Label>
                  </div>
                </div>
                <p v-if="form.errors.subject_ids" class="text-sm text-destructive">
                  {{ form.errors.subject_ids }}
                </p>
              </div>

              <div class="space-y-2">
                <Label>Status</Label>
                <div class="flex items-center space-x-2">
                  <Checkbox
                    id="is_active"
                    v-model:checked="form.is_active"
                  />
                  <Label for="is_active" class="text-sm font-normal">
                    Active teacher
                  </Label>
                </div>
              </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-3 pt-6 border-t">
              <Button variant="outline" type="button" as-child>
                <Link :href="route('teachers.index')">
                  Cancel
                </Link>
              </Button>
              <Button type="submit" :disabled="form.processing">
                <span v-if="form.processing">Updating...</span>
                <span v-else>Update Teacher</span>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { useForm, Link } from '@inertiajs/vue3'
import AppLayout from '@/layouts/AppLayout.vue'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

interface Teacher {
  id: number
  teacher_id: string
  first_name: string
  last_name: string
  date_of_birth: string
  gender: string
  address?: string
  phone?: string
  qualification: string
  hire_date: string
  is_active: boolean
  user?: {
    email: string
  }
  subjects?: Array<{ id: number }>
}

interface Subject {
  id: number
  name: string
  code: string
}

const props = defineProps<{
  teacher: Teacher
  subjects: Subject[]
}>()

const form = useForm({
  first_name: props.teacher.first_name || '',
  last_name: props.teacher.last_name || '',
  email: props.teacher.user?.email || '',
  teacher_id: props.teacher.teacher_id,
  date_of_birth: props.teacher.date_of_birth,
  gender: props.teacher.gender,
  address: props.teacher.address || '',
  phone: props.teacher.phone || '',
  qualification: props.teacher.qualification,
  hire_date: props.teacher.hire_date,
  subject_ids: props.teacher.subjects?.map(s => s.id) || [],
  is_active: props.teacher.is_active,
})

const toggleSubject = (subjectId: number, checked: boolean) => {
  if (checked) {
    if (!form.subject_ids.includes(subjectId)) {
      form.subject_ids.push(subjectId)
    }
  } else {
    const index = form.subject_ids.indexOf(subjectId)
    if (index > -1) {
      form.subject_ids.splice(index, 1)
    }
  }
}

const submit = () => {
  form.put(route('teachers.update', props.teacher.id))
}
</script>
