import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from "react";
import { loadAiProfiles } from "../editor/services/aiService";
import { cn } from "../lib/utils";
import { SimpleTabs } from "../editor/ui/SimpleTabs";
import { AgentGalleryCard } from "./AgentGalleryCard";
import { LayoutGrid, List, Loader2, SearchX } from "lucide-react";
import { PageHeader } from "../components/PageHeader";
const ALL_CATEGORY = "All";
/**
 * Derives the ordered category tab list from the profiles present.
 * "All" is always first; categories sort by their Sitecore sort order.
 */
export function deriveCategoryTabs(profiles) {
    const orderByCategory = new Map();
    for (const profile of profiles) {
        if (!profile.category)
            continue;
        const order = profile.categoryOrder ?? Number.MAX_SAFE_INTEGER;
        const existing = orderByCategory.get(profile.category);
        if (existing === undefined || order < existing) {
            orderByCategory.set(profile.category, order);
        }
    }
    const categories = [...orderByCategory.entries()]
        .sort((a, b) => a[1] - b[1] || a[0].localeCompare(b[0]))
        .map(([name]) => name);
    return [ALL_CATEGORY, ...categories];
}
/**
 * "Choose your sidekick" - agent profile gallery with category tabs and a
 * grid/list view toggle. Self-loads profiles and filters hidden ones.
 */
export function AgentGalleryView({ onSelectProfile, variant = "full", className, }) {
    const [profiles, setProfiles] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [activeTab, setActiveTab] = useState(0);
    const [layout, setLayout] = useState("grid");
    const loadProfiles = async () => {
        try {
            setLoading(true);
            setError(null);
            const profileList = await loadAiProfiles();
            setProfiles(profileList.filter((p) => !p.hiddenFromOverview));
        }
        catch (err) {
            console.error("Failed to load profiles:", err);
            setError(err?.message || "Failed to load profiles");
        }
        finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        loadProfiles();
    }, []);
    const categories = useMemo(() => deriveCategoryTabs(profiles), [profiles]);
    const activeCategory = categories[activeTab] ?? ALL_CATEGORY;
    const visibleProfiles = useMemo(() => {
        if (activeCategory === ALL_CATEGORY)
            return profiles;
        return profiles.filter((p) => p.category === activeCategory);
    }, [profiles, activeCategory]);
    if (loading) {
        return (_jsxs("div", { className: "bg-neutral-grey-5 flex h-full flex-col items-center justify-center text-center", children: [_jsx(Loader2, { className: "text-neutral-grey-50 size-8 animate-spin" }), _jsx("p", { className: "text-neutral-grey-50 mt-4 text-[12px] font-medium", children: "Loading agents..." })] }));
    }
    if (error) {
        return (_jsxs("div", { className: "bg-neutral-grey-5 flex h-full flex-col items-center justify-center text-center", children: [_jsx("p", { className: "text-feedback-red mb-3 text-[12px]", children: error }), _jsx("button", { type: "button", onClick: loadProfiles, className: "bg-highlight-100 hover:bg-highlight-100/80 rounded px-4 py-2 text-xs text-white", children: "Retry" })] }));
    }
    return (_jsx("div", { className: cn("@container bg-neutral-grey-5 h-full overflow-y-auto", variant === "full" ? "px-8 py-10 lg:px-14" : "px-4 py-6 lg:px-6", className), "data-testid": "agent-gallery", children: _jsxs("div", { className: "mx-auto max-w-6xl", children: [_jsx(PageHeader, { title: "Choose your sidekick", description: "Each agent is built for a specific task - find yours and start creating!", variant: "workspace" }), _jsxs("div", { className: "border-border-default mt-6 flex items-end justify-between gap-4 border-b", children: [categories.length > 1 ? (_jsx(SimpleTabs, { tabs: categories.map((category) => ({
                                id: `agent-gallery-tab-${category}`,
                                label: category,
                                content: null,
                                testId: `agent-gallery-tab-${category}`,
                            })), activeTab: activeTab, setActiveTab: setActiveTab, hideContent: true, variant: "large", className: "min-w-0", testId: "agent-gallery-tabs" })) : (_jsx("div", {})), _jsxs("div", { className: "mb-2 flex shrink-0 items-center gap-0.5", children: [_jsx("button", { type: "button", onClick: () => setLayout("list"), className: cn("flex size-8 items-center justify-center rounded transition-colors", layout === "list"
                                        ? "text-neutral-grey-100 bg-neutral-grey-5"
                                        : "text-neutral-grey-50 hover:text-neutral-grey-100"), title: "List view", "aria-label": "List view", "data-testid": "agent-gallery-list-toggle", children: _jsx(List, { className: "size-4.5", strokeWidth: 1 }) }), _jsx("button", { type: "button", onClick: () => setLayout("grid"), className: cn("flex size-8 items-center justify-center rounded transition-colors", layout === "grid"
                                        ? "text-neutral-grey-100 bg-neutral-grey-5"
                                        : "text-neutral-grey-50 hover:text-neutral-grey-100"), title: "Grid view", "aria-label": "Grid view", "data-testid": "agent-gallery-grid-toggle", children: _jsx(LayoutGrid, { className: "size-4.5", strokeWidth: 1 }) })] })] }), visibleProfiles.length > 0 ? (_jsx("div", { className: cn("mt-6 gap-4", 
                    // Column count follows the pane width (container query), not the
                    // viewport, so the gallery adapts inside narrow split panes too.
                    layout === "grid"
                        ? "@lg:grid-cols-2 @3xl:grid-cols-3 @5xl:grid-cols-4 grid grid-cols-1"
                        : "flex flex-col"), children: visibleProfiles.map((profile) => (_jsx(AgentGalleryCard, { profile: profile, onSelect: onSelectProfile, layout: layout }, profile.id))) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx("div", { className: "bg-neutral-grey-5 text-neutral-grey-50 mb-3 flex size-12 items-center justify-center rounded", children: _jsx(SearchX, { size: 24 }) }), _jsx("h4", { className: "text-neutral-grey-100 text-[12px] font-medium", children: "No agents available" }), _jsx("p", { className: "text-neutral-grey-50 mt-1 text-xs", children: activeCategory === ALL_CATEGORY
                                ? "No agent profiles are configured yet."
                                : "No agents in this category yet." })] }))] }) }));
}
//# sourceMappingURL=AgentGalleryView.js.map