Epicnabbo-Catalogus-Updated-Daily/src/app/admin/events/event-form.tsx

'use client'

import { useForm } from 'react-hook-form'
import { createEvent, updateEvent } from '@/actions/events'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { DateTimePicker } from '@/components/ui/date-time-picker'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { useServerAction } from '@/hooks/use-server-action'
import type { CreateEventInput } from '@/lib/validators/event'

interface EventType {
  id: number
  name: string
  slug: string
  color: string
}

interface EventFormProps {
  eventTypes: EventType[]
  defaultValues?: Partial<CreateEventInput> & { id?: number }
}

export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
  const { run, isPending } = useServerAction()
  const isEditing = !!defaultValues?.id

  const form = useForm({
    defaultValues: {
      title: '',
      description: '',
      typeId: eventTypes[0]?.id,
      status: 'draft',
      isRecurring: 0,
      ...defaultValues,
    },
  })

  // biome-ignore lint/suspicious/noExplicitAny: form values typed by useForm defaults; createEvent does its own zod validation
  function onSubmit(data: any) {
    if (isEditing && defaultValues?.id) {
      run(() => updateEvent({ id: defaultValues.id!, ...data }), {
        successMessage: 'Event updated!',
      })
    } else {
      run(() => createEvent(data), {
        successMessage: 'Event created!',
        onSuccess: (result) => {
          const data = result.data as Record<string, unknown> | undefined
          if (data?.id) {
            window.location.href = `/admin/events/${data.id}`
          }
        },
      })
    }
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <Card>
        <CardHeader>
          <CardTitle>{isEditing ? 'Edit Event' : 'Event Details'}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="title">Title</Label>
              <Input id="title" {...form.register('title')} />
              {form.formState.errors.title && (
                <p className="text-sm text-destructive">{form.formState.errors.title.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="typeId">Event Type</Label>
              <Select
                value={String(form.watch('typeId'))}
                onValueChange={(v) => form.setValue('typeId', Number(v))}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  {eventTypes.map((t) => (
                    <SelectItem key={t.id} value={String(t.id)}>
                      {t.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea id="description" rows={4} {...form.register('description')} />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <Label>Starts At</Label>
              <DateTimePicker
                value={form.watch('startsAt')}
                // biome-ignore lint/suspicious/noExplicitAny: form value type inferred loose; runtime validated by zod on submit
                onChange={(d) => form.setValue('startsAt', d as any, { shouldDirty: true })}
                placeholder="Select start date"
              />
            </div>
            <div className="space-y-2">
              <Label>Ends At</Label>
              <DateTimePicker
                value={form.watch('endsAt')}
                // biome-ignore lint/suspicious/noExplicitAny: form value type inferred loose; runtime validated by zod on submit
                onChange={(d) => form.setValue('endsAt', d as any, { shouldDirty: true })}
                placeholder="Select end date"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="maxPlayers">Max Players</Label>
              <Input
                id="maxPlayers"
                type="number"
                {...form.register('maxPlayers')}
                placeholder="Unlimited"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="roomId">Room ID</Label>
              <Input
                id="roomId"
                type="number"
                {...form.register('roomId')}
                placeholder="Optional"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="status">Status</Label>
              <Select
                value={form.watch('status')}
                onValueChange={(v) => form.setValue('status', v as CreateEventInput['status'])}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="draft">Draft</SelectItem>
                  <SelectItem value="published">Published</SelectItem>
                  <SelectItem value="cancelled">Cancelled</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="image">Image URL</Label>
            <Input id="image" {...form.register('image')} placeholder="https://..." />
          </div>

          <div className="flex justify-end">
            <Button type="submit" disabled={isPending}>
              {isPending ? 'Saving...' : isEditing ? 'Update Event' : 'Create Event'}
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  )
}