"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef, useState } from "react";
import { cn } from "@stigmer/theme";
import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
const OPTIONS = [
    {
        value: ApiResourceVisibility.visibility_private,
        label: "Private",
        description: "Only you can access",
    },
    {
        value: ApiResourceVisibility.visibility_org,
        label: "Organization",
        description: "All org members can view executions",
    },
    {
        value: ApiResourceVisibility.visibility_public,
        label: "Public",
        description: "All authenticated users can view",
    },
];
/**
 * Three-state visibility selector for instances (AgentInstance,
 * WorkflowInstance).
 *
 * Unlike the binary {@link VisibilityToggle} used for blueprints,
 * instances support the full visibility spectrum: Private, Organization,
 * and Public. Escalating visibility (private -> org, or any -> public)
 * shows an inline confirmation prompt since expanding access is
 * consequential.
 *
 * For workflow instances, ORG visibility has cascading effects:
 * all org members automatically see all executions via FGA
 * inheritance (zero per-execution tuples needed).
 *
 * WAI-ARIA Radio Group with roving tabindex. All visual properties
 * flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * const { updateVisibility, isPending } = useUpdateVisibility(
 *   "workflowInstance",
 *   instance.metadata.id,
 * );
 *
 * <InstanceVisibilitySelector
 *   visibility={instance.metadata.visibility}
 *   onVisibilityChange={updateVisibility}
 *   isPending={isPending}
 * />
 * ```
 */
