@mohasinac/appkit 2.7.50 → 2.7.52

package/dist/features/events/components/AdminEventEditorView.js

@@ -2,34 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Alert, Button, Form, FormActions, Input, RichTextEditor, Select, StackedViewShell, Text, Toggle, } from "../../../ui";
+import { Alert, Button, Div, Heading, Input, RichTextEditor, Select, StackedViewShell, TagInput, Text, Toggle, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { StepForm } from "../../shell";
+// --- Constants ---------------------------------------------------------------
 const CLS_PANEL_SM = "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 p-3 space-y-2";
 const CLS_PANEL_LG = "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-4";
-function toLocalDatetime(iso) {
-    if (!iso)
-        return "";
-    try {
-        const d = new Date(iso);
-        const offset = d.getTimezoneOffset();
-        const local = new Date(d.getTime() - offset * 60000);
-        return local.toISOString().slice(0, 16);
-    }
-    catch {
-        return "";
-    }
-}
-function toISOString(local) {
-    if (!local)
-        return "";
-    try {
-        return new Date(local).toISOString();
-    }
-    catch {
-        return "";
-    }
-}
 const EVENT_TYPE_OPTIONS = [
     { label: "Sale", value: "sale" },
     { label: "Offer / Coupon", value: "offer" },
@@ -66,54 +45,105 @@ const FORM_FIELD_TYPE_OPTIONS = [
     { label: "File upload", value: "file" },
 ];
 const FIELD_TYPES_WITH_OPTIONS = ["select", "multiselect", "radio", "checkbox"];
+function FormFieldBuilder({ fields, setFields }) {
+    const addField = () => setFields([...fields, { id: `field-${Date.now()}`, type: "text", label: "", required: false, order: fields.length }]);
+    const removeField = (id) => setFields(fields.filter((f) => f.id !== id));
+    const updateField = (id, patch) => setFields(fields.map((f) => (f.id === id ? { ...f, ...patch } : f)));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400 uppercase tracking-wide", children: "Form fields" }), fields.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "No fields yet. Add fields to collect responses from participants." })), fields.map((field, idx) => {
+                const hasOptions = FIELD_TYPES_WITH_OPTIONS.includes(field.type);
+                const isNumeric = field.type === "number" || field.type === "rating";
+                const isText = field.type === "text" || field.type === "textarea" || field.type === "email";
+                return (_jsxs("div", { className: "rounded-lg border border-zinc-200 dark:border-zinc-600 p-3 space-y-2 bg-white dark:bg-zinc-900", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Text, { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400", children: ["Field ", idx + 1] }), _jsx("button", { type: "button", onClick: () => removeField(field.id), className: "text-zinc-400 hover:text-red-500 transition-colors text-lg leading-none px-1", "aria-label": "Remove field", children: "\u00D7" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: [_jsx(Select, { label: "Type", value: field.type, options: FORM_FIELD_TYPE_OPTIONS, onChange: (e) => updateField(field.id, { type: e.target.value, options: undefined }) }), _jsx(Input, { label: "Label", value: field.label, onChange: (e) => updateField(field.id, { label: e.target.value }), placeholder: "e.g. Describe your entry", required: true })] }), !hasOptions && field.type !== "date" && field.type !== "file" && field.type !== "rating" && (_jsx(Input, { label: "Placeholder (optional)", value: field.placeholder ?? "", onChange: (e) => updateField(field.id, { placeholder: e.target.value || undefined }), placeholder: "Hint shown inside the field" })), hasOptions && (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options \u2014 one per line" }), _jsx("textarea", { className: "w-full rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-sm text-zinc-800 dark:text-zinc-200 px-3 py-2 resize-y min-h-[72px] focus:outline-none focus:ring-2 focus:ring-primary/50", value: (field.options ?? []).join("\n"), onChange: (e) => updateField(field.id, { options: e.target.value.split("\n").map((s) => s.trim()).filter(Boolean) }), placeholder: "Option A\nOption B\nOption C" })] })), (isText || isNumeric) && (_jsxs("div", { className: "rounded bg-zinc-50 dark:bg-zinc-800 p-2 space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Validation (optional)" }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [isText && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Min length", type: "number", value: String(field.validation?.minLength ?? ""), onChange: (e) => updateField(field.id, { validation: { ...field.validation, minLength: e.target.value ? Number(e.target.value) : undefined } }), placeholder: "0" }), _jsx(Input, { label: "Max length", type: "number", value: String(field.validation?.maxLength ?? ""), onChange: (e) => updateField(field.id, { validation: { ...field.validation, maxLength: e.target.value ? Number(e.target.value) : undefined } }), placeholder: "500" })] })), isNumeric && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Min value", type: "number", value: String(field.validation?.min ?? ""), onChange: (e) => updateField(field.id, { validation: { ...field.validation, min: e.target.value ? Number(e.target.value) : undefined } }), placeholder: "0" }), _jsx(Input, { label: "Max value", type: "number", value: String(field.validation?.max ?? ""), onChange: (e) => updateField(field.id, { validation: { ...field.validation, max: e.target.value ? Number(e.target.value) : undefined } }), placeholder: "100" })] }))] }), field.type === "text" && (_jsx(Input, { label: "Pattern (regex, optional)", value: field.validation?.pattern ?? "", onChange: (e) => updateField(field.id, { validation: { ...field.validation, pattern: e.target.value || undefined } }), placeholder: "^[A-Z].*" }))] })), _jsx(Toggle, { checked: field.required, onChange: (v) => updateField(field.id, { required: v }), label: "Required" })] }, field.id));
+            }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addField, children: "+ Add field" })] }));
+}
 const POLL_VISIBILITY_OPTIONS = [
     { label: "Always visible", value: "always" },
     { label: "After voting", value: "after_vote" },
     { label: "After event ends", value: "after_end" },
 ];
