"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState, useCallback, useMemo, useRef, useEffect, } from "react";
import { Popover } from "@base-ui/react/popover";
import { cn } from "@stigmer/theme";
import { useStigmerPortalContainer } from "../portal-container";
import { useTaskKindRegistry } from "./useTaskKindRegistry";
import { CATEGORY_COLORS, CATEGORY_DISPLAY_NAMES, } from "./canvas-constants";
import { recordRecentKind } from "./picker/recents";
import { usePickerData } from "./picker/usePickerData";
/**
 * Searchable, categorized popover for selecting a workflow task kind.
 *
 * Shared between the node "+" button (add successor), the edge "+"
 * button (insert on edge), and later the right-click context menu.
 * Callers provide their own trigger element and control open state
 * via the `open` / `onOpenChange` props.
 *
 * Uses `@base-ui/react/popover` for positioning and focus management,
 * `useTaskKindRegistry()` for the available task kinds, and `--stgm-*`
 * tokens for all styling (DD-005).
 *
 * @since T02 (Workflow Canvas Interaction UX)
 */
export const TaskPickerPopover = memo(function TaskPickerPopover({ open, onOpenChange, onSelectKind, anchorRef, insertionContext, graph, side = "bottom", align = "center", className, }) {
    const portalContainer = useStigmerPortalContainer();
    const { categories, isLoading } = useTaskKindRegistry();
    const [searchQuery, setSearchQuery] = useState("");
    const searchRef = useRef(null);
    const [focusedIndex, setFocusedIndex] = useState(-1);
    // Reset search and focus when the popover opens/closes
    useEffect(() => {
        if (open) {
            setSearchQuery("");
            setFocusedIndex(-1);
            requestAnimationFrame(() => searchRef.current?.focus());
        }
    }, [open]);
    const pickerData = usePickerData(insertionContext ?? null, categories, graph ?? null, isLoading, searchQuery);
    const handleSelect = useCallback((kind) => {
        recordRecentKind(kind);
        onSelectKind(kind);
        onOpenChange(false);
    }, [onSelectKind, onOpenChange]);
    const handleSearchChange = useCallback((e) => {
        setSearchQuery(e.target.value);
        setFocusedIndex(-1);
    }, []);
    const handleKeyDown = useCallback((e) => {
        const items = pickerData.selectableItems;
        if (items.length === 0)
            return;
        switch (e.key) {
            case "ArrowDown": {
                e.preventDefault();
                setFocusedIndex((prev) => prev < items.length - 1 ? prev + 1 : 0);
                break;
            }
            case "ArrowUp": {
                e.preventDefault();
                setFocusedIndex((prev) => prev > 0 ? prev - 1 : items.length - 1);
                break;
            }
            case "Enter": {
                e.preventDefault();
                const target = focusedIndex >= 0 ? items[focusedIndex] : items[0];
                if (target)
                    handleSelect(target.descriptor.kind);
                break;
            }
        }
    }, [pickerData.selectableItems, focusedIndex, handleSelect]);
    const focusedKind = useMemo(() => {
        const items = pickerData.selectableItems;
        if (focusedIndex >= 0 && focusedIndex < items.length) {
            return items[focusedIndex].descriptor.kind;
        }
        return undefined;
    }, [pickerData.selectableItems, focusedIndex]);
    return (_jsx(Popover.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(Popover.Portal, { container: portalContainer, children: _jsx(Popover.Positioner, { anchor: anchorRef, side: side, align: align, sideOffset: 8, children: _jsx(Popover.Popup, { className: cn("stgm z-popover w-56 overflow-hidden rounded-lg border border-border bg-popover shadow-md text-popover-foreground", className), children: _jsxs("div", { className: "flex flex-col", role: "dialog", "aria-label": "Select task type", onKeyDown: handleKeyDown, children: [insertionContext && (_jsx("div", { className: "border-b border-border px-3 py-2", children: _jsx("div", { className: "text-[11px] font-medium text-[var(--stgm-muted-foreground,#737373)]", children: pickerData.header }) })), _jsx("div", { className: "border-b border-border p-2", children: _jsx("input", { ref: searchRef, type: "search", placeholder: "Search tasks\u2026", value: searchQuery, onChange: handleSearchChange, className: "w-full rounded border border-border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]", "aria-label": "Search task types" }) }), _jsxs("div", { className: "max-h-64 overflow-y-auto p-1.5", role: "listbox", "aria-label": "Task types", children: [isLoading && (_jsx("div", { className: "space-y-2 p-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx("div", { className: "h-8 animate-pulse rounded bg-[var(--stgm-muted,#f5f5f5)]" }, i))) })), !isLoading && pickerData.sections.length === 0 && (_jsx("div", { className: "py-4 text-center text-xs text-[var(--stgm-muted-foreground,#737373)]", children: searchQuery ? "No matching tasks" : "No task types available" })), !isLoading &&
                                        pickerData.sections.map((section) => (_jsx(PickerCategory, { section: section, focusedKind: focusedKind, onSelect: handleSelect }, section.id)))] })] }) }) }) }) }));
});
// ---------------------------------------------------------------------------
// PickerCategory
// ---------------------------------------------------------------------------
function PickerCategory({ section, focusedKind, onSelect, }) {
    const isSpecial = section.isSpecial === true;
    const category = section.id;
    const categoryColor = !isSpecial
        ? (CATEGORY_COLORS[category] ?? CATEGORY_COLORS.unspecified)
        : undefined;
    const label = isSpecial
        ? section.label
        : (CATEGORY_DISPLAY_NAMES[category] ?? section.label);
    return (_jsxs("div", { className: "mb-1 last:mb-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 px-1.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--stgm-muted-foreground,#737373)]", children: [categoryColor ? (_jsx("span", { className: "inline-block h-1.5 w-1.5 rounded-full", style: { backgroundColor: categoryColor }, "aria-hidden": "true" })) : (_jsx("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-[var(--stgm-muted-foreground,#737373)]", "aria-hidden": "true" })), label] }), section.items.map((item) => (_jsx(PickerItem, { item: item, categoryColor: categoryColor, isFocused: item.descriptor.kind === focusedKind, onSelect: onSelect }, item.descriptor.kind)))] }));
}
// ---------------------------------------------------------------------------
// PickerItem
// ---------------------------------------------------------------------------
function PickerItem({ item, categoryColor, isFocused, onSelect, }) {
    const itemRef = useRef(null);
    useEffect(() => {
        if (isFocused) {
            itemRef.current?.scrollIntoView({ block: "nearest" });
        }
    }, [isFocused]);
    return (_jsxs("button", { ref: itemRef, type: "button", role: "option", "aria-selected": isFocused, "aria-disabled": item.disabled, title: item.disabled ? item.disabledReason : undefined, onClick: item.disabled ? undefined : () => onSelect(item.descriptor.kind), className: cn("flex w-full items-start gap-2 rounded px-2 py-1.5 text-left transition-colors", item.disabled
            ? "cursor-not-allowed opacity-55"
            : "hover:bg-[var(--stgm-muted,#f5f5f5)]", isFocused && !item.disabled && "bg-[var(--stgm-muted,#f5f5f5)]"), children: [categoryColor && (_jsx("span", { className: "mt-1 inline-block h-2 w-0.5 shrink-0 rounded-full", style: { backgroundColor: categoryColor }, "aria-hidden": "true" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]", children: item.descriptor.displayName }), _jsx("div", { className: "truncate text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]", children: item.disabled ? item.disabledReason : item.descriptor.description })] })] }));
}
//# sourceMappingURL=TaskPickerPopover.js.map