@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/features/admin/components/AdminSectionsView.js

@@ -1,5 +1,948 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { SlottedListingView } from "../../../ui";
-export function AdminSectionsView({ renderDrawer, renderModal, overlays, ...props }) {
-    return (_jsx(SlottedListingView, { portal: "admin", ...props, overlays: _jsxs(_Fragment, { children: [overlays, renderDrawer?.(), renderModal?.()] }) }));
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, Checkbox, Div, Form, FormActions, Input, Modal, Select, Text, Textarea, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants";
+import { useAdminSectionsListing } from "../hooks/useAdminSectionsListing";
+import { AdminListingScaffold } from "./AdminListingScaffold";
+const SECTION_TYPE_OPTIONS = [
+    "welcome",
+    "stats",
+    "trust-indicators",
+    "categories",
+    "brands",
+    "products",
+    "pre-orders",
+    "auctions",
+    "banner",
+    "features",
+    "reviews",
+    "whatsapp-community",
+    "faq",
+    "blog-articles",
+    "newsletter",
+    "stores",
+    "events",
+];
+const DEFAULT_PRODUCTS_BUILDER = {
+    title: "Featured Products",
+    subtitle: "",
+    maxItems: 18,
+    status: "published",
+    sortBy: "featured",
+    featuredOnly: true,
+    inStockOnly: true,
+    autoScroll: false,
+    scrollInterval: 5000,
+    resourceMode: "automatic",
+    selectedCategoryIds: [],
+    manualResourceIds: "",
+};
+const DEFAULT_AUCTIONS_BUILDER = {
+    title: "Live Auctions",
+    subtitle: "",
+    maxItems: 18,
+    status: "active",
+    sortBy: "ending-soon",
+    autoScroll: false,
+    scrollInterval: 5000,
+    resourceMode: "automatic",
+    selectedCategoryIds: [],
+    manualResourceIds: "",
+};
+const DEFAULT_STATS_BUILDER = {
+    title: "Marketplace Stats",
+    stats: [
+        { key: "products", label: "Products Listed", value: "10,000+" },
+        { key: "sellers", label: "Verified Sellers", value: "2,000+" },
+        { key: "buyers", label: "Happy Buyers", value: "50,000+" },
+        { key: "rating", label: "Average Rating", value: "4.8/5" },
+    ],
+};
+const DEFAULT_PRE_ORDERS_BUILDER = {
+    title: "Reserve Before It Ships",
+    subtitle: "",
+    maxItems: 18,
+    status: "active",
+    sortBy: "shipping-soon",
+    autoScroll: false,
+    scrollInterval: 5000,
+    resourceMode: "automatic",
+    selectedCategoryIds: [],
+    manualResourceIds: "",
+};
+const DEFAULT_STORES_BUILDER = {
+    title: "Featured Stores",
+    subtitle: "",
+    maxItems: 8,
+    status: "active",
+    sortBy: "rating-desc",
+    verifiedOnly: true,
+    autoScroll: false,
+    scrollInterval: 5000,
+    resourceMode: "automatic",
+    selectedCategoryIds: [],
+    manualResourceIds: "",
+};
+const DEFAULT_EVENTS_BUILDER = {
+    title: "Events & Offers",
+    subtitle: "",
+    maxItems: 6,
+    status: "active",
+    sortBy: "start-date",
+    featuredOnly: false,
+    autoScroll: false,
+    scrollInterval: 5000,
+    resourceMode: "automatic",
+    selectedCategoryIds: [],
+    manualResourceIds: "",
+};
+const SUPPORTED_TYPED_BUILDERS = [
+    "products",
+    "auctions",
+    "stats",
+    "pre-orders",
+    "stores",
+    "events",
+];
+function parseCsvValues(value) {
+    return value
+        .split(",")
+        .map((part) => part.trim())
+        .filter(Boolean);
+}
+function toNumberValue(value, fallback) {
+    if (typeof value === "number" && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value === "string") {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) {
+            return parsed;
+        }
+    }
+    return fallback;
+}
+function toStringValue(value, fallback = "") {
+    return typeof value === "string" ? value : fallback;
+}
+function toBooleanValue(value, fallback = false) {
+    return typeof value === "boolean" ? value : fallback;
+}
+function toStringArray(value) {
+    return Array.isArray(value)
+        ? value.filter((item) => typeof item === "string")
+        : [];
+}
+function buildProductsConfig(builder) {
+    return {
+        title: builder.title,
+        subtitle: builder.subtitle || undefined,
+        maxProducts: builder.maxItems,
+        rows: 2,
+        itemsPerRow: 3,
+        mobileItemsPerRow: 1,
+        autoScroll: builder.autoScroll,
+        scrollInterval: builder.scrollInterval,
+        filters: {
+            categoryIds: builder.selectedCategoryIds,
+            status: builder.status,
+            sortBy: builder.sortBy,
+            featuredOnly: builder.featuredOnly,
+            inStockOnly: builder.inStockOnly,
+        },
+        resources: {
+            mode: builder.resourceMode,
+            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
+        },
+    };
+}
+function buildAuctionsConfig(builder) {
+    return {
+        title: builder.title,
+        subtitle: builder.subtitle || undefined,
+        maxAuctions: builder.maxItems,
+        rows: 2,
+        itemsPerRow: 3,
+        mobileItemsPerRow: 1,
+        autoScroll: builder.autoScroll,
+        scrollInterval: builder.scrollInterval,
+        filters: {
+            categoryIds: builder.selectedCategoryIds,
+            status: builder.status,
+            sortBy: builder.sortBy,
+        },
+        resources: {
+            mode: builder.resourceMode,
+            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
+        },
+    };
+}
+function buildStatsConfig(builder) {
+    return {
+        title: builder.title || undefined,
+        stats: builder.stats.map((item, index) => ({
+            key: item.key.trim() || `stat-${index + 1}`,
+            label: item.label,
+            value: item.value,
+        })),
+    };
+}
+function buildPreOrdersConfig(builder) {
+    return {
+        title: builder.title,
+        subtitle: builder.subtitle || undefined,
+        maxItems: builder.maxItems,
+        rows: 2,
+        itemsPerRow: 3,
+        mobileItemsPerRow: 1,
+        autoScroll: builder.autoScroll,
+        scrollInterval: builder.scrollInterval,
+        filters: {
+            categoryIds: builder.selectedCategoryIds,
+            status: builder.status,
+            sortBy: builder.sortBy,
+        },
+        resources: {
+            mode: builder.resourceMode,
+            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
+        },
+    };
+}
+function buildStoresConfig(builder) {
+    return {
+        title: builder.title,
+        subtitle: builder.subtitle || undefined,
+        maxStores: builder.maxItems,
+        autoScroll: builder.autoScroll,
+        scrollInterval: builder.scrollInterval,
+        filters: {
+            categoryIds: builder.selectedCategoryIds,
+            status: builder.status,
+            sortBy: builder.sortBy,
+            verifiedOnly: builder.verifiedOnly,
+        },
+        resources: {
+            mode: builder.resourceMode,
+            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
+        },
+    };
+}
+function buildEventsConfig(builder) {
+    return {
+        title: builder.title,
+        subtitle: builder.subtitle || undefined,
+        maxEvents: builder.maxItems,
+        autoScroll: builder.autoScroll,
+        scrollInterval: builder.scrollInterval,
+        filters: {
+            categoryIds: builder.selectedCategoryIds,
+            status: builder.status,
+            sortBy: builder.sortBy,
+            featuredOnly: builder.featuredOnly,
+        },
+        resources: {
+            mode: builder.resourceMode,
+            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
+        },
+    };
+}
+function parseProductsBuilder(config) {
+    const filters = (config.filters ?? {});
+    const resources = (config.resources ?? {});
+    return {
+        title: toStringValue(config.title, DEFAULT_PRODUCTS_BUILDER.title),
+        subtitle: toStringValue(config.subtitle),
+        maxItems: toNumberValue(config.maxProducts, DEFAULT_PRODUCTS_BUILDER.maxItems),
+        status: toStringValue(filters.status, DEFAULT_PRODUCTS_BUILDER.status),
+        sortBy: toStringValue(filters.sortBy, DEFAULT_PRODUCTS_BUILDER.sortBy),
+        featuredOnly: toBooleanValue(filters.featuredOnly, DEFAULT_PRODUCTS_BUILDER.featuredOnly),
+        inStockOnly: toBooleanValue(filters.inStockOnly, DEFAULT_PRODUCTS_BUILDER.inStockOnly),
+        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_PRODUCTS_BUILDER.autoScroll),
+        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_PRODUCTS_BUILDER.scrollInterval),
+        resourceMode: toStringValue(resources.mode, DEFAULT_PRODUCTS_BUILDER.resourceMode),
+        selectedCategoryIds: toStringArray(filters.categoryIds),
+        manualResourceIds: toStringArray(resources.ids).join(", "),
+    };
+}
+function parseAuctionsBuilder(config) {
+    const filters = (config.filters ?? {});
+    const resources = (config.resources ?? {});
+    return {
+        title: toStringValue(config.title, DEFAULT_AUCTIONS_BUILDER.title),
+        subtitle: toStringValue(config.subtitle),
+        maxItems: toNumberValue(config.maxAuctions, DEFAULT_AUCTIONS_BUILDER.maxItems),
+        status: toStringValue(filters.status, DEFAULT_AUCTIONS_BUILDER.status),
+        sortBy: toStringValue(filters.sortBy, DEFAULT_AUCTIONS_BUILDER.sortBy),
+        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_AUCTIONS_BUILDER.autoScroll),
+        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_AUCTIONS_BUILDER.scrollInterval),
+        resourceMode: toStringValue(resources.mode, DEFAULT_AUCTIONS_BUILDER.resourceMode),
+        selectedCategoryIds: toStringArray(filters.categoryIds),
+        manualResourceIds: toStringArray(resources.ids).join(", "),
+    };
+}
+function parseStatsBuilder(config) {
+    const statsArray = Array.isArray(config.stats) ? config.stats : [];
+    const parsedStats = statsArray
+        .slice(0, 4)
+        .map((item, index) => {
+        const row = (item ?? {});
+        return {
+            key: toStringValue(row.key, `stat-${index + 1}`),
+            label: toStringValue(row.label),
+            value: toStringValue(row.value),
+        };
+    });
+    while (parsedStats.length < 4) {
+        parsedStats.push({
+            key: `stat-${parsedStats.length + 1}`,
+            label: "",
+            value: "",
+        });
+    }
+    return {
+        title: toStringValue(config.title, DEFAULT_STATS_BUILDER.title),
+        stats: parsedStats,
+    };
+}
+function parsePreOrdersBuilder(config) {
+    const filters = (config.filters ?? {});
+    const resources = (config.resources ?? {});
+    return {
+        title: toStringValue(config.title, DEFAULT_PRE_ORDERS_BUILDER.title),
+        subtitle: toStringValue(config.subtitle),
+        maxItems: toNumberValue(config.maxItems, DEFAULT_PRE_ORDERS_BUILDER.maxItems),
+        status: toStringValue(filters.status, DEFAULT_PRE_ORDERS_BUILDER.status),
+        sortBy: toStringValue(filters.sortBy, DEFAULT_PRE_ORDERS_BUILDER.sortBy),
+        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_PRE_ORDERS_BUILDER.autoScroll),
+        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_PRE_ORDERS_BUILDER.scrollInterval),
+        resourceMode: toStringValue(resources.mode, DEFAULT_PRE_ORDERS_BUILDER.resourceMode),
+        selectedCategoryIds: toStringArray(filters.categoryIds),
+        manualResourceIds: toStringArray(resources.ids).join(", "),
+    };
+}
+function parseStoresBuilder(config) {
+    const filters = (config.filters ?? {});
+    const resources = (config.resources ?? {});
+    return {
+        title: toStringValue(config.title, DEFAULT_STORES_BUILDER.title),
+        subtitle: toStringValue(config.subtitle),
+        maxItems: toNumberValue(config.maxStores, DEFAULT_STORES_BUILDER.maxItems),
+        status: toStringValue(filters.status, DEFAULT_STORES_BUILDER.status),
+        sortBy: toStringValue(filters.sortBy, DEFAULT_STORES_BUILDER.sortBy),
+        verifiedOnly: toBooleanValue(filters.verifiedOnly, DEFAULT_STORES_BUILDER.verifiedOnly),
+        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_STORES_BUILDER.autoScroll),
+        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_STORES_BUILDER.scrollInterval),
+        resourceMode: toStringValue(resources.mode, DEFAULT_STORES_BUILDER.resourceMode),
+        selectedCategoryIds: toStringArray(filters.categoryIds),
+        manualResourceIds: toStringArray(resources.ids).join(", "),
+    };
+}
+function parseEventsBuilder(config) {
+    const filters = (config.filters ?? {});
+    const resources = (config.resources ?? {});
+    return {
+        title: toStringValue(config.title, DEFAULT_EVENTS_BUILDER.title),
+        subtitle: toStringValue(config.subtitle),
+        maxItems: toNumberValue(config.maxEvents, DEFAULT_EVENTS_BUILDER.maxItems),
+        status: toStringValue(filters.status, DEFAULT_EVENTS_BUILDER.status),
+        sortBy: toStringValue(filters.sortBy, DEFAULT_EVENTS_BUILDER.sortBy),
+        featuredOnly: toBooleanValue(filters.featuredOnly, DEFAULT_EVENTS_BUILDER.featuredOnly),
+        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_EVENTS_BUILDER.autoScroll),
+        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_EVENTS_BUILDER.scrollInterval),
+        resourceMode: toStringValue(resources.mode, DEFAULT_EVENTS_BUILDER.resourceMode),
+        selectedCategoryIds: toStringArray(filters.categoryIds),
+        manualResourceIds: toStringArray(resources.ids).join(", "),
+    };
+}
+export function AdminSectionsView({ children }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const queryClient = useQueryClient();
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const [mode, setMode] = React.useState("create");
+    const [selectedSectionId, setSelectedSectionId] = React.useState("");
+    const [sectionType, setSectionType] = React.useState("products");
+    const [enabled, setEnabled] = React.useState(true);
+    const [order, setOrder] = React.useState("");
+    const [configJson, setConfigJson] = React.useState("{}");
+    const [productsBuilder, setProductsBuilder] = React.useState(DEFAULT_PRODUCTS_BUILDER);
+    const [auctionsBuilder, setAuctionsBuilder] = React.useState(DEFAULT_AUCTIONS_BUILDER);
+    const [statsBuilder, setStatsBuilder] = React.useState(DEFAULT_STATS_BUILDER);
+    const [preOrdersBuilder, setPreOrdersBuilder] = React.useState(DEFAULT_PRE_ORDERS_BUILDER);
+    const [storesBuilder, setStoresBuilder] = React.useState(DEFAULT_STORES_BUILDER);
+    const [eventsBuilder, setEventsBuilder] = React.useState(DEFAULT_EVENTS_BUILDER);
+    const [reorderDraft, setReorderDraft] = React.useState([]);
+    const [reorderServerSnapshot, setReorderServerSnapshot] = React.useState([]);
+    const [reorderUndoStack, setReorderUndoStack] = React.useState([]);
+    const [dragIndex, setDragIndex] = React.useState(null);
+    const [formMessage, setFormMessage] = React.useState(null);
+    const isTypedBuilder = SUPPORTED_TYPED_BUILDERS.includes(sectionType);
+    const { sections, isLoading, errorMessage } = useAdminSectionsListing({
+        page: 1,
+        pageSize: 50,
+    });
+    const categoriesQuery = useQuery({
+        queryKey: ["admin", "sections", "categories", "options"],
+        queryFn: () => apiClient.get(`${ADMIN_ENDPOINTS.CATEGORIES}?page=1&pageSize=100&sorts=name`),
+        staleTime: 60000,
+    });
+    const categoryOptions = React.useMemo(() => {
+        const items = Array.isArray(categoriesQuery.data?.items)
+            ? categoriesQuery.data.items
+            : [];
+        return items
+            .map((item) => {
+            const row = (item ?? {});
+            const id = toStringValue(row.id);
+            const name = toStringValue(row.name);
+            if (!id || !name) {
+                return null;
+            }
+            return { id, name };
+        })
+            .filter((item) => item !== null);
+    }, [categoriesQuery.data?.items]);
+    const typedConfig = React.useMemo(() => {
+        if (sectionType === "products") {
+            return buildProductsConfig(productsBuilder);
+        }
+        if (sectionType === "auctions") {
+            return buildAuctionsConfig(auctionsBuilder);
+        }
+        if (sectionType === "stats") {
+            return buildStatsConfig(statsBuilder);
+        }
+        if (sectionType === "pre-orders") {
+            return buildPreOrdersConfig(preOrdersBuilder);
+        }
+        if (sectionType === "stores") {
+            return buildStoresConfig(storesBuilder);
+        }
+        if (sectionType === "events") {
+            return buildEventsConfig(eventsBuilder);
+        }
+        return null;
+    }, [
+        sectionType,
+        productsBuilder,
+        auctionsBuilder,
+        statsBuilder,
+        preOrdersBuilder,
+        storesBuilder,
+        eventsBuilder,
+    ]);
+    React.useEffect(() => {
+        if (!typedConfig) {
+            return;
+        }
+        setConfigJson(JSON.stringify(typedConfig, null, 2));
+    }, [typedConfig]);
+    React.useEffect(() => {
+        const sorted = [...sections]
+            .sort((a, b) => a.order - b.order)
+            .map((section) => ({
+            id: section.id,
+            type: section.type,
+            order: section.order,
+        }));
+        const normalized = normalizeOrder(sorted);
+        setReorderDraft(normalized);
+        setReorderServerSnapshot(normalized);
+        setReorderUndoStack([]);
+    }, [sections]);
+    const saveSection = useMutation({
+        mutationFn: async () => {
+            let parsedConfig;
+            try {
+                parsedConfig = JSON.parse(configJson);
+            }
+            catch {
+                throw new Error("Config must be valid JSON.");
+            }
+            if (mode === "create") {
+                await apiClient.post(ADMIN_ENDPOINTS.SECTIONS, {
+                    type: sectionType,
+                    enabled,
+                    ...(order.trim() ? { order: Number(order) } : {}),
+                    config: parsedConfig,
+                });
+                return;
+            }
+            if (!selectedSectionId) {
+                throw new Error("Select a section to update.");
+            }
+            const payload = {
+                enabled,
+                config: parsedConfig,
+            };
+            if (order.trim()) {
+                payload.order = Number(order);
+            }
+            await apiClient.patch(`${ADMIN_ENDPOINTS.SECTIONS}/${selectedSectionId}`, payload);
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "sections", "listing"] });
+            setFormMessage(mode === "create" ? "Section created." : "Section updated.");
+            setIsModalOpen(false);
+        },
+        onError: (error) => {
+            setFormMessage(error instanceof Error ? error.message : "Failed to save section.");
+        },
+    });
+    const reorderSections = useMutation({
+        mutationFn: async () => {
+            await Promise.all(reorderDraft.map((item) => apiClient.patch(`${ADMIN_ENDPOINTS.SECTIONS}/${item.id}`, {
+                order: item.order,
+            })));
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "sections", "listing"] });
+            setReorderServerSnapshot(cloneReorderItems(reorderDraft));
+            setReorderUndoStack([]);
+            setFormMessage("Section order updated.");
+        },
+        onError: (error) => {
+            setFormMessage(error instanceof Error ? error.message : "Failed to reorder sections.");
+        },
+    });
+    React.useEffect(() => {
+        if (mode !== "edit" || !selectedSectionId)
+            return;
+        const selected = sections.find((section) => section.id === selectedSectionId);
+        if (!selected)
+            return;
+        setSectionType(selected.type);
+        setEnabled(Boolean(selected.enabled));
+        setOrder(String(selected.order ?? ""));
+        const selectedConfig = (selected.config ?? {});
+        setConfigJson(JSON.stringify(selectedConfig, null, 2));
+        if (selected.type === "products") {
+            setProductsBuilder(parseProductsBuilder(selectedConfig));
+        }
+        if (selected.type === "auctions") {
+            setAuctionsBuilder(parseAuctionsBuilder(selectedConfig));
+        }
+        if (selected.type === "stats") {
+            setStatsBuilder(parseStatsBuilder(selectedConfig));
+        }
+        if (selected.type === "pre-orders") {
+            setPreOrdersBuilder(parsePreOrdersBuilder(selectedConfig));
+        }
+        if (selected.type === "stores") {
+            setStoresBuilder(parseStoresBuilder(selectedConfig));
+        }
+        if (selected.type === "events") {
+            setEventsBuilder(parseEventsBuilder(selectedConfig));
+        }
+    }, [mode, sections, selectedSectionId]);
+    React.useEffect(() => {
+        if (!isModalOpen || mode !== "create") {
+            return;
+        }
+        if (sectionType === "products") {
+            setProductsBuilder(DEFAULT_PRODUCTS_BUILDER);
+        }
+        if (sectionType === "auctions") {
+            setAuctionsBuilder(DEFAULT_AUCTIONS_BUILDER);
+        }
+        if (sectionType === "stats") {
+            setStatsBuilder(DEFAULT_STATS_BUILDER);
+        }
+        if (sectionType === "pre-orders") {
+            setPreOrdersBuilder(DEFAULT_PRE_ORDERS_BUILDER);
+        }
+        if (sectionType === "stores") {
+            setStoresBuilder(DEFAULT_STORES_BUILDER);
+        }
+        if (sectionType === "events") {
+            setEventsBuilder(DEFAULT_EVENTS_BUILDER);
+        }
+    }, [isModalOpen, mode, sectionType]);
+    function toggleCategorySelection(ids, categoryId, checked) {
+        if (checked) {
+            if (ids.includes(categoryId)) {
+                return ids;
+            }
+            return [...ids, categoryId];
+        }
+        return ids.filter((id) => id !== categoryId);
+    }
+    function normalizeOrder(items) {
+        return items.map((item, index) => ({ ...item, order: index + 1 }));
+    }
+    function cloneReorderItems(items) {
+        return items.map((item) => ({ ...item }));
+    }
+    function isSameReorder(a, b) {
+        if (a.length !== b.length) {
+            return false;
+        }
+        return a.every((item, index) => {
+            const other = b[index];
+            return Boolean(other) && item.id === other.id && item.order === other.order;
+        });
+    }
+    function pushUndoSnapshot(snapshot) {
+        setReorderUndoStack((history) => [cloneReorderItems(snapshot), ...history].slice(0, 30));
+    }
+    function applyReorderChange(transform) {
+        setReorderDraft((prev) => {
+            const next = transform(prev);
+            if (isSameReorder(prev, next)) {
+                return prev;
+            }
+            pushUndoSnapshot(prev);
+            return next;
+        });
+    }
+    function moveReorderItem(index, direction) {
+        const targetIndex = index + direction;
+        if (targetIndex < 0 || targetIndex >= reorderDraft.length) {
+            return;
+        }
+        applyReorderChange((prev) => {
+            const next = [...prev];
+            const [item] = next.splice(index, 1);
+            next.splice(targetIndex, 0, item);
+            return normalizeOrder(next);
+        });
+    }
+    function updateReorderItemOrder(index, nextOrder) {
+        applyReorderChange((prev) => {
+            const clamped = Math.min(Math.max(1, nextOrder), prev.length);
+            const currentIndex = index;
+            const sorted = [...prev];
+            const [item] = sorted.splice(currentIndex, 1);
+            sorted.splice(clamped - 1, 0, item);
+            return normalizeOrder(sorted);
+        });
+    }
+    function moveItemToIndex(fromIndex, toIndex) {
+        if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0) {
+            return;
+        }
+        applyReorderChange((prev) => {
+            if (fromIndex >= prev.length || toIndex >= prev.length) {
+                return prev;
+            }
+            const next = [...prev];
+            const [item] = next.splice(fromIndex, 1);
+            next.splice(toIndex, 0, item);
+            return normalizeOrder(next);
+        });
+    }
+    function reindexDraft() {
+        applyReorderChange((prev) => normalizeOrder(prev));
+    }
+    function resetToServerOrder() {
+        applyReorderChange(() => cloneReorderItems(reorderServerSnapshot));
+    }
+    function undoReorderChange() {
+        if (reorderUndoStack.length === 0) {
+            return;
+        }
+        const [latest, ...rest] = reorderUndoStack;
+        setReorderUndoStack(rest);
+        setReorderDraft(cloneReorderItems(latest));
+    }
+    function renderProductsBuilder() {
+        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Products Carousel Builder" }), _jsx(Input, { label: "Section title", value: productsBuilder.title, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: productsBuilder.subtitle, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max products", type: "number", min: 1, max: 50, value: String(productsBuilder.maxItems), onChange: (event) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        maxItems: Math.max(1, Number(event.target.value) || 1),
+                    })) }), _jsx(Select, { label: "Status filter", value: productsBuilder.status, onValueChange: (value) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        status: value,
+                    })), options: [
+                        { label: "All", value: "all" },
+                        { label: "Published", value: "published" },
+                        { label: "Draft", value: "draft" },
+                    ] }), _jsx(Select, { label: "Sort", value: productsBuilder.sortBy, onValueChange: (value) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        sortBy: value,
+                    })), options: [
+                        { label: "Featured", value: "featured" },
+                        { label: "Newest", value: "newest" },
+                        { label: "Price (Low to High)", value: "price-asc" },
+                        { label: "Price (High to Low)", value: "price-desc" },
+                    ] }), _jsx(Select, { label: "Resource mode", value: productsBuilder.resourceMode, onValueChange: (value) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        resourceMode: value,
+                    })), options: [
+                        { label: "Automatic by filters", value: "automatic" },
+                        { label: "Manual resource IDs", value: "manual" },
+                    ] }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: productsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setProductsBuilder((prev) => ({
+                                    ...prev,
+                                    selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, category.id, event.target.checked),
+                                })) }, category.id))) }))] }), productsBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual product resource IDs (comma-separated)", value: productsBuilder.manualResourceIds, onChange: (event) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        manualResourceIds: event.target.value,
+                    })), rows: 3 })) : null, _jsx(Checkbox, { checked: productsBuilder.featuredOnly, label: "Featured only", onChange: (event) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        featuredOnly: event.target.checked,
+                    })) }), _jsx(Checkbox, { checked: productsBuilder.inStockOnly, label: "In-stock only", onChange: (event) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        inStockOnly: event.target.checked,
+                    })) }), _jsx(Checkbox, { checked: productsBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        autoScroll: event.target.checked,
+                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(productsBuilder.scrollInterval), onChange: (event) => setProductsBuilder((prev) => ({
+                        ...prev,
+                        scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
+                    })) })] }));
+    }
+    function renderAuctionsBuilder() {
+        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Auctions Carousel Builder" }), _jsx(Input, { label: "Section title", value: auctionsBuilder.title, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: auctionsBuilder.subtitle, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max auctions", type: "number", min: 1, max: 50, value: String(auctionsBuilder.maxItems), onChange: (event) => setAuctionsBuilder((prev) => ({
+                        ...prev,
+                        maxItems: Math.max(1, Number(event.target.value) || 1),
+                    })) }), _jsx(Select, { label: "Status filter", value: auctionsBuilder.status, onValueChange: (value) => setAuctionsBuilder((prev) => ({
+                        ...prev,
+                        status: value,
+                    })), options: [
+                        { label: "All", value: "all" },
+                        { label: "Active", value: "active" },
+                        { label: "Scheduled", value: "scheduled" },
+                        { label: "Ended", value: "ended" },
+                    ] }), _jsx(Select, { label: "Sort", value: auctionsBuilder.sortBy, onValueChange: (value) => setAuctionsBuilder((prev) => ({
+                        ...prev,
+                        sortBy: value,
+                    })), options: [
+                        { label: "Ending Soon", value: "ending-soon" },
+                        { label: "Highest Bid", value: "highest-bid" },
+                        { label: "Newest", value: "newest" },
+                    ] }), _jsx(Select, { label: "Resource mode", value: auctionsBuilder.resourceMode, onValueChange: (value) => setAuctionsBuilder((prev) => ({
+                        ...prev,
+                        resourceMode: value,
+                    })), options: [
+                        { label: "Automatic by filters", value: "automatic" },
+                        { label: "Manual resource IDs", value: "manual" },
+                    ] }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: auctionsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setAuctionsBuilder((prev) => ({
+                                    ...prev,
+                                    selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, category.id, event.target.checked),
+                                })) }, category.id))) }))] }), auctionsBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual auction resource IDs (comma-separated)", value: auctionsBuilder.manualResourceIds, onChange: (event) => setAuctionsBuilder((prev) => ({
+                        ...prev,
+                        manualResourceIds: event.target.value,
+                    })), rows: 3 })) : null, _jsx(Checkbox, { checked: auctionsBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setAuctionsBuilder((prev) => ({
+                        ...prev,
+                        autoScroll: event.target.checked,
+                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(auctionsBuilder.scrollInterval), onChange: (event) => setAuctionsBuilder((prev) => ({
+                        ...prev,
+                        scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
+                    })) })] }));
+    }
+    function renderStatsBuilder() {
+        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Stats Section Builder" }), _jsx(Input, { label: "Section title", value: statsBuilder.title, onChange: (event) => setStatsBuilder((prev) => ({ ...prev, title: event.target.value })), helperText: "Optional internal title for stats configuration." }), statsBuilder.stats.map((stat, index) => (_jsxs(Div, { className: "space-y-3 rounded-md border border-zinc-200 p-3 dark:border-slate-700", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Stat ", index + 1] }), _jsx(Input, { label: "Key", value: stat.key, onChange: (event) => setStatsBuilder((prev) => {
+                                const next = [...prev.stats];
+                                next[index] = { ...next[index], key: event.target.value };
+                                return { ...prev, stats: next };
+                            }) }), _jsx(Input, { label: "Label", value: stat.label, onChange: (event) => setStatsBuilder((prev) => {
+                                const next = [...prev.stats];
+                                next[index] = { ...next[index], label: event.target.value };
+                                return { ...prev, stats: next };
+                            }) }), _jsx(Input, { label: "Value", value: stat.value, onChange: (event) => setStatsBuilder((prev) => {
+                                const next = [...prev.stats];
+                                next[index] = { ...next[index], value: event.target.value };
+                                return { ...prev, stats: next };
+                            }) })] }, `stat-row-${index}`)))] }));
+    }
+    function renderCategorySelector(selectedIds, onToggle) {
+        return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: selectedIds.includes(category.id), label: category.name, onChange: (event) => onToggle(category.id, event.target.checked) }, category.id))) }))] }));
+    }
+    function renderPreOrdersBuilder() {
+        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Pre-Orders Carousel Builder" }), _jsx(Input, { label: "Section title", value: preOrdersBuilder.title, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: preOrdersBuilder.subtitle, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max pre-orders", type: "number", min: 1, max: 50, value: String(preOrdersBuilder.maxItems), onChange: (event) => setPreOrdersBuilder((prev) => ({
+                        ...prev,
+                        maxItems: Math.max(1, Number(event.target.value) || 1),
+                    })) }), _jsx(Select, { label: "Status filter", value: preOrdersBuilder.status, onValueChange: (value) => setPreOrdersBuilder((prev) => ({
+                        ...prev,
+                        status: value,
+                    })), options: [
+                        { label: "All", value: "all" },
+                        { label: "Active", value: "active" },
+                        { label: "Upcoming", value: "upcoming" },
+                        { label: "Closed", value: "closed" },
+                    ] }), _jsx(Select, { label: "Sort", value: preOrdersBuilder.sortBy, onValueChange: (value) => setPreOrdersBuilder((prev) => ({
+                        ...prev,
+                        sortBy: value,
+                    })), options: [
+                        { label: "Shipping Soon", value: "shipping-soon" },
+                        { label: "Newest", value: "newest" },
+                        { label: "Price (Low to High)", value: "price-asc" },
+                        { label: "Price (High to Low)", value: "price-desc" },
+                    ] }), _jsx(Select, { label: "Resource mode", value: preOrdersBuilder.resourceMode, onValueChange: (value) => setPreOrdersBuilder((prev) => ({
+                        ...prev,
+                        resourceMode: value,
+                    })), options: [
+                        { label: "Automatic by filters", value: "automatic" },
+                        { label: "Manual resource IDs", value: "manual" },
+                    ] }), renderCategorySelector(preOrdersBuilder.selectedCategoryIds, (categoryId, checked) => {
+                    setPreOrdersBuilder((prev) => ({
+                        ...prev,
+                        selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, categoryId, checked),
+                    }));
+                }), preOrdersBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual pre-order resource IDs (comma-separated)", value: preOrdersBuilder.manualResourceIds, onChange: (event) => setPreOrdersBuilder((prev) => ({
+                        ...prev,
+                        manualResourceIds: event.target.value,
+                    })), rows: 3 })) : null, _jsx(Checkbox, { checked: preOrdersBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setPreOrdersBuilder((prev) => ({
+                        ...prev,
+                        autoScroll: event.target.checked,
+                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(preOrdersBuilder.scrollInterval), onChange: (event) => setPreOrdersBuilder((prev) => ({
+                        ...prev,
+                        scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
+                    })) })] }));
+    }
+    function renderStoresBuilder() {
+        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Stores Section Builder" }), _jsx(Input, { label: "Section title", value: storesBuilder.title, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: storesBuilder.subtitle, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max stores", type: "number", min: 1, max: 30, value: String(storesBuilder.maxItems), onChange: (event) => setStoresBuilder((prev) => ({
+                        ...prev,
+                        maxItems: Math.max(1, Number(event.target.value) || 1),
+                    })) }), _jsx(Select, { label: "Status filter", value: storesBuilder.status, onValueChange: (value) => setStoresBuilder((prev) => ({
+                        ...prev,
+                        status: value,
+                    })), options: [
+                        { label: "All", value: "all" },
+                        { label: "Active", value: "active" },
+                        { label: "Pending", value: "pending" },
+                        { label: "Disabled", value: "disabled" },
+                    ] }), _jsx(Select, { label: "Sort", value: storesBuilder.sortBy, onValueChange: (value) => setStoresBuilder((prev) => ({
+                        ...prev,
+                        sortBy: value,
+                    })), options: [
+                        { label: "Rating (High to Low)", value: "rating-desc" },
+                        { label: "Newest", value: "newest" },
+                        { label: "Popular", value: "popular" },
+                    ] }), _jsx(Select, { label: "Resource mode", value: storesBuilder.resourceMode, onValueChange: (value) => setStoresBuilder((prev) => ({
+                        ...prev,
+                        resourceMode: value,
+                    })), options: [
+                        { label: "Automatic by filters", value: "automatic" },
+                        { label: "Manual resource IDs", value: "manual" },
+                    ] }), renderCategorySelector(storesBuilder.selectedCategoryIds, (categoryId, checked) => {
+                    setStoresBuilder((prev) => ({
+                        ...prev,
+                        selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, categoryId, checked),
+                    }));
+                }), storesBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual store resource IDs (comma-separated)", value: storesBuilder.manualResourceIds, onChange: (event) => setStoresBuilder((prev) => ({
+                        ...prev,
+                        manualResourceIds: event.target.value,
+                    })), rows: 3 })) : null, _jsx(Checkbox, { checked: storesBuilder.verifiedOnly, label: "Verified stores only", onChange: (event) => setStoresBuilder((prev) => ({
+                        ...prev,
+                        verifiedOnly: event.target.checked,
+                    })) }), _jsx(Checkbox, { checked: storesBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setStoresBuilder((prev) => ({
+                        ...prev,
+                        autoScroll: event.target.checked,
+                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(storesBuilder.scrollInterval), onChange: (event) => setStoresBuilder((prev) => ({
+                        ...prev,
+                        scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
+                    })) })] }));
+    }
+    function renderEventsBuilder() {
+        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Events Section Builder" }), _jsx(Input, { label: "Section title", value: eventsBuilder.title, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: eventsBuilder.subtitle, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max events", type: "number", min: 1, max: 30, value: String(eventsBuilder.maxItems), onChange: (event) => setEventsBuilder((prev) => ({
+                        ...prev,
+                        maxItems: Math.max(1, Number(event.target.value) || 1),
+                    })) }), _jsx(Select, { label: "Status filter", value: eventsBuilder.status, onValueChange: (value) => setEventsBuilder((prev) => ({
+                        ...prev,
+                        status: value,
+                    })), options: [
+                        { label: "All", value: "all" },
+                        { label: "Active", value: "active" },
+                        { label: "Upcoming", value: "upcoming" },
+                        { label: "Ended", value: "ended" },
+                    ] }), _jsx(Select, { label: "Sort", value: eventsBuilder.sortBy, onValueChange: (value) => setEventsBuilder((prev) => ({
+                        ...prev,
+                        sortBy: value,
+                    })), options: [
+                        { label: "Start Date", value: "start-date" },
+                        { label: "Newest", value: "newest" },
+                        { label: "Popular", value: "popular" },
+                    ] }), _jsx(Select, { label: "Resource mode", value: eventsBuilder.resourceMode, onValueChange: (value) => setEventsBuilder((prev) => ({
+                        ...prev,
+                        resourceMode: value,
+                    })), options: [
+                        { label: "Automatic by filters", value: "automatic" },
+                        { label: "Manual resource IDs", value: "manual" },
+                    ] }), renderCategorySelector(eventsBuilder.selectedCategoryIds, (categoryId, checked) => {
+                    setEventsBuilder((prev) => ({
+                        ...prev,
+                        selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, categoryId, checked),
+                    }));
+                }), eventsBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual event resource IDs (comma-separated)", value: eventsBuilder.manualResourceIds, onChange: (event) => setEventsBuilder((prev) => ({
+                        ...prev,
+                        manualResourceIds: event.target.value,
+                    })), rows: 3 })) : null, _jsx(Checkbox, { checked: eventsBuilder.featuredOnly, label: "Featured events only", onChange: (event) => setEventsBuilder((prev) => ({
+                        ...prev,
+                        featuredOnly: event.target.checked,
+                    })) }), _jsx(Checkbox, { checked: eventsBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setEventsBuilder((prev) => ({
+                        ...prev,
+                        autoScroll: event.target.checked,
+                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(eventsBuilder.scrollInterval), onChange: (event) => setEventsBuilder((prev) => ({
+                        ...prev,
+                        scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
+                    })) })] }));
+    }
+    function renderTypedBuilder() {
+        if (sectionType === "products") {
+            return renderProductsBuilder();
+        }
+        if (sectionType === "auctions") {
+            return renderAuctionsBuilder();
+        }
+        if (sectionType === "stats") {
+            return renderStatsBuilder();
+        }
+        if (sectionType === "pre-orders") {
+            return renderPreOrdersBuilder();
+        }
+        if (sectionType === "stores") {
+            return renderStoresBuilder();
+        }
+        if (sectionType === "events") {
+            return renderEventsBuilder();
+        }
+        return null;
+    }
+    // If children exist, render passthrough mode (detail view)
+    if (hasChildren) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // Map sections data to listing rows
+    const rows = sections.map((section) => ({
+        id: section.id,
+        primary: section.type.charAt(0).toUpperCase() + section.type.slice(1).replace(/-/g, " "),
+        secondary: `Order: ${section.order} • ${section.enabled ? "Enabled" : "Disabled"}`,
+        status: section.enabled ? "Active" : "Inactive",
+        updatedAt: new Date(section.updatedAt).toLocaleDateString(),
+    }));
+    const sectionOrderMap = React.useMemo(() => {
+        return new Map(sections.map((section) => [section.id, section.order]));
+    }, [sections]);
+    const hasReorderChanges = reorderDraft.some((item) => sectionOrderMap.get(item.id) !== item.order);
+    const canUndoReorderChanges = reorderUndoStack.length > 0;
+    return (_jsxs(_Fragment, { children: [_jsx(AdminListingScaffold, { title: "Homepage Sections", subtitle: "Manage homepage sections and their display order", actionLabel: "Manage Sections", searchPlaceholder: "Search sections...", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No sections found", actionsSlot: _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setIsModalOpen(true), children: "Manage Sections" }) }), _jsxs(Div, { className: "mt-4 space-y-3 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Reorder Sections" }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: reindexDraft, disabled: reorderSections.isPending || reorderDraft.length === 0, children: "Reindex 1..N" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: undoReorderChange, disabled: reorderSections.isPending || !canUndoReorderChanges, children: "Undo unsaved" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: resetToServerOrder, disabled: reorderSections.isPending || !hasReorderChanges, children: "Reset to server" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => reorderSections.mutate(), disabled: !hasReorderChanges || reorderSections.isPending, children: reorderSections.isPending ? "Saving order..." : "Save order" })] })] }), reorderDraft.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No sections to reorder." })) : (_jsx(Div, { className: "space-y-2", children: reorderDraft.map((item, index) => (_jsxs(Div, { className: "grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-2 rounded-md border border-zinc-200 p-2 dark:border-slate-700", draggable: true, onDragStart: () => setDragIndex(index), onDragOver: (event) => event.preventDefault(), onDrop: () => {
+                                if (dragIndex !== null) {
+                                    moveItemToIndex(dragIndex, index);
+                                }
+                                setDragIndex(null);
+                            }, onDragEnd: () => setDragIndex(null), children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-500 dark:text-zinc-400", children: "\u2261" }), _jsxs(Text, { className: "text-sm text-zinc-800 dark:text-zinc-200", children: [item.type, " #", item.order] }), _jsx(Input, { type: "number", min: 1, max: reorderDraft.length, value: String(item.order), onChange: (event) => updateReorderItemOrder(index, Number(event.target.value) || 1), className: "w-24" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, -1), disabled: index === 0, children: "Up" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, 1), disabled: index === reorderDraft.length - 1, children: "Down" })] }, `reorder-${item.id}`))) }))] }), formMessage ? (_jsx(Alert, { variant: formMessage.includes("Failed") || formMessage.includes("must") ? "error" : "success", title: "Sections", children: formMessage })) : null, _jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Manage Homepage Section", size: "lg", children: _jsxs(Form, { className: "space-y-4", onSubmit: (event) => {
+                        event.preventDefault();
+                        saveSection.mutate();
+                    }, children: [_jsx(Select, { label: "Mode", value: mode, onValueChange: (value) => setMode(value), options: [
+                                { label: "Create new section", value: "create" },
+                                { label: "Edit existing section", value: "edit" },
+                            ] }), mode === "edit" ? (_jsx(Select, { label: "Section", value: selectedSectionId, onValueChange: setSelectedSectionId, placeholder: "Select section", options: sections.map((section) => ({
+                                label: `${section.type} (#${section.order})`,
+                                value: section.id,
+                            })) })) : null, _jsx(Select, { label: "Section type", value: sectionType, onValueChange: (value) => {
+                                setSectionType(value);
+                                if (mode === "create") {
+                                    setSelectedSectionId("");
+                                }
+                            }, options: SECTION_TYPE_OPTIONS.map((type) => ({
+                                label: type,
+                                value: type,
+                            })), disabled: mode === "edit" }), _jsx(Input, { label: "Order", type: "number", value: order, onChange: (event) => setOrder(event.target.value), placeholder: "Leave empty to auto-place" }), _jsx(Select, { label: "Enabled", value: enabled ? "true" : "false", onValueChange: (value) => setEnabled(value === "true"), options: [
+                                { label: "Enabled", value: "true" },
+                                { label: "Disabled", value: "false" },
+                            ] }), isTypedBuilder ? renderTypedBuilder() : null, _jsx(Textarea, { label: isTypedBuilder ? "Generated config (JSON preview)" : "Section config (JSON)", value: configJson, onChange: (event) => setConfigJson(event.target.value), rows: 10, readOnly: isTypedBuilder, helperText: isTypedBuilder
+                                ? "This JSON is generated from typed controls above."
+                                : "Provide section config JSON for this section type." }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => setIsModalOpen(false), children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: saveSection.isPending, children: saveSection.isPending ? "Saving..." : mode === "create" ? "Create section" : "Update section" })] })] }) })] }));
 }