EpicNext-Cms/src/app/admin/events/[id]/event-prizes.tsx

"use client";

import { Plus, Trash2 } from "lucide-react";
import { useState } from "react";
import { addEventPrize, deleteEventPrize } from "@/actions/events";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { useServerAction } from "@/hooks/use-server-action";

interface Prize {
	id: number;
	position: number;
	prizeType: string;
	badgeCode: string | null;
	credits: number;
	pixels: number;
	points: number;
	itemId: number | null;
	description: string;
}

interface Props {
	eventId: number;
	prizes: Prize[];
}

export function EventPrizesManager({ eventId, prizes }: Props) {
	const { run, isPending } = useServerAction();
	const [showForm, setShowForm] = useState(false);
	const [form, setForm] = useState({
		position: prizes.length + 1,
		prizeType: "badge" as string,
		badgeCode: "",
		credits: 0,
		pixels: 0,
		points: 0,
		description: "",
	});

	function handleAdd(e: React.FormEvent) {
		e.preventDefault();
		// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
		run(() => addEventPrize({ eventId, ...form } as any), {
			successMessage: "Prize added!",
			onSuccess: () => {
				setShowForm(false);
				setForm({
					...form,
					position: form.position + 1,
					badgeCode: "",
					description: "",
				});
			},
		});
	}

	return (
		<Card>
			<CardHeader className="flex flex-row items-center justify-between">
				<CardTitle>Prizes</CardTitle>
				<Button size="sm" onClick={() => setShowForm(!showForm)}>
					<Plus className="h-4 w-4 mr-1" /> Add Prize
				</Button>
			</CardHeader>
			<CardContent className="space-y-4">
				{showForm && (
					<form
						onSubmit={handleAdd}
						className="border rounded-lg p-4 space-y-3"
					>
						<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
							<div className="space-y-1">
								<Label>Position</Label>
								<Input
									type="number"
									value={form.position}
									onChange={(e) =>
										setForm({ ...form, position: Number(e.target.value) })
									}
								/>
							</div>
							<div className="space-y-1">
								<Label>Type</Label>
								<Select
									value={form.prizeType}
									onValueChange={(v) => setForm({ ...form, prizeType: v })}
								>
									<SelectTrigger>
										<SelectValue />
									</SelectTrigger>
									<SelectContent>
										<SelectItem value="badge">Badge</SelectItem>
										<SelectItem value="credits">Credits</SelectItem>
										<SelectItem value="pixels">Pixels</SelectItem>
										<SelectItem value="points">Points</SelectItem>
										<SelectItem value="item">Item</SelectItem>
									</SelectContent>
								</Select>
							</div>
							<div className="space-y-1">
								<Label>Badge Code</Label>
								<Input
									value={form.badgeCode}
									onChange={(e) =>
										setForm({ ...form, badgeCode: e.target.value })
									}
									placeholder="ACH_..."
								/>
							</div>
							<div className="space-y-1">
								<Label>Credits</Label>
								<Input
									type="number"
									value={form.credits}
									onChange={(e) =>
										setForm({ ...form, credits: Number(e.target.value) })
									}
								/>
							</div>
						</div>
						<div className="space-y-1">
							<Label>Description</Label>
							<Input
								value={form.description}
								onChange={(e) =>
									setForm({ ...form, description: e.target.value })
								}
							/>
						</div>
						<div className="flex gap-2 justify-end">
							<Button
								type="button"
								variant="outline"
								size="sm"
								onClick={() => setShowForm(false)}
							>
								Cancel
							</Button>
							<Button type="submit" size="sm" disabled={isPending}>
								Add
							</Button>
						</div>
					</form>
				)}

				{prizes.length === 0 && !showForm && (
					<p className="text-sm text-muted-foreground text-center py-4">
						No prizes configured yet.
					</p>
				)}

				{prizes.map((prize) => (
					<div
						key={prize.id}
						className="flex items-center justify-between border rounded-lg px-4 py-3"
					>
						<div className="flex items-center gap-3">
							<span className="flex h-8 w-8 items-center justify-center rounded-full bg-accent font-bold text-sm">
								#{prize.position}
							</span>
							<div>
								<div className="flex items-center gap-2">
									<Badge variant="secondary">{prize.prizeType}</Badge>
									{prize.badgeCode && (
										<span className="text-sm font-mono">{prize.badgeCode}</span>
									)}
									{prize.credits > 0 && (
										<span className="text-sm">{prize.credits} credits</span>
									)}
									{prize.pixels > 0 && (
										<span className="text-sm">{prize.pixels} pixels</span>
									)}
									{prize.points > 0 && (
										<span className="text-sm">{prize.points} points</span>
									)}
								</div>
								{prize.description && (
									<p className="text-xs text-muted-foreground">
										{prize.description}
									</p>
								)}
							</div>
						</div>
						<Button
							variant="ghost"
							size="icon"
							onClick={() =>
								run(() => deleteEventPrize({ id: prize.id }), {
									successMessage: "Prize removed",
								})
							}
						>
							<Trash2 className="h-4 w-4 text-destructive" />
						</Button>
					</div>
				))}
			</CardContent>
		</Card>
	);
}