"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { cn } from "@stigmer/theme";
/**
 * Inline editor for a list of resource references.
 *
 * Read mode shows clickable reference items. Edit mode adds a remove
 * button per item and an "Add" button that reveals the domain picker.
 */
export function InlineEditResourceList({ value, onSave, renderPicker, onItemClick, itemIcon, resourceLabel = "resource", editing: controlledEditing, onEditingChange, defaultOrg = "", disabled, isSaving, error, className, }) {
    const [internalEditing, setInternalEditing] = useState(false);
    const isEditing = controlledEditing ?? internalEditing;
    const setIsEditing = useCallback((v) => {
        setInternalEditing(v);
        onEditingChange?.(v);
    }, [onEditingChange]);
    useEffect(() => {
        if (controlledEditing !== undefined)
            setInternalEditing(controlledEditing);
    }, [controlledEditing]);
    const [draft, setDraft] = useState([...value]);
    const [showPicker, setShowPicker] = useState(false);
    const [showGenericAdd, setShowGenericAdd] = useState(false);
    const [addSlug, setAddSlug] = useState("");
    const [addOrg, setAddOrg] = useState(defaultOrg);
    const handleEdit = useCallback(() => {
        setDraft([...value]);
        setIsEditing(true);
        setShowPicker(false);
        setShowGenericAdd(false);
    }, [value, setIsEditing]);
    const handleCancel = useCallback(() => {
        setIsEditing(false);
        setDraft([...value]);
        setShowPicker(false);
        setShowGenericAdd(false);
    }, [value, setIsEditing]);
    const handleSave = useCallback(async () => {
        const ok = await onSave(draft);
        if (ok) {
            setIsEditing(false);
            setShowPicker(false);
            setShowGenericAdd(false);
        }
    }, [draft, onSave, setIsEditing]);
    const removeItem = useCallback((index) => {
        setDraft((prev) => prev.filter((_, i) => i !== index));
    }, []);
    const addItem = useCallback((ref) => {
        setDraft((prev) => {
            const exists = prev.some((r) => r.org === ref.org && r.slug === ref.slug);
            if (exists)
                return prev;
            return [...prev, ref];
        });
        setShowPicker(false);
    }, []);
    if (disabled || !isEditing) {
        return (_jsx("div", { className: cn("flex flex-col", className), children: value.length > 0 ? (_jsx("div", { className: "flex flex-col divide-y divide-border", children: value.map((ref, index) => {
                    const label = ref.label ?? ref.slug;
                    const row = (_jsxs("div", { className: "flex items-center gap-3", children: [itemIcon && _jsx("span", { className: "size-4 shrink-0 text-muted-foreground", children: itemIcon }), _jsx("span", { className: "text-sm font-medium text-foreground", children: label })] }));
                    return onItemClick ? (_jsx("button", { type: "button", onClick: () => onItemClick(ref), className: cn("w-full px-3 py-2.5 text-left transition-colors", "hover:bg-accent-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"), children: row }, `${ref.org}/${ref.slug}` || index)) : (_jsx("div", { className: "px-3 py-2.5", children: row }, `${ref.org}/${ref.slug}` || index));
                }) })) : (_jsxs("p", { className: "px-3 py-3 text-xs text-muted-foreground italic", children: ["No ", resourceLabel, "s configured"] })) }));
    }
    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [draft.length > 0 && (_jsx("div", { className: "flex flex-col divide-y divide-border rounded-md border border-border", children: draft.map((ref, i) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5", children: [itemIcon && _jsx("span", { className: "size-4 shrink-0 text-muted-foreground", children: itemIcon }), _jsx("span", { className: "flex-1 text-sm font-medium text-foreground", children: ref.label ?? ref.slug }), _jsx("button", { type: "button", onClick: () => removeItem(i), "aria-label": `Remove ${ref.label ?? ref.slug}`, className: cn("inline-flex size-6 items-center justify-center rounded-md text-muted-foreground", "hover:bg-destructive-subtle hover:text-destructive", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: _jsx(XIcon, { className: "size-3.5" }) })] }, `${ref.org}/${ref.slug}`))) })), showPicker && renderPicker ? (_jsx("div", { className: "rounded-md border border-border bg-muted-faint p-2", children: renderPicker(addItem) })) : showGenericAdd ? (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-border bg-muted-faint p-2", children: [_jsx("input", { type: "text", value: addOrg, onChange: (e) => setAddOrg(e.target.value), placeholder: "org", className: cn("w-24 rounded-md border border-border bg-input-bg px-2 py-1 text-xs text-foreground", "focus:outline-none focus:ring-2 focus:ring-ring") }), _jsx("span", { className: "text-xs text-muted-foreground", children: "/" }), _jsx("input", { type: "text", value: addSlug, onChange: (e) => setAddSlug(e.target.value), placeholder: "slug", onKeyDown: (e) => {
                            if (e.key === "Enter" && addSlug.trim()) {
                                addItem({ org: addOrg.trim() || defaultOrg, slug: addSlug.trim(), label: addSlug.trim() });
                                setAddSlug("");
                                setShowGenericAdd(false);
                            }
                            else if (e.key === "Escape") {
                                setShowGenericAdd(false);
                                setAddSlug("");
                            }
                        }, className: cn("flex-1 rounded-md border border-border bg-input-bg px-2 py-1 text-xs text-foreground", "focus:outline-none focus:ring-2 focus:ring-ring") }), _jsx("button", { type: "button", onClick: () => {
                            if (addSlug.trim()) {
                                addItem({ org: addOrg.trim() || defaultOrg, slug: addSlug.trim(), label: addSlug.trim() });
                                setAddSlug("");
                                setShowGenericAdd(false);
                            }
                        }, disabled: !addSlug.trim(), className: cn("inline-flex size-6 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: _jsx(PlusIcon, { className: "size-3" }) })] })) : (_jsxs("button", { type: "button", onClick: () => renderPicker ? setShowPicker(true) : setShowGenericAdd(true), className: cn("inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium", "border border-dashed border-border text-muted-foreground", "hover:border-muted-foreground hover:text-foreground hover:bg-muted-subtle", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "transition-colors"), children: [_jsx(PlusIcon, { className: "size-3" }), "Add ", resourceLabel] })), _jsxs("div", { className: "flex items-center justify-end 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", "disabled:opacity-50", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: "Cancel" }), _jsxs("button", { type: "button", onClick: handleSave, 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 changes"] })] }), error && (_jsx("p", { className: "px-1 text-xs text-destructive", role: "alert", children: error }))] }));
}
// ---------------------------------------------------------------------------
// 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 PlusIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M8 3v10M3 8h10" }) }));
}
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 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=InlineEditResourceList.js.map