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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import type { LessonType } from '@/types/lesson'

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

export function LessonTypeForm({ defaultValues, onSubmit, loading }: Props) {
  const { register, handleSubmit, setValue, watch } = useForm({
    defaultValues: {
      name: defaultValues?.name ?? '',
      instrument: defaultValues?.instrument ?? '',
      durationMinutes: defaultValues?.durationMinutes ?? 30,
      lessonFormat: (defaultValues?.lessonFormat ?? 'private') as 'private' | 'group',
      rateWeekly: defaultValues?.rateWeekly ?? '',
      rateMonthly: defaultValues?.rateMonthly ?? '',
      rateQuarterly: defaultValues?.rateQuarterly ?? '',
    },
  })

  const lessonFormat = watch('lessonFormat')

  function handleFormSubmit(data: {
    name: string
    instrument: string
    durationMinutes: number
    lessonFormat: string
    rateWeekly: string
    rateMonthly: string
    rateQuarterly: string
  }) {
    onSubmit({
      name: data.name,
      instrument: data.instrument || undefined,
      durationMinutes: Number(data.durationMinutes),
      lessonFormat: data.lessonFormat,
      rateWeekly: data.rateWeekly || undefined,
      rateMonthly: data.rateMonthly || undefined,
      rateQuarterly: data.rateQuarterly || undefined,
    })
  }

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="lt-name">Name *</Label>
        <Input id="lt-name" {...register('name')} placeholder="e.g. Piano — 30 min Private" required />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="lt-instrument">Instrument</Label>
          <Input id="lt-instrument" {...register('instrument')} placeholder="e.g. Piano, Guitar" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="lt-duration">Duration (minutes) *</Label>
          <Input id="lt-duration" type="number" min={5} step={5} {...register('durationMinutes')} required />
        </div>
      </div>
      <div className="space-y-2">
        <Label>Format *</Label>
        <Select value={lessonFormat} onValueChange={(v) => setValue('lessonFormat', v as 'private' | 'group')}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="private">Private</SelectItem>
            <SelectItem value="group">Group</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div>
        <Label className="block mb-2">Default Rates (optional)</Label>
        <div className="grid grid-cols-3 gap-3">
          <div className="space-y-1">
            <Label htmlFor="lt-rate-weekly" className="text-xs text-muted-foreground">Weekly</Label>
            <Input id="lt-rate-weekly" type="number" step="0.01" min="0" {...register('rateWeekly')} placeholder="—" />
          </div>
          <div className="space-y-1">
            <Label htmlFor="lt-rate-monthly" className="text-xs text-muted-foreground">Monthly</Label>
            <Input id="lt-rate-monthly" type="number" step="0.01" min="0" {...register('rateMonthly')} placeholder="—" />
          </div>
          <div className="space-y-1">
            <Label htmlFor="lt-rate-quarterly" className="text-xs text-muted-foreground">Quarterly</Label>
            <Input id="lt-rate-quarterly" type="number" step="0.01" min="0" {...register('rateQuarterly')} placeholder="—" />
          </div>
        </div>
      </div>
      <Button type="submit" disabled={loading} className="w-full">
        {loading ? 'Saving...' : defaultValues?.id ? 'Save Changes' : 'Create Lesson Type'}
      </Button>
    </form>
  )
}
