/**
 * 工单管理页面组件
 */

export default class WorkOrders {
    constructor(container, route) {
        this.container = container;
        this.route = route;
        this.currentPage = 1;
        this.perPage = 20;
        this.currentStatus = 'all';
        this.searchQuery = '';
        this.init();
    }

    async init() {
        try {
            this.render();
            this.bindEvents();
            await this.loadWorkOrders();
        } catch (error) {
            console.error('WorkOrders init error:', error);
            this.showError(error);
        }
    }

    render() {
        this.container.innerHTML = `
            <div class="page-container">
                <div class="page-header">
                    <div>
                        <h1 class="page-title">工单管理</h1>
                        <p class="page-subtitle">工单列表与管理</p>
                    </div>
                    <div class="page-actions">
                        <button class="btn btn-primary" id="create-workorder-btn">
                            <i class="fas fa-plus me-2"></i>新建工单
                        </button>
                    </div>
                </div>

                <div class="page-content">

            <!-- 筛选和搜索 -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">状态筛选</label>
                            <select class="form-select" id="status-filter">
                                <option value="all">全部状态</option>
                                <option value="open">待处理</option>
                                <option value="in_progress">处理中</option>
                                <option value="resolved">已解决</option>
                                <option value="closed">已关闭</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">搜索</label>
                            <input type="text" class="form-control" id="search-input"
                                   placeholder="搜索工单标题、描述或ID...">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-outline-secondary w-100" id="search-btn">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 工单列表 -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">工单列表</h5>
                    <div id="workorder-count" class="text-muted small">共 0 个工单</div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="workorders-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>类别</th>
                                    <th>优先级</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="workorders-tbody">
                                <tr>
                                    <td colspan="7" class="text-center text-muted">
                                        <i class="fas fa-spinner fa-spin me-2"></i>加载中...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

                    <!-- 分页 -->
                    <nav id="pagination-nav" class="mt-4" style="display: none;">
                        <ul class="pagination justify-content-center" id="pagination-list">
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- 工单详情模态框 -->
            <div class="modal fade" id="workorder-detail-modal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header bg-light">
                            <h5 class="modal-title">
                                <i class="fas fa-file-alt text-primary me-2"></i>工单详情
                                <span class="badge bg-secondary ms-2" id="modal-status-badge">加载中...</span>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body p-0">
                            <div class="row g-0 h-100">
                                <!-- 左侧：基本信息 -->
                                <div class="col-md-7 border-end p-4">
                                    <h3 id="modal-title" class="mb-3">工单标题</h3>

                                    <div class="row g-3 mb-4">
                                        <div class="col-6 col-md-4">
                                            <label class="form-label text-muted small">工单ID</label>
                                            <div class="fw-bold" id="modal-id">-</div>
                                        </div>
                                        <div class="col-6 col-md-4">
                                            <label class="form-label text-muted small">优先级</label>
                                            <div id="modal-priority">-</div>
                                        </div>
                                        <div class="col-6 col-md-4">
                                            <label class="form-label text-muted small">分类</label>
                                            <div id="modal-category">-</div>
                                        </div>
                                        <div class="col-6 col-md-4">
                                            <label class="form-label text-muted small">创建时间</label>
                                            <div id="modal-created-at">-</div>
                                        </div>
                                        <div class="col-6 col-md-4">
                                            <label class="form-label text-muted small">用户/VIN</label>
                                            <div id="modal-user">-</div>
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <label class="form-label fw-bold">问题描述</label>
                                        <div class="bg-light p-3 rounded" id="modal-description" style="min-height: 80px;">
                                            -
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <label class="form-label fw-bold text-primary">
                                            <i class="fas fa-robot me-1"></i>AI 智能分析与建议
                                        </label>
                                        <div class="card border-primary-lt">
                                            <div class="card-body bg-azure-lt" id="modal-ai-analysis">
                                                暂无 AI 分析
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 右侧：对话历史/详细记录 -->
                                <div class="col-md-5 bg-light p-0 d-flex flex-column" style="height: 600px;">
                                    <div class="p-3 border-bottom bg-white">
                                        <h6 class="mb-0 fw-bold"><i class="fas fa-history me-2"></i>处理记录 / 对话历史</h6>
                                    </div>
                                    <div class="flex-grow-1 p-3 overflow-auto" id="modal-chat-history">
                                        <!-- 聊天记录将动态插入这里 -->
                                        <div class="text-center text-muted mt-5">
                                            <i class="fas fa-comments fa-2x mb-3"></i>
                                            <p>暂无相关对话记录</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="modal-edit-btn">编辑工单</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    bindEvents() {
        // 状态筛选
        document.getElementById('status-filter').addEventListener('change', () => {
            this.currentStatus = document.getElementById('status-filter').value;
            this.currentPage = 1;
            this.loadWorkOrders();
        });

        // 搜索
        document.getElementById('search-btn').addEventListener('click', () => {
            this.searchQuery = document.getElementById('search-input').value.trim();
            this.currentPage = 1;
            this.loadWorkOrders();
        });

        document.getElementById('search-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                document.getElementById('search-btn').click();
            }
        });

        // 新建工单
        document.getElementById('create-workorder-btn').addEventListener('click', () => {
            this.showCreateWorkOrderModal();
        });
    }

    async loadWorkOrders() {
        try {
            const params = new URLSearchParams({
                page: this.currentPage,
                per_page: this.perPage,
                status: this.currentStatus,
                search: this.searchQuery
            });

            const response = await fetch(`/api/workorders?${params}`);
            const data = await response.json();

            if (response.ok && data.success) {
                this.renderWorkOrders(data.workorders || []);
                this.renderPagination(data.pagination || {});
                document.getElementById('workorder-count').textContent = `共 ${data.total || 0} 个工单`;
            } else {
                this.showErrorInTable(data.message || '加载工单失败');
            }
        } catch (error) {
            console.error('加载工单失败:', error);
            this.showErrorInTable('网络错误');
        }
    }

    renderWorkOrders(workorders) {
        const tbody = document.getElementById('workorders-tbody');

        if (workorders.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-center text-muted">
                        <i class="fas fa-inbox me-2"></i>暂无工单
                    </td>
                </tr>
            `;
            return;
        }

