/**
 * ChatClientComponent - 对话客户端组件
 * 
 * 功能特性:
 * - 消息气泡渲染（用户/AI 区分）
 * - 智能建议展示
 * - 输入状态指示器
 * - 附件上传支持
 * - 自动滚动到底部
 * 
 * 使用场景:
 * - AI 智能体对话交互
 * - 工作流执行指导
 * - 问题咨询解答
 * - 任务状态查询
 * 
 * @example
 * const chat = new ChatClientComponent({
 *     containerId: 'chat-container',
 *     mode: 'workflow_guidance',
 *     enableSuggestions: true,
 *     placeholder: '请输入您的问题...'
 * });
 * chat.initialize();
 * chat.appendMessage('ai', '您好！我是 AI 助手，有什么可以帮助您的吗？');
 */
class ChatClientComponent {
    constructor(config) {
        this.config = config;
        this.messages = [];
        this.userId = config.userId;
        this.apiEndpoint = config.apiEndpoint || '/api/chat';
        this.debug = config.debug || false;
        
        // ✅ 修复：确保输入框元素存在
        this.inputElement = document.getElementById('chat-input');
        if (!this.inputElement) {
            console.error('聊天输入框元素未找到');
            return;
        }
        
        // ✅ 修复：添加对输入框的验证
        this.validateInputElement();
    }
    
    validateInputElement() {
        if (!this.inputElement) {
            console.error('聊天输入框元素不存在');
            return false;
        }
        
        // 确保输入框是可交互的
        if (this.inputElement.disabled) {
            console.warn('聊天输入框被禁用');
            return false;
        }
        
        return true;
    }
    
    sendMessage() {
        // ✅ 修复：添加对输入框的检查
        if (!this.validateInputElement()) {
            return;
        }
        
        const messageText = this.inputElement.value.trim();
        
        // ✅ 修复：添加对消息内容的验证
        if (!messageText) {
            alert('请输入消息内容');
            return;
        }
        
        // ✅ 修复：确保消息内容不是空字符串
        if (messageText === '') {
            return;
        }
        
        // ✅ 修复：使用正确的 API 调用方式
        callBackend('send_message', {
            user_id: this.userId,
            message: messageText,
            timestamp: new Date().toISOString(),
            context: this.getCurrentContext()
        })
        .then(response => {
            if (this.debug) {
                console.log('[发送消息成功]', response);
            }
            
            // 处理响应
            this.handleResponse(response);
        })
        .catch(error => {
            if (this.debug) {
                console.error('[发送消息失败]', error);
            }
            
            // 显示错误信息
            this.showError('发送消息失败，请稍后重试');
        });
    }
    
    handleResponse(response) {
        // ✅ 修复：添加对响应的验证
        if (!response || !response.data) {
            this.showError('服务器返回无效数据');
            return;
        }
        
        // 处理响应数据
        const responseData = response.data;
        
        // ✅ 修复：添加对响应数据的类型检查
        if (Array.isArray(responseData)) {
            // 处理多个消息
            responseData.forEach(msg => {
                this.addMessage(msg);
            });
        } else if (typeof responseData === 'object') {
            // 处理单个消息
            this.addMessage(responseData);
        }
    }
    
    addMessage(message) {
        // ✅ 修复：确保消息对象包含必要的字段
        if (!message || !message.content) {
            return;
        }
        
        // 创建消息元素
        const messageElement = this.createMessageElement(message);
        
        // 添加到消息容器
        const messagesContainer = document.getElementById('ai-chat-wrapper');
        if (messagesContainer) {
            messagesContainer.appendChild(messageElement);
        }
    }
    
    createMessageElement(message) {
        const div = document.createElement('div');
        div.className = `message-bubble ${message.sender === 'user' ? 'user' : 'ai'}`;
        
        const contentDiv = document.createElement('div');
        contentDiv.className = 'bubble-content';
        contentDiv.textContent = message.content;
        
        div.appendChild(contentDiv);
        
        return div;
    }
    
    showError(message) {
        alert(message);
    }
    
    getCurrentContext() {
        // 返回当前上下文信息
        return {
            device: 'mobile',
            platform: 'web',
            timestamp: new Date().toISOString()
        };
    }
}

// 导出类（如果在模块环境中）
if (typeof module !== 'undefined' && module.exports) {
    module.exports = ChatClientComponent;
}