+// --- Helpers -----------------------------------------------------------------
+function toEventSlug(str) {
+    const base = str.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    return base.startsWith("event-") ? base : `event-${base}`;
+}
+function toLocalDatetime(iso) {
+    if (!iso)
+        return "";
+    try {
+        const d = new Date(iso);
+        const offset = d.getTimezoneOffset();
+        const local = new Date(d.getTime() - offset * 60000);
+        return local.toISOString().slice(0, 16);
+    }
+    catch {
+        return "";
+    }
+}
+function toISOString(local) {
+    if (!local)
+        return "";
+    try {
+        return new Date(local).toISOString();
+    }
+    catch {
+        return "";
+    }
+}
+const DEFAULT_DRAFT = {
+    type: "sale",
+    title: "",
+    slug: "",
+    description: "",
+    startsAt: "",
+    endsAt: "",
+    coverImageUrl: "",
+    tags: [],
+    status: "draft",
+    createdBy: "",
+    discountPercent: "10",
+    saleBannerText: "",
+    couponId: "",
+    displayCode: "",
+    offerBannerText: "",
+    pollOptions: [{ id: "opt1", label: "" }, { id: "opt2", label: "" }],
+    allowMultiSelect: false,
+    allowComment: false,
+    resultsVisibility: "always",
+    requireLogin: true,
+    maxEntriesPerUser: "1",
+    hasLeaderboard: false,
+    hasPointSystem: false,
+    pointsLabel: "Points",
+    entryReviewRequired: false,
+    surveyFields: [],
+    anonymous: false,
+    feedbackFields: [],
+    hasRaffle: false,
+    raffleType: "open_raffle",
+    raffleTopN: "10",
+    rafflePrize: "",
+    rafflePrizeCouponId: "",
+    spinPrizes: [],
+    spinMaxPerUser: "1",
+    spinWindowStart: "",
+    spinWindowEnd: "",
+};
+// --- Component ---------------------------------------------------------------
 export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
-    const [type, setType] = React.useState("sale");
-    const [title, setTitle] = React.useState("");
-    const [description, setDescription] = React.useState("");
-    const [startsAt, setStartsAt] = React.useState("");
-    const [endsAt, setEndsAt] = React.useState("");
-    const [coverImageUrl, setCoverImageUrl] = React.useState("");
-    const [status, setStatus] = React.useState("draft");
-    const [discountPercent, setDiscountPercent] = React.useState("10");
-    const [saleBannerText, setSaleBannerText] = React.useState("");
-    const [couponId, setCouponId] = React.useState("");
-    const [displayCode, setDisplayCode] = React.useState("");
-    const [offerBannerText, setOfferBannerText] = React.useState("");
-    const [pollOptions, setPollOptions] = React.useState([
-        { id: "opt1", label: "" },
-        { id: "opt2", label: "" },
-    ]);
-    const [allowMultiSelect, setAllowMultiSelect] = React.useState(false);
-    const [allowComment, setAllowComment] = React.useState(false);
-    const [resultsVisibility, setResultsVisibility] = React.useState("always");
-    const [requireLogin, setRequireLogin] = React.useState(true);
-    const [maxEntriesPerUser, setMaxEntriesPerUser] = React.useState("1");
-    const [hasLeaderboard, setHasLeaderboard] = React.useState(false);
-    const [hasPointSystem, setHasPointSystem] = React.useState(false);
-    const [pointsLabel, setPointsLabel] = React.useState("Points");
-    const [entryReviewRequired, setEntryReviewRequired] = React.useState(false);
-    const [surveyFields, setSurveyFields] = React.useState([]);
-    const [anonymous, setAnonymous] = React.useState(false);
-    const [feedbackFields, setFeedbackFields] = React.useState([]);
-    const [hasRaffle, setHasRaffle] = React.useState(false);
-    const [raffleType, setRaffleType] = React.useState("open_raffle");
-    const [raffleTopN, setRaffleTopN] = React.useState("10");
-    const [rafflePrize, setRafflePrize] = React.useState("");
-    const [rafflePrizeCouponId, setRafflePrizeCouponId] = React.useState("");
-    const [spinPrizes, setSpinPrizes] = React.useState([]);
-    const [spinMaxPerUser, setSpinMaxPerUser] = React.useState("1");
-    const [spinWindowStart, setSpinWindowStart] = React.useState("");
-    const [spinWindowEnd, setSpinWindowEnd] = React.useState("");
+    const isEdit = Boolean(eventId);
+    const [draft, setDraft] = React.useState(DEFAULT_DRAFT);
+    const [slugManual, setSlugManual] = React.useState(false);
+    const [currentStep, setCurrentStep] = React.useState(0);
+    const [saveMessage, setSaveMessage] = React.useState(null);
+    const [triggerMessage, setTriggerMessage] = React.useState(null);
     const [raffleWinnerName, setRaffleWinnerName] = React.useState("");
     const [raffleEntryCount, setRaffleEntryCount] = React.useState(null);
     const [raffleGithubUrl, setRaffleGithubUrl] = React.useState("");
