// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化机器人表单
    initRobotForm();
    
    // 加载机器人列表
    loadRobots();
    
    // 初始化编辑和删除功能
    initEditRobotModal();
    initDeleteRobotModal();
});

// 初始化机器人表单
function initRobotForm() {
    const form = document.getElementById('robotForm');
    const avatarInput = document.getElementById('robotAvatar');
    const avatarPreview = document.getElementById('avatarPreview');
    const avatarPreviewContainer = document.querySelector('#robotForm .avatar-preview');
    
    // 头像预览
    avatarInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                avatarPreview.src = e.target.result;
                avatarPreviewContainer.classList.remove('d-none');
            };
            
            reader.readAsDataURL(this.files[0]);
        } else {
            avatarPreviewContainer.classList.add('d-none');
        }
    });
    
    // 表单提交
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        // 显示提交中状态
        const submitButton = form.querySelector('button[type="submit"]');
        const originalButtonText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 添加中...';
        
        try {
            const response = await fetch('/imgsearcherApi/api/robots', {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            
            if (data.error) {
                alert(`添加失败: ${data.error}`);
                return;
            }
            
            // 重置表单
            form.reset();
            avatarPreviewContainer.classList.add('d-none');
            
            // 刷新机器人列表
            loadRobots();
            
            // 显示成功消息
            alert('机器人角色添加成功！');
            
        } catch (error) {
            alert(`添加失败: ${error.message}`);
        } finally {
            // 恢复按钮状态
            submitButton.disabled = false;
            submitButton.innerHTML = originalButtonText;
        }
    });
}

// 加载机器人列表
async function loadRobots() {
    const robotsList = document.getElementById('robotsList');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const noRobotsMessage = document.getElementById('noRobotsMessage');
    
    // 显示加载指示器
    loadingIndicator.classList.remove('d-none');
    noRobotsMessage.classList.add('d-none');
    
    // 清除现有的机器人卡片（保留标题和加载指示器）
    const existingCards = robotsList.querySelectorAll('.robot-card-container');
    existingCards.forEach(card => card.remove());
    
    try {
        const response = await fetch('/imgsearcherApi/api/robots');
        const data = await response.json();
        
        // 隐藏加载指示器
        loadingIndicator.classList.add('d-none');
        
        if (!data.robots || data.robots.length === 0) {
            noRobotsMessage.classList.remove('d-none');
            return;
        }
        
        // 渲染机器人卡片
        data.robots.forEach(robot => {
            const robotCard = createRobotCard(robot);
            robotsList.appendChild(robotCard);
        });
        
    } catch (error) {
        console.error('加载机器人列表失败:', error);
        loadingIndicator.classList.add('d-none');
        alert(`加载机器人列表失败: ${error.message}`);
    }
}

