/**
 * AI助手Web客户端 - 前端交互逻辑
 * 100%还原原型设计的交互效果
 */

// 全局变量
let currentChatId = null;
let currentAppId = 15; // 默认使用人岗匹配应用
let isTyping = false;

// API配置
const API_BASE_URL = '';  // 使用相对路径

/**
 * 创建动态粒子背景
 */
function createParticles() {
    const particlesContainer = document.getElementById('particles');
    const particleCount = 50;
    
    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        // 随机位置和大小
        const size = Math.random() * 4 + 1;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.left = `${posX}%`;
        particle.style.top = `${posY}%`;
        
        // 随机动画延迟
        particle.style.animationDelay = `${Math.random() * 5}s`;
        
        particlesContainer.appendChild(particle);
    }
}

/**
 * 添加消息到聊天容器
 */
function addMessage(message, isUser = true) {
    const chatContainer = document.getElementById('chat-container');
    
    // 移除打字指示器
    removeTypingIndicator();
    
    const messageDiv = document.createElement('div');
    messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'} slide-in`;
    
    const bubbleClass = isUser ? 'user-bubble' : 'ai-bubble';
    const roundedClass = isUser ? 'rounded-br-md' : 'rounded-bl-md';
    
    messageDiv.innerHTML = `
        <div class="max-w-xs lg:max-w-md ${bubbleClass} text-white p-4 rounded-2xl ${roundedClass}">
            <p>${escapeHtml(message)}</p>
        </div>
    `;
    
    chatContainer.appendChild(messageDiv);
    scrollToBottom();
}

/**
 * 显示打字指示器
 */
function showTypingIndicator() {
    if (isTyping) return;
    
    isTyping = true;
    const chatContainer = document.getElementById('chat-container');
    
    const typingDiv = document.createElement('div');
    typingDiv.id = 'typing-indicator';
    typingDiv.className = 'flex justify-start';
    typingDiv.innerHTML = `
        <div class="max-w-xs lg:max-w-md ai-bubble text-white p-4 rounded-2xl rounded-bl-md">
            <div class="typing-indicator">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
        </div>
    `;
    
    chatContainer.appendChild(typingDiv);
    scrollToBottom();
}

/**
 * 移除打字指示器
 */
function removeTypingIndicator() {
    const typingIndicator = document.getElementById('typing-indicator');
    if (typingIndicator) {
        typingIndicator.remove();
        isTyping = false;
    }
}

/**
 * 滚动到底部
 */
function scrollToBottom() {
    const chatContainer = document.getElementById('chat-container');
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

/**
 * HTML转义
 */
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * 发送消息
 */
async function sendMessage() {
    const input = document.getElementById('message-input');
    const message = input.value.trim();
    
    if (!message) return;
    
    // 添加用户消息
    addMessage(message, true);
    input.value = '';
    
    // 显示打字指示器
    showTypingIndicator();
    
    try {
        // 调用API
        const response = await fetch(`${API_BASE_URL}/api/chat/send`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                appId: currentAppId,
                message: message,
                chatId: currentChatId,
                stream: false
            })
        });
        
        const data = await response.json();
        
        // 移除打字指示器
        removeTypingIndicator();
        
        if (data.code === 200 && data.data) {
            // 添加AI回复
            addMessage(data.data.answer, false);
            
            // 更新chatId
            if (data.data.chatId) {
                currentChatId = data.data.chatId;
            }
        } else {
            addMessage(`错误: ${data.message || '未知错误'}`, false);
        }
    } catch (error) {
        console.error('发送消息失败:', error);
        removeTypingIndicator();
        addMessage('抱歉，发送消息失败，请稍后重试。', false);
    }
}

/**
 * 快捷回复按钮点击
 */
function handleQuickReply(text) {
    const input = document.getElementById('message-input');
    input.value = text;
    input.focus();
}

/**
 * 主题切换
 */
function changeTheme(theme) {
    const body = document.body;

    // 移除所有主题类
    body.classList.remove('theme-dark', 'theme-blue', 'theme-purple', 'theme-green');

    // 添加新主题类
    body.classList.add(`theme-${theme}`);

    // 更新背景渐变
    const gradients = {
        dark: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)',
        blue: 'linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0c4a6e 100%)',
        purple: 'linear-gradient(135deg, #581c87 0%, #6b21a8 50%, #581c87 100%)',
        green: 'linear-gradient(135deg, #064e3b 0%, #065f46 50%, #064e3b 100%)'
    };

    body.style.background = gradients[theme] || gradients.dark;
}

/**
 * 字体切换
 */
function changeFont(font) {
    const chatContainer = document.getElementById('chat-container');
    chatContainer.style.fontFamily = font;
}

/**
 * 开始新会话
 */
function startNewChat() {
    currentChatId = null;
    const chatContainer = document.getElementById('chat-container');

    // 清空聊天记录（保留欢迎消息）
    const messages = chatContainer.querySelectorAll('.slide-in');
    messages.forEach(msg => msg.remove());

    // 添加欢迎消息
    addMessage('您好！我是AI助手，有什么可以帮助您的吗？', false);
}

/**
 * 待办事项管理
 */
function addTodoItem() {
    const input = document.getElementById('todo-input');
    const text = input.value.trim();

    if (!text) return;

    const todoList = document.getElementById('todo-list');
    const todoItem = document.createElement('div');
    todoItem.className = 'flex items-center space-x-2 p-2 bg-slate-800/30 rounded-lg';
    todoItem.innerHTML = `
        <input type="checkbox" class="rounded text-primary">
        <span class="text-slate-300 text-sm">${escapeHtml(text)}</span>
    `;

    todoList.appendChild(todoItem);
    input.value = '';
}

/**
 * 页面加载完成后初始化
 */
document.addEventListener('DOMContentLoaded', function() {
    console.log('AI助手Web客户端已加载');

    // 创建粒子背景
    createParticles();

    // 绑定发送按钮事件
    const sendButton = document.getElementById('send-button');
    if (sendButton) {
        sendButton.addEventListener('click', sendMessage);
    }

    // 绑定输入框回车事件
    const messageInput = document.getElementById('message-input');
    if (messageInput) {
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
    }

    // 绑定快捷回复按钮
    const quickReplyButtons = document.querySelectorAll('.quick-reply-btn');
    quickReplyButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const text = this.textContent.trim();
            // 移除图标文本
            const cleanText = text.replace(/[💡📅✅]/g, '').trim();
            handleQuickReply(cleanText);
        });
    });

    // 绑定主题切换按钮
    const themeButtons = document.querySelectorAll('.theme-btn');
    themeButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const theme = this.dataset.theme;
            changeTheme(theme);
        });
    });

    // 绑定字体选择
    const fontSelect = document.getElementById('font-select');
    if (fontSelect) {
        fontSelect.addEventListener('change', function() {
            changeFont(this.value);
        });
    }

    // 绑定待办事项添加
    const todoAddButton = document.getElementById('todo-add-btn');
    const todoInput = document.getElementById('todo-input');
    if (todoAddButton && todoInput) {
        todoAddButton.addEventListener('click', addTodoItem);
        todoInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addTodoItem();
            }
        });
    }

    // 添加欢迎消息
    setTimeout(() => {
        addMessage('您好！我是AI助手，有什么可以帮助您的吗？', false);
    }, 500);
});