"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
import { WORKFLOW_CATEGORY_LABELS } from "./types.js";
import { useTemplateFilter } from "../../resource-creation/useTemplateFilter.js";
import { WorkflowTemplateCard } from "./WorkflowTemplateCard.js";
import { WorkflowTemplatePreview } from "./WorkflowTemplatePreview.js";
/**
 * Searchable, filterable gallery of workflow templates.
 *
 * Composes the headless `useTemplateFilter` hook with workflow-specific
 * `WorkflowTemplateCard` components. Includes an integrated preview
 * dialog — clicking the eye icon on a card opens a graph preview
 * before committing to the template.
 *
 * Keyboard navigation follows the same pattern as the generic
 * `TemplateGallery`: Tab between search/tabs/cards, Arrow keys
 * navigate tabs, Enter/Space activates.
 */
export function WorkflowTemplateGallery({ templates, onSelect, emptyContent, className, }) {
    const { filtered, query, setQuery, activeCategory, setActiveCategory, availableCategories, } = useTemplateFilter({ templates });
    const [previewTemplate, setPreviewTemplate] = useState(null);
    const handlePreview = useCallback((template) => {
        setPreviewTemplate(template);
    }, []);
    const handlePreviewClose = useCallback(() => {
        setPreviewTemplate(null);
    }, []);
    const handlePreviewSelect = useCallback((template) => {
        setPreviewTemplate(null);
        onSelect(template);
    }, [onSelect]);
    const handleTabKeyDown = useCallback((e) => {
        const tabs = e.currentTarget.querySelectorAll('[role="tab"]');
        if (!tabs.length)
            return;
        const currentIndex = Array.from(tabs).findIndex((t) => t === document.activeElement);
        if (currentIndex === -1)
            return;
        let nextIndex = null;
        if (e.key === "ArrowRight") {
            nextIndex = (currentIndex + 1) % tabs.length;
        }
        else if (e.key === "ArrowLeft") {
            nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
        }
        else if (e.key === "Home") {
            nextIndex = 0;
        }
        else if (e.key === "End") {
            nextIndex = tabs.length - 1;
        }
        if (nextIndex !== null) {
            e.preventDefault();
            tabs[nextIndex].focus();
            tabs[nextIndex].click();
        }
    }, []);
    return (_jsxs("div", { className: cn("flex flex-col gap-4", className), children: [_jsxs("div", { className: "relative", children: [_jsx(SearchIcon, {}), _jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search templates\u2026", "aria-label": "Search workflow templates", className: cn("w-full rounded-md border border-input bg-input-bg py-2 pl-9 pr-3 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), availableCategories.length > 1 && (_jsxs("div", { role: "tablist", "aria-label": "Template categories", onKeyDown: handleTabKeyDown, className: "flex flex-wrap gap-1", children: [_jsx(CategoryTab, { label: "All", isActive: activeCategory === null, onClick: () => setActiveCategory(null) }), availableCategories.map((cat) => (_jsx(CategoryTab, { label: WORKFLOW_CATEGORY_LABELS[cat] ?? cat, isActive: activeCategory === cat, onClick: () => setActiveCategory(cat) }, cat)))] })), filtered.length > 0 ? (_jsx("div", { role: "list", "aria-label": "Workflow templates", className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((template) => (_jsx("div", { role: "listitem", children: _jsx(WorkflowTemplateCard, { template: template, onSelect: onSelect, onPreview: handlePreview }) }, template.id))) })) : ((emptyContent ?? (_jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: "No templates match your search." })))), _jsx(WorkflowTemplatePreview, { template: previewTemplate, open: previewTemplate !== null, onClose: handlePreviewClose, onSelect: handlePreviewSelect })] }));
}
function CategoryTab({ label, isActive, onClick, }) {
    return (_jsx("button", { type: "button", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, onClick: onClick, className: cn("rounded-md px-2.5 py-1 text-xs font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive
            ? "bg-primary text-primary-foreground"
            : "bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground"), children: label }));
}
function SearchIcon() {
    return (_jsxs("svg", { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: 11, cy: 11, r: 8 }), _jsx("path", { d: "m21 21-4.3-4.3" })] }));
}
//# sourceMappingURL=WorkflowTemplateGallery.js.map