"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { GitBranch } 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 { SearchInput } from "../../../components/SearchInput";
import { cn } from "../../../lib/utils";
import { LoadingState } from "../../ui/LoadingState";
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-4 py-3", children: [_jsx(SearchInput, { placeholder: "Search templates...", value: searchQuery, onChange: setSearchQuery, inputClassName: "text-xs md:text-xs", 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 p-3", children: loading && templates.length === 0 ? (_jsx(LoadingState, { "data-testid": "project-template-selector-loading", message: "Loading project templates...", className: "py-12", spinnerClassName: "text-neutral-grey-50", spinnerSize: "2xl", textClassName: "text-neutral-grey-50 text-xs" })) : 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 rounded-md border border-transparent px-4 py-3 pr-12 text-left transition-colors", isSelected
                                        ? "border-feedback-blue/25 bg-feedback-blue-light/50"
                                        : "hover:border-border-default hover:bg-neutral-grey-5"), children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 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: "secondary", size: "sm", children: "Disabled" })) : null, template.hideFromCreateDialog ? (_jsx(Badge, { variant: "secondary", size: "sm", children: "Hidden" })) : null] }), template.description ? (_jsx("div", { className: "text-neutral-grey-50 mt-1 line-clamp-2 text-xs leading-snug", children: template.description })) : 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-3.5 right-3.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