"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 image URL field, displayed as an avatar.
 *
 * Shows the current image (or fallback icon). On click, reveals
 * an input for entering a new image URL with confirm/cancel.
 */
export function InlineEditImage({ value, onSave, fallback, size = "md", disabled, isSaving, error, className, }) {
    const [isEditing, setIsEditing] = useState(false);
    const [draft, setDraft] = useState(value);
    const [localError, setLocalError] = useState(null);
    const inputRef = useRef(null);
    useEffect(() => {
        if (isEditing) {
            setDraft(value);
            setLocalError(null);
            requestAnimationFrame(() => inputRef.current?.focus());
        }
    }, [isEditing, value]);
    const handleConfirm = useCallback(async () => {
        const trimmed = draft.trim();
        if (trimmed === value) {
            setIsEditing(false);
            return;
        }
        if (trimmed && !isValidUrl(trimmed)) {
            setLocalError("Enter a valid URL");
            return;
        }
        const ok = await onSave(trimmed);
        if (ok)
            setIsEditing(false);
    }, [draft, value, onSave]);
    const handleCancel = useCallback(() => {
        setIsEditing(false);
        setDraft(value);
        setLocalError(null);
    }, [value]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === "Enter") {
            e.preventDefault();
            handleConfirm();
        }
        else if (e.key === "Escape")
            handleCancel();
    }, [handleConfirm, handleCancel]);
    const sizeClasses = size === "sm" ? "size-6" : "size-8";
    const displayError = localError || error;
    if (disabled || !isEditing) {
        return (_jsx("div", { className: cn("group/inline-edit inline-flex", className), children: _jsxs("button", { type: "button", onClick: () => { if (!disabled)
                    setIsEditing(true); }, disabled: disabled, className: cn("relative rounded-md p-0.5 transition-colors", !disabled && "hover:bg-accent-hover cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), "aria-label": "Change icon", children: [value ? (_jsx("img", { src: value, alt: "", className: cn(sizeClasses, "shrink-0 rounded object-cover") })) : (fallback ?? _jsx(ImagePlaceholder, { className: cn(sizeClasses, "text-muted-foreground") })), !disabled && (_jsx("span", { className: "absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full bg-muted text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100", children: _jsx(PencilIcon, { className: "size-2.5" }) }))] }) }));
    }
    return (_jsxs("div", { className: cn("flex flex-col gap-1", className), children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { ref: inputRef, type: "url", value: draft, onChange: (e) => { setDraft(e.target.value); setLocalError(null); }, onKeyDown: handleKeyDown, disabled: isSaving, placeholder: "https://example.com/icon.png", className: cn("flex-1 rounded-md border border-border bg-input-bg px-2 py-1 text-sm text-foreground", "focus:outline-none focus:ring-2 focus:ring-ring", "disabled:opacity-50", displayError && "border-destructive") }), _jsx("button", { type: "button", onClick: handleConfirm, disabled: isSaving, "aria-label": "Save", className: cn("inline-flex size-7 items-center justify-center rounded-md", "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, {}) : _jsx(CheckIcon, { className: "size-3.5" }) }), _jsx("button", { type: "button", onClick: handleCancel, disabled: isSaving, "aria-label": "Cancel", className: cn("inline-flex size-7 items-center justify-center rounded-md", "border border-border bg-background text-foreground hover:bg-accent disabled:opacity-50", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: _jsx(XIcon, { className: "size-3.5" }) }), draft && (_jsx("button", { type: "button", onClick: () => setDraft(""), disabled: isSaving, "aria-label": "Clear", className: "text-xs text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground", children: "Clear" }))] }), displayError && (_jsx("p", { className: "px-1 text-xs text-destructive", role: "alert", children: displayError }))] }));
}
function isValidUrl(s) {
    try {
        new URL(s);
        return true;
    }
    catch {
        return false;
    }
}
// ---------------------------------------------------------------------------
// 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 CheckIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m3 8.5 3.5 3.5 6.5-8" }) }));
}
function XIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m4 4 8 8M12 4l-8 8" }) }));
}
function ImagePlaceholder({ className }) {
    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1.5" }), _jsx("circle", { cx: "5.5", cy: "5.5", r: "1" }), _jsx("path", { d: "m14 10.5-3-3L4 14" })] }));
}
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=InlineEditImage.js.map