/**
 * 命令处理模块
 * @type {module}
 */
import { escapeHtml } from './utils.js';

/**
 * 渲染命令列表表格
 * @param {Element} container - 容器元素
 * @param {Element} rootElement - XML根元素
 * @param {Function} showAddCommandDialog - 显示添加命令对话框的函数
 * @param {Function} showEditCommandDialog - 显示编辑命令对话框的函数
 * @param {Function} deleteCommand - 删除命令的函数
 */
export function renderCommandListTable(container, rootElement, showAddCommandDialog, showEditCommandDialog, deleteCommand) {
    // 查找CommandList元素
    const commandListElement = rootElement.querySelector('CommandList');
    if (!commandListElement) {
        // 创建CommandList部分
        const commandListSection = document.createElement('div');
        commandListSection.className = 'form-group';
        commandListSection.innerHTML = `
            <label for="commandListTable">命令列表</label>
            <div id="commandListContainer" class="command-table-container">
                <table id="commandListTable" class="command-table">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>调用</th>
                            <th>描述</th>
                            <th style="width: 100px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="4" style="text-align: center;">
                                <button id="addCommandButton" class="action-button">
                                    添加命令
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        `;
        
        container.appendChild(commandListSection);
        
        // 添加命令事件监听
        const addCommandButton = commandListSection.querySelector('#addCommandButton');
        addCommandButton.addEventListener('click', () => {
            showAddCommandDialog(rootElement);
        });
        
        return;
    }
    
    // 创建CommandList部分
    const commandListSection = document.createElement('div');
    commandListSection.className = 'form-group';
    commandListSection.innerHTML = `
        <label for="commandListTable">命令列表</label>
        <div id="commandListContainer" class="command-table-container">
            <table id="commandListTable" class="command-table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>调用</th>
                        <th>描述</th>
                        <th style="width: 100px;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 命令会在这里动态添加 -->
                </tbody>
            </table>
        </div>
    `;
    
    container.appendChild(commandListSection);
    
    const tableBody = commandListSection.querySelector('tbody');
    
    // 获取命令列表
    const commandElements = commandListElement.querySelectorAll('Command');
    
    // 如果没有命令，添加"添加命令"按钮
    if (commandElements.length === 0) {
        tableBody.innerHTML = `
            <tr>
                <td colspan="4" style="text-align: center;">
                    <button id="addCommandButton" class="action-button">
                        添加命令
                    </button>
                </td>
            </tr>
        `;
        
        // 添加命令事件监听
        const addCommandButton = tableBody.querySelector('#addCommandButton');
        addCommandButton.addEventListener('click', () => {
            showAddCommandDialog(rootElement);
        });
        
        return;
    }
    
    // 添加命令到表格
    commandElements.forEach((command, index) => {
        const name = command.getAttribute('Name') || '';
        const call = command.getAttribute('Call') || '';
        const description = command.getAttribute('Description') || '';
        
        const row = document.createElement('tr');
        row.className = 'command-row';
        row.dataset.index = index;
        
        row.innerHTML = `
            <td class="command-cell">${escapeHtml(name)}</td>
            <td class="command-cell">${escapeHtml(call)}</td>
            <td class="command-cell">${escapeHtml(description)}</td>
            <td class="action-cell">
                <div class="command-actions">
                    <button class="command-action-button edit-button">编辑</button>
                    <button class="command-action-button delete-button">删除</button>
                </div>
            </td>
        `;
        
        // 编辑按钮事件
        row.querySelector('.edit-button').addEventListener('click', () => {
            showEditCommandDialog(command, index);
        });
        
        // 删除按钮事件
        row.querySelector('.delete-button').addEventListener('click', () => {
            deleteCommand(command, index);
        });
        
        tableBody.appendChild(row);
    });
    
    // 添加"添加命令"按钮行
    const addRow = document.createElement('tr');
    addRow.innerHTML = `
        <td colspan="4" style="text-align: center;">
            <button id="addCommandButton" class="action-button">
                添加命令
            </button>
        </td>
    `;
    
    // 添加命令事件监听
    addRow.querySelector('#addCommandButton').addEventListener('click', () => {
        showAddCommandDialog(rootElement);
    });
    
    tableBody.appendChild(addRow);
}

