// 获取按钮和状态元素
const forwardBtn = document.getElementById('forwardBtn');
const backwardBtn = document.getElementById('backwardBtn');
const recordBtn = document.getElementById('recordBtn');
const playbackBtn = document.getElementById('playbackBtn');
const status = document.getElementById('status');

// 录制相关变量
let isRecording = false;
let recordedActions = [];
let recordingStartTime = 0;

// 实际控制函数
function controlMotor(direction) {
    status.innerHTML = `<p>正在${direction === 'forward' ? '前进' : '后退'}...</p>`;
    
    // 记录操作（如果正在录制）
    if (isRecording) {
        const timestamp = Date.now() - recordingStartTime;
        recordedActions.push({ direction, timestamp });
    }
    
    // 发送AJAX请求到后端服务器
    fetch('/control', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ direction: direction })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            status.innerHTML = `<p>${data.message}</p>`;
        } else {
            status.innerHTML = `<p>错误: ${data.message}</p>`;
        }
    })
    .catch(error => {
        status.innerHTML = `<p>通信错误: ${error.message}</p>`;
    });
}

// 录制按钮点击事件
recordBtn.addEventListener('click', () => {
    if (isRecording) {
        // 停止录制
        isRecording = false;
        recordBtn.textContent = '开始录制';
        status.innerHTML = `<p>录制完成，共记录 ${recordedActions.length} 个操作</p>`;
    } else {
        // 开始录制
        isRecording = true;
        recordedActions = [];
        recordingStartTime = Date.now();
        recordBtn.textContent = '停止录制';
        status.innerHTML = `<p>开始录制...</p>`;
    }
});

// 回放按钮点击事件
playbackBtn.addEventListener('click', () => {
    if (recordedActions.length === 0) {
        status.innerHTML = `<p>没有可回放的操作</p>`;
        return;
    }
    
    status.innerHTML = `<p>开始回放...</p>`;
    
    // 按时间顺序回放操作
    let lastTimestamp = 0;
    recordedActions.forEach((action, index) => {
        setTimeout(() => {
            controlMotor(action.direction);
            
            // 最后一个操作完成后显示回放完成
            if (index === recordedActions.length - 1) {
                setTimeout(() => {
                    status.innerHTML = `<p>回放完成</p>`;
                }, 2000);
            }
        }, action.timestamp - lastTimestamp);
        
        lastTimestamp = action.timestamp;
    });
});

// 按钮点击事件
forwardBtn.addEventListener('click', () => {
    controlMotor('forward');
});

backwardBtn.addEventListener('click', () => {
    controlMotor('backward');
});