"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from "react";
import { cn } from "@stigmer/theme";
/**
 * Click-to-edit multiline text field.
 *
 * In read mode, renders the value as preformatted text with expand/collapse.
 * On click, opens a textarea with confirm/cancel. Ctrl+Enter confirms.
 */
export function InlineEditTextarea({ value, onSave, placeholder = "Click to edit", validate, minRows = 3, disabled, isSaving, error, className, }) {
    const [isEditing, setIsEditing] = useState(false);
    const [draft, setDraft] = useState(value);
    const [localError, setLocalError] = useState(null);
    const textareaRef = useRef(null);
    useEffect(() => {
        if (isEditing) {
            setDraft(value);
            setLocalError(null);
            requestAnimationFrame(() => {
                const ta = textareaRef.current;
                if (ta) {
                    ta.focus();
                    ta.selectionStart = ta.value.length;
                }
            });
        }
    }, [isEditing, value]);
    // Auto-resize textarea
    useEffect(() => {
        const ta = textareaRef.current;
        if (!ta)
            return;
        ta.style.height = "auto";
        ta.style.height = `${ta.scrollHeight}px`;
    }, [draft, isEditing]);
    const handleConfirm = useCallback(async () => {
        if (draft === value) {
            setIsEditing(false);
            return;
        }
        if (validate) {
            const err = validate(draft);
            if (err) {
                setLocalError(err);
                return;
            }
        }
        const ok = await onSave(draft);
        if (ok)
            setIsEditing(false);
    }, [draft, value, validate, onSave]);
    const handleCancel = useCallback(() => {
        setIsEditing(false);
        setDraft(value);
        setLocalError(null);
    }, [value]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
            e.preventDefault();
            handleConfirm();
        }
        else if (e.key === "Escape") {
            handleCancel();
        }
    }, [handleConfirm, handleCancel]);
    const displayError = localError || error;
    if (disabled || !isEditing) {
        return (_jsx("div", { className: cn("group/inline-edit", className), children: _jsx("button", { type: "button", onClick: () => { if (!disabled)
                    setIsEditing(true); }, disabled: disabled, className: cn("w-full rounded-md px-2 py-1.5 text-left transition-colors", !disabled && "hover:bg-accent-hover cursor-pointer", disabled && "cursor-default", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"), children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("pre", { className: cn("min-w-0 whitespace-pre-wrap break-words font-mono text-sm text-foreground", !value && "text-muted-foreground italic font-sans"), children: value || placeholder }), !disabled && (_jsx(PencilIcon, { className: "mt-0.5 size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" }))] }) }) }));
    }
    return (_jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [_jsx("textarea", { ref: textareaRef, value: draft, onChange: (e) => { setDraft(e.target.value); setLocalError(null); }, onKeyDown: handleKeyDown, disabled: isSaving, placeholder: placeholder, rows: minRows, className: cn("w-full resize-y rounded-md border border-border bg-input-bg px-3 py-2 font-mono text-sm text-foreground", "focus:outline-none focus:ring-2 focus:ring-ring", "disabled:opacity-50", displayError && "border-destructive") }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] text-muted-foreground", children: isSaving ? "Saving..." : "Ctrl+Enter to save, Escape to cancel" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: handleCancel, disabled: isSaving, className: cn("rounded-md px-2.5 py-1 text-xs font-medium", "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground", "disabled:opacity-50", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: "Cancel" }), _jsxs("button", { type: "button", onClick: handleConfirm, disabled: isSaving, className: cn("inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium", "bg-primary text-primary-foreground hover:bg-primary-hover", "disabled:opacity-50", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: [isSaving && _jsx(Spinner, {}), "Save"] })] })] }), displayError && (_jsx("p", { className: "px-1 text-xs text-destructive", role: "alert", children: displayError }))] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function PencilIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M11.5 1.5a2.121 2.121 0 0 1 3 3L5 14l-4 1 1-4Z" }) }));
}
function Spinner() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "animate-spin", "aria-hidden": "true", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }));
}
//# sourceMappingURL=InlineEditTextarea.js.map