'use client';
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { ArrowUp, ArrowDown, Copy, Trash2, Plus, AlignLeft, AlignCenter, AlignRight, ArrowUpFromLine, ArrowDownToLine, Minus, } from 'lucide-react';
import * as SwitchPrimitive from '@radix-ui/react-switch';
const INPUT_CLASS = 'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring';
const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block';
const SECTION_HEADING_CLASS = 'text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2';
const COLUMN_PRESETS = [
    { label: '12', widths: [12] },
    { label: '6 | 6', widths: [6, 6] },
    { label: '4 | 4 | 4', widths: [4, 4, 4] },
    { label: '3 | 3 | 3 | 3', widths: [3, 3, 3, 3] },
    { label: '8 | 4', widths: [8, 4] },
    { label: '4 | 8', widths: [4, 8] },
    { label: '3 | 6 | 3', widths: [3, 6, 3] },
];
export function NodeSettings({ node, onUpdateSettings, onRemoveNode, onDuplicateNode, onMoveNodeUp, onMoveNodeDown, onAddRow, }) {
    const [confirmDelete, setConfirmDelete] = useState(false);
    const updateSetting = useCallback((key, value) => {
        onUpdateSettings(node.id, { [key]: value });
    }, [node.id, onUpdateSettings]);
    const handleDelete = useCallback(() => {
        if (confirmDelete) {
            onRemoveNode(node.id);
            setConfirmDelete(false);
        }
        else {
            setConfirmDelete(true);
        }
    }, [confirmDelete, node.id, onRemoveNode]);
    const nodeLabel = node.type === 'section'
        ? 'Section'
        : node.type === 'container'
            ? 'Container'
            : node.type === 'row'
                ? 'Row'
                : 'Column';
    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-border border-b p-4", children: _jsxs("p", { className: "text-foreground text-sm font-medium", children: [nodeLabel, " Settings"] }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "space-y-4 p-4", children: [node.type === 'section' && (_jsx(SectionFields, { node: node, updateSetting: updateSetting, onAddRow: onAddRow })), node.type === 'container' && (_jsx(ContainerFields, { node: node, updateSetting: updateSetting })), node.type === 'row' && _jsx(RowFields, { node: node, updateSetting: updateSetting }), node.type === 'column' && _jsx(ColumnFields, { node: node, updateSetting: updateSetting })] }) }), _jsxs("div", { className: "border-border space-y-2 border-t p-4", children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Actions" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { type: "button", onClick: () => onMoveNodeUp(node.id), "aria-label": "Move up", className: "bg-background border-input hover:bg-accent flex flex-1 items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-sm transition-colors", children: [_jsx(ArrowUp, { size: 14 }), "Up"] }), _jsxs("button", { type: "button", onClick: () => onMoveNodeDown(node.id), "aria-label": "Move down", className: "bg-background border-input hover:bg-accent flex flex-1 items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-sm transition-colors", children: [_jsx(ArrowDown, { size: 14 }), "Down"] })] }), _jsxs("button", { type: "button", onClick: () => onDuplicateNode(node.id), className: "bg-background border-input hover:bg-accent flex w-full items-center justify-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors", children: [_jsx(Copy, { size: 14 }), "Duplicate"] }), _jsxs("button", { type: "button", onClick: handleDelete, onBlur: () => setConfirmDelete(false), className: `flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${confirmDelete
                            ? 'bg-destructive text-destructive-foreground'
                            : 'bg-background border-destructive text-destructive hover:bg-destructive/10 border'}`, children: [_jsx(Trash2, { size: 14 }), confirmDelete ? 'Click again to confirm' : 'Delete'] })] })] }));
}
function SectionFields({ node, updateSetting, onAddRow, }) {
    const s = node.settings;
    return (_jsxs(_Fragment, { children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Background" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Background Color" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: s.background ?? '#ffffff', onChange: (e) => updateSetting('background', e.target.value), className: "border-input h-9 w-9 cursor-pointer rounded-md border" }), _jsx("input", { type: "text", value: s.background ?? '', onChange: (e) => updateSetting('background', e.target.value), placeholder: "transparent", className: `${INPUT_CLASS} flex-1` })] })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Spacing" }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding Top" }), _jsx("input", { type: "text", value: s.paddingTop ?? '', onChange: (e) => updateSetting('paddingTop', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding Bottom" }), _jsx("input", { type: "text", value: s.paddingBottom ?? '', onChange: (e) => updateSetting('paddingBottom', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Margin Top" }), _jsx("input", { type: "text", value: s.marginTop ?? '', onChange: (e) => updateSetting('marginTop', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Margin Bottom" }), _jsx("input", { type: "text", value: s.marginBottom ?? '', onChange: (e) => updateSetting('marginBottom', e.target.value), placeholder: "0px", className: INPUT_CLASS })] })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Attributes" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-sm font-medium", children: "Visibility" }), _jsx(SwitchPrimitive.Root, { checked: s.visibility !== 'hidden', onCheckedChange: (checked) => updateSetting('visibility', checked ? 'visible' : 'hidden'), className: "bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors", "aria-label": "Section visibility", children: _jsx(SwitchPrimitive.Thumb, { className: "bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "HTML ID" }), _jsx("input", { type: "text", value: s.htmlId ?? '', onChange: (e) => updateSetting('htmlId', e.target.value), placeholder: "section-id", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "HTML Class" }), _jsx("input", { type: "text", value: s.htmlClass ?? '', onChange: (e) => updateSetting('htmlClass', e.target.value), placeholder: "my-class", className: INPUT_CLASS })] }), onAddRow && (_jsxs("button", { type: "button", onClick: () => onAddRow(node.id), className: "bg-primary text-primary-foreground hover:bg-primary/90 flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors", children: [_jsx(Plus, { size: 14 }), "Add Row"] }))] }));
}
function ContainerFields({ node, updateSetting, }) {
    const s = node.settings;
    return (_jsxs(_Fragment, { children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Layout" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Max Width" }), _jsx("input", { type: "text", value: s.maxWidth ?? '', onChange: (e) => updateSetting('maxWidth', e.target.value), placeholder: "1200px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Alignment" }), _jsx("div", { className: "flex gap-1", children: ['left', 'center', 'right'].map((align) => {
                            const Icon = align === 'left' ? AlignLeft : align === 'center' ? AlignCenter : AlignRight;
                            return (_jsx("button", { type: "button", onClick: () => updateSetting('alignment', align), "aria-label": `Align ${align}`, className: `flex flex-1 items-center justify-center rounded-md border py-2 transition-colors ${s.alignment === align
                                    ? 'bg-primary text-primary-foreground border-primary'
                                    : 'bg-background border-input hover:bg-accent'}`, children: _jsx(Icon, { size: 14 }) }, align));
                        }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding" }), _jsx("input", { type: "text", value: s.padding ?? '', onChange: (e) => updateSetting('padding', e.target.value), placeholder: "0px", className: INPUT_CLASS })] })] }));
}
function RowFields({ node, updateSetting, }) {
    const s = node.settings;
    return (_jsxs(_Fragment, { children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Layout" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Gap" }), _jsx("input", { type: "text", value: s.gap ?? '', onChange: (e) => updateSetting('gap', e.target.value), placeholder: "16px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Vertical Align" }), _jsx("div", { className: "flex gap-1", children: ['top', 'center', 'bottom', 'stretch'].map((align) => {
                            const Icon = align === 'top'
                                ? ArrowUpFromLine
                                : align === 'bottom'
                                    ? ArrowDownToLine
                                    : align === 'center'
                                        ? Minus
                                        : AlignCenter;
                            return (_jsx("button", { type: "button", onClick: () => updateSetting('verticalAlign', align), "aria-label": `Align ${align}`, className: `flex flex-1 items-center justify-center rounded-md border py-2 text-xs transition-colors ${s.verticalAlign === align
                                    ? 'bg-primary text-primary-foreground border-primary'
                                    : 'bg-background border-input hover:bg-accent'}`, children: _jsx(Icon, { size: 14 }) }, align));
                        }) })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Mobile" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-sm font-medium", children: "Reverse on Mobile" }), _jsx(SwitchPrimitive.Root, { checked: !!s.reverseOnMobile, onCheckedChange: (checked) => updateSetting('reverseOnMobile', checked), className: "bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors", "aria-label": "Reverse column order on mobile", children: _jsx(SwitchPrimitive.Thumb, { className: "bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" }) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-sm font-medium", children: "Wrap on Mobile" }), _jsx(SwitchPrimitive.Root, { checked: !!s.wrapOnMobile, onCheckedChange: (checked) => updateSetting('wrapOnMobile', checked), className: "bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors", "aria-label": "Wrap columns on mobile", children: _jsx(SwitchPrimitive.Thumb, { className: "bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" }) })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Column Presets" }), _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: COLUMN_PRESETS.map((preset) => (_jsxs("button", { type: "button", onClick: () => updateSetting('__columnPreset', preset.widths), className: "border-input bg-background hover:bg-accent rounded-md border px-2 py-2 transition-colors", children: [_jsx("div", { className: "flex h-4 gap-0.5", children: preset.widths.map((w, i) => (_jsx("div", { className: "bg-muted-foreground/30 rounded-sm", style: { flex: w } }, i))) }), _jsx("p", { className: "text-muted-foreground mt-1 text-center text-xs", children: preset.widths.join(' | ') })] }, preset.label))) })] }));
}
function ColumnFields({ node, updateSetting, }) {
    const s = node.settings;
    return (_jsxs(_Fragment, { children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Size" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Width (1-12)" }), _jsx("input", { type: "number", min: 1, max: 12, value: s.width, onChange: (e) => updateSetting('width', Number(e.target.value)), className: INPUT_CLASS })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Layout" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Vertical Align" }), _jsx("div", { className: "flex gap-1", children: ['top', 'center', 'bottom'].map((align) => {
                            const Icon = align === 'top' ? ArrowUpFromLine : align === 'bottom' ? ArrowDownToLine : Minus;
                            return (_jsx("button", { type: "button", onClick: () => updateSetting('verticalAlign', align), "aria-label": `Align ${align}`, className: `flex flex-1 items-center justify-center rounded-md border py-2 transition-colors ${s.verticalAlign === align
                                    ? 'bg-primary text-primary-foreground border-primary'
                                    : 'bg-background border-input hover:bg-accent'}`, children: _jsx(Icon, { size: 14 }) }, align));
                        }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding" }), _jsx("input", { type: "text", value: s.padding ?? '', onChange: (e) => updateSetting('padding', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Background Color" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: s.background ?? '#ffffff', onChange: (e) => updateSetting('background', e.target.value), className: "border-input h-9 w-9 cursor-pointer rounded-md border" }), _jsx("input", { type: "text", value: s.background ?? '', onChange: (e) => updateSetting('background', e.target.value), placeholder: "transparent", className: `${INPUT_CLASS} flex-1` })] })] })] }));
}
//# sourceMappingURL=NodeSettings.js.map