'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Modal } from '../../components/ui/Modal.js';
import { Button } from '../../components/ui/Button.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';
function slugify(value) {
    return value
        .toLowerCase()
        .trim()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
}
/** 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}` : '');
        }
    }
    function handleSave() {
        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, 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, onChange: (e) => {
                                        setSlugTouched(true);
                                        setSlug(slugify(e.target.value));
                                    } })] }), _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-seo-title", children: "SEO title" }), _jsx("input", { id: "ps-seo-title", className: INPUT, value: seoTitle, disabled: !canEdit, onChange: (e) => setSeoTitle(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "ps-seo-desc", children: "SEO description" }), _jsx("textarea", { id: "ps-seo-desc", className: `${INPUT} min-h-[64px] resize-y`, value: seoDescription, disabled: !canEdit, onChange: (e) => setSeoDescription(e.target.value) })] })] }) }));
}
//# sourceMappingURL=PageSettingsModal.js.map