"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { GitBranch, Loader2, Search } from "lucide-react";
import { useMemo, useState } from "react";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import { DeleteIcon } from "../../../components/ui/delete-icon";
import { Input } from "../../../components/ui/input";
import { cn } from "../../../lib/utils";
import { ParheliaIconWhite } from "../../ui/ParheliaIconWhite";
export function ProjectTemplateSelectorList({ templates, selectedTemplateId, error, deleting, loading, onSelectTemplate, onDeleteTemplate, onTemplateSelected, rootTestId, }) {
    const [searchQuery, setSearchQuery] = useState("");
    const filteredTemplates = useMemo(() => {
        const query = searchQuery.trim().toLowerCase();
        if (!query)
            return templates;
        return templates.filter((template) => {
            const description = template.description?.toLowerCase() ?? "";
            return (template.name.toLowerCase().includes(query) ||
                description.includes(query) ||
                template.taskTemplates.some((task) => task.title.toLowerCase().includes(query)));
        });
    }, [searchQuery, templates]);
    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": rootTestId, children: [_jsxs("div", { className: "border-border-default border-b px-3 py-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-neutral-grey-50 pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2", strokeWidth: 1.5 }), _jsx(Input, { type: "text", placeholder: "Search templates...", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), className: "pl-9 text-xs md:text-xs", "data-testid": "project-template-search-input" })] }), error ? (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red mt-2 rounded border p-2 text-xs whitespace-pre-wrap", children: error })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: loading && templates.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", "data-testid": "project-template-selector-loading", children: [_jsx(Loader2, { className: "text-neutral-grey-50 mb-4 h-8 w-8 animate-spin", strokeWidth: 1.5 }), _jsx("p", { className: "text-neutral-grey-50 text-xs", children: "Loading project templates..." })] })) : filteredTemplates.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(GitBranch, { className: "text-neutral-grey-50 mb-4 h-10 w-10", strokeWidth: 1.2 }), _jsx("p", { className: "text-neutral-grey-50 text-xs", children: searchQuery
                                ? "No templates match your search"
                                : "No project templates found" })] })) : (_jsx("div", { className: "divide-border-default divide-y", children: filteredTemplates.map((template) => {
                        const isSelected = selectedTemplateId === template.id;
                        return (_jsxs("div", { className: "group relative", children: [_jsx("button", { type: "button", onClick: async () => {
                                        const didSelect = await onSelectTemplate(template);
                                        if (didSelect) {
                                            onTemplateSelected?.();
                                        }
                                    }, "data-testid": `project-template-list-item-${template.id}`, className: cn("w-full px-3 py-2.5 pr-12 text-left transition-colors", isSelected
                                        ? "bg-feedback-blue-light"
                                        : "hover:bg-neutral-grey-5"), children: _jsxs("div", { className: "flex min-w-0 flex-col gap-[2px]", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 leading-tight", children: [template.isSystem ? (_jsx("span", { title: "System template", className: "inline-flex", "aria-label": "System template", children: _jsx(ParheliaIconWhite, { size: 14, className: "shrink-0 invert" }) })) : null, _jsx("span", { className: "text-neutral-grey-100 truncate text-sm font-medium", children: template.name }), template.disabled ? (_jsx(Badge, { variant: "outline", className: "text-2xs", children: "Disabled" })) : null, template.hideFromCreateDialog ? (_jsx(Badge, { variant: "outline", className: "text-2xs", children: "Hidden" })) : null, template.openInWizardMode ? (_jsx(Badge, { variant: "outline", className: "text-2xs", children: "Wizard" })) : null] }), template.description ? (_jsx("div", { className: "text-2xs text-neutral-grey-50 line-clamp-2 text-xs leading-tight", children: template.description })) : null, _jsxs("div", { className: "text-neutral-grey-50 flex flex-wrap items-center gap-2 text-xs leading-tight", children: [_jsxs("span", { children: [template.taskTemplates.length, " task templates"] }), template.defaultCostLimit != null ? (_jsxs("span", { children: ["Default budget: ", template.defaultCostLimit] })) : null] })] }) }), !template.isSystem ? (_jsx(Button, { type: "button", variant: "ghost", size: "iconXs", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50 absolute top-2.5 right-2.5 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100", "data-testid": `project-template-card-delete-button-${template.id}`, "aria-label": `Delete ${template.name}`, disabled: deleting, onClick: (event) => {
                                        event.preventDefault();
                                        event.stopPropagation();
                                        onDeleteTemplate(template);
                                    }, children: _jsx(DeleteIcon, { size: "md" }) })) : null] }, template.id));
                    }) })) })] }));
}
//# sourceMappingURL=ProjectTemplateSelectorList.js.map