myeasycms-v2/packages/features/event-management/src/components/create-event-form.tsx

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { useAction } from 'next-safe-action/hooks';
import { useRouter } from 'next/navigation';
import { Button } from '@kit/ui/button';
import { Input } from '@kit/ui/input';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@kit/ui/form';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
import { toast } from '@kit/ui/sonner';
import { CreateEventSchema } from '../schema/event.schema';
import { createEvent } from '../server/actions/event-actions';

interface Props {
  accountId: string;
  account: string;
}

export function CreateEventForm({ accountId, account }: Props) {
  const router = useRouter();
  const form = useForm({
    resolver: zodResolver(CreateEventSchema),
    defaultValues: {
      accountId,
      name: '',
      description: '',
      eventDate: '',
      eventTime: '',
      endDate: '',
      location: '',
      capacity: undefined as number | undefined,
      minAge: undefined as number | undefined,
      maxAge: undefined as number | undefined,
      fee: 0,
      status: 'planned' as const,
      registrationDeadline: '',
      contactName: '',
      contactEmail: '',
      contactPhone: '',
    },
  });

  const { execute, isPending } = useAction(createEvent, {
    onSuccess: ({ data }) => {
      if (data?.success) {
        toast.success('Veranstaltung erfolgreich erstellt');
        router.push(`/home/${account}/events`);
      }
    },
    onError: ({ error }) => {
      toast.error(error.serverError ?? 'Fehler beim Erstellen der Veranstaltung');
    },
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit((data) => execute(data))} className="space-y-6">
        <Card>
          <CardHeader><CardTitle>Grunddaten</CardTitle></CardHeader>
          <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div className="sm:col-span-2">
              <FormField control={form.control} name="name" render={({ field }) => (
                <FormItem><FormLabel>Veranstaltungsname *</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>
              )} />
            </div>
            <div className="sm:col-span-2">
              <FormField control={form.control} name="description" render={({ field }) => (
                <FormItem><FormLabel>Beschreibung</FormLabel><FormControl>
                  <textarea {...field} className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
                </FormControl><FormMessage /></FormItem>
              )} />
            </div>
            <FormField control={form.control} name="status" render={({ field }) => (
              <FormItem><FormLabel>Status</FormLabel><FormControl>
                <select {...field} className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                  <option value="planned">Geplant</option>
                  <option value="open">Offen</option>
                  <option value="full">Ausgebucht</option>
                  <option value="running">Laufend</option>
                  <option value="completed">Abgeschlossen</option>
                  <option value="cancelled">Abgesagt</option>
                </select>
              </FormControl><FormMessage /></FormItem>
            )} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader><CardTitle>Datum & Ort</CardTitle></CardHeader>
          <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <FormField control={form.control} name="eventDate" render={({ field }) => (
              <FormItem><FormLabel>Veranstaltungsdatum *</FormLabel><FormControl><Input type="date" {...field} /></FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="eventTime" render={({ field }) => (
              <FormItem><FormLabel>Uhrzeit</FormLabel><FormControl><Input type="time" {...field} /></FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="endDate" render={({ field }) => (
              <FormItem><FormLabel>Enddatum</FormLabel><FormControl><Input type="date" {...field} /></FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="location" render={({ field }) => (
              <FormItem><FormLabel>Veranstaltungsort</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="registrationDeadline" render={({ field }) => (
              <FormItem><FormLabel>Anmeldeschluss</FormLabel><FormControl><Input type="date" {...field} /></FormControl><FormMessage /></FormItem>
            )} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader><CardTitle>Teilnehmer & Kosten</CardTitle></CardHeader>
          <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <FormField control={form.control} name="capacity" render={({ field }) => (
              <FormItem><FormLabel>Max. Teilnehmer</FormLabel><FormControl>
                <Input type="number" min={1} {...field} value={field.value ?? ''} onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
              </FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="fee" render={({ field }) => (
              <FormItem><FormLabel>Gebühr (€)</FormLabel><FormControl>
                <Input type="number" min={0} step="0.01" {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
              </FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="minAge" render={({ field }) => (
              <FormItem><FormLabel>Mindestalter</FormLabel><FormControl>
                <Input type="number" min={0} {...field} value={field.value ?? ''} onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
              </FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="maxAge" render={({ field }) => (
              <FormItem><FormLabel>Höchstalter</FormLabel><FormControl>
                <Input type="number" min={0} {...field} value={field.value ?? ''} onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
              </FormControl><FormMessage /></FormItem>
            )} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader><CardTitle>Kontakt</CardTitle></CardHeader>
          <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <FormField control={form.control} name="contactName" render={({ field }) => (
              <FormItem><FormLabel>Ansprechpartner</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="contactEmail" render={({ field }) => (
              <FormItem><FormLabel>E-Mail</FormLabel><FormControl><Input type="email" {...field} /></FormControl><FormMessage /></FormItem>
            )} />
            <FormField control={form.control} name="contactPhone" render={({ field }) => (
              <FormItem><FormLabel>Telefon</FormLabel><FormControl><Input type="tel" {...field} /></FormControl><FormMessage /></FormItem>
            )} />
          </CardContent>
        </Card>

        <div className="flex justify-end gap-2">
          <Button type="button" variant="outline" onClick={() => router.back()}>Abbrechen</Button>
          <Button type="submit" disabled={isPending}>{isPending ? 'Wird erstellt...' : 'Veranstaltung erstellen'}</Button>
        </div>
      </form>
    </Form>
  );
}