// 全局状态
let currentStep = 0;
let isExpanded = false;
let demoRunning = false;

// 步骤配置
const steps = [
    {
        type: 'thinking',
        icon: 'brain',
        summary: '我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息...',
        fullText: '我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息。搜索关键词应该包括"AI技术"、"人工智能"、"2026"、"发展趋势"等。',
        duration: 2000
    },
    {
        type: 'tool',
        icon: 'search',
        summary: '搜索：AI技术发展趋势 2026',
        duration: 2500
    },
    {
        type: 'thinking',
        icon: 'brain',
        summary: '搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析...',
        fullText: '搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...\n\n在执行之前，我需要确保命令的安全性和有效性。curl命令是一个常用的网络请求工具，可以帮助我获取网页内容。我会添加适当的参数来确保请求的稳定性，比如设置超时时间、用户代理等。\n\n同时，我还需要考虑如何解析返回的HTML内容，提取出关键信息。可能需要使用一些文本处理工具，如grep、sed或awk来过滤和格式化数据。',
        duration: 2000
    },
    {
        type: 'tool',
        icon: 'terminal',
        summary: '执行命令：获取网页内容并分析',
        duration: 2500
    },
    {
        type: 'thinking',
        icon: 'brain',
        summary: '很好，我已经收集到了足够的信息。现在我可以整理这些内容，为用户提供一个清晰、全面的答案...',
        fullText: '很好，我已经收集到了足够的信息。现在我可以整理这些内容，为用户提供一个清晰、全面的答案。我会按照趋势的重要性和影响力来组织内容。',
        duration: 2000
    }
];

// 最终输出文本
const finalOutputText = `根据我的搜索和分析，2026年AI技术的主要发展趋势包括：

1. **多模态AI模型的普及**：能够同时处理文本、图像、音频等多种数据类型的AI模型将成为主流。

2. **AI安全性和可解释性**：随着AI应用的广泛部署，确保AI系统的安全性和决策的可解释性变得越来越重要。

3. **边缘AI计算**：将AI计算能力部署到边缘设备，实现更快的响应速度和更好的隐私保护。

这些趋势将深刻影响各行各业的数字化转型进程。`;

// 开始演示
async function startDemo() {
    if (demoRunning) return;

    demoRunning = true;
    resetDemo();

    // 显示等待动画
    const placeholder = document.getElementById('generatingPlaceholder');
    placeholder.style.display = 'flex';

    await sleep(1500);

    // 隐藏等待动画，显示摘要包装器
    placeholder.style.display = 'none';
    const summaryWrapper = document.getElementById('summaryWrapper');
    summaryWrapper.style.display = 'flex';
    summaryWrapper.classList.add('running');

    // 执行每个步骤
    for (let i = 0; i < steps.length; i++) {
        currentStep = i;
        await executeStep(i);
    }

    // 完成后移除运行状态
    await sleep(500);
    summaryWrapper.classList.remove('running');

    // 如果展开状态，显示最后一步
    if (isExpanded) {
        await showDetailStep(currentStep, true);
    } else {
        // 折叠状态下，摘要显示第一步内容
        updateSummary(steps[0]);
    }

    await sleep(800);

    // 显示最终输出（流式）
    const textOutput = document.getElementById('textOutput');
    textOutput.style.display = 'block';
    setTimeout(() => {
        textOutput.classList.add('show');
    }, 50);

    // 流式输出最终文本
    await streamText(document.querySelector('.text-content'), finalOutputText, 20);

    demoRunning = false;
}

// 执行单个步骤
async function executeStep(stepIndex) {
    const step = steps[stepIndex];

    // 更新摘要（仅在折叠状态下）
    if (!isExpanded) {
        // 流式输出摘要文本
        await streamSummary(step);
    }

    // 如果展开状态，显示详细内容
    if (isExpanded) {
        await showDetailStep(stepIndex, true);

        // 如果是思考类型，流式输出完整内容
        if (step.type === 'thinking' && step.fullText) {
            const stepBody = document.querySelector(`.step-item[data-step="${stepIndex + 1}"] .step-body`);
            if (stepBody) {
                stepBody.textContent = '';
                await streamText(stepBody, step.fullText, 30);
                // 更新竖线高度
                updateLineHeight(stepIndex + 1);
            }
        }
    }

    // 显示下一个步骤的竖线（如果有下一个步骤）
    if (stepIndex < steps.length - 1) {
        if (isExpanded) {
            // 展开状态：显示当前步骤的竖线
            const currentStepItem = document.querySelector(`.step-item[data-step="${stepIndex + 1}"]`);
            if (currentStepItem) {
                const line = currentStepItem.querySelector('.step-line');
                if (line) {
                    updateLineHeight(stepIndex + 1);
                }
            }
        } else {
            // 折叠状态：显示摘要的竖线（暂时不需要，因为只在展开时才有步骤）
        }
    }

    await sleep(step.duration);
}

