import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef } from "react";
import { Button } from "../../../components/ui/button";
import { RefreshCw, AlertCircle, X } from "lucide-react";
import { useEditContext } from "../../client/editContext";
import { ItemEditor } from "../../views/ItemEditor";
import { getLanguagesAndVersions } from "../../services/contentService";
/**
 * 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: ctx.item?.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: "flex h-full flex-col overflow-hidden border-l border-gray-200 bg-white", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3", children: [_jsx("h3", { className: "font-medium text-gray-900", children: title }), _jsxs("div", { className: "flex items-center gap-2", children: [actions, _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "h-7 w-7 p-0", children: _jsx(X, { className: "h-4 w-4", strokeWidth: 1.5 }) })] })] }), _jsx("div", { className: "relative flex-1 overflow-hidden", children: loading ? (_jsxs("div", { className: "flex items-center justify-center py-8", children: [_jsx(RefreshCw, { className: "h-6 w-6 animate-spin text-gray-400", strokeWidth: 1 }), _jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Loading..." })] })) : error ? (_jsx("div", { className: "m-4 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4", strokeWidth: 1.5 }), error] }) })) : item ? (_jsx(ItemEditor, { item: item, itemVersions: itemVersions, itemLanguages: itemLanguages, onCreateVersion: handleCreateVersion, onLanguageSelected: handleLanguageSelected })) : (_jsx("p", { className: "py-8 text-center text-sm text-gray-500", children: "Item not found." })) })] }));
}
export default ItemConfigPanel;
//# sourceMappingURL=ItemConfigPanel.js.map