'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client';
import { Modal } from '../../components/ui/Modal.js';
import { Button } from '../../components/ui/Button.js';
import { cmsApi } from '../../lib/api.js';
const LABEL = 'text-foreground mb-1 block text-xs font-medium';
const INPUT = 'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none';
const slugify = normalizeSlug;
/** Edits page-level fields: title, slug, path, and parent page. SEO lives in the SEO tab. */
export function PageSettingsModal({ open, page, canEdit, onClose, onSave, }) {
    const [title, setTitle] = useState(page.title);
    const [slug, setSlug] = useState(page.slug);
    const [path, setPath] = useState(page.path);
    const [parentPageId, setParentPageId] = useState(page.parentPageId ?? '');
    // Auto-derive slug/path from title until the user edits slug manually.
    const [slugTouched, setSlugTouched] = useState(Boolean(page.slug));
    const [parentOptions, setParentOptions] = useState(null);
    // Land the user in the Title field (WordPress-style "name it first"),
    // rather than Radix's default focus on the header close button.
    const titleRef = useRef(null);
    useEffect(() => {
        if (!open)
            return;
        setTitle(page.title);
        setSlug(page.slug);
        setPath(page.path);
        setParentPageId(page.parentPageId ?? '');
        setSlugTouched(Boolean(page.slug));
    }, [open, page]);
    // Load the parent-page choices lazily the first time the modal opens.
    // The page itself is excluded (a page can't be its own parent); deeper
    // cycle protection lives in the tree builder, which breaks bad chains.
    useEffect(() => {
        if (!open || parentOptions !== null)
            return;
        let cancelled = false;
        cmsApi('/collections/pages?pageSize=500&sort=updatedAt&order=desc')
            .then((res) => {
            if (cancelled)
                return;
            const docs = res.data?.docs ?? [];
            const options = docs
                .filter((d) => d.id !== page.id)
                .map((d) => ({ id: d.id, title: d.title ?? '(untitled)' }))
                .sort((a, b) => a.title.localeCompare(b.title));
            setParentOptions(options);
        })
            .catch(() => {
            // Leave the picker in its loading state note; the rest of the
            // settings form stays fully usable.
            if (!cancelled)
                setParentOptions([]);
        });
        return () => {
            cancelled = true;
        };
    }, [open, parentOptions, page.id]);
    function handleTitle(next) {
        setTitle(next);
        if (!slugTouched) {
            const s = slugify(next);
            setSlug(s);
            if (!page.path || page.path === `/${slug}`)
                setPath(s ? `/${s}` : '');
        }
    }
    const slugError = validateSlug(slug);
    function handleSave() {
        if (slugError)
            return;
        onSave({
            title,
            slug,
            path: path || (slug ? `/${slug}` : '/'),
            parentPageId: parentPageId || null,
        });
        onClose();
    }
    return (_jsx(Modal, { open: open, onClose: onClose, title: "Page settings", initialFocusRef: titleRef, actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "primary", form: "page-settings-form", type: "submit", disabled: !canEdit || Boolean(slugError), children: "Done" })] }), children: _jsxs("form", { id: "page-settings-form", className: "space-y-3", onSubmit: (e) => {
                e.preventDefault();
                handleSave();
            }, children: [_jsxs("div", { children: [_jsxs("label", { className: LABEL, htmlFor: "ps-title", children: ["Title ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "ps-title", ref: titleRef, className: INPUT, value: title, disabled: !canEdit, placeholder: "e.g. About Us", onChange: (e) => handleTitle(e.target.value) }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: "The slug and path below follow the title until you edit them." })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "ps-slug", children: "Slug" }), _jsx("input", { id: "ps-slug", className: INPUT, value: slug, disabled: !canEdit, "aria-invalid": Boolean(slugError), "aria-describedby": slugError ? 'ps-slug-error' : undefined, onChange: (e) => {
                                        setSlugTouched(true);
                                        setSlug(slugify(e.target.value));
                                    } }), slugError && (_jsx("p", { id: "ps-slug-error", className: "text-destructive mt-1 text-xs", children: slugError }))] }), _jsxs("div", { children: [_jsxs("label", { className: LABEL, htmlFor: "ps-path", children: ["Path ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "ps-path", className: INPUT, value: path, disabled: !canEdit, placeholder: "/about/story", onChange: (e) => setPath(e.target.value) })] })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "ps-parent", children: "Parent page" }), _jsxs("select", { id: "ps-parent", className: INPUT, value: parentPageId, disabled: !canEdit || parentOptions === null, onChange: (e) => setParentPageId(e.target.value), children: [_jsx("option", { value: "", children: "None \u2014 top level" }), parentPageId && !(parentOptions ?? []).some((p) => p.id === parentPageId) && (_jsx("option", { value: parentPageId, children: parentOptions === null ? 'Loading…' : 'Current parent' })), (parentOptions ?? []).map((p) => (_jsx("option", { value: p.id, children: p.title }, p.id)))] }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: "Nests this page under a parent in the Pages tree view." })] })] }) }));
}
//# sourceMappingURL=PageSettingsModal.js.map