<template>
  <form @submit.prevent="handleSubmit" class="space-y-4">
    <div>
      <Label for="name">Episode Name</Label>
      <Input
        id="name"
        v-model="form.name"
        placeholder="Enter episode name"
        required
      />
    </div>
    
    <div>
      <Label for="episode_number">Episode Number</Label>
      <Input
        id="episode_number"
        v-model.number="form.episode_number"
        type="number"
        min="1"
        placeholder="Enter episode number"
        required
      />
    </div>
    
    <div>
      <Label for="description">Description</Label>
      <Textarea
        id="description"
        v-model="form.description"
        placeholder="Brief description of the episode"
        rows="3"
      />
    </div>
    
    <div>
      <Label for="status">Status</Label>
      <Select :model-value="form.status" @update:model-value="form.status = $event">
        <SelectTrigger>
          <SelectValue placeholder="Select status" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="planning">Planning</SelectItem>
          <SelectItem value="in_progress">In Progress</SelectItem>
          <SelectItem value="on_hold">On Hold</SelectItem>
          <SelectItem value="completed">Completed</SelectItem>
          <SelectItem value="cancelled">Cancelled</SelectItem>
        </SelectContent>
      </Select>
    </div>
    
    <div class="flex justify-end gap-3 pt-4">
      <Button type="button" variant="outline" @click="$emit('cancel')">
        Cancel
      </Button>
      <Button type="submit" :disabled="isSubmitting">
        <div v-if="isSubmitting" class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
        {{ isEditing ? 'Update Episode' : 'Create Episode' }}
      </Button>
    </div>
  </form>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { 
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue 
} from '@/components/ui/select'
import type { Episode, EpisodeCreate, EpisodeUpdate } from '@/services/episode'

interface Props {
  episode?: Episode
  isSubmitting?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  isSubmitting: false
})

const emit = defineEmits<{
  submit: [data: EpisodeCreate | EpisodeUpdate]
  cancel: []
}>()

const isEditing = computed(() => !!props.episode)

const form = ref({
  name: '',
  episode_number: 1,
  description: '',
  status: 'planning' as const
})

// Initialize form with episode data if editing
watch(() => props.episode, (episode) => {
  if (episode) {
    form.value = {
      name: episode.name,
      episode_number: episode.episode_number,
      description: episode.description || '',
      status: episode.status
    }
  } else {
    // Reset form for new episode
    form.value = {
      name: '',
      episode_number: 1,
      description: '',
      status: 'planning'
    }
  }
}, { immediate: true })

const handleSubmit = () => {
  const data = {
    name: form.value.name,
    episode_number: form.value.episode_number,
    description: form.value.description || undefined,
    status: form.value.status
  }
  
  emit('submit', data)
}
</script>

<script lang="ts">
import { computed } from 'vue'
export default {
  name: 'EpisodeForm'
}
</script>