// File: frontend/app/workflow/components/ChatOutputNode.tsx (新建)
// Description: 自定义 ChatOutput 节点

import React, { memo, useCallback, ChangeEvent } from 'react';
import { Handle, Position, useReactFlow, Node } from 'reactflow';
import { MessageCircleReply } from 'lucide-react'; // 使用合适的图标
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input"; // 使用 Input 或 Textarea 根据需要
import type { ChatOutputNodeData, CustomNodeProps } from './types';

const ChatOutputNodeComponent = ({ id, data, isConnectable }: CustomNodeProps<ChatOutputNodeData>) => {
    const { setNodes } = useReactFlow<ChatOutputNodeData>();

    // 处理文本变化 (如果需要可编辑)
    const handleTextChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
        const newText = event.target.value;
        setNodes((nds: Node<ChatOutputNodeData>[]) =>
            nds.map((node) => {
                if (node.id === id) {
                    return { ...node, data: { ...node.data, displayText: newText } };
                }
                return node;
            })
        );
    }, [id, setNodes]);

    return (
        <div className="react-flow__node-genericNode bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg w-96">
            {/* 输入 Handle */}
             <Handle
                type="target"
                position={Position.Left}
                id="message-input"
                isConnectable={isConnectable}
                className="!w-3 !h-3 !bg-purple-500 top-1/2" // 使用紫色 Handle
            />

            {/* 节点头部 */}
            <div className="bg-gray-100 dark:bg-gray-700 p-3 border-b border-gray-300 dark:border-gray-600">
                <div className="flex items-center gap-2">
                    <MessageCircleReply size={18} className="text-gray-700 dark:text-gray-300" />
                    <strong className="text-gray-800 dark:text-gray-200">Chat Output</strong>
                </div>
                 <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">在 Playground 显示聊天消息。</p>
            </div>

            {/* 节点内容 */}
            <div className="p-4 space-y-2">
                <div className="nodrag">
                    <Label htmlFor={`chat-output-text-${id}`} className="text-xs font-semibold text-gray-500 dark:text-gray-400">Text</Label>
                     {/* 根据截图，这里像是一个 Input，可能用于显示模板或结果 */}
                     <Input
                        id={`chat-output-text-${id}`}
                        name="displayText"
                        value={data.displayText || ''} // 显示传入的数据
                        onChange={handleTextChange} // 如果需要可编辑
                        placeholder="等待输入..."
                        className="mt-1 text-sm h-10 bg-white dark:bg-gray-700"
                        // readOnly // 如果只是显示，可以设为只读
                    />
                    {/* 或者只是一个简单的文本显示区域 */}
                    {/* <p className="mt-1 text-sm p-2 border rounded bg-white dark:bg-gray-700 min-h-[40px]">
                        {data.displayText || '等待输入...'}
                    </p> */}
                </div>
            </div>

             {/* 输出 Handle (可选，根据是否需要继续传递) */}
             {/* <div className="relative p-2 border-t border-gray-300 dark:border-gray-600">
                <Label className="text-xs font-semibold text-gray-500 dark:text-gray-400 block text-right pr-7">Message</Label>
                <Handle
                    type="source"
                    position={Position.Right}
                    id="message-passthrough"
                    isConnectable={isConnectable}
                    className="w-3 h-3 !bg-purple-500 top-1/2"
                />
            </div> */}
        </div>
    );
};

ChatOutputNodeComponent.displayName = 'ChatOutputNode';
export const ChatOutputNode = memo(ChatOutputNodeComponent);