"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 single-choice selector.
 *
 * In read mode, shows the current option label. On click, opens a radio
 * group with all options. Selection triggers immediate save.
 */
export function InlineEditSelect({ value, options, onSave, disabled, isSaving, error, className, }) {
    const [isEditing, setIsEditing] = useState(false);
    const containerRef = useRef(null);
    const currentLabel = options.find((o) => o.value === value)?.label ?? value;
    useEffect(() => {
        if (!isEditing)
            return;
        const handleClickOutside = (e) => {
            if (containerRef.current && !containerRef.current.contains(e.target)) {
                setIsEditing(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, [isEditing]);
    const handleSelect = useCallback(async (newValue) => {
        if (newValue === value) {
            setIsEditing(false);
            return;
        }
        const ok = await onSave(newValue);
        if (ok)
            setIsEditing(false);
    }, [value, onSave]);
    if (disabled || !isEditing) {
        return (_jsx("div", { className: cn("group/inline-edit", className), children: _jsxs("button", { type: "button", onClick: () => { if (!disabled)
                    setIsEditing(true); }, disabled: disabled, className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-left transition-colors", !disabled && "hover:bg-accent-hover cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"), children: [_jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground", children: currentLabel }), !disabled && (_jsx(ChevronDownIcon, { className: "size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" }))] }) }));
    }
    return (_jsxs("div", { ref: containerRef, className: cn("flex flex-col gap-1", className), children: [_jsx("div", { className: "rounded-lg border border-border bg-background p-1", role: "radiogroup", children: options.map((option) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": option.value === value, disabled: isSaving, onClick: () => handleSelect(option.value), className: cn("flex w-full items-start gap-2 rounded-md px-2.5 py-1.5 text-left transition-colors", option.value === value
                        ? "bg-muted-subtle text-foreground"
                        : "hover:bg-accent-hover text-foreground", "disabled:opacity-50", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"), children: [_jsx("div", { className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border", option.value === value
                                ? "border-primary bg-primary"
                                : "border-muted-foreground"), children: option.value === value && (_jsx("div", { className: "size-1.5 rounded-full bg-primary-foreground" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-sm font-medium", children: option.label }), option.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: option.description }))] }), isSaving && option.value !== value && (_jsx(Spinner, {}))] }, option.value))) }), error && (_jsx("p", { className: "px-1 text-xs text-destructive", role: "alert", children: error }))] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function ChevronDownIcon({ 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: "m4 6 4 4 4-4" }) }));
}
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=InlineEditSelect.js.map