-    const [saveMessage, setSaveMessage] = React.useState(null);
-    const [triggerMessage, setTriggerMessage] = React.useState(null);
+    const update = React.useCallback((partial) => {
+        setDraft((prev) => ({ ...prev, ...partial }));
+        setSaveMessage(null);
+    }, []);
+    // --- load existing event ---
     const eventQuery = useQuery({
         queryKey: ["admin-event-by-id", eventId],
         queryFn: () => apiClient.get(`${ADMIN_ENDPOINTS.EVENTS}/${eventId}`),
@@ -124,134 +154,103 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
         const event = eventQuery.data?.data ?? eventQuery.data;
         if (!event?.id)
             return;
-        setType(event.type || "sale");
-        setTitle(event.title || "");
-        setDescription(event.description || "");
-        setStartsAt(toLocalDatetime(event.startsAt));
-        setEndsAt(toLocalDatetime(event.endsAt));
-        setCoverImageUrl(event.coverImageUrl || event.coverImage?.url || "");
-        setStatus(event.status || "draft");
-        if (event.saleConfig) {
-            setDiscountPercent(String(event.saleConfig.discountPercent ?? 10));
-            setSaleBannerText(event.saleConfig.bannerText || "");
-        }
-        if (event.offerConfig) {
-            setCouponId(event.offerConfig.couponId || "");
-            setDisplayCode(event.offerConfig.displayCode || "");
-            setOfferBannerText(event.offerConfig.bannerText || "");
-        }
-        if (event.pollConfig) {
-            if (event.pollConfig.options?.length)
-                setPollOptions(event.pollConfig.options);
-            setAllowMultiSelect(Boolean(event.pollConfig.allowMultiSelect));
-            setAllowComment(Boolean(event.pollConfig.allowComment));
-            setResultsVisibility(event.pollConfig.resultsVisibility || "always");
-        }
-        if (event.surveyConfig) {
-            setRequireLogin(event.surveyConfig.requireLogin !== false);
-            setMaxEntriesPerUser(String(event.surveyConfig.maxEntriesPerUser ?? 1));
-            setHasLeaderboard(Boolean(event.surveyConfig.hasLeaderboard));
-            setHasPointSystem(Boolean(event.surveyConfig.hasPointSystem));
-            setPointsLabel(event.surveyConfig.pointsLabel ?? "Points");
-            setEntryReviewRequired(Boolean(event.surveyConfig.entryReviewRequired));
-            setSurveyFields(Array.isArray(event.surveyConfig.formFields) ? event.surveyConfig.formFields : []);
-        }
-        if (event.feedbackConfig) {
-            setAnonymous(Boolean(event.feedbackConfig.anonymous));
-            setFeedbackFields(Array.isArray(event.feedbackConfig.formFields) ? event.feedbackConfig.formFields : []);
-        }
-        setHasRaffle(Boolean(event.hasRaffle));
-        setRaffleType(event.raffleType || "open_raffle");
-        setRaffleTopN(String(event.raffleTopN ?? 10));
-        setRafflePrize(event.rafflePrize || "");
-        setRafflePrizeCouponId(event.rafflePrizeCouponId || "");
-        setSpinPrizes(Array.isArray(event.spinPrizes) ? event.spinPrizes : []);
-        setSpinMaxPerUser(String(event.spinMaxPerUser ?? 1));
-        setSpinWindowStart(toLocalDatetime(event.spinWindowStart));
-        setSpinWindowEnd(toLocalDatetime(event.spinWindowEnd));
+        setDraft({
+            type: event.type || "sale",
+            title: event.title || "",
+            slug: event.slug || "",
+            description: event.description || "",
+            startsAt: toLocalDatetime(event.startsAt),
+            endsAt: toLocalDatetime(event.endsAt),
+            coverImageUrl: event.coverImageUrl || event.coverImage?.url || "",
+            tags: Array.isArray(event.tags) ? event.tags : [],
+            status: event.status || "draft",
+            createdBy: event.createdBy || "",
+            discountPercent: String(event.saleConfig?.discountPercent ?? 10),
+            saleBannerText: event.saleConfig?.bannerText || "",
+            couponId: event.offerConfig?.couponId || "",
+            displayCode: event.offerConfig?.displayCode || "",
+            offerBannerText: event.offerConfig?.bannerText || "",
+            pollOptions: event.pollConfig?.options?.length
+                ? event.pollConfig.options
+                : [{ id: "opt1", label: "" }, { id: "opt2", label: "" }],
+            allowMultiSelect: Boolean(event.pollConfig?.allowMultiSelect),
+            allowComment: Boolean(event.pollConfig?.allowComment),
+            resultsVisibility: event.pollConfig?.resultsVisibility || "always",
+            requireLogin: event.surveyConfig?.requireLogin !== false,
+            maxEntriesPerUser: String(event.surveyConfig?.maxEntriesPerUser ?? 1),
+            hasLeaderboard: Boolean(event.surveyConfig?.hasLeaderboard),
+            hasPointSystem: Boolean(event.surveyConfig?.hasPointSystem),
+            pointsLabel: event.surveyConfig?.pointsLabel ?? "Points",
+            entryReviewRequired: Boolean(event.surveyConfig?.entryReviewRequired),
+            surveyFields: Array.isArray(event.surveyConfig?.formFields) ? event.surveyConfig.formFields : [],
+            anonymous: Boolean(event.feedbackConfig?.anonymous),
+            feedbackFields: Array.isArray(event.feedbackConfig?.formFields) ? event.feedbackConfig.formFields : [],
+            hasRaffle: Boolean(event.hasRaffle),
+            raffleType: event.raffleType || "open_raffle",
+            raffleTopN: String(event.raffleTopN ?? 10),
+            rafflePrize: event.rafflePrize || "",
+            rafflePrizeCouponId: event.rafflePrizeCouponId || "",
+            spinPrizes: Array.isArray(event.spinPrizes) ? event.spinPrizes : [],
+            spinMaxPerUser: String(event.spinMaxPerUser ?? 1),
+            spinWindowStart: toLocalDatetime(event.spinWindowStart),
+            spinWindowEnd: toLocalDatetime(event.spinWindowEnd),
+        });
+        setSlugManual(true);
         setRaffleWinnerName(event.raffleWinnerDisplayName || "");
         setRaffleEntryCount(typeof event.raffleEntryCount === "number" ? event.raffleEntryCount : null);
         setRaffleGithubUrl(event.raffleGithubFunctionUrl || "");
     }, [eventQuery.data]);
