"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useCallback, useEffect, useRef, useMemo, } from "react";
import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
import { cn } from "@stigmer/theme";
import { useAgentSearch } from "./useAgentSearch";
import { useScrollShadows } from "../internal/useScrollShadows";
import { ScrollFade } from "../internal/ScrollFade";
function refKey(ref) {
    return `${ref.org}/${ref.slug}`;
}
const LIST_ID = "stgm-agent-list";
/**
 * Single-select searchable picker for choosing an agent from the platform.
 *
 * Renders a search input and scrollable list of available agents.
 * Designed to be placed inside a popover container — this component
 * renders the picker content, not the popover shell.
 *
 * Unlike the multi-select {@link SkillPicker} and McpServerPicker,
 * this picker enforces single selection: clicking a result replaces
 * the current selection. A session runs against exactly one agent.
 *
 * This is a Layer 1 building-block component used by both platform
 * builders (Profile A) and direct Stigmer users (Profile B). Platform
 * builders can use it standalone with their own popover or inline layout.
 * The Stigmer Console places it inside a `ContextPopover` within the
 * {@link SessionComposer}.
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * // Platform builder: standalone agent picker
 * const [agent, setAgent] = useState<ResourceRef | null>(null);
 * <AgentPicker org="acme" value={agent} onChange={setAgent} />
 *
 * // Access the selected agent
 * if (agent) console.log(`Selected: ${agent.org}/${agent.slug}`);
 * ```
 */