// 创建机器人卡片
function createRobotCard(robot) {
    const cardContainer = document.createElement('div');
    cardContainer.className = 'col-md-4 mb-4 robot-card-container';
    
    const avatarHtml = robot.avatar_data 
        ? `<img src="data:image/jpeg;base64,${robot.avatar_data}" alt="${robot.name}" class="robot-avatar">`
        : `<div class="robot-avatar-placeholder"><i class="bi bi-person"></i></div>`;
    
    cardContainer.innerHTML = `
        <div class="card robot-card">
            <div class="card-body text-center">
                ${avatarHtml}
                <h5 class="card-title">${robot.name}</h5>
                <div class="robot-background text-start mb-3">
                    <small class="text-muted">${robot.background}</small>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-sm btn-outline-primary edit-robot" data-robot-id="${robot.robot_id}">
                        <i class="bi bi-pencil"></i> 编辑
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger delete-robot" data-robot-id="${robot.robot_id}">
                        <i class="bi bi-trash"></i> 删除
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // 添加编辑按钮事件
    cardContainer.querySelector('.edit-robot').addEventListener('click', function() {
        openEditRobotModal(robot);
    });
    
    // 添加删除按钮事件
    cardContainer.querySelector('.delete-robot').addEventListener('click', function() {
        openDeleteRobotModal(robot.robot_id, robot.name);
    });
    
    return cardContainer;
}

// 初始化编辑机器人模态框
function initEditRobotModal() {
    const editRobotForm = document.getElementById('editRobotForm');
    const saveChangesButton = document.getElementById('saveRobotChanges');
    const editRobotAvatar = document.getElementById('editRobotAvatar');
    const editAvatarPreview = document.getElementById('editAvatarPreview');
    
    // 头像预览
    editRobotAvatar.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                editAvatarPreview.src = e.target.result;
            };
            
            reader.readAsDataURL(this.files[0]);
        }
    });
    
    // 保存更改按钮点击事件
    saveChangesButton.addEventListener('click', async function() {
        const robotId = document.getElementById('editRobotId').value;
        const formData = new FormData(editRobotForm);
        
        // 显示保存中状态
        const originalButtonText = saveChangesButton.innerHTML;
        saveChangesButton.disabled = true;
        saveChangesButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 保存中...';
        
        try {
            const response = await fetch(`/imgsearcherApi/api/robots/${robotId}`, {
                method: 'PUT',
                body: formData
            });
            
            const data = await response.json();
            
            if (data.error) {
                alert(`更新失败: ${data.error}`);
                return;
            }
            
            // 关闭模态框
            const editModal = bootstrap.Modal.getInstance(document.getElementById('editRobotModal'));
            editModal.hide();
            
            // 刷新机器人列表
            loadRobots();
            
            // 显示成功消息
            alert('机器人角色更新成功！');
            
        } catch (error) {
            alert(`更新失败: ${error.message}`);
        } finally {
            // 恢复按钮状态
            saveChangesButton.disabled = false;
            saveChangesButton.innerHTML = originalButtonText;
        }
    });
}

// 打开编辑机器人模态框
function openEditRobotModal(robot) {
    document.getElementById('editRobotId').value = robot.robot_id;
    document.getElementById('editRobotName').value = robot.name;
    document.getElementById('editRobotBackground').value = robot.background;
    
    // 设置头像预览
    if (robot.avatar_data) {
        document.getElementById('editAvatarPreview').src = `data:image/jpeg;base64,${robot.avatar_data}`;
    } else {
        document.getElementById('editAvatarPreview').src = '';
    }
    
    // 打开模态框
    const editModal = new bootstrap.Modal(document.getElementById('editRobotModal'));
    editModal.show();
}

// 初始化删除机器人模态框
function initDeleteRobotModal() {
    const confirmDeleteButton = document.getElementById('confirmDeleteRobot');
    
    confirmDeleteButton.addEventListener('click', async function() {
        const robotId = document.getElementById('deleteRobotId').value;
        
        // 显示删除中状态
        const originalButtonText = confirmDeleteButton.innerHTML;
        confirmDeleteButton.disabled = true;
        confirmDeleteButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 删除中...';
        
        try {
            const response = await fetch(`/imgsearcherApi/api/robots/${robotId}`, {
                method: 'DELETE'
            });
            
            const data = await response.json();
            
            if (data.error) {
                alert(`删除失败: ${data.error}`);
                return;
            }
            
            // 关闭模态框
            const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteRobotModal'));
            deleteModal.hide();
            
            // 刷新机器人列表
            loadRobots();
            
            // 显示成功消息
            alert('机器人角色删除成功！');
            
        } catch (error) {
            alert(`删除失败: ${error.message}`);
        } finally {
            // 恢复按钮状态
            confirmDeleteButton.disabled = false;
            confirmDeleteButton.innerHTML = originalButtonText;
        }
    });
}

// 打开删除机器人模态框
function openDeleteRobotModal(robotId, robotName) {
    document.getElementById('deleteRobotId').value = robotId;
    document.getElementById('deleteRobotModalLabel').textContent = `确认删除 "${robotName}"`;
    document.querySelector('#deleteRobotModal .modal-body p').textContent = `确定要删除机器人角色 "${robotName}" 吗？此操作不可撤销。`;
    
    // 打开模态框
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteRobotModal'));
    deleteModal.show();
}