+    // --- save ---
     const saveMutation = useMutation({
         mutationFn: async () => {
             const buildTypeConfig = () => {
-                if (type === "sale")
-                    return {
-                        saleConfig: {
-                            discountPercent: Number(discountPercent) || 10,
-                            bannerText: saleBannerText || undefined,
-                        },
-                    };
-                if (type === "offer")
-                    return {
-                        offerConfig: { couponId, displayCode, bannerText: offerBannerText || undefined },
-                    };
-                if (type === "poll")
-                    return {
-                        pollConfig: {
-                            options: pollOptions.filter((o) => o.label.trim()),
-                            allowMultiSelect,
-                            allowComment,
-                            resultsVisibility,
-                        },
-                    };
-                if (type === "survey")
-                    return {
-                        surveyConfig: {
-                            requireLogin,
-                            maxEntriesPerUser: Number(maxEntriesPerUser) || 1,
-                            hasLeaderboard,
-                            hasPointSystem,
-                            pointsLabel: hasPointSystem ? (pointsLabel.trim() || "Points") : undefined,
-                            entryReviewRequired,
-                            formFields: surveyFields.map((f, i) => ({ ...f, order: i })),
-                        },
-                    };
-                if (type === "feedback")
-                    return {
-                        feedbackConfig: {
-                            anonymous,
-                            formFields: feedbackFields.map((f, i) => ({ ...f, order: i })),
-                        },
-                    };
+                if (draft.type === "sale")
+                    return { saleConfig: { discountPercent: Number(draft.discountPercent) || 10, bannerText: draft.saleBannerText || undefined } };
+                if (draft.type === "offer")
+                    return { offerConfig: { couponId: draft.couponId, displayCode: draft.displayCode, bannerText: draft.offerBannerText || undefined } };
+                if (draft.type === "poll")
+                    return { pollConfig: { options: draft.pollOptions.filter((o) => o.label.trim()), allowMultiSelect: draft.allowMultiSelect, allowComment: draft.allowComment, resultsVisibility: draft.resultsVisibility } };
+                if (draft.type === "survey")
+                    return { surveyConfig: { requireLogin: draft.requireLogin, maxEntriesPerUser: Number(draft.maxEntriesPerUser) || 1, hasLeaderboard: draft.hasLeaderboard, hasPointSystem: draft.hasPointSystem, pointsLabel: draft.hasPointSystem ? (draft.pointsLabel.trim() || "Points") : undefined, entryReviewRequired: draft.entryReviewRequired, formFields: draft.surveyFields.map((f, i) => ({ ...f, order: i })) } };
+                if (draft.type === "feedback")
+                    return { feedbackConfig: { anonymous: draft.anonymous, formFields: draft.feedbackFields.map((f, i) => ({ ...f, order: i })) } };
                 return {};
             };
-            const isRaffleType = type === "raffle" || type === "spin_wheel";
+            const isRaffleType = draft.type === "raffle" || draft.type === "spin_wheel";
             const raffleFields = {};
-            if (hasRaffle || isRaffleType) {
+            if (draft.hasRaffle || isRaffleType) {
                 raffleFields.hasRaffle = true;
-                raffleFields.raffleType = isRaffleType && type === "spin_wheel"
-                    ? "spin_wheel"
-                    : raffleType;
-                if (Number(raffleTopN) > 0)
-                    raffleFields.raffleTopN = Number(raffleTopN);
-                if (rafflePrize)
-                    raffleFields.rafflePrize = rafflePrize;
-                if (rafflePrizeCouponId)
-                    raffleFields.rafflePrizeCouponId = rafflePrizeCouponId;
-                if (raffleType === "spin_wheel" || type === "spin_wheel") {
-                    raffleFields.spinPrizes = spinPrizes;
-                    if (Number(spinMaxPerUser) > 0)
-                        raffleFields.spinMaxPerUser = Number(spinMaxPerUser);
-                    if (spinWindowStart)
-                        raffleFields.spinWindowStart = toISOString(spinWindowStart);
-                    if (spinWindowEnd)
-                        raffleFields.spinWindowEnd = toISOString(spinWindowEnd);
+                raffleFields.raffleType = isRaffleType && draft.type === "spin_wheel" ? "spin_wheel" : draft.raffleType;
+                if (Number(draft.raffleTopN) > 0)
+                    raffleFields.raffleTopN = Number(draft.raffleTopN);
+                if (draft.rafflePrize)
+                    raffleFields.rafflePrize = draft.rafflePrize;
+                if (draft.rafflePrizeCouponId)
+                    raffleFields.rafflePrizeCouponId = draft.rafflePrizeCouponId;
+                if (draft.raffleType === "spin_wheel" || draft.type === "spin_wheel") {
+                    raffleFields.spinPrizes = draft.spinPrizes;
+                    if (Number(draft.spinMaxPerUser) > 0)
+                        raffleFields.spinMaxPerUser = Number(draft.spinMaxPerUser);
+                    if (draft.spinWindowStart)
+                        raffleFields.spinWindowStart = toISOString(draft.spinWindowStart);
+                    if (draft.spinWindowEnd)
+                        raffleFields.spinWindowEnd = toISOString(draft.spinWindowEnd);
                 }
             }
             const payload = {
-                type,
-                title,
-                description,
-                startsAt: toISOString(startsAt),
-                endsAt: toISOString(endsAt),
-                coverImageUrl: coverImageUrl || undefined,
+                type: draft.type,
+                title: draft.title,
+                slug: draft.slug || toEventSlug(draft.title),
+                description: draft.description,
+                tags: draft.tags,
+                startsAt: toISOString(draft.startsAt),
+                endsAt: toISOString(draft.endsAt),
+                coverImageUrl: draft.coverImageUrl || undefined,
                 ...buildTypeConfig(),
                 ...raffleFields,
             };
             if (eventId) {
-                payload.status = status;
+                payload.status = draft.status;
                 await apiClient.patch(`${ADMIN_ENDPOINTS.EVENTS}/${eventId}`, payload);
                 return eventId;
             }
@@ -267,68 +266,7 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
             setSaveMessage(error instanceof Error ? error.message : "Save failed");
         },
     });
-    const makeAddField = (setter) => () => setter((prev) => [
-        ...prev,
-        { id: `field-${Date.now()}`, type: "text", label: "", required: false, order: prev.length },
-    ]);
-    const makeRemoveField = (setter) => (id) => setter((prev) => prev.filter((f) => f.id !== id));
-    const makeUpdateField = (setter) => (id, patch) => setter((prev) => prev.map((f) => (f.id === id ? { ...f, ...patch } : f)));
-    const renderFormFieldBuilder = (fields, setter) => {
-        const addField = makeAddField(setter);
-        const removeField = makeRemoveField(setter);
-        const updateField = makeUpdateField(setter);
-        return (_jsxs("div", { className: "space-y-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400 uppercase tracking-wide", children: "Form fields" }), fields.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "No fields yet. Add fields to collect responses from participants." })), fields.map((field, idx) => {
-                    const hasOptions = FIELD_TYPES_WITH_OPTIONS.includes(field.type);
-                    const isNumeric = field.type === "number" || field.type === "rating";
-                    const isText = field.type === "text" || field.type === "textarea" || field.type === "email";
-                    return (_jsxs("div", { className: "rounded-lg border border-zinc-200 dark:border-zinc-600 p-3 space-y-2 bg-white dark:bg-zinc-900", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Text, { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400", children: ["Field ", idx + 1] }), _jsx("button", { type: "button", onClick: () => removeField(field.id), className: "text-zinc-400 hover:text-red-500 transition-colors text-lg leading-none px-1", "aria-label": "Remove field", children: "\u00D7" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: [_jsx(Select, { label: "Type", value: field.type, options: FORM_FIELD_TYPE_OPTIONS, onChange: (e) => updateField(field.id, { type: e.target.value, options: undefined }) }), _jsx(Input, { label: "Label", value: field.label, onChange: (e) => updateField(field.id, { label: e.target.value }), placeholder: "e.g. Describe your entry", required: true })] }), !hasOptions && field.type !== "date" && field.type !== "file" && field.type !== "rating" && (_jsx(Input, { label: "Placeholder (optional)", value: field.placeholder ?? "", onChange: (e) => updateField(field.id, { placeholder: e.target.value || undefined }), placeholder: "Hint shown inside the field" })), hasOptions && (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options \u2014 one per line" }), _jsx("textarea", { className: "w-full rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-sm text-zinc-800 dark:text-zinc-200 px-3 py-2 resize-y min-h-[72px] focus:outline-none focus:ring-2 focus:ring-primary/50", value: (field.options ?? []).join("\n"), onChange: (e) => updateField(field.id, {
-                                            options: e.target.value.split("\n").map((s) => s.trim()).filter(Boolean),
-                                        }), placeholder: "Option A\nOption B\nOption C" })] })), (isText || isNumeric) && (_jsxs("div", { className: "rounded bg-zinc-50 dark:bg-zinc-800 p-2 space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Validation (optional)" }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [isText && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Min length", type: "number", value: String(field.validation?.minLength ?? ""), onChange: (e) => updateField(field.id, {
-                                                            validation: {
-                                                                ...field.validation,
-                                                                minLength: e.target.value ? Number(e.target.value) : undefined,
-                                                            },
-                                                        }), placeholder: "0" }), _jsx(Input, { label: "Max length", type: "number", value: String(field.validation?.maxLength ?? ""), onChange: (e) => updateField(field.id, {
-                                                            validation: {
-                                                                ...field.validation,
-                                                                maxLength: e.target.value ? Number(e.target.value) : undefined,
-                                                            },
-                                                        }), placeholder: "500" })] })), isNumeric && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Min value", type: "number", value: String(field.validation?.min ?? ""), onChange: (e) => updateField(field.id, {
-                                                            validation: {
-                                                                ...field.validation,
-                                                                min: e.target.value ? Number(e.target.value) : undefined,
-                                                            },
-                                                        }), placeholder: "0" }), _jsx(Input, { label: "Max value", type: "number", value: String(field.validation?.max ?? ""), onChange: (e) => updateField(field.id, {
-                                                            validation: {
-                                                                ...field.validation,
-                                                                max: e.target.value ? Number(e.target.value) : undefined,
-                                                            },
-                                                        }), placeholder: "100" })] }))] }), field.type === "text" && (_jsx(Input, { label: "Pattern (regex, optional)", value: field.validation?.pattern ?? "", onChange: (e) => updateField(field.id, {
-                                            validation: {
-                                                ...field.validation,
-                                                pattern: e.target.value || undefined,
-                                            },
-                                        }), placeholder: "^[A-Z].*" }))] })), _jsx(Toggle, { checked: field.required, onChange: (v) => updateField(field.id, { required: v }), label: "Required" })] }, field.id));
-                }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addField, children: "+ Add field" })] }));
-    };
-    const addSpinPrize = () => {
-        setSpinPrizes((prev) => [
-            ...prev,
-            {
-                id: `prize-${Date.now()}`,
-                label: "",
-                couponId: undefined,
-                weight: 1,
-                isActive: true,
-            },
-        ]);
-    };
-    const removeSpinPrize = (id) => {
-        setSpinPrizes((prev) => prev.filter((p) => p.id !== id));
-    };
-    const updateSpinPrize = (id, patch) => {
-        setSpinPrizes((prev) => prev.map((p) => (p.id === id ? { ...p, ...patch } : p)));
-    };
+    // --- raffle trigger ---
     const triggerRaffleMutation = useMutation({
         mutationFn: async () => {
             if (!eventId)
@@ -337,9 +275,7 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
         },
         onSuccess: (res) => {
             const data = res.data ?? res;
-            setTriggerMessage(data?.raffleWinnerDisplayName
-                ? `Winner: ${data.raffleWinnerDisplayName}`
-                : "Raffle triggered.");
+            setTriggerMessage(data?.raffleWinnerDisplayName ? `Winner: ${data.raffleWinnerDisplayName}` : "Raffle triggered.");
             if (data?.raffleWinnerDisplayName)
                 setRaffleWinnerName(data.raffleWinnerDisplayName);
             if (typeof data?.raffleEntryCount === "number")
@@ -349,38 +285,56 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
             setTriggerMessage(err instanceof Error ? err.message : "Trigger failed");
         },
     });
