import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { loadAiProfiles } from "../editor/services/aiService";
import { cn } from "../lib/utils";
import { AgentProfileSelector } from "../editor/ai/AgentProfileSelector";
/**
 * View for creating a new agent by selecting a profile.
 * Displays profile cards in a grid layout.
 */
export function CreateAgentView({ onCreateAgent, className, }) {
    const [profiles, setProfiles] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const loadProfiles = async () => {
        try {
            setLoading(true);
            setError(null);
            const profileList = await loadAiProfiles();
            // Filter out hidden profiles
            const visibleProfiles = profileList.filter((profile) => !profile.hiddenFromOverview);
            setProfiles(visibleProfiles);
        }
        catch (err) {
            console.error("Failed to load profiles:", err);
            setError(err?.message || "Failed to load profiles");
        }
        finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        loadProfiles();
    }, []);
    if (error) {
        return (_jsxs("div", { className: "flex h-64 flex-col items-center justify-center text-center", children: [_jsx("p", { className: "text-feedback-red mb-3 text-sm", children: error }), _jsx("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("p-2 lg:p-4", className), children: _jsx(AgentProfileSelector, { profiles: profiles, onSelectProfile: (profileId) => {
                const profile = profiles.find((p) => p.id === profileId);
                if (profile)
                    onCreateAgent(profile);
            }, loading: loading }) }));
}
//# sourceMappingURL=CreateAgentView.js.map