"use client"; import { useEffect, useState } from "react"; import { Check, ChevronLeft, ChevronRight, ImageIcon, Search, X, } from "lucide-react"; import Button from "@/components/ui/Button"; import ImagePicker from "@/components/ui/ImagePicker"; import Input from "@/components/ui/Input"; import Modal from "@/components/ui/Modal"; import type { EventRow } from "@/components/business/BusinessPanelEvents"; type Props = { businessId: string; event: EventRow | null; locations: { id: string; name: string; }[]; onClose(): void; onSave(): void; }; const STEPS = ["Details", "Venue", "Schedule", "Review"]; const localDateTime = (value?: string | null) => value ? new Date(value).toISOString().slice(0, 16) : ""; type Category = { id: string; name: string; slug: string }; export default function EventFormModal({ businessId, event, locations, onClose, onSave, }: Props) { const [step, setStep] = useState(0); const [title, setTitle] = useState(event?.title ?? ""); const [description, setDescription] = useState(event?.description ?? ""); const [imageUrl, setImageUrl] = useState(event?.imageUrl ?? ""); const [locationIds, setLocationIds] = useState( event?.hostingLocations?.map(({ location }) => location.id) ?? (event?.locationId ? [event.locationId] : locations[0]?.id ? [locations[0].id] : []), ); const [venueMode, setVenueMode] = useState<"HOST_LOCATION" | "ON_SITE">( event?.venueMode ?? "HOST_LOCATION", ); const [venueName, setVenueName] = useState(event?.venueName ?? ""); const [venueAddress, setVenueAddress] = useState(event?.venueAddress ?? ""); const [startsAt, setStartsAt] = useState(localDateTime(event?.startsAt)); const [endsAt, setEndsAt] = useState(localDateTime(event?.endsAt)); const [capacity, setCapacity] = useState(event?.capacity?.toString() ?? ""); const [status, setStatus] = useState(event?.status ?? "DRAFT"); const [recurrence, setRecurrence] = useState( event?.recurrence ?? "NONE", ); const [recurrenceEndsAt, setRecurrenceEndsAt] = useState( event?.recurrenceEndsAt?.slice(0, 10) ?? "", ); const [saving, setSaving] = useState(false); const [error, setError] = useState(""); const [categoryQuery, setCategoryQuery] = useState(""); const [categoryResults, setCategoryResults] = useState([]); const [selectedCategory, setSelectedCategory] = useState( event?.categories[0]?.category ?? null, ); useEffect(() => { const controller = new AbortController(); const timer = setTimeout(async () => { try { const res = await fetch( `/api/businesses/${businessId}/event-categories?q=${encodeURIComponent(categoryQuery)}`, { signal: controller.signal }, ); if (res.ok) setCategoryResults(await res.json()); } catch (error) { if (!(error instanceof DOMException && error.name === "AbortError")) { setCategoryResults([]); } } }, 200); return () => { controller.abort(); clearTimeout(timer); }; }, [businessId, categoryQuery]); function validateStep() { if (step === 0 && !title.trim()) return "Enter an event title."; if (step === 1 && locationIds.length === 0) return "Select at least one hosting location."; if ( step === 1 && venueMode === "ON_SITE" && !venueName.trim() && !venueAddress.trim() ) return "Enter an outdoor venue name or address."; if (step === 2 && !startsAt) return "Select the event start date and time."; if (step === 2 && endsAt && new Date(endsAt) <= new Date(startsAt)) return "End time must be after start time."; if (step === 2 && recurrence !== "NONE" && !recurrenceEndsAt) return "Select when this recurring event ends."; return ""; } function next() { const message = validateStep(); if (message) { setError(message); return; } setError(""); setStep((value) => Math.min(value + 1, STEPS.length - 1)); } function previous() { setError(""); setStep((value) => Math.max(value - 1, 0)); } async function submit() { const message = validateStep(); if (message) { setError(message); return; } setSaving(true); setError(""); const payload = { title, description: description || null, locationId: locationIds[0] ?? "", locationIds, venueMode, venueName: venueMode === "ON_SITE" ? venueName || null : null, venueAddress: venueMode === "ON_SITE" ? venueAddress || null : null, imageUrl: imageUrl || null, startsAt, endsAt: endsAt || null, capacity: capacity ? Number(capacity) : null, status, recurrence, recurrenceEndsAt: recurrence === "NONE" ? null : recurrenceEndsAt || null, categoryIds: selectedCategory ? [selectedCategory.id] : [], timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC", }; try { const res = await fetch( event ? `/api/businesses/${businessId}/events/${event.id}` : `/api/businesses/${businessId}/events`, { method: event ? "PATCH" : "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }, ); if (!res.ok) { const body = await res.json(); setError( typeof body.error === "string" ? body.error : "Please review the event details.", ); return; } onSave(); } catch { setError("Unable to save the event."); } finally { setSaving(false); } } const selectedLocation = locations.find((location) => location.id === locationIds[0])?.name ?? "Not selected"; return (
    {STEPS.map((label, index) => (
  1. {index < step ? : index + 1} {label}
    2. ))}
{step === 0 && (
setTitle(e.target.value)} required autoFocus />