EpicNext-Cms/src/app/admin/events/event-form.tsx

"use client";

import { useTranslations } from "next-intl";
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,
	UpdateEventInput,
} from "@/lib/validators/event";

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

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

interface EventFormValues {
	title: string;
	description: string;
	image?: string | null;
	maxPlayers?: string | number | null;
	roomId?: string | number | null;
	typeId: number;
	status: string;
	isRecurring: number;
	startsAt?: Date | null;
	endsAt?: Date | null;
}

export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
	const t = useTranslations("pages.admin.events");
	const { run, isPending } = useServerAction();
	const isEditing = !!defaultValues?.id;

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

	function onSubmit(data: EventFormValues) {
		if (isEditing && defaultValues?.id) {
			run(
				() =>
					updateEvent({ id: defaultValues.id, ...data } as UpdateEventInput & {
						id: number;
					}),
				{
					successMessage: t("toastUpdated"),
				},
			);
		} else {
			run(() => createEvent(data as CreateEventInput), {
				successMessage: t("toastCreated"),
				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 ? t("formEditTitle") : t("formDetailsTitle")}
					</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">{t("formTitle")}</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">{t("formEventType")}</Label>
							<Select
								value={String(form.watch("typeId"))}
								onValueChange={(v) => form.setValue("typeId", Number(v))}
							>
								<SelectTrigger>
									<SelectValue placeholder={t("formSelectType")} />
								</SelectTrigger>
								<SelectContent>
									{eventTypes.map((et) => (
										<SelectItem key={et.id} value={String(et.id)}>
											{et.name}
										</SelectItem>
									))}
								</SelectContent>
							</Select>
						</div>
					</div>

					<div className="space-y-2">
						<Label htmlFor="description">{t("formDescription")}</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>{t("formStartsAt")}</Label>
							<DateTimePicker
								value={form.watch("startsAt")}
								onChange={(d) =>
									form.setValue("startsAt", d, { shouldDirty: true })
								}
								placeholder={t("formSelectStart")}
							/>
						</div>
						<div className="space-y-2">
							<Label>{t("formEndsAt")}</Label>
							<DateTimePicker
								value={form.watch("endsAt")}
								onChange={(d) =>
									form.setValue("endsAt", d, { shouldDirty: true })
								}
								placeholder={t("formSelectEnd")}
							/>
						</div>
						<div className="space-y-2">
							<Label htmlFor="maxPlayers">{t("formMaxPlayers")}</Label>
							<Input
								id="maxPlayers"
								type="number"
								{...form.register("maxPlayers")}
								placeholder={t("formUnlimited")}
							/>
						</div>
					</div>

					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
						<div className="space-y-2">
							<Label htmlFor="roomId">{t("formRoomId")}</Label>
							<Input
								id="roomId"
								type="number"
								{...form.register("roomId")}
								placeholder={t("formOptional")}
							/>
						</div>
						<div className="space-y-2">
							<Label htmlFor="status">{t("colStatus")}</Label>
							<Select
								value={form.watch("status")}
								onValueChange={(v) =>
									form.setValue("status", v as CreateEventInput["status"])
								}
							>
								<SelectTrigger>
									<SelectValue />
								</SelectTrigger>
								<SelectContent>
									<SelectItem value="draft">{t("statusDraft")}</SelectItem>
									<SelectItem value="published">
										{t("statusPublished")}
									</SelectItem>
									<SelectItem value="cancelled">
										{t("statusCancelled")}
									</SelectItem>
									<SelectItem value="completed">
										{t("statusCompleted")}
									</SelectItem>
								</SelectContent>
							</Select>
						</div>
					</div>

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

					<div className="flex justify-end">
						<Button type="submit" disabled={isPending}>
							{isPending
								? t("formSaving")
								: isEditing
									? t("formUpdate")
									: t("formCreate")}
						</Button>
					</div>
				</CardContent>
			</Card>
		</form>
	);
}