import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { cn } from "../../lib/utils";
import { sanitizeSvg } from "../../lib/sanitize";
import { ParheliaAgentIcon } from "../ui/Icons";
import { History, SearchX, ChevronRight, Loader2 } from "lucide-react";
import { SearchInput } from "../../components/SearchInput";
export const AgentProfileSelector = ({ profiles, onSelectProfile, loading = false, className, title = "Choose an agent profile", description, filterPlaceholder = "Filter agent profiles", }) => {
    const [searchTerm, setSearchTerm] = useState("");
    const filteredProfiles = useMemo(() => {
        // Filter out hidden profiles first
        const visibleProfiles = profiles.filter((profile) => !profile.hiddenFromOverview);
        if (!searchTerm.trim())
            return visibleProfiles;
        const term = searchTerm.toLowerCase();
        return visibleProfiles.filter((p) => p.name.toLowerCase().includes(term) ||
            p.displayTitle?.toLowerCase().includes(term) ||
            p.description?.toLowerCase().includes(term));
    }, [profiles, searchTerm]);
    if (loading) {
        return (_jsxs("div", { className: "flex flex-col items-center justify-center pt-20 text-center", children: [_jsx(Loader2, { strokeWidth: 1, className: "text-neutral-grey-50 h-8 w-8 animate-spin" }), _jsx("p", { className: "text-neutral-grey-50 mt-4 text-sm font-medium", children: "Loading agent profiles..." })] }));
    }
    if (profiles.length === 0) {
        return (_jsxs("div", { className: "flex flex-col items-center justify-center pt-20 text-center", children: [_jsx("div", { className: "bg-neutral-grey-5 text-neutral-grey-50 mb-4 flex h-12 w-12 items-center justify-center rounded-[4px]", children: _jsx(History, { strokeWidth: 1, size: 24 }) }), _jsx("p", { className: "text-neutral-grey-50 text-sm font-medium", children: "No agent profiles available" })] }));
    }
    return (_jsxs("div", { className: cn("flex flex-col", className), children: [(title || description) && (_jsx("div", { className: "mb-2.5 flex min-w-0 text-left", children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [title && (_jsx("h2", { className: "text-neutral-grey-100 truncate text-xs leading-5 font-medium", children: title })), description && (_jsx("p", { className: "text-neutral-grey-50 text-xs leading-4", children: description }))] }) })), _jsx("div", { className: "sticky top-0 z-20 w-full bg-white pb-3 before:absolute before:inset-x-0 before:-top-2 before:h-2 before:bg-white before:content-['']", children: _jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: filterPlaceholder, size: "sm" }) }), filteredProfiles.length > 0 ? (_jsx("div", { className: "grid grid-cols-1 gap-3", children: filteredProfiles.map((profile) => {
                    const displayTitle = profile.displayTitle || profile.name;
                    const profileDescription = profile.description || "";
                    return (_jsxs("button", { onClick: () => onSelectProfile(profile.id), className: cn("group hover:bg-neutral-grey-5/40 border-border-default relative flex min-h-[84px] cursor-pointer flex-row items-start gap-4 overflow-hidden rounded-[4px] border bg-white p-4 text-left transition-colors duration-300"), "data-testid": "agent-profile-card", "data-profile-id": profile.id, children: [_jsx("div", { className: "bg-neutral-grey-5/40 absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100" }), _jsx("div", { className: cn("text-neutral-grey-100 relative z-10 flex h-12 w-12 shrink-0 items-center justify-center transition-all duration-300 group-hover:scale-105"), "data-testid": "agent-profile-selector-icon", children: profile.svgIcon ? (_jsx("div", { className: "h-8 w-8 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
                                        __html: sanitizeSvg(profile.svgIcon),
                                    } })) : (_jsx(ParheliaAgentIcon, { size: 28, strokeWidth: 1 })) }), _jsxs("div", { className: "relative z-10 flex min-w-0 flex-1 flex-col py-0.5", children: [_jsx("h3", { className: "text-neutral-grey-100 w-full truncate text-sm font-bold tracking-tight transition-colors", children: displayTitle }), profileDescription && (_jsx("p", { className: "agent-profile-description text-neutral-grey-50 group-hover:text-neutral-grey-50 mt-1 text-[11px] leading-relaxed", children: profileDescription }))] }), _jsx("div", { className: "relative z-10 ml-auto translate-x-4 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100", children: _jsx("div", { className: "bg-neutral-grey-10 text-neutral-grey-100 flex h-6 w-6 items-center justify-center rounded-[4px]", children: _jsx(ChevronRight, { size: 14, strokeWidth: 1 }) }) })] }, profile.id));
                }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "bg-neutral-grey-5 text-neutral-grey-50 mb-3 flex h-12 w-12 items-center justify-center rounded-[4px]", children: _jsx(SearchX, { strokeWidth: 1, size: 24 }) }), _jsx("h4", { className: "text-neutral-grey-100 text-sm font-medium", children: "No matches found" }), _jsx("p", { className: "text-neutral-grey-50 mt-1 text-xs", children: "Try a different search term or browse all profiles." })] }))] }));
};
//# sourceMappingURL=AgentProfileSelector.js.map