// 流式输出摘要文本
async function streamSummary(step) {
    const summaryIcon = document.getElementById('summaryIcon');
    const summaryText = document.getElementById('summaryText');

    // 更新图标
    summaryIcon.innerHTML = getIconSVG(step.icon);

    // 流式输出文本
    summaryText.textContent = '';
    await streamText(summaryText, step.summary, 30);
}

// 流式输出文本
async function streamText(element, text, speed = 30) {
    element.textContent = '';
    for (let i = 0; i < text.length; i++) {
        element.textContent += text[i];
        await sleep(speed);
    }
}

// 更新摘要
function updateSummary(step) {
    const summaryIcon = document.getElementById('summaryIcon');
    const summaryText = document.getElementById('summaryText');

    // 更新图标
    summaryIcon.innerHTML = getIconSVG(step.icon);

    // 更新文本
    summaryText.textContent = step.summary;
}

// 显示详细步骤
async function showDetailStep(stepIndex, isNewStep = false) {
    const stepItem = document.querySelector(`.step-item[data-step="${stepIndex + 1}"]`);
    if (!stepItem) return;

    // 添加动画类
    if (isNewStep) {
        stepItem.classList.add('animated');
    } else {
        stepItem.classList.add('instant');
    }

    // 显示步骤
    stepItem.style.display = 'flex';

    // 等待动画
    await sleep(isNewStep ? 100 : 10);

    // 如果有下一个步骤，显示当前步骤的竖线
    if (stepIndex < steps.length - 1) {
        updateLineHeight(stepIndex + 1);
    }

    await sleep(isNewStep ? 250 : 10);
}

// 更新竖线高度
function updateLineHeight(stepIndex) {
    const stepItem = document.querySelector(`.step-item[data-step="${stepIndex}"]`);
    if (!stepItem) return;

    const line = stepItem.querySelector('.step-line');
    const stepContent = stepItem.querySelector('.step-content');
    if (!line || !stepContent) return;

    // 获取内容的实际高度
    const contentHeight = stepContent.offsetHeight;

    // 如果是最后一个步骤，不需要竖线
    if (stepIndex >= steps.length) {
        line.style.height = '0';
        return;
    }

    // 计算竖线高度：内容高度 + 间距
    const gap = 16;
    const lineHeight = Math.max(contentHeight + gap, 40);
    line.style.height = `${lineHeight}px`;
}

// 切换展开/折叠
async function toggleExpand() {
    const summaryWrapper = document.getElementById('summaryWrapper');
    if (summaryWrapper.style.display === 'none') return;

    isExpanded = !isExpanded;

    if (isExpanded) {
        // 展开：显示完整文本，隐藏摘要文本
        summaryWrapper.classList.add('expanded');

        const summaryText = document.getElementById('summaryText');
        const summaryTextFull = document.getElementById('summaryTextFull');
        const summaryLine = document.getElementById('summaryLine');
        const stepsContainer = document.getElementById('stepsContainer');

        // 切换文本显示
        summaryText.style.display = 'none';
        summaryTextFull.style.display = 'block';

        // 显示连接线
        await sleep(50);
        summaryLine.style.height = '20px';

        // 显示步骤容器
        stepsContainer.style.display = 'block';
        await sleep(50);
        stepsContainer.classList.add('show');

        // 快速显示已完成的步骤
        for (let i = 0; i <= currentStep; i++) {
            const isCurrentStep = i === currentStep && demoRunning;
            await showDetailStep(i, isCurrentStep);
            if (!isCurrentStep) {
                await sleep(30); // 已有内容快速出现
            }
        }
    } else {
        // 折叠：显示摘要文本，隐藏完整文本
        summaryWrapper.classList.remove('expanded');

        const summaryText = document.getElementById('summaryText');
        const summaryTextFull = document.getElementById('summaryTextFull');
        const summaryLine = document.getElementById('summaryLine');
        const stepsContainer = document.getElementById('stepsContainer');

        // 隐藏步骤容器
        stepsContainer.classList.remove('show');
        await sleep(250);
        stepsContainer.style.display = 'none';

        // 隐藏连接线
        summaryLine.style.height = '0';

        // 切换文本显示
        summaryText.style.display = 'block';
        summaryTextFull.style.display = 'none';

        // 更新摘要为第一步内容（不是当前步骤）
        updateSummary(steps[0]);

        // 重置所有步骤显示
        document.querySelectorAll('.step-item').forEach(item => {
            item.style.display = 'none';
            item.classList.remove('instant', 'animated');
            const line = item.querySelector('.step-line');
            if (line) {
                line.style.height = '0';
            }
        });
    }
}

