cas / fw-pms-ai

/**
 * 主应用逻辑
 */

const App = {
    currentPage: 'dashboard',
    currentTaskNo: null,
    
    // 配件汇总表排序状态
    partSummarySort: {
        sortBy: 'total_suggest_amount',
        sortOrder: 'desc'
    },

    // 配件汇总表筛选状态
    partSummaryFilters: {
        page: 1,
        page_size: 50,
        part_code: '',
        priority: ''
    },

    // 侧边栏折叠状态
    isSidebarCollapsed: localStorage.getItem('sidebar-collapsed') === 'true',

    /**
     * 切换侧边栏折叠状态
     */
    toggleSidebarCollapse() {
        this.isSidebarCollapsed = !this.isSidebarCollapsed;
        localStorage.setItem('sidebar-collapsed', this.isSidebarCollapsed);
        this.applySidebarState();
    },

    /**
     * 应用侧边栏状态
     */
    applySidebarState() {
        const sidebar = document.querySelector('.sidebar');
        // 主内容区通过 CSS 选择器 .sidebar.collapsed + ... .main-content 自动调整
        // 或者我们需要手动给 main-content 加类，但 CSS 中用了兄弟选择器，
        // 不过兄弟选择器在这里可能不生效，因为中间隔了 .sidebar-overlay
        // 让我们看看 index.html 结构： sidebar, sidebar-overlay, main-content
        // CSS 选择器是 .sidebar.collapsed + .sidebar-overlay + .main-content
        // 这样是可以的。
        
        if (this.isSidebarCollapsed) {
            sidebar.classList.add('collapsed');
        } else {
            sidebar.classList.remove('collapsed');
        }
        
        // 触发 icon 刷新以确保显示正确（虽然 CSS 旋转已处理）
        lucide.createIcons();
    },

    /**
     * 切换侧边栏显示状态（移动端）
     */
    toggleSidebar(show) {
        const sidebar = document.querySelector('.sidebar');
        const overlay = document.getElementById('sidebar-overlay');
        
        if (show) {
            sidebar.classList.add('visible');
            overlay.classList.add('active');
        } else {
            sidebar.classList.remove('visible');
            overlay.classList.remove('active');
        }
    },

    /**
     * 应用配件筛选
     */
    applyPartFilters() {
        const partCode = document.getElementById('filter-part-code')?.value || '';
        const priorityElement = document.getElementById('filter-priority');
        const priority = priorityElement ? priorityElement.value : '';
        
        this.partSummaryFilters.part_code = partCode;
        this.partSummaryFilters.priority = priority;
        this.partSummaryFilters.page = 1; // 重置到第一页
        
        this.loadPartSummaries();
    },

    /**
     * 重置配件筛选
     */
    resetPartFilters() {
        this.partSummaryFilters.part_code = '';
        this.partSummaryFilters.priority = '';
        this.partSummaryFilters.page = 1;
        
        this.loadPartSummaries();
    },

    /**
     * 初始化应用
     */
    init() {
        this.bindEvents();
        this.handleRoute();
        this.applySidebarState(); // 初始化侧边栏状态
        window.addEventListener('hashchange', () => this.handleRoute());
        lucide.createIcons();
    },

    /**
     * 绑定全局事件
     */
    bindEvents() {
        // 刷新按钮
        document.getElementById('refresh-btn').addEventListener('click', () => {
            this.handleRoute();
        });

        // 模态框关闭
        document.getElementById('modal-close').addEventListener('click', () => {
            Components.closeModal();
        });
        document.getElementById('modal-overlay').addEventListener('click', (e) => {
            if (e.target.id === 'modal-overlay') {
                Components.closeModal();
            }
        });

        // 侧边栏切换
        const menuToggle = document.getElementById('menu-toggle');
        const sidebarOverlay = document.getElementById('sidebar-overlay');
        
        if (menuToggle) {
            menuToggle.addEventListener('click', () => {
                this.toggleSidebar(true);
            });
        }
        
        if (sidebarOverlay) {
            sidebarOverlay.addEventListener('click', () => {
                this.toggleSidebar(false);
            });
        }

        // 桌面端侧边栏折叠按钮
        const collapseBtn = document.getElementById('sidebar-collapse-btn');
        if (collapseBtn) {
            collapseBtn.addEventListener('click', () => {
                this.toggleSidebarCollapse();
            });
        }

        // 导航点击自动关闭侧边栏（移动端）
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', () => {
                if (window.innerWidth <= 1024) {
                    this.toggleSidebar(false);
                }
            });
        });
    },

    /**
     * 路由处理
     */
    handleRoute() {
        const hash = window.location.hash || '#/';
        const [, path, param] = hash.match(/#\/([^/]*)(?:\/(.*))?/) || [, '', ''];

        // 更新导航状态
        document.querySelectorAll('.nav-item').forEach(item => {
            item.classList.remove('active');
            if (item.dataset.page === (path || 'dashboard')) {
                item.classList.add('active');
            }
        });

        // 路由分发
        switch (path) {
            case 'tasks':
                if (param) {
                    this.showTaskDetail(param);
                } else {
                    this.showTaskList();
                }
                break;
            case '':
            default:
                this.showDashboard();
                break;
        }
    },

    /**
     * 更新面包屑
     */
    updateBreadcrumb(items) {
        const breadcrumb = document.getElementById('breadcrumb');
        breadcrumb.innerHTML = items.map((item, index) => {
            if (item.href) {
                return `<span class="breadcrumb-item"><a href="${item.href}">${item.text}</a></span>`;
            }
            return `<span class="breadcrumb-item">${item.text}</span>`;
        }).join('');
    },

    /**
     * 显示概览页面
     */
    async showDashboard() {
        this.currentPage = 'dashboard';
        this.updateBreadcrumb([{ text: '概览' }]);

        const container = document.getElementById('page-container');
        container.innerHTML = '<div class="stats-grid" id="stats-grid"></div><div id="recent-tasks"></div>';

        try {
            // 获取统计数据
            const [stats, tasksData] = await Promise.all([
                API.getStatsSummary().catch(() => ({})),
                API.getTasks({ page: 1, page_size: 5 }).catch(() => ({ items: [] })),
            ]);

            // 渲染统计卡片
            const statsGrid = document.getElementById('stats-grid');
            statsGrid.innerHTML = `
                ${Components.renderStatCard('list-checks', '总任务数', stats.total_tasks || 0, 'primary')}
                ${Components.renderStatCard('check-circle', '成功任务', stats.success_tasks || 0, 'success')}
                ${Components.renderStatCard('x-circle', '失败任务', stats.failed_tasks || 0, 'danger')}
                ${Components.renderStatCard('package', '建议配件', stats.total_parts || 0, 'info')}
                ${Components.renderStatCard('dollar-sign', '建议金额', Components.formatAmount(stats.total_suggest_amount), 'warning')}
            `;

            // 渲染最近任务
            this.renderRecentTasks(tasksData.items || []);

            lucide.createIcons();
        } catch (error) {
            Components.showToast('加载数据失败: ' + error.message, 'error');
        }
    },

    /**
     * 渲染最近任务
     */
    renderRecentTasks(tasks) {
        const container = document.getElementById('recent-tasks');
        
        if (!tasks.length) {
            container.innerHTML = `
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i data-lucide="clock"></i>
                            最近任务
                        </h3>
                    </div>
                    ${Components.renderEmptyState('inbox', '暂无任务', '还没有执行过任何补货建议任务')}
                </div>
            `;
            return;
        }

        container.innerHTML = `
            <div class="table-container">
                <div class="table-header">
                    <h3 class="table-title">最近任务</h3>
                    <a href="#/tasks" class="btn btn-secondary btn-sm">
                        查看全部
                        <i data-lucide="arrow-right"></i>
                    </a>
                </div>
                <div class="table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th>任务编号</th>
                                <th>商家组合</th>
                                <th>状态</th>
                                <th>配件数</th>
                                <th>建议金额</th>
                                <th>执行时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${tasks.map(task => `
                                <tr>
                                    <td>
                                        <a href="#/tasks/${task.task_no}" class="table-cell-link table-cell-mono">
                                            ${task.task_no}
                                        </a>
                                    </td>
                                    <td>${task.dealer_grouping_name || '-'}</td>
                                    <td>${Components.getStatusBadge(task.status, task.status_text)}</td>
                                    <td>${task.part_count}</td>
                                    <td class="table-cell-amount">${Components.formatAmount(task.actual_amount)}</td>
                                    <td class="table-cell-secondary">${Components.formatDuration(task.duration_seconds)}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    },

    /**
     * 显示任务列表页面
     */
    async showTaskList(page = 1) {
        this.currentPage = 'tasks';
        this.updateBreadcrumb([{ text: '任务列表' }]);

        const container = document.getElementById('page-container');
        container.innerHTML = '<div id="task-list-container"></div>';

        try {
            Components.showLoading();
            const data = await API.getTasks({ page, page_size: 20 });
            Components.hideLoading();

            this.renderTaskList(data);
            lucide.createIcons();
        } catch (error) {
            Components.hideLoading();
            Components.showToast('加载任务列表失败: ' + error.message, 'error');
        }
    },

    /**
     * 渲染任务列表
     */
    renderTaskList(data) {
        const container = document.getElementById('task-list-container');
        const { items, total, page, page_size } = data;

        if (!items.length) {
            container.innerHTML = `
                <div class="card">
                    ${Components.renderEmptyState('inbox', '暂无任务', '还没有执行过任何补货建议任务')}
                </div>
            `;
            return;
        }

        container.innerHTML = `
            <div class="table-container">
                <div class="table-header">
                    <h3 class="table-title">任务列表 (${total})</h3>
                </div>
                <div class="table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th>任务编号</th>
                                <th>商家组合</th>
                                <th>状态</th>
                                <th>配件数</th>
                                <th>建议金额</th>
                                <th>基准库销比</th>
                                <th>统计日期</th>
                                <th>执行时长</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${items.map(task => `
                                <tr>
                                    <td>
                                        <span class="table-cell-mono">${task.task_no}</span>
                                    </td>
                                    <td>${task.dealer_grouping_name || '-'}</td>
                                    <td>${Components.getStatusBadge(task.status, task.status_text)}</td>
                                    <td>${task.part_count}</td>
                                    <td class="table-cell-amount">${Components.formatAmount(task.actual_amount)}</td>
                                    <td>${Components.formatRatio(task.base_ratio)}</td>
                                    <td>${task.statistics_date || '-'}</td>
                                    <td class="table-cell-secondary">${Components.formatDuration(task.duration_seconds)}</td>
                                    <td>
                                        <a href="#/tasks/${task.task_no}" class="btn btn-ghost btn-sm">
                                            <i data-lucide="eye"></i>
                                            查看
                                        </a>
                                    </td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
                <div id="pagination-container"></div>
            </div>
        `;

        // 渲染分页
        const paginationContainer = document.getElementById('pagination-container');
        paginationContainer.innerHTML = Components.renderPagination(page, total, page_size);

        // 绑定分页事件
        paginationContainer.querySelectorAll('.pagination-btn[data-page]').forEach(btn => {
            btn.addEventListener('click', () => {
                const targetPage = parseInt(btn.dataset.page);
                if (targetPage && targetPage !== page) {
                    this.showTaskList(targetPage);
                }
            });
        });

        lucide.createIcons();
    },

    /**
     * 显示任务详情页面
     */
    async showTaskDetail(taskNo) {
        this.currentPage = 'task-detail';
        this.currentTaskNo = taskNo;
        this.updateBreadcrumb([
            { text: '任务列表', href: '#/tasks' },
            { text: taskNo },
        ]);

        const container = document.getElementById('page-container');
        container.innerHTML = '<div id="task-detail-container"></div>';

        try {
            Components.showLoading();
            
            const [task, partSummaries, logs] = await Promise.all([
                API.getTask(taskNo),
                API.getPartSummaries(taskNo, { page: 1, page_size: 100 }).catch(() => ({ items: [], total: 0 })),
                API.getTaskLogs(taskNo).catch(() => ({ items: [] })),
            ]);
            
            Components.hideLoading();
            this.renderTaskDetail(task, partSummaries, logs);
            lucide.createIcons();
        } catch (error) {
            Components.hideLoading();
            Components.showToast('加载任务详情失败: ' + error.message, 'error');
        }
    },

    /**
     * 渲染任务详情
     */
    renderTaskDetail(task, partSummaries, logs) {
        this._currentLogs = logs;
        this._partSummaries = partSummaries;
        const container = document.getElementById('task-detail-container');

        container.innerHTML = `
            <!-- 返回链接 -->
            <a href="#/tasks" class="back-link">
                <i data-lucide="arrow-left"></i>
                返回任务列表
            </a>

            <!-- 任务头部 -->
            <div class="detail-header">
                <div>
                    <h1 class="detail-title">
                        ${task.task_no}
                        ${Components.getStatusBadge(task.status, task.status_text)}
                    </h1>
                    <div class="detail-meta">
                        <span class="detail-meta-item">
                            <i data-lucide="building-2"></i>
                            ${task.dealer_grouping_name || '未知商家组合'}
                        </span>
                        <span class="detail-meta-item">
                            <i data-lucide="calendar"></i>
                            ${task.statistics_date || '-'}
                        </span>
                        <span class="detail-meta-item">
                            <i data-lucide="clock"></i>
                            ${Components.formatDuration(task.duration_seconds)}
                        </span>
                    </div>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                ${Components.renderStatCard('package', '建议配件数', task.part_count, 'primary')}
                ${Components.renderStatCard('dollar-sign', '建议金额', Components.formatAmount(task.actual_amount), 'success')}
                ${Components.renderStatCard('percent', '基准库销比', Components.formatRatio(task.base_ratio), 'info')}
                ${Components.renderStatCard('cpu', 'LLM Tokens', task.llm_total_tokens || 0, 'warning')}
            </div>

            <!-- 标签页 -->
            <div class="tabs" id="detail-tabs">
                <button class="tab active" data-tab="details">
                    <i data-lucide="list"></i>
                    配件明细
                </button>

                <button class="tab" data-tab="logs">
                    <i data-lucide="activity"></i>
                    执行日志
                </button>
                <button class="tab" data-tab="info">
                    <i data-lucide="info"></i>
                    任务信息
                </button>
            </div>

            <!-- 标签页内容 -->
            <div id="tab-content"></div>
        `;

        // 绑定标签页事件
        const tabs = container.querySelectorAll('.tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                this.renderTabContent(tab.dataset.tab, task, partSummaries);
            });
        });

        // 默认显示配件汇总
        this.renderTabContent('details', task, partSummaries);
    },

    /**
     * 渲染标签页内容
     */
    renderTabContent(tabName, task, details) {
        const container = document.getElementById('tab-content');

        switch (tabName) {
            case 'details':
                this.renderDetailsTab(container, details);
                break;

            case 'logs':
                this.renderLogsTab(container, this._currentLogs);
                break;
            case 'info':
                this.renderInfoTab(container, task);
                break;
        }

        lucide.createIcons();
    },

    /**
     * 加载配件汇总数据（支持排序和筛选）
     */
    async loadPartSummaries() {
        if (!this.currentTaskNo) return;
        
        try {
            const params = {
                page: this.partSummaryFilters.page,
                page_size: this.partSummaryFilters.page_size,
                sort_by: this.partSummarySort.sortBy,
                sort_order: this.partSummarySort.sortOrder,
                part_code: this.partSummaryFilters.part_code,
                priority: this.partSummaryFilters.priority
            };
            
            // 移除空值参数
            Object.keys(params).forEach(key => {
                if (params[key] === '' || params[key] === null || params[key] === undefined) {
                    delete params[key];
                }
            });

            const data = await API.getPartSummaries(this.currentTaskNo, params);
            this._partSummaries = data;
            
            const container = document.getElementById('tab-content');
            if (container) {
                this.renderDetailsTab(container, data);
                lucide.createIcons();
            }
        } catch (error) {
            Components.showToast('加载配件数据失败: ' + error.message, 'error');
        }
    },

    /**
     * 切换配件汇总排序
     */
    togglePartSummarySort(field) {
        if (this.partSummarySort.sortBy === field) {
            this.partSummarySort.sortOrder = this.partSummarySort.sortOrder === 'desc' ? 'asc' : 'desc';
        } else {
            this.partSummarySort.sortBy = field;
            this.partSummarySort.sortOrder = 'desc';
        }
        this.loadPartSummaries();
    },

    /**
     * 获取排序图标
     */
    getSortIcon(field) {
        if (this.partSummarySort.sortBy !== field) {
            return '<i data-lucide="arrow-up-down" class="sort-icon sort-icon-inactive"></i>';
        }
        if (this.partSummarySort.sortOrder === 'desc') {
            return '<i data-lucide="arrow-down" class="sort-icon sort-icon-active"></i>';
        }
        return '<i data-lucide="arrow-up" class="sort-icon sort-icon-active"></i>';
    },

    /**
     * 渲染配件明细标签页
     */
    renderDetailsTab(container, partSummaries) {
        const items = partSummaries.items || [];
        const { total, page, page_size } = partSummaries;

        container.innerHTML = `
            <div class="table-container">
                <div class="table-header" style="flex-wrap: wrap; gap: 1rem; height: auto;">
                    <div style="display: flex; align-items: center; gap: 1rem; flex: 1;">
                        <h3 class="table-title">配件补货建议 (商家组合维度) - ${total}个配件</h3>
                        <div class="table-header-hint">
                            <i data-lucide="info" style="width:14px;height:14px;"></i>
                            <span>点击表头可排序</span>
                        </div>
                    </div>
                    
                    <div class="filter-toolbar" style="display: flex; gap: 0.5rem; align-items: center;">
                        <input type="text" 
                            id="filter-part-code" 
                            class="input input-sm" 
                            placeholder="搜索配件编码..." 
                            value="${this.partSummaryFilters.part_code || ''}"
                            style="width: 150px;"
                        >
                        <select id="filter-priority" class="input input-sm" style="width: 120px;">
                            <option value="">所有优先级</option>
                            <option value="1" ${this.partSummaryFilters.priority == 1 ? 'selected' : ''}>急需补货</option>
                            <option value="2" ${this.partSummaryFilters.priority == 2 ? 'selected' : ''}>建议补货</option>
                            <option value="3" ${this.partSummaryFilters.priority == 3 ? 'selected' : ''}>可选补货</option>
                            <option value="0" ${this.partSummaryFilters.priority === '0' || this.partSummaryFilters.priority === 0 ? 'selected' : ''}>无需补货</option>
                        </select>
                        <button class="btn btn-secondary btn-sm" onclick="App.applyPartFilters()">
                            <i data-lucide="search" style="width: 14px; height: 14px; margin-right: 4px;"></i>
                            查询
                        </button>
                        <button class="btn btn-ghost btn-sm" onclick="App.resetPartFilters()">
                            重置
                        </button>
                    </div>
                </div>
                <div class="table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th style="width: 40px;"></th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('part_code')">
                                    配件编码 ${this.getSortIcon('part_code')}
                                </th>
                                <th>配件名称</th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('cost_price')">
                                    成本价 ${this.getSortIcon('cost_price')}
                                </th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('total_storage_cnt')">
                                    总库存 ${this.getSortIcon('total_storage_cnt')}
                                </th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('total_avg_sales_cnt')">
                                    总销量 ${this.getSortIcon('total_avg_sales_cnt')}
                                </th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('group_current_ratio')">
                                    商家组合库销比 ${this.getSortIcon('group_current_ratio')}
                                </th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('group_post_plan_ratio')">
                                    计划后库销比 ${this.getSortIcon('group_post_plan_ratio')}
                                </th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('shop_count')">
                                    门店数 ${this.getSortIcon('shop_count')}
                                </th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('need_replenishment_shop_count')">
                                    需补货门店 ${this.getSortIcon('need_replenishment_shop_count')}
                                </th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('total_suggest_cnt')">
                                    总建议数量 ${this.getSortIcon('total_suggest_cnt')}
                                </th>
                                <th class="sortable-th" onclick="App.togglePartSummarySort('total_suggest_amount')">
                                    总建议金额 ${this.getSortIcon('total_suggest_amount')}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            ${items.length > 0 ? items.map((item, index) => `
                                <tr class="part-summary-row" data-part-code="${item.part_code}" data-index="${index}">
                                    <td>
                                        <button class="btn btn-ghost btn-sm expand-btn" onclick="App.togglePartShops('${item.part_code}', ${index})">
                                            <i data-lucide="chevron-right" class="expand-icon"></i>
                                        </button>
                                    </td>
                                    <td class="table-cell-mono">${item.part_code}</td>
                                    <td>${item.part_name || '-'}</td>
                                    <td>${Components.formatAmount(item.cost_price)}</td>
                                    <td>${Components.formatNumber(item.total_storage_cnt)}</td>
                                    <td>${Components.formatNumber(item.total_avg_sales_cnt)}</td>
                                    <td>${Components.getRatioIndicator(item.group_current_ratio, 1.1)}</td>
                                    <td>${Components.formatRatio(item.group_post_plan_ratio)}</td>
                                    <td>${item.shop_count}</td>
                                    <td><strong style="color: var(--color-warning);">${item.need_replenishment_shop_count}</strong></td>
                                    <td><strong>${item.total_suggest_cnt}</strong></td>
                                    <td class="table-cell-amount">${Components.formatAmount(item.total_suggest_amount)}</td>
                                </tr>
                                <tr class="part-shops-row" id="shops-${index}" style="display: none;">
                                    <td colspan="12" style="padding: 0;">
                                        <div class="shops-container" id="shops-container-${index}">
                                            <div class="loading-shops">加载中...</div>
                                        </div>
                                    </td>
                                </tr>
                            `).join('') : `
                                <tr>
                                    <td colspan="12" style="text-align: center; padding: 2rem; color: var(--text-muted);">
                                        暂无符合条件的配件建议
                                    </td>
                                </tr>
                            `}
                        </tbody>
                    </table>
                </div>
                <div id="part-summary-pagination"></div>
            </div>

            <style>
                .part-summary-row { cursor: pointer; }
                .part-summary-row:hover { background: var(--bg-hover); }
                .expand-icon { transition: transform 0.2s; }
                .expand-icon.expanded { transform: rotate(90deg); }
                .shops-container { 
                    background: var(--bg-elevated); 
                    padding: var(--spacing-md); 
                    border-left: 3px solid var(--color-primary);
                    margin-left: var(--spacing-lg);
                }
                .loading-shops { 
                    color: var(--text-muted); 
                    padding: var(--spacing-sm); 
                }
                .shop-items-table {
                    width: 100%;
                    font-size: 0.875rem;
                }
                .shop-items-table th { 
                    background: var(--bg-subtle); 
                    font-weight: 600;
                    padding: var(--spacing-xs) var(--spacing-sm);
                }
                .shop-items-table td { 
                    padding: var(--spacing-xs) var(--spacing-sm); 
                }
                .part-decision-reason {
                    margin-bottom: var(--spacing-sm);
                    padding: var(--spacing-sm);
                    background: var(--bg-subtle);
                    border-radius: var(--radius-sm);
                    font-size: 0.875rem;
                    color: var(--text-secondary);
                }
            </style>
        `;

        // 渲染分页
        const paginationContainer = document.getElementById('part-summary-pagination');
        if (paginationContainer) {
            paginationContainer.innerHTML = Components.renderPagination(page, total, page_size);
            
            // 绑定分页事件
            paginationContainer.querySelectorAll('.pagination-btn[data-page]').forEach(btn => {
                btn.addEventListener('click', () => {
                    const targetPage = parseInt(btn.dataset.page);
                    if (targetPage && targetPage !== page) {
                        this.partSummaryFilters.page = targetPage;
                        this.loadPartSummaries();
                    }
                });
            });
        }
        
        // 绑定搜索框回车事件
        const partCodeInput = document.getElementById('filter-part-code');
        if (partCodeInput) {
            partCodeInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    App.applyPartFilters();
                }
            });
        }
    },

    /**
     * 切换配件门店展开/收起
     */
    async togglePartShops(partCode, index) {
        const row = document.getElementById(`shops-${index}`);
        const container = document.getElementById(`shops-container-${index}`);
        const btn = document.querySelector(`tr[data-index="${index}"] .expand-icon`);
        
        if (row.style.display === 'none') {
            row.style.display = 'table-row';
            btn.classList.add('expanded');
            
            try {
                const data = await API.getPartShopDetails(this.currentTaskNo, partCode);
                const partSummary = this._partSummaries.items.find(p => p.part_code === partCode);
                this.renderPartShops(container, data.items, partSummary);
                lucide.createIcons();
            } catch (error) {
                container.innerHTML = `<div class="error-text">加载失败: ${error.message}</div>`;
            }
        } else {
            row.style.display = 'none';
            btn.classList.remove('expanded');
        }
    },

    /**
     * 渲染配件门店明细
     */
    renderPartShops(container, shops, partSummary) {
        if (!shops || shops.length === 0) {
            container.innerHTML = '<div class="text-muted">无门店建议数据</div>';
            return;
        }

        container.innerHTML = `
            ${partSummary && partSummary.part_decision_reason ? `
                <div class="part-decision-reason">
                    <strong><i data-lucide="message-square" style="width:14px;height:14px;"></i> 配件补货理由:</strong>
                    ${partSummary.part_decision_reason}
                </div>
            ` : ''}
            <table class="shop-items-table">
                <thead>
                    <tr>
                        <th>库房</th>
                        <th>有效库存</th>
                        <th>月均销量</th>
                        <th>当前库销比</th>
                        <th>计划后库销比</th>
                        <th>建议数量</th>
                        <th>建议金额</th>
                        <th>建议理由</th>
                    </tr>
                </thead>
                <tbody>
                    ${shops.map(shop => `
                        <tr>
                            <td>${shop.shop_name || '-'}</td>
                            <td>${Components.formatNumber(shop.valid_storage_cnt)}</td>
                            <td>${Components.formatNumber(shop.avg_sales_cnt)}</td>
                            <td>${Components.getRatioIndicator(shop.current_ratio, shop.base_ratio)}</td>
                            <td>${Components.formatRatio(shop.post_plan_ratio)}</td>
                            <td><strong>${shop.suggest_cnt}</strong></td>
                            <td class="table-cell-amount">${Components.formatAmount(shop.suggest_amount)}</td>
                            <td style="min-width: 200px;">
                                ${shop.suggestion_reason || '-'}
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `;
    },

    /**
     * 渲染执行日志标签页
     */
    renderLogsTab(container, logs) {
        if (!logs || !logs.items || logs.items.length === 0) {
            container.innerHTML = `
                <div class="card">
                    ${Components.renderEmptyState('activity', '暂无执行日志', '该任务没有执行日志记录')}
                </div>
            `;
            return;
        }

        const items = logs.items;
        const totalTokens = items.reduce((sum, item) => sum + (item.llm_tokens || 0), 0);
        const totalTime = items.reduce((sum, item) => sum + (item.execution_time_ms || 0), 0);

        container.innerHTML = `
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i data-lucide="activity"></i>
                        执行日志时间线
                    </h3>
                    <div class="card-actions">
                        <span class="text-muted">总耗时: ${Components.formatDuration(totalTime / 1000)} | 总Tokens: ${totalTokens}</span>
                    </div>
                </div>
                <div class="timeline">
                    ${items.map((log, index) => `
                        <div class="timeline-item ${log.status === 2 ? 'timeline-item-error' : 'timeline-item-success'}">
                            <div class="timeline-marker">
                                <div class="timeline-icon">
                                    ${log.status === 1 ? '<i data-lucide="check-circle"></i>' : 
                                      log.status === 2 ? '<i data-lucide="x-circle"></i>' : 
                                      '<i data-lucide="loader"></i>'}
                                </div>
                                ${index < items.length - 1 ? '<div class="timeline-line"></div>' : ''}
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <span class="timeline-title">${Components.getStepNameDisplay(log.step_name)}</span>
                                    ${Components.getLogStatusBadge(log.status)}
                                </div>
                                <div class="timeline-meta">
                                    <span class="meta-item">
                                        <i data-lucide="clock"></i>
                                        ${log.execution_time_ms ? Components.formatDuration(log.execution_time_ms / 1000) : '-'}
                                    </span>
                                    ${log.llm_tokens > 0 ? `
                                        <span class="meta-item">
                                            <i data-lucide="cpu"></i>
                                            ${log.llm_tokens} tokens
                                        </span>
                                    ` : ''}
                                    ${log.retry_count > 0 ? `
                                        <span class="meta-item meta-warning">
                                            <i data-lucide="refresh-cw"></i>
                                            重试 ${log.retry_count} 次
                                        </span>
                                    ` : ''}
                                </div>
                                ${log.error_message ? `
                                    <div class="timeline-error">
                                        <i data-lucide="alert-triangle"></i>
                                        ${log.error_message}
                                    </div>
                                ` : ''}
                            </div>
                        </div>
                    `).join('')}
                </div>
            </div>
        `;
    },

    /**
     * 渲染任务信息标签页
     */
    renderInfoTab(container, task) {
        container.innerHTML = `
            <div class="detail-grid">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i data-lucide="info"></i>
                            基本信息
                        </h3>
                    </div>
                    <div class="info-list">
                        ${Components.renderInfoItem('任务编号', task.task_no)}
                        ${Components.renderInfoItem('集团ID', task.group_id)}
                        ${Components.renderInfoItem('商家组合ID', task.dealer_grouping_id)}
                        ${Components.renderInfoItem('商家组合名称', task.dealer_grouping_name)}
                        ${Components.renderInfoItem('品牌组合ID', task.brand_grouping_id)}
                        ${Components.renderInfoItem('统计日期', task.statistics_date)}
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i data-lucide="activity"></i>
                            执行信息
                        </h3>
                    </div>
                    <div class="info-list">
                        ${Components.renderInfoItem('状态', Components.getStatusBadge(task.status, task.status_text))}
                        ${Components.renderInfoItem('开始时间', task.start_time)}
                        ${Components.renderInfoItem('结束时间', task.end_time)}
                        ${Components.renderInfoItem('执行时长', Components.formatDuration(task.duration_seconds))}
                        ${Components.renderInfoItem('创建时间', task.create_time)}
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i data-lucide="cpu"></i>
                            LLM 信息
                        </h3>
                    </div>
                    <div class="info-list">
                        ${Components.renderInfoItem('LLM 提供商', task.llm_provider || '-')}
                        ${Components.renderInfoItem('模型名称', task.llm_model || '-')}
                        ${Components.renderInfoItem('Token 消耗', task.llm_total_tokens)}
                    </div>
                </div>
                
                ${task.error_message ? `
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color: var(--color-danger)">
                            <i data-lucide="alert-triangle"></i>
                            错误信息
                        </h3>
                    </div>
                    <pre style="background: var(--bg-elevated); padding: var(--spacing-md); border-radius: var(--radius-md); overflow-x: auto; color: var(--color-danger-light);">${task.error_message}</pre>
                </div>
                ` : ''}
            </div>
        `;
    },
};

// DOM 加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    App.init();
});

// 导出到全局
window.App = App;