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

      <!-- Form Card -->
      <Card>
        <CardHeader>
          <CardTitle>Academic Year Information</CardTitle>
          <CardDescription>
            Update the academic year details and active status
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form @submit.prevent="submit" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-2">
                <Label for="name">Academic Year Name *</Label>
                <Input
                  id="name"
                  v-model="form.name"
                  type="text"
                  placeholder="e.g., 2024-2025"
                  :class="{ 'border-destructive': form.errors.name }"
                />
                <p v-if="form.errors.name" class="text-sm text-destructive">
                  {{ form.errors.name }}
                </p>
              </div>

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

              <div class="space-y-2">
                <Label for="end_date">End Date *</Label>
                <Input
                  id="end_date"
                  v-model="form.end_date"
                  type="date"
                  :class="{ 'border-destructive': form.errors.end_date }"
                />
                <p v-if="form.errors.end_date" class="text-sm text-destructive">
                  {{ form.errors.end_date }}
                </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 academic year
                  </Label>
                </div>
                <p class="text-sm text-muted-foreground">
                  Only one academic year can be active at a time
                </p>
              </div>
            </div>

            <!-- Academic Year Preview -->
            <div v-if="form.name && form.start_date && form.end_date" class="mt-6 p-4 bg-muted rounded-lg">
              <h3 class="font-medium mb-2">Academic Year Preview</h3>
              <div class="space-y-1 text-sm">
                <p><strong>Name:</strong> {{ form.name }}</p>
                <p><strong>Duration:</strong> {{ formatDate(form.start_date) }} - {{ formatDate(form.end_date) }}</p>
                <p><strong>Status:</strong> {{ form.is_active ? 'Active' : 'Inactive' }}</p>
                <p><strong>Duration:</strong> {{ calculateDuration() }} days</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('academic-years.index')">
                  Cancel
                </Link>
              </Button>
              <Button type="submit" :disabled="form.processing">
                <span v-if="form.processing">Updating...</span>
                <span v-else>Update Academic Year</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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

interface AcademicYear {
  id: number
  name: string
  start_date: string
  end_date: string
  is_active: boolean
}

const props = defineProps<{
  academicYear: AcademicYear
}>()

const form = useForm({
  name: props.academicYear.name,
  start_date: props.academicYear.start_date,
  end_date: props.academicYear.end_date,
  is_active: props.academicYear.is_active,
})

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

const calculateDuration = () => {
  if (!form.start_date || !form.end_date) return 0
  const start = new Date(form.start_date)
  const end = new Date(form.end_date)
  const diffTime = Math.abs(end.getTime() - start.getTime())
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
}

const submit = () => {
  form.put(route('academic-years.update', props.academicYear.id))
}
</script>
