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 { SecretAgentIcon } from "../ui/Icons";
import { History, SearchX, ChevronRight } from "lucide-react";
import { FilterInput } from "../../components/FilterInput";
export const AgentProfileSelector = ({ profiles, onSelectProfile, loading = false, className, title = "Choose an Agent Profile", description = "Select a profile to start a new conversation", }) => {
    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("div", { className: "border-highlight-100 h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" }), _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-full", children: _jsx(History, { 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 gap-4", className), children: [_jsxs("div", { className: "border-border-default flex items-center justify-between gap-4 border-b pb-3", children: [_jsxs("div", { className: "flex flex-col text-left", children: [_jsx("h2", { className: "text-neutral-grey-100 text-base font-bold tracking-tight", children: title }), _jsx("p", { className: "text-neutral-grey-50 text-xs", children: description })] }), _jsx("div", { className: "w-full max-w-[200px]", children: _jsx(FilterInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Filter profiles...", size: "sm" }) })] }), filteredProfiles.length > 0 ? (_jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] 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:border-highlight-100/30 border-border-default relative flex min-h-[84px] cursor-pointer flex-row items-start gap-4 overflow-hidden rounded-2xl border bg-white p-4 text-left transition-all duration-300"), "data-testid": "agent-profile-card", "data-profile-id": profile.id, children: [_jsx("div", { className: "to-highlight-100/5 absolute inset-0 bg-linear-to-br from-white via-white opacity-0 transition-opacity duration-300 group-hover:opacity-100" }), _jsx("div", { className: cn("group-hover:text-highlight-100 text-neutral-grey-50 relative z-10 flex h-12 w-12 shrink-0 items-center justify-center transition-all duration-300 group-hover:scale-105"), children: profile.svgIcon ? (_jsx("div", { className: "h-8 w-8 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
                                        __html: sanitizeSvg(profile.svgIcon),
                                    } })) : (_jsx(SecretAgentIcon, { size: 28, strokeWidth: 1.2 })) }), _jsxs("div", { className: "relative z-10 flex min-w-0 flex-1 flex-col py-0.5", children: [_jsx("h3", { className: "group-hover:text-highlight-100 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", title: profileDescription, 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-highlight-100/10 text-highlight-100 flex h-6 w-6 items-center justify-center rounded-full", children: _jsx(ChevronRight, { size: 14, strokeWidth: 2.5 }) }) }), _jsx("div", { className: "bg-highlight-100 absolute top-0 left-0 h-full w-[3px] scale-y-0 transition-transform duration-300 group-hover:scale-y-100" })] }, 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-full", children: _jsx(SearchX, { size: 24 }) }), _jsx("h4", { className: "text-neutral-grey-100 text-sm font-semibold", 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