-    const addPollOption = () => {
-        setPollOptions((prev) => [...prev, { id: `opt${Date.now()}`, label: "" }]);
-    };
-    const removePollOption = (id) => {
-        setPollOptions((prev) => prev.filter((o) => o.id !== id));
-    };
-    const updatePollOption = (id, label) => {
-        setPollOptions((prev) => prev.map((o) => (o.id === id ? { ...o, label } : o)));
-    };
-    const isValid = !!title.trim() &&
-        !!startsAt &&
-        !!endsAt &&
-        (type !== "poll" || pollOptions.filter((o) => o.label.trim()).length >= 2) &&
-        (type !== "offer" || (!!couponId.trim() && !!displayCode.trim()));
+    const isLoading = saveMutation.isPending || eventQuery.isLoading;
+    // --- steps ---
+    const steps = [
+        {
+            label: "Details",
+            validate: (values) => {
+                if (!values.title.trim())
+                    return "Title is required";
+                if (!values.startsAt)
+                    return "Start date is required";
+                if (!values.endsAt)
+                    return "End date is required";
+                return null;
+            },
+            render: ({ values, onChange }) => (_jsxs("div", { className: "space-y-5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Event Details" }), !isEdit && (_jsx(Select, { label: "Event type", value: values.type, options: EVENT_TYPE_OPTIONS, onChange: (e) => onChange({ type: e.target.value }) })), _jsx(Input, { label: "Title", value: values.title, onChange: (e) => {
+                            const v = e.target.value;
+                            onChange({ title: v, ...(!slugManual && { slug: toEventSlug(v) }) });
+                        }, placeholder: "Charizard Flash Sale 2026", required: true }), _jsx(Input, { label: "Slug", value: values.slug, onChange: (e) => { setSlugManual(true); onChange({ slug: e.target.value }); }, placeholder: "event-charizard-flash-sale-2026", helperText: "Auto-generated from title. Must start with 'event-'." }), _jsxs(Div, { children: [_jsx("label", { className: "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Description" }), _jsx(RichTextEditor, { value: values.description, onChange: (v) => onChange({ description: v }), minHeightClassName: "min-h-[120px]", placeholder: "Describe this event\u2026" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Starts at", type: "datetime-local", value: values.startsAt, onChange: (e) => onChange({ startsAt: e.target.value }), required: true }), _jsx(Input, { label: "Ends at", type: "datetime-local", value: values.endsAt, onChange: (e) => onChange({ endsAt: e.target.value }), required: true })] }), _jsx(TagInput, { label: "Tags", value: values.tags, onChange: (t) => onChange({ tags: t }), placeholder: "e.g. pokemon, sale, 2026" })] })),
+        },
+        {
+            label: "Media",
+            render: ({ values, onChange }) => (_jsxs("div", { className: "space-y-5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Media" }), _jsx(Input, { label: "Cover Image URL (optional)", value: values.coverImageUrl, onChange: (e) => onChange({ coverImageUrl: e.target.value }), placeholder: "https://\u2026", helperText: "Direct link to the event cover image." })] })),
+        },
+        {
+            label: "Settings",
+            validate: (values) => {
+                if (values.type === "offer" && !values.couponId.trim())
+                    return "Coupon ID is required for offer events";
+                if (values.type === "offer" && !values.displayCode.trim())
+                    return "Display code is required for offer events";
+                if (values.type === "poll" && values.pollOptions.filter((o) => o.label.trim()).length < 2)
+                    return "Poll events require at least 2 options";
+                return null;
+            },
+            render: ({ values, onChange }) => (_jsxs("div", { className: "space-y-5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Event Settings" }), isEdit && (_jsx(Select, { label: "Status", value: values.status, options: EVENT_STATUS_OPTIONS, onChange: (e) => onChange({ status: e.target.value }) })), values.createdBy && (_jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium mb-1", children: "Created by" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: values.createdBy })] })), values.type === "sale" && (_jsxs("div", { className: CLS_PANEL_SM, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Sale configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Discount %", type: "number", value: values.discountPercent, onChange: (e) => onChange({ discountPercent: e.target.value }), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: values.saleBannerText, onChange: (e) => onChange({ saleBannerText: e.target.value }), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), values.type === "offer" && (_jsxs("div", { className: CLS_PANEL_SM, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Offer configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Coupon ID", value: values.couponId, onChange: (e) => onChange({ couponId: e.target.value }), placeholder: "Firestore coupon document ID", required: true }), _jsx(Input, { label: "Display code", value: values.displayCode, onChange: (e) => onChange({ displayCode: e.target.value }), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: values.offerBannerText, onChange: (e) => onChange({ offerBannerText: e.target.value }), placeholder: "Use CHARIZARD25 at checkout" })] })), values.type === "poll" && (_jsxs("div", { className: CLS_PANEL_LG, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Poll configuration" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options (minimum 2)" }), values.pollOptions.map((opt, idx) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Input, { value: opt.label, onChange: (e) => onChange({ pollOptions: values.pollOptions.map((o) => o.id === opt.id ? { ...o, label: e.target.value } : o) }), placeholder: `Option ${idx + 1}` }) }), values.pollOptions.length > 2 && (_jsx("button", { type: "button", onClick: () => onChange({ pollOptions: values.pollOptions.filter((o) => o.id !== opt.id) }), className: "text-zinc-400 hover:text-red-500 transition-colors px-2 py-1 text-lg leading-none", "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onChange({ pollOptions: [...values.pollOptions, { id: `opt${Date.now()}`, label: "" }] }), children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", value: values.resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => onChange({ resultsVisibility: e.target.value }) }), _jsxs("div", { className: "space-y-3", children: [_jsx(Toggle, { checked: values.allowMultiSelect, onChange: (v) => onChange({ allowMultiSelect: v }), label: "Allow multi-select" }), _jsx(Toggle, { checked: values.allowComment, onChange: (v) => onChange({ allowComment: v }), label: "Allow comment with vote" })] })] })), values.type === "survey" && (_jsxs("div", { className: CLS_PANEL_LG, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Survey configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Max entries per user", type: "number", value: values.maxEntriesPerUser, onChange: (e) => onChange({ maxEntriesPerUser: e.target.value }), placeholder: "1" }), values.hasPointSystem && (_jsx(Input, { label: "Points label", value: values.pointsLabel, onChange: (e) => onChange({ pointsLabel: e.target.value }), placeholder: "Points" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Toggle, { checked: values.requireLogin, onChange: (v) => onChange({ requireLogin: v }), label: "Require login to participate" }), _jsx(Toggle, { checked: values.hasLeaderboard, onChange: (v) => onChange({ hasLeaderboard: v }), label: "Show leaderboard" }), _jsx(Toggle, { checked: values.hasPointSystem, onChange: (v) => onChange({ hasPointSystem: v }), label: "Enable point system" }), _jsx(Toggle, { checked: values.entryReviewRequired, onChange: (v) => onChange({ entryReviewRequired: v }), label: "Require employee review before entry is approved" })] }), _jsx(FormFieldBuilder, { fields: values.surveyFields, setFields: (f) => onChange({ surveyFields: f }) })] })), values.type === "feedback" && (_jsxs("div", { className: CLS_PANEL_LG, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Feedback configuration" }), _jsx(Toggle, { checked: values.anonymous, onChange: (v) => onChange({ anonymous: v }), label: "Allow anonymous submissions" }), _jsx(FormFieldBuilder, { fields: values.feedbackFields, setFields: (f) => onChange({ feedbackFields: f }) })] }))] })),
+        },
+        {
+            label: "Raffle / Spin",
+            render: ({ values, onChange }) => {
+                const isRaffleType = values.type === "raffle" || values.type === "spin_wheel";
+                const showRaffleConfig = isRaffleType || values.hasRaffle;
+                const isSpinMode = values.type === "spin_wheel" || values.raffleType === "spin_wheel";
+                return (_jsxs("div", { className: "space-y-5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Raffle & Spin Wheel" }), !isRaffleType && (_jsx(Toggle, { checked: values.hasRaffle, onChange: (v) => onChange({ hasRaffle: v }), label: "Attach a raffle to this event" })), !isRaffleType && !values.hasRaffle && (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Enable the toggle above to attach a raffle draw to this event. Not applicable for this event type by default." })), showRaffleConfig && (_jsxs("div", { className: CLS_PANEL_LG, children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Select, { label: "Raffle type", value: values.type === "spin_wheel" ? "spin_wheel" : values.raffleType, options: RAFFLE_TYPE_OPTIONS, onChange: (e) => onChange({ raffleType: e.target.value }), disabled: values.type === "spin_wheel" }), _jsx(Input, { label: "Top N (for top-N raffle types)", type: "number", value: values.raffleTopN, onChange: (e) => onChange({ raffleTopN: e.target.value }), placeholder: "10" })] }), _jsx(Input, { label: "Prize description", value: values.rafflePrize, onChange: (e) => onChange({ rafflePrize: e.target.value }), placeholder: "\u20B92,000 store credit + exclusive Pikachu sticker" }), _jsx(Input, { label: "Coupon ID for winner (optional)", value: values.rafflePrizeCouponId, onChange: (e) => onChange({ rafflePrizeCouponId: e.target.value }), placeholder: "coupon-vip-winner-2026" }), isSpinMode && (_jsxs("div", { className: "rounded-lg border border-zinc-200 dark:border-slate-700 p-3 space-y-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-300", children: "Spin prizes (weighted random)" }), values.spinPrizes.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "No spin prizes yet. Add at least one to enable spinning." })), values.spinPrizes.map((p) => (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-end", children: [_jsx("div", { className: "col-span-5", children: _jsx(Input, { label: "Label", value: p.label, onChange: (e) => onChange({ spinPrizes: values.spinPrizes.map((sp) => sp.id === p.id ? { ...sp, label: e.target.value } : sp) }), placeholder: "\u20B9100 off" }) }), _jsx("div", { className: "col-span-3", children: _jsx(Input, { label: "Coupon ID", value: p.couponId ?? "", onChange: (e) => onChange({ spinPrizes: values.spinPrizes.map((sp) => sp.id === p.id ? { ...sp, couponId: e.target.value || undefined } : sp) }) }) }), _jsx("div", { className: "col-span-2", children: _jsx(Input, { label: "Weight", type: "number", value: String(p.weight), onChange: (e) => onChange({ spinPrizes: values.spinPrizes.map((sp) => sp.id === p.id ? { ...sp, weight: Number(e.target.value) || 0 } : sp) }) }) }), _jsx("div", { className: "col-span-1 flex items-center justify-center pb-2", children: _jsx(Toggle, { checked: p.isActive, onChange: (v) => onChange({ spinPrizes: values.spinPrizes.map((sp) => sp.id === p.id ? { ...sp, isActive: v } : sp) }), label: "" }) }), _jsx("div", { className: "col-span-1 flex items-center justify-center pb-2", children: _jsx("button", { type: "button", onClick: () => onChange({ spinPrizes: values.spinPrizes.filter((sp) => sp.id !== p.id) }), className: "text-zinc-400 hover:text-red-500 text-lg leading-none px-2", "aria-label": "Remove prize", children: "\u00D7" }) })] }, p.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onChange({ spinPrizes: [...values.spinPrizes, { id: `prize-${Date.now()}`, label: "", couponId: undefined, weight: 1, isActive: true }] }), children: "+ Add spin prize" }), _jsx(Input, { label: "Max spins per user", type: "number", value: values.spinMaxPerUser, onChange: (e) => onChange({ spinMaxPerUser: e.target.value }), placeholder: "1" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Spin window start", type: "datetime-local", value: values.spinWindowStart, onChange: (e) => onChange({ spinWindowStart: e.target.value }) }), _jsx(Input, { label: "Spin window end", type: "datetime-local", value: values.spinWindowEnd, onChange: (e) => onChange({ spinWindowEnd: e.target.value }) })] })] })), isEdit && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/20 p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-medium text-amber-900 dark:text-amber-100", children: raffleWinnerName ? `Winner: ${raffleWinnerName}` : "Raffle not yet triggered" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => triggerRaffleMutation.mutate(), disabled: triggerRaffleMutation.isPending || Boolean(raffleWinnerName), children: triggerRaffleMutation.isPending ? "Triggering…" : raffleWinnerName ? "Already triggered" : "Trigger Raffle Now" })] }), raffleEntryCount !== null && _jsxs(Text, { className: "text-xs text-amber-800 dark:text-amber-200", children: ["Pool size: ", raffleEntryCount] }), raffleGithubUrl && _jsxs(Text, { className: "text-xs text-amber-800 dark:text-amber-200 break-all", children: ["Fairness proof: ", raffleGithubUrl] }), triggerMessage && _jsx(Text, { className: "text-xs text-amber-900 dark:text-amber-100", children: triggerMessage })] }))] }))] }));
+            },
+        },
+    ];
     const alertSection = eventQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load event", children: eventQuery.error instanceof Error ? eventQuery.error.message : "Unknown error" })) : null;
