import { useForm } from 'react-hook-form'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import type { Instructor } from '@/types/lesson'

interface Props {
  defaultValues?: Partial<Instructor>
  onSubmit: (data: Record<string, unknown>) => void
  loading?: boolean
}

export function InstructorForm({ defaultValues, onSubmit, loading }: Props) {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      displayName: defaultValues?.displayName ?? '',
      bio: defaultValues?.bio ?? '',
      instruments: defaultValues?.instruments?.join(', ') ?? '',
    },
  })

  function handleFormSubmit(data: { displayName: string; bio: string; instruments: string }) {
    onSubmit({
      displayName: data.displayName,
      bio: data.bio || undefined,
      instruments: data.instruments
        ? data.instruments.split(',').map((s) => s.trim()).filter(Boolean)
        : undefined,
    })
  }

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="displayName">Display Name *</Label>
        <Input id="displayName" {...register('displayName')} required />
      </div>
      <div className="space-y-2">
        <Label htmlFor="bio">Bio</Label>
        <Textarea id="bio" {...register('bio')} rows={3} />
      </div>
      <div className="space-y-2">
        <Label htmlFor="instruments">Instruments</Label>
        <Input id="instruments" {...register('instruments')} placeholder="Piano, Guitar, Voice (comma-separated)" />
      </div>
      <Button type="submit" disabled={loading} className="w-full">
        {loading ? 'Saving...' : defaultValues ? 'Save Changes' : 'Create Instructor'}
      </Button>
    </form>
  )
}