import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Box, Cpu, DollarSign, Image as ImageIcon, RefreshCw, Save, Sparkles, } from "lucide-react";
import { Button } from "../../../components/ui/button";
import { Input } from "../../../components/ui/input";
import { useEditContext } from "../../client/editContext";
import { GroupedFieldConfigPanel, } from "./GroupedFieldConfigPanel";
function ModelInternalNameSection({ itemId, refreshToken = 0, onSaved, }) {
    const editContext = useEditContext();
    const itemDescriptor = useMemo(() => ({
        id: itemId,
        language: editContext?.item?.language ??
            editContext?.currentItemDescriptor?.language ??
            "en",
        version: 0,
    }), [
        editContext?.currentItemDescriptor?.language,
        editContext?.item?.language,
        itemId,
    ]);
    const [value, setValue] = useState("");
    const [initialValue, setInitialValue] = useState("");
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState(null);
    useEffect(() => {
        let cancelled = false;
        const load = async () => {
            if (!editContext)
                return;
            try {
                setLoading(true);
                setError(null);
                const item = await editContext.itemsRepository.getItem(itemDescriptor);
                if (cancelled || !item)
                    return;
                setValue(item.name || "");
                setInitialValue(item.name || "");
            }
            catch (e) {
                if (!cancelled) {
                    setError(e instanceof Error ? e.message : "Failed to load item name.");
                }
            }
            finally {
                if (!cancelled) {
                    setLoading(false);
                }
            }
        };
        void load();
        return () => {
            cancelled = true;
        };
    }, [editContext, itemDescriptor, refreshToken]);
    const handleSave = useCallback(async () => {
        const nextValue = value.trim();
        if (!editContext || !nextValue || nextValue === initialValue) {
            return;
        }
        try {
            setSaving(true);
            setError(null);
            await editContext.operations.renameItem(itemDescriptor, nextValue);
            setInitialValue(nextValue);
            setValue(nextValue);
            await onSaved?.();
        }
        catch (e) {
            setError(e instanceof Error ? e.message : "Failed to rename item.");
        }
        finally {
            setSaving(false);
        }
    }, [editContext, initialValue, itemDescriptor, onSaved, value]);
    const isDirty = value.trim().length > 0 && value.trim() !== initialValue;
    return (_jsxs("div", { className: "border-border-default overflow-hidden rounded-lg border bg-white", children: [_jsxs("div", { className: "border-border-default flex items-center gap-2.5 border-b px-4 py-3", children: [_jsx("span", { className: "bg-neutral-grey-5 text-neutral-grey-50 flex h-6 w-6 items-center justify-center rounded-md", children: _jsx(Box, { className: "h-4 w-4", strokeWidth: 1.5 }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-neutral-grey-100 text-xs font-semibold tracking-wide", children: "Internal Name" }), _jsx("p", { className: "text-neutral-grey-50 text-[11px] leading-tight", children: "Sitecore item name used internally. Separate from the provider model ID." })] })] }), _jsxs("div", { className: "space-y-3 px-4 py-4", children: [_jsx(Input, { value: value, onChange: (e) => setValue(e.target.value), placeholder: "Enter internal item name", disabled: loading || saving }), error && _jsx("p", { className: "text-feedback-red text-xs", children: error }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { size: "sm", onClick: () => void handleSave(), disabled: loading || saving || !isDirty, children: [saving ? (_jsx(RefreshCw, { className: "mr-1 h-4 w-4 animate-spin", strokeWidth: 1.5 })) : (_jsx(Save, { className: "mr-1 h-4 w-4", strokeWidth: 1.5 })), "Save"] }) })] })] }));
}
const FIELD_GROUPS = [
    {
        title: "Model",
        description: "Provider binding and API model id.",
        icon: _jsx(Box, { className: "h-4 w-4", strokeWidth: 1.5 }),
        fieldNames: [
            ["Model Name"],
            ["Provider"],
            ["Providers"],
            ["Additional Parameters"],
        ],
    },
    {
        title: "Capabilities",
        description: "Limits and options for chat models.",
        icon: _jsx(Cpu, { className: "h-4 w-4", strokeWidth: 1.5 }),
        fieldNames: [
            ["Reasoning Effort"],
            ["Max Response Tokens"],
            ["Max Context Window Tokens"],
        ],
    },
    {
        title: "Token pricing",
        description: "USD per million tokens (chat and embeddings).",
        icon: _jsx(DollarSign, { className: "h-4 w-4", strokeWidth: 1.5 }),
        fieldNames: [
            ["Input Cost Per Million Tokens"],
            ["Output Cost Per Million Tokens"],
            ["Cached Input Cost Per Million Tokens"],
            ["Cache Write Cost Per Million Tokens"],
        ],
    },
    {
        title: "Image pricing",
        description: "USD per million tokens for image models.",
        icon: _jsx(ImageIcon, { className: "h-4 w-4", strokeWidth: 1.5 }),
        fieldNames: [
            ["Output Image Token Cost Per Million"],
            ["Input Image Token Cost Per Million"],
            ["Input Text Token Cost Per Million"],
        ],
    },
];
export function ModelConfigPanel({ itemId, title, onClose, actions, refreshToken = 0, onModelRenamed, }) {
    const [localRefreshToken, setLocalRefreshToken] = useState(0);
    const handleModelRenamed = useCallback(async () => {
        setLocalRefreshToken((current) => current + 1);
        await onModelRenamed?.();
    }, [onModelRenamed]);
    return (_jsx(GroupedFieldConfigPanel, { itemId: itemId, title: title, onClose: onClose, actions: actions, supplementalContent: _jsx(ModelInternalNameSection, { itemId: itemId, refreshToken: localRefreshToken, onSaved: handleModelRenamed }), refreshToken: refreshToken + localRefreshToken, fieldGroups: FIELD_GROUPS, headerIcon: _jsx(Sparkles, { className: "h-4 w-4", strokeWidth: 1.5 }), loadErrorTitle: "Unable to load model", emptyMessage: "No editable settings were found for this model.", fallbackTitle: "AI Model", footerLeadingText: "For all template fields and sections use the " }));
}
export default ModelConfigPanel;
//# sourceMappingURL=ModelConfigPanel.js.map