EpicNext-Cms/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>
  );
}