/**
 * 渲染命令列表
 * @param {Element} container - 容器元素
 * @param {Element} commandListElement - 命令列表元素
 * @param {Element} rootElement - XML根元素
 * @param {Function} showAddCommandDialog - 显示添加命令对话框的函数
 * @param {Function} showEditCommandDialog - 显示编辑命令对话框的函数
 * @param {Function} deleteCommand - 删除命令的函数
 */
export function renderCommandList(container, commandListElement, rootElement, showAddCommandDialog, showEditCommandDialog, deleteCommand) {
    // 创建命令列表容器
    const commandListContainer = document.createElement('div');
    commandListContainer.id = 'commandListContainer';
    commandListContainer.className = 'section';
    
    // 创建标题和添加按钮
    const header = document.createElement('div');
    header.className = 'section-header';
    header.innerHTML = `
        <h3>命令列表</h3>
        <button id="addCommandBtn" class="action-button">添加命令</button>
    `;
    commandListContainer.appendChild(header);
    
    // 添加按钮事件
    const addBtn = header.querySelector('#addCommandBtn');
    addBtn.addEventListener('click', () => {
        showAddCommandDialog(rootElement);
    });
    
    // 创建表格
    const table = document.createElement('table');
    table.className = 'command-table';
    
    // 创建表头
    const thead = document.createElement('thead');
    thead.innerHTML = `
        <tr>
            <th>命令名称</th>
            <th>命令调用</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
    `;
    table.appendChild(thead);
    
    // 创建表体
    const tbody = document.createElement('tbody');
    
    // 如果存在命令列表元素，则渲染命令
    if (commandListElement) {
        const commands = commandListElement.querySelectorAll('Command');
        
        if (commands.length === 0) {
            // 如果没有命令，显示空行
            const emptyRow = document.createElement('tr');
            emptyRow.innerHTML = '<td colspan="4" style="text-align: center;">没有命令记录</td>';
            tbody.appendChild(emptyRow);
        } else {
            // 渲染命令列表
            commands.forEach((command, index) => {
                const name = command.getAttribute('Name') || '';
                const call = command.getAttribute('Call') || '';
                const description = command.getAttribute('Description') || '';
                
                const row = document.createElement('tr');
                row.className = 'command-row';
                row.dataset.index = index;
                
                row.innerHTML = `
                    <td class="command-cell">${escapeHtml(name)}</td>
                    <td class="command-cell">${escapeHtml(call)}</td>
                    <td class="command-cell">${escapeHtml(description)}</td>
                    <td class="command-actions">
                        <button class="action-button edit-command">编辑</button>
                        <button class="action-button delete-command">删除</button>
                    </td>
                `;
                
                tbody.appendChild(row);
                
                // 添加编辑按钮事件
                const editBtn = row.querySelector('.edit-command');
                editBtn.addEventListener('click', () => {
                    showEditCommandDialog(command, index);
                });
                
                // 添加删除按钮事件
                const deleteBtn = row.querySelector('.delete-command');
                deleteBtn.addEventListener('click', () => {
                    deleteCommand(command, index);
                });
            });
        }
    }
    
    table.appendChild(tbody);
    
    // 添加"添加命令"按钮行
    const addRow = document.createElement('tr');
    addRow.innerHTML = `
        <td colspan="4" style="text-align: center;">
            <button id="addCommandButton" class="action-button">
                添加命令
            </button>
        </td>
    `;
    
    // 添加命令事件监听
    addRow.querySelector('#addCommandButton').addEventListener('click', () => {
        showAddCommandDialog(rootElement);
    });
    
    tbody.appendChild(addRow);
    
    commandListContainer.appendChild(table);
    container.appendChild(commandListContainer);
}