// 展开思考内容
function expandThinking(stepIndex) {
    const thinkingContent = document.getElementById(`thinkingContent${stepIndex}`);
    const thinkingContentFull = document.getElementById(`thinkingContentFull${stepIndex}`);

    thinkingContent.style.display = 'none';
    thinkingContentFull.style.display = 'block';

    // 重新计算并更新竖线高度
    setTimeout(() => {
        updateLineHeight(stepIndex);
    }, 50);
}

// 收起思考内容
function collapseThinking(stepIndex) {
    const thinkingContent = document.getElementById(`thinkingContent${stepIndex}`);
    const thinkingContentFull = document.getElementById(`thinkingContentFull${stepIndex}`);

    thinkingContent.style.display = 'block';
    thinkingContentFull.style.display = 'none';

    // 重新计算并更新竖线高度
    setTimeout(() => {
        updateLineHeight(stepIndex);
    }, 50);
}

// 重置演示
function resetDemo() {
    currentStep = 0;
    isExpanded = false;
    demoRunning = false;

    // 隐藏所有元素
    document.getElementById('generatingPlaceholder').style.display = 'none';

    const summaryWrapper = document.getElementById('summaryWrapper');
    summaryWrapper.style.display = 'none';
    summaryWrapper.classList.remove('running', 'expanded');

    const summaryText = document.getElementById('summaryText');
    const summaryTextFull = document.getElementById('summaryTextFull');
    summaryText.style.display = 'block';
    summaryTextFull.style.display = 'none';

    const summaryLine = document.getElementById('summaryLine');
    summaryLine.style.height = '0';

    const stepsContainer = document.getElementById('stepsContainer');
    stepsContainer.style.display = 'none';
    stepsContainer.classList.remove('show');

    const textOutput = document.getElementById('textOutput');
    textOutput.style.display = 'none';
    textOutput.classList.remove('show');
    const textContent = textOutput.querySelector('.text-content');
    if (textContent) {
        textContent.innerHTML = `<p>根据我的搜索和分析，2026年AI技术的主要发展趋势包括：</p>
                        <ol>
                            <li><strong>多模态AI模型的普及</strong>：能够同时处理文本、图像、音频等多种数据类型的AI模型将成为主流。</li>
                            <li><strong>AI安全性和可解释性</strong>：随着AI应用的广泛部署，确保AI系统的安全性和决策的可解释性变得越来越重要。</li>
                            <li><strong>边缘AI计算</strong>：将AI计算能力部署到边缘设备，实现更快的响应速度和更好的隐私保护。</li>
                        </ol>
                        <p>这些趋势将深刻影响各行各业的数字化转型进程。</p>`;
    }

    // 重置所有步骤
    document.querySelectorAll('.step-item').forEach(item => {
        item.style.display = 'none';
        item.classList.remove('instant', 'animated');
        const line = item.querySelector('.step-line');
        if (line) {
            line.style.height = '0';
        }
    });

    // 重置思考内容
    document.querySelectorAll('.thinking-content').forEach(item => {
        item.style.display = 'block';
    });
    document.querySelectorAll('.thinking-content-full').forEach(item => {
        item.style.display = 'none';
    });

    // 重置摘要文本
    updateSummary(steps[0]);
}

// 获取图标SVG
function getIconSVG(iconType) {
    const icons = {
        brain: '<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path><path d="M12 6v6l4 2"></path>',
        search: '<circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path>',
        terminal: '<polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line>'
    };
    return icons[iconType] || icons.brain;
}

// 工具函数：延迟
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// 点击摘要包装器切换展开/折叠
document.getElementById('summaryWrapper').addEventListener('click', toggleExpand);