/**
 * 智能 UI 组件库 - 核心渲染引擎
 * 
 * 功能:
 * 1. 根据后端模块元数据自动生成界面
 * 2. 提供通用 UI 组件（DataTable, FormGenerator, ActionPanel 等）
 * 3. 支持自动布局适配
 * 4. 提供统一的事件处理和状态管理
 * 
 * 使用方式:
 * const renderer = new SmartUIRenderer();
 * await renderer.renderModule(moduleName, moduleInfo, schema, uiConfig);
 */

class SmartUIRenderer {
    constructor() {
        this.components = {};
        this.layouts = {};
        this.registerDefaultComponents();
    }

    /**
     * 注册默认组件
     */
    registerDefaultComponents() {
        // ========== 1. 数据表格组件 ==========
        this.components['DataTable'] = class DataTable {
            render(data, config) {
                if (!data || data.length === 0) {
                    return '<div class="empty-data">暂无数据</div>';
                }

                const columns = config.columns || [];
                return `
                    <div class="smart-data-table">
                        <table>
                            <thead>
                                <tr>
                                    ${columns.map(col => `<th>${col.label}</th>`).join('')}
                                    ${config.actions ? '<th>操作</th>' : ''}
                                </tr>
                            </thead>
                            <tbody>
                                ${data.map((row, index) => `
                                    <tr>
                                        ${columns.map(col => `<td>${this.formatValue(row[col.field], col.format)}</td>`).join('')}
                                        ${config.actions ? `
                                            <td>
                                                ${config.actions.map(action => `
                                                    <button class="btn btn-sm" onclick="${action.handler}(${index})">${action.label}</button>
                                                `).join('')}
                                            </td>
                                        ` : ''}
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                `;
            }

            formatValue(value, format) {
                if (value === null || value === undefined) return '-';
                if (format === 'date') return new Date(value).toLocaleString();
                if (format === 'currency') return '¥' + parseFloat(value).toFixed(2);
                if (format === 'percentage') return (value * 100).toFixed(1) + '%';
                return String(value);
            }
        };

        // ========== 2. 表单生成器组件 ==========
        this.components['FormGenerator'] = class FormGenerator {
            render(schema, formData = {}, onSubmit) {
                const fields = schema.parameters || [];
                return `
                    <form class="smart-form" onsubmit="event.preventDefault(); ${onSubmit}()">
                        ${fields.map(field => `
                            <div class="form-group">
                                ${field.label ? `<label>${field.label}</label>` : ''}
                                ${this.renderField(field, formData[field.name])}
                                ${field.description ? `<small class="help-text">${field.description}</small>` : ''}
                            </div>
                        `).join('')}
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">提交</button>
                            <button type="reset" class="btn btn-secondary">重置</button>
                        </div>
                    </form>
                `;
            }

            renderField(field, value) {
                const name = field.name;
                const defaultValue = value || field.default || '';
                
                if (field.enum) {
                    return `
                        <select name="${name}" ${field.required ? 'required' : ''}>
                            ${field.enum.map(v => `
                                <option value="${v}" ${v === defaultValue ? 'selected' : ''}>${v}</option>
                            `).join('')}
                        </select>
                    `;
                }
                
                switch(field.type) {
                    case 'number':
                        return `<input type="number" name="${name}" value="${defaultValue}" ${field.required ? 'required' : ''} />`;
                    case 'boolean':
                        return `<input type="checkbox" name="${name}" ${defaultValue ? 'checked' : ''} />`;
                    case 'text':
                    case 'string':
                        if (field.multiline) {
                            return `<textarea name="${name}" rows="${field.rows || 4}">${defaultValue}</textarea>`;
                        }
                        return `<input type="text" name="${name}" value="${defaultValue}" ${field.required ? 'required' : ''} />`;
                    case 'object':
                        return `<textarea name="${name}" rows="6">${JSON.stringify(defaultValue, null, 2)}</textarea>`;
                    default:
                        return `<input type="text" name="${name}" value="${defaultValue}" />`;
                }
            }
        };

        // ========== 3. 操作面板组件 ==========
        this.components['ActionPanel'] = class ActionPanel {
            render(actions, layout = 'horizontal') {
                return `
                    <div class="smart-action-panel layout-${layout}">
                        ${actions.map(action => `
                            <button 
                                class="btn btn-${action.style || 'primary'}" 
                                onclick="${action.handler}"
                                ${action.disabled ? 'disabled' : ''}>
                                ${action.icon || ''} ${action.label}
                            </button>
                        `).join('')}
                    </div>
                `;
            }
        };

        // ========== 4. 日志控制台组件 ==========
        this.components['LogConsole'] = class LogConsole {
            render(logs, autoScroll = true) {
                return `
                    <div class="smart-log-console" ${autoScroll ? 'data-auto-scroll="true"' : ''}>
                        <div class="log-header">
                            <span>📝 运行日志</span>
                            <button class="btn btn-sm" onclick="this.parentElement.nextElementSibling.innerHTML=''">清空</button>
                        </div>
                        <div class="log-content">
                            ${logs.map(log => `
                                <div class="log-line log-${log.level || 'info'}">
                                    <span class="log-time">[${new Date(log.time).toLocaleTimeString()}]</span>
                                    <span class="log-message">${log.message}</span>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `;
            }

            addLog(containerId, message, level = 'info') {
                const container = document.querySelector(`#${containerId} .log-content`);
                if (container) {
                    const line = document.createElement('div');
                    line.className = `log-line log-${level}`;
                    line.innerHTML = `
                        <span class="log-time">[${new Date().toLocaleTimeString()}]</span>
                        <span class="log-message">${message}</span>
                    `;
                    container.appendChild(line);
                    
                    // 自动滚动到底部
                    if (container.parentElement.dataset.autoScroll === 'true') {
                        container.scrollTop = container.scrollHeight;
                    }
                }
            }
        };

        // ========== 5. 卡片网格组件 ==========
        this.components['CardGrid'] = class CardGrid {
            render(items, cardTemplate) {
                return `
                    <div class="smart-card-grid">
                        ${items.map(item => `
                            <div class="card">
                                ${cardTemplate(item)}
                            </div>
                        `).join('')}
                    </div>
                `;
            }
        };

        // ========== 6. 图表组件（简化版） ==========
        this.components['ChartWidget'] = class ChartWidget {
            render(chartType, data, options = {}) {
                // 实际项目中应该集成 Chart.js 或 ECharts
                return `
                    <div class="smart-chart" data-type="${chartType}">
                        <canvas id="chart-${Date.now()}"></canvas>
                        <!-- TODO: 集成 Chart.js -->
                    </div>
                `;
            }
        };
    }

    /**
     * 根据模块元数据渲染界面
     */
    async renderModule(moduleName, moduleInfo, schema, uiConfig) {
        const container = document.getElementById('module-content');
        if (!container) {
            throw new Error('未找到内容容器 #module-content');
        }

        const layout = uiConfig?.layout || 'default';
        const actions = schema.actions || [];
        const dataModels = schema.data_models || [];
        const uiHints = schema.ui_hints || {};

        // 根据功能类型选择渲染策略
        let html = '';
        
        if (uiHints.primary_action === 'start_agent' || actions.some(a => a.name.includes('start'))) {
            // 智能体控制类型
            html = this.renderAgentControl(moduleInfo, actions, schema);
        } else if (dataModels.length > 0) {
            // 数据管理类型
            html = this.renderDataManagement(moduleInfo, dataModels, actions);
        } else if (actions.some(a => a.parameters?.length > 0)) {
            // 工具函数类型
            html = this.renderToolInterface(moduleInfo, actions);
        } else {
            // 默认类型
            html = this.renderDefaultInterface(moduleInfo, actions);
        }

        container.innerHTML = html;
        
        // 初始化事件绑定
        this.bindEvents(actions, moduleName);
        
        // 如果需要实时日志，启动日志监听
        if (uiHints.realtime_monitor) {
            this.startLogMonitor(moduleName);
        }
    }

    /**
     * 渲染智能体控制界面
     */
    renderAgentControl(moduleInfo, actions, schema) {
        const startAction = actions.find(a => a.name === 'start_agent' || a.name === 'start');
        const stopAction = actions.find(a => a.name === 'stop_agent' || a.name === 'stop');
        
        return `
            <div class="agent-control-panel">
                <div class="agent-header">
                    <h2>${moduleInfo.icon || ''} ${moduleInfo.name}</h2>
                    <span class="status-badge status-offline" id="agent-status">离线</span>
                </div>
                
                <div class="agent-description">${moduleInfo.description}</div>
                
                <div class="agent-actions">
                    ${startAction ? `
                        <button class="btn btn-success btn-lg" onclick="SmartUI.actions.startAgent('${startAction.endpoint}')">
                            ▶️ 启动
                        </button>
                    ` : ''}
                    
                    ${stopAction ? `
                        <button class="btn btn-danger btn-lg" onclick="SmartUI.actions.stopAgent('${stopAction.endpoint}')" style="display:none;" id="stop-btn">
                            ⏹️ 停止
                        </button>
                    ` : ''}
                </div>
                
                ${schema.ui_hints?.show_logs ? `
                    <div class="agent-logs">
                        <div id="log-console"></div>
                    </div>
                ` : ''}
            </div>
        `;
    }

    /**
     * 渲染数据管理界面
     */
    renderDataManagement(moduleInfo, dataModels, actions) {
        const primaryModel = dataModels[0];
        
        return `
            <div class="data-management-panel">
                <div class="data-header">
                    <h2>${moduleInfo.icon || ''} ${moduleInfo.name}</h2>
                    <div class="data-actions">
                        ${actions.map(action => `
                            <button class="btn btn-primary" onclick="SmartUI.actions.${action.name}()">
                                ${action.icon || '📋'} ${action.label}
                            </button>
                        `).join('')}
                    </div>
                </div>
                
                <div class="data-table-container">
                    <table class="smart-table">
                        <thead>
                            <tr>
                                ${primaryModel.fields.map(field => `<th>${field.label || field.name}</th>`).join('')}
                            </tr>
                        </thead>
                        <tbody id="data-body">
                            <tr><td colspan="${primaryModel.fields.length}">加载中...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    }

    /**
     * 渲染工具函数界面
     */
    renderToolInterface(moduleInfo, actions) {
        return `
            <div class="tool-interface">
                <div class="tool-header">
                    <h2>${moduleInfo.icon || ''} ${moduleInfo.name}</h2>
                    <p>${moduleInfo.description}</p>
                </div>
                
                <div class="tool-actions">
                    ${actions.map(action => `
                        <div class="tool-action-card">
                            <h4>${action.label || action.name}</h4>
                            <p>${action.description || ''}</p>
                            <form class="tool-form" onsubmit="SmartUI.actions.executeAction(event, '${action.endpoint}', '${action.method || 'POST'}')">
                                ${(action.parameters || []).map(param => `
                                    <div class="form-group">
                                        ${param.label ? `<label>${param.label}</label>` : ''}
                                        ${this.renderInput(param)}
                                    </div>
                                `).join('')}
                                <button type="submit" class="btn btn-primary">执行</button>
                            </form>
                        </div>
                    `).join('')}
                </div>
            </div>
        `;
    }

    renderInput(param) {
        if (param.enum) {
            return `<select name="${param.name}">${param.enum.map(v => `<option value="${v}">${v}</option>`).join('')}</select>`;
        }
        if (param.type === 'number') {
            return `<input type="number" name="${param.name}" step="0.01" />`;
        }
        if (param.type === 'boolean') {
            return `<input type="checkbox" name="${param.name}" />`;
        }
        if (param.multiline) {
            return `<textarea name="${param.name}" rows="${param.rows || 4}"></textarea>`;
        }
        return `<input type="text" name="${param.name}" />`;
    }

    /**
     * 渲染默认界面
     */
    renderDefaultInterface(moduleInfo, actions) {
        return `
            <div class="default-interface">
                <div class="interface-header">
                    <h2>${moduleInfo.icon || ''} ${moduleInfo.name}</h2>
                    <p>${moduleInfo.description}</p>
                </div>
                
                <div class="action-grid">
                    ${actions.map(action => `
                        <div class="action-card" onclick="SmartUI.actions.${action.name}()">
                            <div class="action-icon">⚡</div>
                            <h4>${action.label || action.name}</h4>
                            <p>${action.description || ''}</p>
                        </div>
                    `).join('')}
                </div>
            </div>
        `;
    }

    /**
     * 绑定事件
     */
    bindEvents(actions, moduleName) {
        window.SmartUI = window.SmartUI || {};
        window.SmartUI.actions = window.SmartUI.actions || {};
        
        actions.forEach(action => {
            if (!window.SmartUI.actions[action.name]) {
                window.SmartUI.actions[action.name] = async () => {
                    try {
                        const response = await fetch(API_CONFIG.baseURL + action.endpoint, {
                            method: action.method || 'GET',
                            headers: { 'Content-Type': 'application/json' },
                            body: action.parameters?.length ? JSON.stringify({}) : undefined
                        });
                        
                        if (!response.ok) throw new Error(`HTTP ${response.status}`);
                        
                        const result = await response.json();
                        this.showToast('success', `${action.label || action.name}成功`);
                        return result;
                    } catch (error) {
                        this.showToast('error', `${action.label || action.name}失败：${error.message}`);
                        throw error;
                    }
                };
            }
        });
    }

    /**
     * 启动日志监控
     */
    async startLogMonitor(moduleName) {
        const logConsole = document.querySelector('#log-console');
        if (!logConsole) return;

        // 简单实现：每 3 秒轮询一次日志
        setInterval(async () => {
            try {
                const response = await fetch(`${API_CONFIG.baseURL}/modules/${moduleName}/logs`);
                if (response.ok) {
                    const logs = await response.json();
                    const consoleComponent = new this.components.LogConsole();
                    logConsole.innerHTML = consoleComponent.render(logs);
                }
            } catch (error) {
                // 忽略错误
            }
        }, 3000);
    }

    /**
     * 显示 Toast 提示
     */
    showToast(type, message) {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.textContent = message;
        toast.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 24px;
            background: ${type === 'success' ? '#52c41a' : '#ff4d4f'};
            color: white;
            border-radius: 4px;
            z-index: 9999;
            animation: slideIn 0.3s ease;
        `;
        
        document.body.appendChild(toast);
        setTimeout(() => {
            toast.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    /**
     * 猜测 UI 配置（当后端未提供时）
     */
    guessUIConfig(moduleInfo) {
        const category = moduleInfo.category || 'tool';
        
        const layoutMap = {
            'automation': 'dashboard',
            'data': 'list',
            'tool': 'form',
            'workflow': 'dashboard',
            'management': 'list'
        };
        
        return {
            layout: layoutMap[category] || 'default',
            icon: this.getIconForCategory(category),
            color: '#4361ee',
            sidebar: true,
            breadcrumb: true
        };
    }

    getIconForCategory(category) {
        const icons = {
            'automation': '🤖',
            'data': '📊',
            'tool': '🛠️',
            'workflow': '📋',
            'management': '⚙️'
        };
        return icons[category] || '📦';
    }
}

// 导出全局实例
if (typeof window !== 'undefined') {
    window.SmartUIRenderer = SmartUIRenderer;
}