import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useTheme } from '../theme';
import InlinePromptEditor from './InlinePromptEditor';
const formatArgumentSummary = (template) => {
    const count = template.argumentsSchema.length;
    if (count === 0) {
        return 'No arguments';
    }
    if (count === 1) {
        return '1 argument';
    }
    return `${count} arguments`;
};
const CustomPromptList = ({ userTemplates, readonlyPrompts, activePromptId, onSelect, onCreate, onDuplicate, onDelete, onUpdate, isCreateDisabled = false, savingPromptId = null }) => {
    const theme = useTheme();
    const [expandedId, setExpandedId] = React.useState(null);
    React.useEffect(() => {
        if (expandedId && !userTemplates.some((template) => template.id === expandedId)) {
            setExpandedId(null);
        }
    }, [expandedId, userTemplates]);
    const handleToggleEditor = React.useCallback((id) => {
        setExpandedId((previous) => (previous === id ? null : id));
        onSelect(id);
    }, [onSelect]);
    const handleDelete = React.useCallback((id) => {
        if (typeof window !== 'undefined') {
            const confirmed = window.confirm('Delete this custom prompt? This action cannot be undone.');
            if (!confirmed) {
                return;
            }
        }
        onDelete(id);
        setExpandedId((previous) => (previous === id ? null : previous));
    }, [onDelete]);
    const handleEditorSubmit = React.useCallback((id, updates) => {
        onUpdate(id, updates);
    }, [onUpdate]);
    const handleEditorCancel = React.useCallback((id) => {
        setExpandedId((previous) => (previous === id ? null : previous));
        onSelect(id);
    }, [onSelect]);
    return (_jsxs("div", { className: theme.customPromptList.container, children: [_jsx("div", { className: theme.customPromptList.headerRow, children: _jsx("button", { type: 'button', className: `${theme.buttons.add} disabled:cursor-not-allowed disabled:opacity-60`, onClick: onCreate, disabled: isCreateDisabled, children: "New prompt" }) }), _jsxs("div", { className: theme.customPromptList.sections, children: [_jsxs("section", { className: theme.customPromptList.section, children: [_jsxs("div", { className: theme.customPromptList.sectionHeader, children: [_jsx("h4", { className: theme.customPromptList.sectionTitle, children: "Your prompts" }), _jsxs("span", { className: theme.customPromptList.sectionCount, children: [userTemplates.length, " total"] })] }), userTemplates.length === 0 ? (_jsx("p", { className: theme.customPromptList.emptyState, children: "No custom prompts yet. Create one to get started." })) : (_jsx("ul", { className: theme.customPromptList.userList, children: userTemplates.map((template) => {
                                    const isActive = template.id === activePromptId;
                                    const isExpanded = template.id === expandedId;
                                    const stateClass = isExpanded
                                        ? theme.customPromptList.userListItemExpanded
                                        : isActive
                                            ? theme.customPromptList.userListItemActive
                                            : '';
                                    const containerClass = [
                                        theme.customPromptList.userListItem,
                                        stateClass
                                    ].filter(Boolean).join(' ');
                                    return (_jsxs("li", { className: containerClass, children: [_jsxs("div", { className: theme.customPromptList.userListItemContent, children: [_jsxs("div", { className: theme.customPromptList.userListItemInfo, children: [_jsxs("div", { className: theme.customPromptList.userListItemTitleRow, children: [_jsx("span", { className: theme.customPromptList.userListItemTitle, children: template.title ?? template.name }), _jsx("span", { className: theme.customPromptList.userListItemBadge, children: template.name })] }), template.description ? (_jsx("p", { className: theme.customPromptList.userListItemDescription, children: template.description })) : null, _jsx("p", { className: theme.customPromptList.userListItemMeta, children: formatArgumentSummary(template) })] }), _jsxs("div", { className: theme.customPromptList.userListActions, children: [_jsx("button", { type: 'button', onClick: () => handleToggleEditor(template.id), className: theme.buttons.secondary, "aria-expanded": isExpanded, children: isExpanded ? 'Hide editor' : 'Edit' }), _jsx("button", { type: 'button', onClick: () => onDuplicate(template.id), className: theme.buttons.secondary, children: "Duplicate" }), _jsx("button", { type: 'button', onClick: () => handleDelete(template.id), className: theme.buttons.dangerOutline, children: "Delete" })] })] }), isExpanded ? (_jsx("div", { className: theme.customPromptList.editorContainer, children: _jsx(InlinePromptEditor, { template: template, onSubmit: (updates) => handleEditorSubmit(template.id, updates), onCancel: () => handleEditorCancel(template.id), isSubmitting: savingPromptId === template.id }) })) : null] }, template.id));
                                }) }))] }), _jsxs("section", { className: theme.customPromptList.section, children: [_jsxs("div", { className: theme.customPromptList.sectionHeader, children: [_jsx("h4", { className: theme.customPromptList.sectionTitle, children: "Provided by host" }), _jsxs("span", { className: theme.customPromptList.sectionCount, children: [readonlyPrompts.length, " total"] })] }), readonlyPrompts.length === 0 ? (_jsx("p", { className: theme.customPromptList.hostEmptyState, children: "No host prompts registered." })) : (_jsx("ul", { className: theme.customPromptList.hostList, children: readonlyPrompts.map((prompt, index) => (_jsx("li", { className: theme.customPromptList.hostListItem, children: _jsx("div", { className: theme.customPromptList.hostListItemContent, children: _jsxs("div", { className: theme.customPromptList.userListItemInfo, children: [_jsxs("div", { className: theme.customPromptList.hostListItemTitleRow, children: [_jsx("span", { className: theme.customPromptList.hostListItemTitle, children: prompt.title ?? prompt.prompt?.name ?? 'Prompt' }), prompt.prompt?.name ? (_jsx("span", { className: theme.customPromptList.hostListItemBadge, children: prompt.prompt.name })) : null] }), prompt.description ? (_jsx("p", { className: theme.customPromptList.hostListItemDescription, children: prompt.description })) : null, _jsx("p", { className: theme.customPromptList.hostListItemMeta, children: "Read-only prompt provided by the embedding application." })] }) }) }, prompt.id ?? `${prompt.prompt?.name ?? 'prompt'}-${index}`))) }))] })] })] }));
};
export default CustomPromptList;
