<template>
  <AppLayout title="Create Subject">
    <div class="space-y-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold tracking-tight">Create Subject</h1>
          <p class="text-muted-foreground">
            Add a new subject to the system
          </p>
        </div>
      </div>

      <!-- Form Card -->
      <Card>
        <CardHeader>
          <CardTitle>Subject Information</CardTitle>
          <CardDescription>
            Enter the details for the new subject
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form @submit.prevent="submit" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!-- Subject Name -->
              <div class="space-y-2">
                <Label for="name">Subject Name *</Label>
                <Input
                  id="name"
                  v-model="form.name"
                  type="text"
                  placeholder="e.g., Mathematics"
                  :class="{ 'border-destructive': form.errors.name }"
                />
                <p v-if="form.errors.name" class="text-sm text-destructive">
                  {{ form.errors.name }}
                </p>
              </div>

              <!-- Subject Code -->
              <div class="space-y-2">
                <Label for="code">Subject Code *</Label>
                <Input
                  id="code"
                  v-model="form.code"
                  type="text"
                  placeholder="e.g., MATH"
                  :class="{ 'border-destructive': form.errors.code }"
                />
                <p v-if="form.errors.code" class="text-sm text-destructive">
                  {{ form.errors.code }}
                </p>
                <p class="text-sm text-muted-foreground">
                  Enter a unique code for the subject (e.g., "MATH", "ENG")
                </p>
              </div>

              <!-- Status -->
              <div class="space-y-2">
                <Label for="is_active">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 subject
                  </Label>
                </div>
                <p class="text-sm text-muted-foreground">
                  Only active subjects can be assigned to classrooms
                </p>
              </div>

              <!-- Description -->
              <div class="space-y-2 md:col-span-2">
                <Label for="description">Description</Label>
                <Textarea
                  id="description"
                  v-model="form.description"
                  placeholder="Enter subject description (optional)"
                  rows="3"
                  :class="{ 'border-destructive': form.errors.description }"
                />
                <p v-if="form.errors.description" class="text-sm text-destructive">
                  {{ form.errors.description }}
                </p>
              </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('subjects.index')">
                  Cancel
                </Link>
              </Button>
              <Button type="submit" :disabled="form.processing">
                <span v-if="form.processing">Creating...</span>
                <span v-else>Create Subject</span>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { useForm, Link, usePage } from '@inertiajs/vue3'
import { useToast } from '@/composables/useToast'
import { onMounted } from 'vue'
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

const props = defineProps({
  classrooms: {
    type: Array,
    default: () => []
  },
  teachers: {
    type: Array,
    default: () => []
  }
})

const page = usePage()
const toast = useToast()

const form = useForm({
  name: '',
  code: '',
  description: '',
  is_active: true
})

const submit = () => {
  form.post(route('subjects.store'), {
    onError: (errors) => {
      // Show toast for validation errors
      const firstError = Object.values(errors)[0]
      const errorMessage = Array.isArray(firstError) ? firstError[0] : firstError
      toast.error(errorMessage || 'Please check the form for errors.')
    }
  })
}

// Show success toast if redirected with success message
onMounted(() => {
  if (page.props.success) {
    toast.success(page.props.success)
  }
})
</script>