        tbody.innerHTML = workorders.map(workorder => {
            const statusBadge = this.getStatusBadge(workorder.status);
            const priorityBadge = this.getPriorityBadge(workorder.priority);
            const createTime = new Date(workorder.created_at).toLocaleString();

            return `
                <tr>
                    <td>${workorder.order_id || workorder.id}</td>
                    <td>
                        <div class="fw-bold">${workorder.title}</div>
                        <small class="text-muted">${workorder.description?.substring(0, 50) || ''}...</small>
                    </td>
                    <td><span class="badge bg-secondary">${workorder.category || '未分类'}</span></td>
                    <td>${priorityBadge}</td>
                    <td>${statusBadge}</td>
                    <td>${createTime}</td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-primary" onclick="viewWorkOrder(${workorder.id})">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-outline-secondary" onclick="editWorkOrder(${workorder.id})">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-outline-danger" onclick="deleteWorkOrder(${workorder.id})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `;
        }).join('');
    }

    renderPagination(pagination) {
        const nav = document.getElementById('pagination-nav');
        const list = document.getElementById('pagination-list');

        if (!pagination || pagination.total_pages <= 1) {
            nav.style.display = 'none';
            return;
        }

        nav.style.display = 'block';

        let html = '';

        // 上一页
        if (pagination.has_prev) {
            html += `<li class="page-item"><a class="page-link" href="#" onclick="changePage(${pagination.page - 1})">上一页</a></li>`;
        }

        // 页码
        for (let i = Math.max(1, pagination.page - 2); i <= Math.min(pagination.total_pages, pagination.page + 2); i++) {
            const activeClass = i === pagination.page ? 'active' : '';
            html += `<li class="page-item ${activeClass}"><a class="page-link" href="#" onclick="changePage(${i})">${i}</a></li>`;
        }

        // 下一页
        if (pagination.has_next) {
            html += `<li class="page-item"><a class="page-link" href="#" onclick="changePage(${pagination.page + 1})">下一页</a></li>`;
        }

        list.innerHTML = html;
    }

    getStatusBadge(status) {
        const statusMap = {
            'open': '<span class="badge bg-danger">待处理</span>',
            'in_progress': '<span class="badge bg-warning">处理中</span>',
            'resolved': '<span class="badge bg-success">已解决</span>',
            'closed': '<span class="badge bg-secondary">已关闭</span>'
        };
        return statusMap[status] || `<span class="badge bg-light">${status}</span>`;
    }

    getPriorityBadge(priority) {
        const priorityMap = {
            'low': '<span class="badge bg-info">低</span>',
            'medium': '<span class="badge bg-warning">中</span>',
            'high': '<span class="badge bg-danger">高</span>',
            'urgent': '<span class="badge bg-dark">紧急</span>'
        };
        return priorityMap[priority] || `<span class="badge bg-light">${priority}</span>`;
    }

    showErrorInTable(message) {
        const tbody = document.getElementById('workorders-tbody');
        tbody.innerHTML = `
            <tr>
                <td colspan="7" class="text-center text-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>${message}
                </td>
            </tr>
        `;
    }

    showCreateWorkOrderModal() {
        // 这里应该显示创建工单的模态框
        if (window.showToast) {
            window.showToast('创建工单功能开发中', 'info');
        }
    }

    showError(error) {
        this.container.innerHTML = `
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body text-center">
                            <i class="fas fa-exclamation-triangle fa-3x text-danger mb-3"></i>
                            <h4>页面加载失败</h4>
                            <p class="text-muted">${error.message || '未知错误'}</p>
                            <button class="btn btn-primary" onclick="location.reload()">
                                <i class="fas fa-redo me-2"></i>重新加载
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}

// 全局函数供表格操作使用
window.viewWorkOrder = async function(id) {
    try {
        // 显示模态框（先显示加载状态）
        const modalEl = document.getElementById('workorder-detail-modal');
        const modal = new bootstrap.Modal(modalEl);
        modal.show();

        // 重置内容
        document.getElementById('modal-status-badge').innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        document.getElementById('modal-ai-analysis').innerHTML = '<div class="spinner-border spinner-border-sm text-primary"></div> 正在分析...';
        document.getElementById('modal-chat-history').innerHTML = '<div class="text-center mt-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>';

        // 获取详情
        const response = await fetch(`/api/workorders/${id}`);
        const result = await response.json();

        if (!result.success) {
            alert('获取工单详情失败');
            return;
        }

        const wo = result.workorder;

        // 填充基本信息
        document.getElementById('modal-title').textContent = wo.title;
        document.getElementById('modal-id').textContent = wo.order_id || wo.id;
        document.getElementById('modal-category').textContent = wo.category || '-';
        document.getElementById('modal-created-at').textContent = new Date(wo.created_at).toLocaleString();
        document.getElementById('modal-user').textContent = wo.user_id || '-';
        document.getElementById('modal-description').textContent = wo.description || '无描述';

        // 状态徽章
        const statusMap = {
            'open': '<span class="badge bg-danger">待处理</span>',
            'in_progress': '<span class="badge bg-warning">处理中</span>',
            'resolved': '<span class="badge bg-success">已解决</span>',
            'closed': '<span class="badge bg-secondary">已关闭</span>'
        };
        document.getElementById('modal-status-badge').innerHTML = statusMap[wo.status] || wo.status;

        // 优先级
        const priorityMap = {
            'low': '<span class="badge bg-info">低</span>',
            'medium': '<span class="badge bg-warning">中</span>',
            'high': '<span class="badge bg-danger">高</span>',
            'urgent': '<span class="badge bg-dark">紧急</span>'
        };
        document.getElementById('modal-priority').innerHTML = priorityMap[wo.priority] || wo.priority;

        // AI 分析/建议
        if (wo.resolution) {
            document.getElementById('modal-ai-analysis').innerHTML = `
                <div style="white-space: pre-wrap; font-family: inherit;">${wo.resolution}</div>
            `;
        } else {
             document.getElementById('modal-ai-analysis').textContent = '暂无 AI 分析建议';
        }

        // 渲染对话/处理历史 (模拟数据或真实数据)
        const historyContainer = document.getElementById('modal-chat-history');
        // 这里假设后端返回的详情中包含 history 或 timeline
        // 如果没有，暂时显示描述作为第一条记录

        let historyHtml = '';

        // 模拟一条初始记录
        historyHtml += `
            <div class="mb-3">
                <div class="d-flex align-items-center mb-1">
                    <span class="badge bg-blue-lt me-2">用户</span>
                    <small class="text-muted">${new Date(wo.created_at).toLocaleString()}</small>
                </div>
                <div class="bg-white p-3 border rounded">
                    ${wo.description}
                </div>
            </div>
        `;

        if (wo.timeline && wo.timeline.length > 0) {
            // 如果有真实的时间轴数据
            historyHtml = wo.timeline.map(item => `
                <div class="mb-3">
                    <div class="d-flex align-items-center mb-1">
                        <span class="badge bg-${item.type === 'ai' ? 'purple-lt' : 'blue-lt'} me-2">
                            ${item.author || (item.type === 'ai' ? 'AI 助手' : '系统')}
                        </span>
                        <small class="text-muted">${new Date(item.timestamp).toLocaleString()}</small>
                    </div>
                    <div class="bg-${item.type === 'ai' ? 'azure-lt' : 'white'} p-3 border rounded">
                        ${item.content}
                    </div>
                </div>
            `).join('');
        }

        historyContainer.innerHTML = historyHtml;

        // 绑定编辑按钮
        document.getElementById('modal-edit-btn').onclick = () => {
            modal.hide();
            editWorkOrder(id);
        };

    } catch (e) {
        console.error('查看工单详情失败', e);
        alert('查看详情失败: ' + e.message);
    }
};

window.editWorkOrder = function(id) {
    if (window.showToast) {
        window.showToast(`编辑工单 ${id} 功能开发中`, 'info');
    }
};

window.deleteWorkOrder = function(id) {
    if (!confirm(`确定要删除工单 ${id} 吗？`)) {
        return;
    }

    (async () => {
        try {
            const response = await fetch(`/api/workorders/${id}`, {
                method: 'DELETE'
            });
            const result = await response.json();

            if (response.ok && result.success) {
                if (window.showToast) {
                    window.showToast(result.message || `工单 ${id} 删除成功`, 'success');
                }
                // 通知当前页面刷新工单列表（保持当前页）
                const event = new CustomEvent('workorder-deleted', { detail: { id } });
                document.dispatchEvent(event);
            } else {
                if (window.showToast) {
                    window.showToast(result.message || '删除工单失败', 'error');
                } else {
                    alert(result.message || '删除工单失败');
                }
            }
        } catch (error) {
            console.error('删除工单失败:', error);
            if (window.showToast) {
                window.showToast('删除失败，请检查网络或查看控制台日志', 'error');
            } else {
                alert('删除失败，请检查网络或查看控制台日志');
            }
        }
    })();
};

window.changePage = function(page) {
    // 重新加载当前页面实例
    const event = new CustomEvent('changePage', { detail: { page } });
    document.dispatchEvent(event);
};

// 监听删除事件，触发当前 WorkOrders 列表刷新（保持当前页）
document.addEventListener('workorder-deleted', () => {
    const event = new CustomEvent('reloadWorkOrders');
    document.dispatchEvent(event);
});