'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Eye, EyeOff, Plus, X } from 'lucide-react';
import { MediaPickerModal } from '../../components/MediaPickerModal.js';
import { getSectionType } from './section-types.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';
export function SectionInspector({ section, canEdit, onClose, onContentChange, onSettingsChange, onMetaChange, onToggleVisibility, }) {
    const def = getSectionType(section.sectionType);
    // Escape closes the inspector.
    useEffect(() => {
        function onKey(e) {
            if (e.key === 'Escape')
                onClose();
        }
        document.addEventListener('keydown', onKey);
        return () => document.removeEventListener('keydown', onKey);
    }, [onClose]);
    return (_jsxs("aside", { role: "dialog", "aria-label": `Edit ${section.name}`, className: "bg-card border-border flex h-full w-80 shrink-0 flex-col border-l", children: [_jsxs("div", { className: "border-border flex items-center justify-between border-b px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-foreground truncate text-sm font-medium", children: section.name }), _jsx("p", { className: "text-muted-foreground text-xs", children: def?.name ?? 'Section' })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close inspector", className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": true }) })] }), _jsxs("div", { className: "flex-1 space-y-6 overflow-y-auto p-4", children: [!canEdit && (_jsx("p", { className: "border-border bg-muted text-muted-foreground rounded-md border p-2 text-xs", children: "You have read-only access to this page." })), _jsxs("fieldset", { disabled: !canEdit, className: "space-y-3", children: [_jsx("legend", { className: "text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase", children: "Content" }), def?.fields.map((field) => (_jsx(ContentField, { field: field, value: section.content[field.key], onChange: (v) => onContentChange({ [field.key]: v }) }, field.key)))] }), _jsxs("fieldset", { disabled: !canEdit, className: "space-y-3", children: [_jsx("legend", { className: "text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase", children: "Section settings" }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "insp-name", children: "Section name" }), _jsx("input", { id: "insp-name", className: INPUT, value: section.name, onChange: (e) => onMetaChange({ name: e.target.value }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "insp-internal", children: "Internal label" }), _jsx("input", { id: "insp-internal", className: INPUT, placeholder: "Team-only note (optional)", value: section.internalLabel ?? '', onChange: (e) => onMetaChange({ internalLabel: e.target.value }) })] }), _jsxs("button", { type: "button", onClick: onToggleVisibility, disabled: !canEdit, "aria-pressed": !section.visible, className: "border-border text-foreground hover:bg-accent flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm disabled:opacity-50", children: [_jsxs("span", { className: "flex items-center gap-2", children: [section.visible ? (_jsx(Eye, { className: "h-4 w-4", "aria-hidden": true })) : (_jsx(EyeOff, { className: "h-4 w-4", "aria-hidden": true })), section.visible ? 'Visible on page' : 'Hidden from page'] }), _jsx("span", { className: "text-muted-foreground text-xs", children: section.visible ? 'Hide' : 'Show' })] })] }), _jsxs("fieldset", { disabled: !canEdit, className: "space-y-3", children: [_jsx("legend", { className: "text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase", children: "Appearance" }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "insp-bg", children: "Background" }), _jsxs("select", { id: "insp-bg", className: INPUT, value: section.settings.backgroundType ?? 'none', onChange: (e) => onSettingsChange({
                                            backgroundType: e.target.value,
                                        }), children: [_jsx("option", { value: "none", children: "White" }), _jsx("option", { value: "solid", children: "Solid color" }), _jsx("option", { value: "gradient", children: "Gradient" })] })] }), section.settings.backgroundType && section.settings.backgroundType !== 'none' && (_jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "insp-bgcolor", children: "Color" }), _jsxs("select", { id: "insp-bgcolor", className: INPUT, value: section.settings.backgroundColor ?? 'purple', onChange: (e) => onSettingsChange({ backgroundColor: e.target.value }), children: [_jsx("option", { value: "purple", children: "Purple" }), _jsx("option", { value: "muted", children: "Light gray" })] })] })), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "insp-pad", children: "Spacing" }), _jsxs("select", { id: "insp-pad", className: INPUT, value: section.settings.paddingY ?? 'lg', onChange: (e) => onSettingsChange({ paddingY: e.target.value }), children: [_jsx("option", { value: "sm", children: "Small" }), _jsx("option", { value: "md", children: "Medium" }), _jsx("option", { value: "lg", children: "Large" }), _jsx("option", { value: "xl", children: "Extra large" })] })] })] }), _jsxs("fieldset", { disabled: !canEdit, className: "space-y-3", children: [_jsx("legend", { className: "text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase", children: "Advanced" }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "insp-anchor", children: "Anchor ID" }), _jsx("input", { id: "insp-anchor", className: INPUT, placeholder: "e.g. features", value: section.settings.anchorId ?? '', onChange: (e) => onSettingsChange({ anchorId: e.target.value }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "insp-css", children: "CSS class" }), _jsx("input", { id: "insp-css", className: INPUT, placeholder: "custom-class", value: section.settings.cssClass ?? '', onChange: (e) => onSettingsChange({ cssClass: e.target.value }) })] })] })] })] }));
}
// ─── Field renderers ─────────────────────────────────────────────────
function ContentField({ field, value, onChange, }) {
    const id = `insp-field-${field.key}`;
    const text = typeof value === 'string' ? value : '';
    if (field.type === 'stats') {
        return _jsx(StatsField, { label: field.label, value: value, onChange: onChange });
    }
    if (field.type === 'gallery') {
        return _jsx(GalleryField, { label: field.label, value: value, onChange: onChange });
    }
    if (field.type === 'boolean') {
        return _jsx(BooleanField, { id: id, field: field, value: value === true, onChange: onChange });
    }
    if (field.type === 'relationship') {
        return _jsx(RelationshipField, { id: id, field: field, value: value, onChange: onChange });
    }
    if (field.type === 'media') {
        return _jsx(MediaField, { id: id, field: field, value: text, onChange: onChange });
    }
    if (field.type === 'select') {
        return (_jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: id, children: field.label }), _jsx("select", { id: id, className: INPUT, value: text, onChange: (e) => onChange(e.target.value), children: field.options?.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }));
    }
    if (field.type === 'textarea' || field.type === 'richText') {
        return (_jsxs("div", { children: [_jsxs("label", { className: LABEL, htmlFor: id, children: [field.label, field.required && _jsx("span", { className: "text-destructive ml-0.5", children: "*" })] }), _jsx("textarea", { id: id, className: `${INPUT} resize-y ${field.type === 'richText' ? 'min-h-[140px]' : 'min-h-[72px]'}`, value: text, placeholder: field.placeholder, onChange: (e) => onChange(e.target.value) }), field.help && _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: field.help })] }));
    }
    return (_jsxs("div", { children: [_jsxs("label", { className: LABEL, htmlFor: id, children: [field.label, field.required && _jsx("span", { className: "text-destructive ml-0.5", children: "*" })] }), _jsx("input", { id: id, type: field.type === 'url' ? 'url' : 'text', className: INPUT, value: text, placeholder: field.placeholder, onChange: (e) => onChange(e.target.value) }), field.help && _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: field.help })] }));
}
function MediaField({ id, field, value, onChange, }) {
    const [open, setOpen] = useState(false);
    return (_jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: id, children: field.label }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { id: id, className: `${INPUT} flex-1`, placeholder: "https://\u2026", value: value, onChange: (e) => onChange(e.target.value) }), _jsx("button", { type: "button", onClick: () => setOpen(true), className: "bg-accent text-foreground border-border hover:bg-accent/80 rounded-md border px-3 py-1.5 text-xs font-medium", children: "Browse" })] }), value && (_jsx("div", { className: "border-border bg-muted mt-2 overflow-hidden rounded-md border", children: _jsx("img", { src: value, alt: "", className: "h-28 w-full object-contain" }) })), _jsx(MediaPickerModal, { open: open, onClose: () => setOpen(false), onSelect: (url) => {
                    onChange(url);
                    setOpen(false);
                }, accept: "image/*" })] }));
}
function BooleanField({ id, field, value, onChange, }) {
    return (_jsxs("div", { children: [_jsxs("button", { type: "button", id: id, role: "switch", "aria-checked": value, onClick: () => onChange(!value), className: "border-border text-foreground hover:bg-accent flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm", children: [_jsx("span", { children: field.label }), _jsx("span", { "aria-hidden": true, className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${value ? 'bg-primary' : 'bg-muted'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${value ? 'translate-x-4' : 'translate-x-0.5'}` }) })] }), field.help && _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: field.help })] }));
}
function RelationshipField({ id, field, value, onChange, }) {
    // Stored as an array of slugs; edited as a newline/comma-separated list
    // so authors can hand-pick referenced documents without a live picker.
    const slugs = Array.isArray(value) ? value : [];
    const text = slugs.join('\n');
    return (_jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: id, children: field.label }), _jsx("textarea", { id: id, className: `${INPUT} min-h-[72px] resize-y`, placeholder: "one-slug-per-line", value: text, onChange: (e) => onChange(e.target.value
                    .split(/[\n,]/)
                    .map((s) => s.trim())
                    .filter(Boolean)) }), field.help && _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: field.help })] }));
}
function GalleryField({ label, value, onChange, }) {
    const rows = Array.isArray(value) ? value : [];
    function update(index, patch) {
        onChange(rows.map((r, i) => (i === index ? { ...r, ...patch } : r)));
    }
    function remove(index) {
        onChange(rows.filter((_, i) => i !== index));
    }
    function add() {
        onChange([...rows, { url: '', alt: '', caption: '' }]);
    }
    return (_jsxs("div", { children: [_jsx("span", { className: LABEL, children: label }), _jsx("div", { className: "space-y-3", children: rows.map((row, i) => (_jsxs("div", { className: "border-border rounded-md border p-2", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: ["Image ", i + 1] }), _jsx("button", { type: "button", onClick: () => remove(i), "aria-label": `Remove image ${i + 1}`, className: "text-muted-foreground hover:text-destructive rounded p-0.5", children: _jsx(X, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("input", { className: INPUT, placeholder: "Image URL (https://\u2026)", value: row.url ?? '', onChange: (e) => update(i, { url: e.target.value }), "aria-label": `Image ${i + 1} URL` }), _jsx("input", { className: INPUT, placeholder: "Alt text (for accessibility)", value: row.alt ?? '', onChange: (e) => update(i, { alt: e.target.value }), "aria-label": `Image ${i + 1} alt text` })] })] }, i))) }), _jsxs("button", { type: "button", onClick: add, className: "border-border text-foreground hover:bg-accent mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-2 py-1.5 text-xs font-medium", children: [_jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Add image"] })] }));
}
function StatsField({ label, value, onChange, }) {
    const rows = Array.isArray(value) ? value : [];
    function update(index, patch) {
        const next = rows.map((r, i) => (i === index ? { ...r, ...patch } : r));
        onChange(next);
    }
    function remove(index) {
        onChange(rows.filter((_, i) => i !== index));
    }
    function add() {
        onChange([...rows, { value: '', label: '', description: '' }]);
    }
    return (_jsxs("div", { children: [_jsx("span", { className: LABEL, children: label }), _jsx("div", { className: "space-y-3", children: rows.map((row, i) => (_jsxs("div", { className: "border-border rounded-md border p-2", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: ["Stat ", i + 1] }), _jsx("button", { type: "button", onClick: () => remove(i), "aria-label": `Remove stat ${i + 1}`, className: "text-muted-foreground hover:text-destructive rounded p-0.5", children: _jsx(X, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("input", { className: INPUT, placeholder: "Value (e.g. 99.99%)", value: row.value ?? '', onChange: (e) => update(i, { value: e.target.value }), "aria-label": `Stat ${i + 1} value` }), _jsx("input", { className: INPUT, placeholder: "Label (e.g. Uptime)", value: row.label ?? '', onChange: (e) => update(i, { label: e.target.value }), "aria-label": `Stat ${i + 1} label` })] })] }, i))) }), _jsxs("button", { type: "button", onClick: add, className: "border-border text-foreground hover:bg-accent mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-2 py-1.5 text-xs font-medium", children: [_jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Add stat"] })] }));
}
//# sourceMappingURL=SectionInspector.js.map