export function AgentPicker({ org, value, onChange, onDisplayNameResolved, scope, disabled, className, }) {
    const { results, isLoading, error, query, setQuery } = useAgentSearch(org, { scope });
    const [focusIndex, setFocusIndex] = useState(-1);
    const searchRef = useRef(null);
    const { scrollRef: listRef, canScrollUp, canScrollDown } = useScrollShadows();
    const selectedKey = useMemo(() => (value ? refKey(value) : null), [value]);
    const availableResults = useMemo(() => selectedKey
        ? results.filter((r) => `${r.org}/${r.slug}` !== selectedKey)
        : results, [results, selectedKey]);
    useEffect(() => {
        setFocusIndex(-1);
    }, [query]);
    useEffect(() => {
        if (focusIndex >= 0) {
            listRef.current
                ?.querySelector(`[data-idx="${focusIndex}"]`)
                ?.scrollIntoView({ block: "nearest" });
        }
    }, [focusIndex, listRef]);
    const handleSelect = useCallback((result) => {
        const ref = {
            org: result.org,
            slug: result.slug,
            kind: ApiResourceKind.agent,
        };
        onChange(ref);
        onDisplayNameResolved?.(`${result.org}/${result.slug}`, result.name);
    }, [onChange, onDisplayNameResolved]);
    const handleDeselect = useCallback(() => {
        onChange(null);
    }, [onChange]);
    const handleSearchKeyDown = useCallback((e) => {
        if (e.key === "ArrowDown") {
            e.preventDefault();
            setFocusIndex((prev) => prev < availableResults.length - 1 ? prev + 1 : prev);
        }
        else if (e.key === "ArrowUp") {
            e.preventDefault();
            setFocusIndex((prev) => (prev > 0 ? prev - 1 : -1));
        }
        else if (e.key === "Enter" &&
            focusIndex >= 0 &&
            focusIndex < availableResults.length) {
            e.preventDefault();
            handleSelect(availableResults[focusIndex]);
        }
        else if (e.key === "Enter") {
            e.preventDefault();
        }
    }, [availableResults, focusIndex, handleSelect]);
    return (_jsxs("div", { className: ["space-y-2 w-72", className].filter(Boolean).join(" "), children: [value && (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-[0.65rem] font-medium text-muted-foreground", children: "Selected" }), _jsxs("div", { className: "flex items-center gap-2 rounded-md bg-muted-faint px-2 py-1 text-xs", children: [_jsx(AgentIcon, {}), _jsx("span", { className: "min-w-0 flex-1 truncate text-foreground", children: value.slug }), _jsx("button", { type: "button", onClick: handleDeselect, disabled: disabled, className: "shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none", "aria-label": `Remove ${value.slug}`, children: _jsx(XIcon, {}) })] })] })), _jsx("input", { ref: searchRef, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": LIST_ID, "aria-activedescendant": focusIndex >= 0 ? `stgm-agent-${focusIndex}` : undefined, placeholder: "Search agents...", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleSearchKeyDown, disabled: disabled, className: "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", autoFocus: true }), error && _jsx("p", { className: "text-xs text-destructive", children: error.message }), _jsxs("div", { className: "relative", children: [canScrollUp && _jsx(ScrollFade, { position: "top" }), _jsx("div", { ref: listRef, id: LIST_ID, role: "listbox", "aria-label": "Agents", className: "max-h-52 overflow-y-auto", children: isLoading ? (_jsx(LoadingSkeleton, {})) : availableResults.length === 0 ? (_jsx("div", { className: "py-4 text-center text-xs text-muted-foreground", children: query
                                ? "No agents match your search"
                                : value
                                    ? "No other agents available"
                                    : "No agents found" })) : (availableResults.map((result, idx) => (_jsxs("button", { id: `stgm-agent-${idx}`, type: "button", "data-idx": idx, onClick: () => handleSelect(result), disabled: disabled, className: cn("group flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors", "disabled:pointer-events-none disabled:opacity-50", idx === focusIndex
                                ? "bg-accent text-foreground"
                                : "text-foreground hover:bg-accent-hover"), role: "option", "aria-selected": idx === focusIndex, children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, {}), _jsx("span", { className: "truncate font-medium", children: _jsx(HighlightMatch, { text: result.name, query: query }) }), _jsx("span", { className: "ml-auto shrink-0 text-[0.6rem] text-muted-foreground", children: result.org })] }), result.description && (_jsx("span", { className: cn("pl-5 text-[0.65rem] text-muted-foreground", idx !== focusIndex &&
                                        "line-clamp-2 group-hover:line-clamp-none"), children: result.description }))] }, result.id)))) }), canScrollDown && _jsx(ScrollFade, { position: "bottom" })] })] }));
}
// ---------------------------------------------------------------------------
// Private helpers
// ---------------------------------------------------------------------------
function HighlightMatch({ text, query }) {
    if (!query)
        return _jsx(_Fragment, { children: text });
    const idx = text.toLowerCase().indexOf(query.toLowerCase());
    if (idx === -1)
        return _jsx(_Fragment, { children: text });
    return (_jsxs(_Fragment, { children: [text.slice(0, idx), _jsx("span", { className: "font-semibold", children: text.slice(idx, idx + query.length) }), text.slice(idx + query.length)] }));
}
function LoadingSkeleton() {
    return (_jsx("div", { className: "space-y-1 py-1", children: [50, 65, 40, 58].map((w, i) => (_jsxs("div", { className: "flex flex-col gap-1 px-2 py-1.5", children: [_jsx("div", { className: "h-3 rounded bg-muted animate-pulse", style: { width: `${w}%` } }), _jsx("div", { className: "h-2 rounded bg-muted-subtle animate-pulse", style: { width: `${Math.min(w + 15, 90)}%` } })] }, i))) }));
}
function AgentIcon() {
    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "5", width: "10", height: "8", rx: "2" }), _jsx("circle", { cx: "6", cy: "9", r: "1", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "10", cy: "9", r: "1", fill: "currentColor", stroke: "none" }), _jsx("path", { d: "M8 1v4" }), _jsx("circle", { cx: "8", cy: "1", r: "1" })] }));
}
function XIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 4L10 10M10 4L4 10" }) }));
}
//# sourceMappingURL=AgentPicker.js.map