'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, 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 { SeoCharCount } from '../../components/seo/SeoCharCount.js';
const SEO_TITLE_MIN = 30;
const SEO_TITLE_MAX = 60;
const SEO_DESC_MIN = 120;
const SEO_DESC_MAX = 160;
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 SEO. */
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 [seoTitle, setSeoTitle] = useState(page.seoTitle);
    const [seoDescription, setSeoDescription] = useState(page.seoDescription);
    // Auto-derive slug/path from title until the user edits slug manually.
    const [slugTouched, setSlugTouched] = useState(Boolean(page.slug));
    useEffect(() => {
        if (!open)
            return;
        setTitle(page.title);
        setSlug(page.slug);
        setPath(page.path);
        setSeoTitle(page.seoTitle);
        setSeoDescription(page.seoDescription);
        setSlugTouched(Boolean(page.slug));
    }, [open, page]);
    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}` : '/'), seoTitle, seoDescription });
        onClose();
    }
    return (_jsx(Modal, { open: open, onClose: onClose, title: "Page settings", actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleSave, disabled: !canEdit || Boolean(slugError), children: "Done" })] }), children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsxs("label", { className: LABEL, htmlFor: "ps-title", children: ["Title ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "ps-title", className: INPUT, value: title, disabled: !canEdit, onChange: (e) => handleTitle(e.target.value) })] }), _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: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsx("label", { className: `${LABEL} mb-0`, htmlFor: "ps-seo-title", children: "SEO title" }), _jsx(SeoCharCount, { value: seoTitle, min: SEO_TITLE_MIN, max: SEO_TITLE_MAX })] }), _jsx("input", { id: "ps-seo-title", className: INPUT, value: seoTitle, disabled: !canEdit, placeholder: title || 'Defaults to the page title', onChange: (e) => setSeoTitle(e.target.value) })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsx("label", { className: `${LABEL} mb-0`, htmlFor: "ps-seo-desc", children: "SEO description" }), _jsx(SeoCharCount, { value: seoDescription, min: SEO_DESC_MIN, max: SEO_DESC_MAX })] }), _jsx("textarea", { id: "ps-seo-desc", className: `${INPUT} min-h-[64px] resize-y`, value: seoDescription, disabled: !canEdit, placeholder: "Summarize the page for search results (120\u2013160 characters)", onChange: (e) => setSeoDescription(e.target.value) })] })] }) }));
}
//# sourceMappingURL=PageSettingsModal.js.map