import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef } from "react";
import { AlertCircle } from "lucide-react";
import { useEditContext } from "../../client/editContext";
import { ItemEditor } from "../../views/ItemEditor";
import { getLanguagesAndVersions } from "../../services/contentService";
import { CloseButton } from "../../../components/ui/close-button";
import { LoadingState } from "../../ui/LoadingState";
/**
 * Reusable inline configuration panel that displays an item editor in a sidebar.
 * Used for configuring tools, models, providers, and agents.
 */
export function ItemConfigPanel({ itemId, title, onClose, actions, }) {
    const editContext = useEditContext();
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [item, setItem] = useState(null);
    const [itemVersions, setItemVersions] = useState([]);
    const [itemLanguages, setItemLanguages] = useState([]);
    // Use a ref to store the editContext so it doesn't trigger re-fetches
    // when the context object reference changes
    const editContextRef = useRef(null);
    editContextRef.current = editContext;
    const loadItemAndMeta = async (descriptor) => {
        const ctx = editContextRef.current;
        if (!ctx)
            return;
        const loadedItem = await ctx.itemsRepository.getItem(descriptor);
        setItem(loadedItem || null);
        const lv = await getLanguagesAndVersions(descriptor);
        if (!lv?.data) {
            setItemVersions([]);
            setItemLanguages([]);
            return;
        }
        setItemVersions([...(lv.data.versions || [])].reverse());
        setItemLanguages(lv.data.languages || []);
    };
    const handleCreateVersion = async (descriptor) => {
        const ctx = editContextRef.current;
        if (!ctx)
            return;
        await ctx.operations.createVersion(descriptor);
        await loadItemAndMeta({ ...descriptor, version: 0 });
    };
    const handleLanguageSelected = async (descriptor) => {
        await loadItemAndMeta({ ...descriptor, version: 0 });
    };
    // Load the item on mount or when itemId changes
    useEffect(() => {
        const fetchItem = async () => {
            const ctx = editContextRef.current;
            if (!ctx || !itemId)
                return;
            try {
                setLoading(true);
                setError(null);
                // Build an ItemDescriptor for the item
                const descriptor = {
                    id: itemId,
                    language: "en",
                    version: 0, // Latest version
                };
                // Load item + versions/languages without affecting main editor state
                await loadItemAndMeta(descriptor);
            }
            catch (e) {
                const errorMessage = e instanceof Error ? e.message : "Failed to load item";
                setError(errorMessage);
                setItemVersions([]);
                setItemLanguages([]);
            }
            finally {
                setLoading(false);
            }
        };
        fetchItem();
    }, [itemId]); // Only re-fetch when itemId changes, not when editContext changes
    return (_jsxs("div", { className: "border-border-default bg-neutral-grey-5 flex h-full flex-col overflow-hidden border-l", children: [_jsxs("div", { className: "border-border-default flex items-center justify-between border-b px-4 py-3", children: [_jsx("h3", { className: "text-neutral-grey-100 font-medium", children: title }), _jsxs("div", { className: "flex items-center gap-2", children: [actions, _jsx(CloseButton, { onClick: onClose, label: "Close configuration panel" })] })] }), _jsx("div", { className: "relative flex-1 overflow-hidden", children: loading ? (_jsx(LoadingState, { variant: "inline", className: "justify-center py-8", spinnerClassName: "text-neutral-grey-50", spinnerSize: "lg" })) : error ? (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red m-4 rounded border p-3 text-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4", strokeWidth: 1 }), error] }) })) : item ? (_jsx(ItemEditor, { item: item, itemVersions: itemVersions, itemLanguages: itemLanguages, onCreateVersion: handleCreateVersion, onLanguageSelected: handleLanguageSelected })) : (_jsx("p", { className: "text-neutral-grey-50 py-8 text-center text-sm", children: "Item not found." })) })] }));
}
export default ItemConfigPanel;
//# sourceMappingURL=ItemConfigPanel.js.map