export function InstanceVisibilitySelector({ visibility, onVisibilityChange, isPending = false, disabled = false, className, }) {
    const [confirming, setConfirming] = useState(null);
    const optionRefs = useRef([]);
    const effectivelyDisabled = disabled || isPending;
    const isEscalation = useCallback((target) => {
        const order = [
            ApiResourceVisibility.visibility_private,
            ApiResourceVisibility.visibility_org,
            ApiResourceVisibility.visibility_public,
        ];
        return order.indexOf(target) > order.indexOf(visibility);
    }, [visibility]);
    const handleSelect = useCallback((value) => {
        if (value === visibility)
            return;
        if (isEscalation(value)) {
            setConfirming(value);
            return;
        }
        onVisibilityChange(value);
    }, [visibility, onVisibilityChange, isEscalation]);
    const confirmChange = useCallback(() => {
        if (confirming === null)
            return;
        setConfirming(null);
        onVisibilityChange(confirming);
    }, [confirming, onVisibilityChange]);
    const cancelConfirm = useCallback(() => {
        setConfirming(null);
    }, []);
    const handleKeyDown = useCallback((e, index) => {
        let nextIndex = null;
        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
            e.preventDefault();
            nextIndex = (index + 1) % OPTIONS.length;
        }
        else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
            e.preventDefault();
            nextIndex = (index - 1 + OPTIONS.length) % OPTIONS.length;
        }
        if (nextIndex !== null) {
            optionRefs.current[nextIndex]?.focus();
            handleSelect(OPTIONS[nextIndex].value);
        }
    }, [handleSelect]);
    const confirmingOption = confirming
        ? OPTIONS.find((o) => o.value === confirming)
        : null;
    return (_jsxs("div", { className: cn("inline-flex flex-col gap-1.5", className), children: [_jsx("div", { role: "radiogroup", "aria-label": "Instance visibility", "aria-disabled": effectivelyDisabled || undefined, className: cn("inline-flex rounded-md bg-muted p-0.5", effectivelyDisabled && "pointer-events-none opacity-50"), children: OPTIONS.map((option, index) => {
                    const isSelected = visibility === option.value;
                    return (_jsxs("button", { ref: (el) => {
                            optionRefs.current[index] = el;
                        }, type: "button", role: "radio", "aria-checked": isSelected, "aria-label": `${option.label}: ${option.description}`, tabIndex: isSelected ? 0 : -1, disabled: effectivelyDisabled, onClick: () => handleSelect(option.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn("inline-flex cursor-pointer items-center gap-1 rounded-sm px-2.5 py-1 text-xs font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isSelected
                            ? getSelectedStyle(option.value)
                            : "text-muted-foreground hover:text-foreground"), children: [isPending && isSelected ? (_jsx("span", { className: "inline-block size-3 animate-spin rounded-full border-2 border-current border-t-transparent", "aria-hidden": "true" })) : (getIcon(option.value)), option.label] }, option.value));
                }) }), !confirming && (_jsx("p", { className: "text-[0.65rem] text-muted-foreground", children: OPTIONS.find((o) => o.value === visibility)?.description })), confirming !== null && confirmingOption && (_jsxs("div", { className: cn("flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs", confirming === ApiResourceVisibility.visibility_public
                    ? "border-amber-200 bg-amber-50 dark:border-amber-800/50 dark:bg-amber-950/30"
                    : "border-blue-200 bg-blue-50 dark:border-blue-800/50 dark:bg-blue-950/30"), role: "alert", children: [_jsx("span", { className: cn(confirming === ApiResourceVisibility.visibility_public
                            ? "text-amber-800 dark:text-amber-200"
                            : "text-blue-800 dark:text-blue-200"), children: confirming === ApiResourceVisibility.visibility_public
                            ? "Make visible to all authenticated users?"
                            : "Make visible to all org members?" }), _jsx("button", { type: "button", onClick: confirmChange, className: cn("rounded px-2 py-0.5 text-xs font-medium text-white", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", confirming === ApiResourceVisibility.visibility_public
                            ? "bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-500"
                            : "bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500"), children: "Confirm" }), _jsx("button", { type: "button", onClick: cancelConfirm, className: cn("rounded px-2 py-0.5 text-xs font-medium", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", confirming === ApiResourceVisibility.visibility_public
                            ? "text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100"
                            : "text-blue-700 hover:text-blue-900 dark:text-blue-300 dark:hover:text-blue-100"), children: "Cancel" })] }))] }));
}
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function getSelectedStyle(value) {
    switch (value) {
        case ApiResourceVisibility.visibility_private:
            return "bg-amber-50 text-amber-800 shadow-sm dark:bg-amber-900/30 dark:text-amber-300";
        case ApiResourceVisibility.visibility_org:
            return "bg-blue-100 text-blue-800 shadow-sm dark:bg-blue-900/40 dark:text-blue-300";
        case ApiResourceVisibility.visibility_public:
            return "bg-emerald-100 text-emerald-800 shadow-sm dark:bg-emerald-900/40 dark:text-emerald-300";
        default:
            return "bg-background text-foreground shadow-sm";
    }
}
function getIcon(value) {
    switch (value) {
        case ApiResourceVisibility.visibility_private:
            return _jsx(LockIcon, { className: "size-3" });
        case ApiResourceVisibility.visibility_org:
            return _jsx(UsersIcon, { className: "size-3" });
        case ApiResourceVisibility.visibility_public:
            return _jsx(GlobeIcon, { className: "size-3" });
        default:
            return null;
    }
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function LockIcon({ 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: "3.5", y: "7", width: "9", height: "7", rx: "1.5" }), _jsx("path", { d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2" })] }));
}
function UsersIcon({ 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("circle", { cx: "6", cy: "5", r: "2.5" }), _jsx("path", { d: "M2 13c0-2.21 1.79-4 4-4s4 1.79 4 4" }), _jsx("circle", { cx: "11.5", cy: "5.5", r: "2" }), _jsx("path", { d: "M14 13c0-1.66-1.12-3-2.5-3-.5 0-1 .14-1.4.4" })] }));
}
function GlobeIcon({ 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("circle", { cx: "8", cy: "8", r: "6" }), _jsx("path", { d: "M2 8h12" }), _jsx("path", { d: "M8 2c1.66 1.46 2.6 3.63 2.6 6s-.94 4.54-2.6 6c-1.66-1.46-2.6-3.63-2.6-6s.94-4.54 2.6-6Z" })] }));
}
//# sourceMappingURL=InstanceVisibilitySelector.js.map