"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef } from "react";
import { cn } from "@stigmer/theme";
const OPTIONS = [
    {
        value: "org",
        label: "Org",
        ariaLabel: "Organization only",
        icon: OrgIcon,
    },
    {
        value: "all",
        label: "All",
        ariaLabel: "All including public",
        icon: GlobeIcon,
    },
];
/**
 * Segmented control for switching resource list scope between
 * organization-only and all (including public community resources).
 *
 * Renders as a WAI-ARIA Radio Group with roving tabindex and
 * arrow-key navigation. Follows the same visual pattern as
 * {@link VisibilitySelector}.
 *
 * The component is controlled — the consumer owns the `value` state
 * and handles persistence (e.g., localStorage).
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * const [scope, setScope] = useState<ResourceListScope>("org");
 *
 * <ScopeToggle value={scope} onChange={setScope} />
 * ```
 *
 * @see {@link ResourceListScope} for the type used by data hooks
 * @see {@link useAgentList}, {@link useSkillList}, {@link useMcpServerList}
 */
export function ScopeToggle({ value, onChange, disabled = false, className, compact = false, }) {
    const optionRefs = useRef([]);
    const handleSelect = useCallback((next) => {
        if (next !== value)
            onChange(next);
    }, [value, onChange]);
    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]);
    return (_jsx("div", { role: "radiogroup", "aria-label": "Resource scope", "aria-disabled": disabled || undefined, className: cn("inline-flex rounded-md bg-muted p-0.5", disabled && "pointer-events-none opacity-50", className), children: OPTIONS.map((option, index) => {
            const isSelected = value === option.value;
            const Icon = option.icon;
            return (_jsxs("button", { ref: (el) => {
                    optionRefs.current[index] = el;
                }, type: "button", role: "radio", "aria-checked": isSelected, "aria-label": option.ariaLabel, title: compact ? option.ariaLabel : undefined, tabIndex: isSelected ? 0 : -1, disabled: disabled, onClick: () => handleSelect(option.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn("inline-flex cursor-pointer items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isSelected
                    ? "bg-background text-foreground shadow-sm"
                    : "text-muted-foreground hover:text-foreground"), children: [_jsx(Icon, { className: "size-3" }), !compact && option.label] }, option.value));
        }) }));
}
// ---------------------------------------------------------------------------
// Icons — inline SVGs following the SDK pattern (no icon library dependency)
// ---------------------------------------------------------------------------
function OrgIcon({ 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: "4", y: "2", width: "8", height: "12", rx: "1" }), _jsx("path", { d: "M6.5 5h3M6.5 8h3M6.5 11h3" })] }));
}
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=ScopeToggle.js.map