-    const formSection = (_jsxs(Form, { onSubmit: (e) => {
-            e.preventDefault();
-            saveMutation.mutate();
-        }, className: "space-y-6", children: [!eventId && (_jsx(Select, { label: "Event type", value: type, options: EVENT_TYPE_OPTIONS, onChange: (e) => setType(e.target.value) })), _jsx(Input, { label: "Title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Charizard Flash Sale 2026", required: true }), _jsxs(_Fragment, { children: [_jsx("label", { className: "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Description" }), _jsx(RichTextEditor, { value: description, onChange: setDescription, minHeightClassName: "min-h-[120px]", placeholder: "Describe this event\u2026" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Starts at", type: "datetime-local", value: startsAt, onChange: (e) => setStartsAt(e.target.value), required: true }), _jsx(Input, { label: "Ends at", type: "datetime-local", value: endsAt, onChange: (e) => setEndsAt(e.target.value), required: true })] }), _jsx(Input, { label: "Cover image URL (optional)", value: coverImageUrl, onChange: (e) => setCoverImageUrl(e.target.value), placeholder: "https://\u2026" }), eventId && (_jsx(Select, { label: "Status", value: status, options: EVENT_STATUS_OPTIONS, onChange: (e) => setStatus(e.target.value) })), type === "sale" && (_jsxs("div", { className: CLS_PANEL_SM, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Sale configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Discount %", type: "number", value: discountPercent, onChange: (e) => setDiscountPercent(e.target.value), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: saleBannerText, onChange: (e) => setSaleBannerText(e.target.value), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), type === "offer" && (_jsxs("div", { className: CLS_PANEL_SM, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Offer configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Coupon ID", value: couponId, onChange: (e) => setCouponId(e.target.value), placeholder: "Firestore coupon document ID", required: true }), _jsx(Input, { label: "Display code", value: displayCode, onChange: (e) => setDisplayCode(e.target.value), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: offerBannerText, onChange: (e) => setOfferBannerText(e.target.value), placeholder: "Use CHARIZARD25 at checkout" })] })), type === "poll" && (_jsxs("div", { className: CLS_PANEL_LG, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Poll configuration" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options (minimum 2)" }), pollOptions.map((opt, idx) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Input, { value: opt.label, onChange: (e) => updatePollOption(opt.id, e.target.value), placeholder: `Option ${idx + 1}` }) }), pollOptions.length > 2 && (_jsx("button", { type: "button", onClick: () => removePollOption(opt.id), className: "text-zinc-400 hover:text-red-500 transition-colors px-2 py-1 text-lg leading-none", "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addPollOption, children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", value: resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => setResultsVisibility(e.target.value) }), _jsxs("div", { className: "space-y-3", children: [_jsx(Toggle, { checked: allowMultiSelect, onChange: setAllowMultiSelect, label: "Allow multi-select" }), _jsx(Toggle, { checked: allowComment, onChange: setAllowComment, label: "Allow comment with vote" })] })] })), type === "survey" && (_jsxs("div", { className: CLS_PANEL_LG, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Survey configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Max entries per user", type: "number", value: maxEntriesPerUser, onChange: (e) => setMaxEntriesPerUser(e.target.value), placeholder: "1" }), hasPointSystem && (_jsx(Input, { label: "Points label", value: pointsLabel, onChange: (e) => setPointsLabel(e.target.value), placeholder: "Points" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Toggle, { checked: requireLogin, onChange: setRequireLogin, label: "Require login to participate" }), _jsx(Toggle, { checked: hasLeaderboard, onChange: setHasLeaderboard, label: "Show leaderboard" }), _jsx(Toggle, { checked: hasPointSystem, onChange: setHasPointSystem, label: "Enable point system (employees assign points per entry)" }), _jsx(Toggle, { checked: entryReviewRequired, onChange: setEntryReviewRequired, label: "Require employee review before entry is approved" })] }), renderFormFieldBuilder(surveyFields, setSurveyFields)] })), type === "feedback" && (_jsxs("div", { className: CLS_PANEL_LG, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Feedback configuration" }), _jsx(Toggle, { checked: anonymous, onChange: setAnonymous, label: "Allow anonymous submissions" }), renderFormFieldBuilder(feedbackFields, setFeedbackFields)] })), _jsxs("div", { className: CLS_PANEL_LG, children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Raffle & spin wheel" }), type !== "raffle" && type !== "spin_wheel" && (_jsx(Toggle, { checked: hasRaffle, onChange: setHasRaffle, label: "Attach raffle" }))] }), (hasRaffle || type === "raffle" || type === "spin_wheel") && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Select, { label: "Raffle type", value: type === "spin_wheel" ? "spin_wheel" : raffleType, options: RAFFLE_TYPE_OPTIONS, onChange: (e) => setRaffleType(e.target.value), disabled: type === "spin_wheel" }), _jsx(Input, { label: "Top N (for top-N raffle types)", type: "number", value: raffleTopN, onChange: (e) => setRaffleTopN(e.target.value), placeholder: "10" })] }), _jsx(Input, { label: "Prize description", value: rafflePrize, onChange: (e) => setRafflePrize(e.target.value), placeholder: "\u20B92,000 store credit + exclusive Pikachu sticker" }), _jsx(Input, { label: "Coupon ID for winner (optional)", value: rafflePrizeCouponId, onChange: (e) => setRafflePrizeCouponId(e.target.value), placeholder: "coupon-vip-winner-2026" }), (raffleType === "spin_wheel" || type === "spin_wheel") && (_jsxs("div", { className: "rounded-lg border border-zinc-200 dark:border-slate-700 p-3 space-y-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-300", children: "Spin prizes (weighted random)" }), spinPrizes.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "No spin prizes yet. Add at least one to enable spinning." })), spinPrizes.map((p) => (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-end", children: [_jsx("div", { className: "col-span-5", children: _jsx(Input, { label: "Label", value: p.label, onChange: (e) => updateSpinPrize(p.id, { label: e.target.value }), placeholder: "\u20B9100 off" }) }), _jsx("div", { className: "col-span-3", children: _jsx(Input, { label: "Coupon ID", value: p.couponId ?? "", onChange: (e) => updateSpinPrize(p.id, {
-                                                        couponId: e.target.value || undefined,
-                                                    }) }) }), _jsx("div", { className: "col-span-2", children: _jsx(Input, { label: "Weight", type: "number", value: String(p.weight), onChange: (e) => updateSpinPrize(p.id, {
-                                                        weight: Number(e.target.value) || 0,
-                                                    }) }) }), _jsx("div", { className: "col-span-1 flex items-center justify-center pb-2", children: _jsx(Toggle, { checked: p.isActive, onChange: (v) => updateSpinPrize(p.id, { isActive: v }), label: "" }) }), _jsx("div", { className: "col-span-1 flex items-center justify-center pb-2", children: _jsx("button", { type: "button", onClick: () => removeSpinPrize(p.id), className: "text-zinc-400 hover:text-red-500 text-lg leading-none px-2", "aria-label": "Remove prize", children: "\u00D7" }) })] }, p.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addSpinPrize, children: "+ Add spin prize" }), _jsx(Input, { label: "Max spins per user", type: "number", value: spinMaxPerUser, onChange: (e) => setSpinMaxPerUser(e.target.value), placeholder: "1" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Spin window start", type: "datetime-local", value: spinWindowStart, onChange: (e) => setSpinWindowStart(e.target.value) }), _jsx(Input, { label: "Spin window end", type: "datetime-local", value: spinWindowEnd, onChange: (e) => setSpinWindowEnd(e.target.value) })] })] })), eventId && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/20 p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-medium text-amber-900 dark:text-amber-100", children: raffleWinnerName
-                                                    ? `Winner: ${raffleWinnerName}`
-                                                    : "Raffle not yet triggered" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => triggerRaffleMutation.mutate(), disabled: triggerRaffleMutation.isPending ||
-                                                    Boolean(raffleWinnerName), children: triggerRaffleMutation.isPending
-                                                    ? "Triggering…"
-                                                    : raffleWinnerName
-                                                        ? "Already triggered"
-                                                        : "Trigger Raffle Now" })] }), raffleEntryCount !== null && (_jsxs(Text, { className: "text-xs text-amber-800 dark:text-amber-200", children: ["Pool size: ", raffleEntryCount] })), raffleGithubUrl && (_jsxs(Text, { className: "text-xs text-amber-800 dark:text-amber-200 break-all", children: ["Fairness proof: ", raffleGithubUrl] })), triggerMessage && (_jsx(Text, { className: "text-xs text-amber-900 dark:text-amber-100", children: triggerMessage }))] }))] }))] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => { window.location.href = "/admin/events"; }, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: saveMutation.isPending || !isValid, children: saveMutation.isPending ? "Saving…" : eventId ? "Save changes" : "Create event" })] }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") ? "error" : "success", title: "Save status", children: saveMessage }))] }));
+    const formContent = (_jsxs("div", { className: "space-y-4", children: [alertSection, _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: () => { saveMutation.mutate(); }, formId: "admin-event", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: isEdit ? "Save Changes" : "Create Event", isLoading: isLoading }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") || saveMessage.toLowerCase().includes("error") ? "error" : "success", title: "Save status", children: saveMessage }))] }));
     if (embedded) {
-        return (_jsxs("div", { className: "overflow-y-auto p-4 space-y-4", children: [alertSection, formSection] }));
+        return _jsx("div", { className: "overflow-y-auto p-4", children: formContent });
     }
-    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: eventId ? "Edit Event" : "Create Event", sections: [alertSection, formSection] }));
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Event" : "Create Event", sections: [formContent] }));
 }