LandPPT/src/landppt/web/templates/todo_board.html

{% extends "base.html" %}

{% block title %}TODO 看板 - {{ todo_board.title }} - LandPPT{% endblock %}

{% block extra_css %}
<style>
/* Outline view specific styles */
.outline-card {
    transition: all 0.3s ease;
}

.outline-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.slide-number {
    background: #3498db;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: bold;
}

.slide-number.large {
    width: 32px;
    height: 32px;
    font-size: 1em;
}

.slide-type-tag {
    background: #e8f4fd;
    color: #3498db;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
}

.content-points {
    margin: 0;
    padding-left: 20px;
    color: #555;
    line-height: 1.6;
}

.content-points li {
    margin-bottom: 5px;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Button hover effects */
.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Animation for loading states */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 脉冲动画 */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* 波浪动画 */
@keyframes wave {
    0%, 60%, 100% { transform: initial; }
    30% { transform: translateY(-15px); }
}

/* 渐变背景动画 */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 打字机效果 */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* 闪烁光标 */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 进度条动画 */
@keyframes progressBar {
    0% { width: 0%; }
    25% { width: 30%; }
    50% { width: 60%; }
    75% { width: 85%; }
    100% { width: 100%; }
}

/* 浮动动画 */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* 等待动画容器样式 */
.loading-container {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(-45deg, #f8f9fa, #e9ecef, #f8f9fa, #e9ecef);
    background-size: 400% 400%;
    animation: gradientShift 4s ease infinite;
    border-radius: 15px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-height: 500px;
    overflow: hidden;
}

.loading-icon {
    font-size: 2.5em;
    color: #3498db;
    margin-bottom: 15px;
    animation: pulse 2s ease-in-out infinite;
}

.loading-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

/* 创意AI大脑思考动画 */
.brain-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    height: 180px;
    perspective: 1000px;
    position: relative;
}

.ai-brain {
    position: relative;
    width: 120px;
    height: 120px;
    animation: brainFloat 4s ease-in-out infinite;
}

@keyframes brainFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.brain-core {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    overflow: hidden;
}

.brain-core::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: brainPulse 2s ease-in-out infinite;
}

@keyframes brainPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.brain-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% {
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    50% {
        text-shadow: 0 2px 20px rgba(255,255,255,0.5), 0 0 30px rgba(102, 126, 234, 0.8);
    }
}

/* 思维连接线动画 */
.neural-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.neural-line {
    position: absolute;
    background: linear-gradient(90deg, transparent 0%, rgba(102, 126, 234, 0.6) 50%, transparent 100%);
    border-radius: 2px;
    opacity: 0;
    animation: neuralPulse 3s ease-in-out infinite;
}

.neural-line:nth-child(1) {
    top: 30%;
    left: -20%;
    width: 60px;
    height: 2px;
    transform: rotate(45deg);
    animation-delay: 0s;
}

.neural-line:nth-child(2) {
    top: 60%;
    right: -20%;
    width: 50px;
    height: 2px;
    transform: rotate(-30deg);
    animation-delay: 0.5s;
}

.neural-line:nth-child(3) {
    bottom: 20%;
    left: -15%;
    width: 45px;
    height: 2px;
    transform: rotate(-45deg);
    animation-delay: 1s;
}

.neural-line:nth-child(4) {
    top: 20%;
    right: -15%;
    width: 55px;
    height: 2px;
    transform: rotate(60deg);
    animation-delay: 1.5s;
}

@keyframes neuralPulse {
    0%, 70% {
        opacity: 0;
        transform: scale(0.5) rotate(var(--rotation, 0deg));
    }
    10%, 60% {
        opacity: 1;
        transform: scale(1) rotate(var(--rotation, 0deg));
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(var(--rotation, 0deg));
    }
}

/* 思考气泡动画 */
.thought-bubbles {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 60px;
}

.thought-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    opacity: 0;
    animation: bubbleFloat 4s ease-in-out infinite;
}

.thought-bubble:nth-child(1) {
    width: 12px;
    height: 12px;
    bottom: 0;
    left: 45%;
    animation-delay: 0s;
}

.thought-bubble:nth-child(2) {
    width: 18px;
    height: 18px;
    bottom: 15px;
    left: 35%;
    animation-delay: 0.3s;
}

.thought-bubble:nth-child(3) {
    width: 24px;
    height: 24px;
    bottom: 35px;
    left: 25%;
    animation-delay: 0.6s;
}

@keyframes bubbleFloat {
    0%, 80% {
        opacity: 0;
        transform: translateY(20px) scale(0.5);
    }
    10%, 70% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.8);
    }
}

/* 进度环动画 */
.progress-ring {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 140px;
    height: 140px;
}

.progress-ring-circle {
    fill: none;
    stroke: rgba(102, 126, 234, 0.3);
    stroke-width: 3;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    animation: progressRotate 8s linear infinite;
}

.progress-ring-progress {
    fill: none;
    stroke: #667eea;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    animation: progressFill 8s ease-in-out infinite;
}

@keyframes progressRotate {
    0% {
        transform: rotate(-90deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

@keyframes progressFill {
    0%, 20% {
        stroke-dashoffset: 440;
    }
    80%, 100% {
        stroke-dashoffset: 0;
    }
}

/* 文字生成效果 */
.text-generation {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    text-align: center;
}

.generating-text {
    color: #667eea;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0;
    animation: textFade 4s ease-in-out infinite;
}

.generating-dots {
    color: #667eea;
    font-size: 16px;
    letter-spacing: 2px;
    animation: dotsAnimation 2s ease-in-out infinite;
}

@keyframes textFade {
    0%, 20% {
        opacity: 0;
        transform: translateY(10px);
    }
    30%, 70% {
        opacity: 1;
        transform: translateY(0px);
    }
    80%, 100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes dotsAnimation {
    0%, 20% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}

/* 完成状态动画 */
.ai-brain.completed {
    animation: brainComplete 2s ease-out forwards;
}

.ai-brain.completed .brain-core {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 50%, #58d68d 100%);
    animation: completionGlow 1.5s ease-out;
}

.ai-brain.completed .brain-icon::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: white;
    animation: checkmarkAppear 1s ease-out;
}

@keyframes brainComplete {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.2);
    }
    100% {
        transform: translateY(-5px) scale(1.1);
    }
}

@keyframes completionGlow {
    0% {
        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 12px 48px rgba(39, 174, 96, 0.6);
    }
    100% {
        box-shadow: 0 10px 40px rgba(39, 174, 96, 0.4);
    }
}

@keyframes checkmarkAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.progress-container {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    margin: 20px 0;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    border-radius: 3px;
    animation: progressBar 15s ease-in-out infinite;
}

.loading-tips {
    margin-top: 20px;
    padding: 12px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.loading-tips h5 {
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 1em;
}

.loading-tips p {
    color: #666;
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 表单美化 */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #2c3e50;
    font-weight: 600;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 按钮美化 */
.btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
}

.btn-outline-primary {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
}

.btn-outline-primary:hover {
    background: #667eea;
    color: white;
}

.btn-secondary {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
}

/* 小尺寸按钮 */
.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    gap: 6px;
}

.btn-xs {
    padding: 6px 12px;
    font-size: 12px;
    gap: 4px;
}

/* 大纲相关按钮样式 */
.btn-outline-warning {
    background: transparent;
    color: #f39c12;
    border: 2px solid #f39c12;
}

.btn-outline-warning:hover {
    background: #f39c12;
    color: white;
}

.btn-info {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .scenarios-hero {
        padding: 30px 15px;
        margin: -20px -15px 30px -15px;
    }

    .scenarios-hero h2 {
        font-size: 1.8em;
    }

    #requirements-section {
        margin: 15px;
        padding: 25px 20px;
    }

    .btn-group-custom {
        flex-direction: column;
        gap: 10px;
    }

    .btn-group-custom a {
        width: 100%;
        justify-content: center;
    }
}
</style>
{% endblock %}

{% block content %}
<!-- 页面头部美化 -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px 0; margin: -20px -20px 30px -20px; text-align: center; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"dots\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23dots)\"/></svg></div>
    <div style="position: relative; z-index: 1;">
        <h2 style="font-size: 2em; font-weight: 700; margin-bottom: 12px; text-shadow: 0 2px 10px rgba(0,0,0,0.3);">📋 {{ todo_board.title }}</h2>
        <p style="opacity: 0.9; font-size: 1em;">项目ID: <code style="background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 6px; font-family: 'Consolas', monospace; font-size: 0.9em;">{{ todo_board.task_id }}</code></p>
    </div>
</div>

    <!-- Requirements Confirmation Section -->
    {% set requirements_stage = todo_board.stages | selectattr('id', 'equalto', 'requirements_confirmation') | first %}
    {% if requirements_stage and requirements_stage.status == 'pending' %}
    <div id="requirements-section" style="max-width: 900px; margin: 15px auto; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 16px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 1px solid rgba(102, 126, 234, 0.15);">
        <div style="text-align: center; margin-bottom: 25px;">
            <div style="display: inline-block; background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 12px 20px; border-radius: 40px; margin-bottom: 15px; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);">
                <h3 style="margin: 0; font-weight: 600; font-size: 1.1em;">📝 需求确认</h3>
            </div>
            <p style="color: #7f8c8d; margin-bottom: 0; font-size: 1em; line-height: 1.5;">请确认以下信息，AI将根据您的确认生成定制化的PPT内容</p>
        </div>

        <!-- Loading indicator for requirements form -->
        <div id="ai-loading" class="loading-container" style="display: block;">
            <div class="loading-icon">
                <i class="fas fa-cog"></i>
            </div>
            <div class="loading-title">正在准备需求表单</div>
            <div class="progress-container">
                <div class="progress-bar" style="animation-duration: 2s;"></div>
            </div>
            <div class="loading-tips">
                <h5><i class="fas fa-info-circle"></i> 提示</h5>
                <p>请稍候，系统正在为您准备项目需求确认表单...</p>
            </div>
        </div>

        <form id="requirements-form" style="text-align: left; display: none;" enctype="multipart/form-data">

            <!-- Content Source Selection -->
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 8px; color: #2c3e50; font-weight: bold;">内容来源选择</label>
                <div style="display: flex; gap: 15px; margin-bottom: 15px;">
                    <label style="display: flex; align-items: center; cursor: pointer;">
                        <input type="radio" name="content_source" value="manual" checked onchange="toggleContentSourceTodo()" style="margin-right: 8px;">
                        <span>手动输入主题</span>
                    </label>
                    <label style="display: flex; align-items: center; cursor: pointer;">
                        <input type="radio" name="content_source" value="file" onchange="toggleContentSourceTodo()" style="margin-right: 8px;">
                        <span>从文件生成</span>
                    </label>
                </div>
            </div>

            <!-- File Upload Section (hidden by default) -->
            <div id="file-upload-section-todo" style="display: none; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                <label style="display: block; margin-bottom: 8px; color: #2c3e50; font-weight: bold;">📁 上传文件 (支持多文件)</label>
                <input type="file" id="file_upload_todo" name="file_upload" accept=".pdf,.docx,.txt,.md,.jpg,.jpeg,.png,.xlsx,.csv"
                       multiple
                       style="width: 100%; padding: 8px; border: 2px dashed #3498db; background: #f8f9fa; border-radius: 6px;">
                <small style="color: #7f8c8d; display: block; margin-top: 5px;">
                    📌 支持同时选择多个文件 | 支持 PDF、DOCX、TXT、MD 等格式 | 单个文件最大 100MB
                </small>

                <!-- Multiple Files List Display -->
                <div id="selected-files-list-todo" style="margin-top: 10px; display: none;">
                    <div style="background: white; padding: 10px; border-radius: 6px; border: 1px solid #e0e0e0;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                            <strong style="color: #2c3e50;">已选择的文件：</strong>
                            <button type="button" onclick="clearAllFiles()"
                                    style="padding: 4px 12px; background: #e74c3c; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">
                                清除所有
                            </button>
                        </div>
                        <div id="files-list-container-todo" style="max-height: 200px; overflow-y: auto;">
                            <!-- Files will be listed here -->
                        </div>
                    </div>
                </div>

                <!-- File Processing Options -->
                <div id="file-processing-options-todo" style="margin-top: 15px; padding: 15px; background: white; border-radius: 8px; border: 1px solid #e9ecef; display: none;">
                    <h6 style="margin-bottom: 10px; color: #2c3e50;">文件处理选项</h6>

                    <div style="display: flex; flex-wrap: wrap; gap: 15px;">
                        <!-- PDF专用处理方式选项 -->
                        <div id="pdf-processing-mode-todo" style="display: none; flex: 1; min-width: 200px;">
                            <label style="display: block; margin-bottom: 5px; color: #2c3e50; font-weight: normal;">处理方式：</label>
                            <select name="file_processing_mode" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                <option value="markitdown">标准处理 (MarkItDown)</option>
                                <option value="magic_pdf">高质量处理 (Mineru)</option>
                            </select>
                        </div>

                        <!-- 通用解析深度选项 -->
                        <div style="flex: 1; min-width: 200px;">
                            <label style="display: block; margin-bottom: 5px; color: #2c3e50; font-weight: normal;">解析深度：</label>
                            <select name="content_analysis_depth" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                <option value="fast" selected>快速解析</option>
                                <option value="standard">标准解析</option>
                                <option value="deep">深度解析</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                <div>
                    <label style="display: block; margin-bottom: 8px; color: #2c3e50; font-weight: bold;">主题 (Topic)</label>
                    <input type="text" id="topic" name="topic" value="{{ todo_board.title.split(' - ')[0] if ' - ' in todo_board.title else todo_board.title }}"
                           style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;" required>
                    <small style="color: #7f8c8d; font-size: 12px; margin-top: 5px; display: block;">文件上传时可留空，将自动从文件提取标题</small>
                </div>
                <div>
                    <label style="display: block; margin-bottom: 8px; color: #2c3e50; font-weight: bold;">目标受众 (Target Audience)</label>
                    <div style="margin-bottom: 10px;">
                        <select id="audience_type" name="audience_type" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;" onchange="toggleCustomAudience()" required>
                            <option value="">请选择目标受众</option>
                            <option value="企业管理层">企业管理层</option>
                            <option value="技术团队">技术团队</option>
                            <option value="销售团队">销售团队</option>
                            <option value="学生群体">学生群体</option>
                            <option value="学术研究者">学术研究者</option>
                            <option value="投资人">投资人</option>
                            <option value="客户群体">客户群体</option>
                            <option value="培训学员">培训学员</option>
                            <option value="项目团队">项目团队</option>
                            <option value="行业专家">行业专家</option>
                            <option value="普通大众">普通大众</option>
                            <option value="自定义">自定义受众</option>
                        </select>
                    </div>
                    <!-- 自定义受众输入框 -->
                    <div id="custom-audience-section" style="display: none;">
                        <input type="text" id="custom_audience" name="custom_audience"
                               placeholder="请描述您的目标受众，例如：初级程序员、产品经理、高中生等..."
                               style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;">
                        <small style="color: #7f8c8d; font-size: 12px; margin-top: 5px; display: block;">详细描述您的目标受众特征，AI将据此调整内容深度和表达方式</small>
                    </div>
                </div>
            </div>





            <div style="margin-bottom: 25px;">
                <label style="display: block; margin-bottom: 8px; color: #2c3e50; font-weight: bold;">PPT页数设置 (Page Count)</label>
                <p style="font-size: 12px; color: #7f8c8d; margin-bottom: 15px;">选择PPT的页数生成方式：</p>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                    <div class="page-count-option active" data-mode="ai_decide" style="border: 2px solid #3498db; border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                        <div style="font-size: 24px; margin-bottom: 8px;">🤖</div>
                        <h5 style="color: #2c3e50; margin-bottom: 5px;">AI智能决定</h5>
                        <p style="font-size: 12px; color: #7f8c8d;">AI根据内容深度和逻辑结构自主决定最合适的页数</p>
                    </div>
                    <div class="page-count-option" data-mode="custom_range" style="border: 2px solid #ddd; border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                        <div style="font-size: 24px; margin-bottom: 8px;">📊</div>
                        <h5 style="color: #2c3e50; margin-bottom: 5px;">自定义范围</h5>
                        <p style="font-size: 12px; color: #7f8c8d;">在指定范围内生成PPT页数</p>
                    </div>
                </div>
                <input type="hidden" id="page_count_mode" name="page_count_mode" value="ai_decide">

                <!-- Custom range section (hidden by default) -->
                <div id="custom-range-section" style="display: none; margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                    <div style="display: flex; gap: 15px; align-items: center;">
                        <div style="flex: 1;">
                            <label style="display: block; margin-bottom: 5px; color: #2c3e50; font-weight: bold;">最少页数</label>
                            <input type="number" id="min_pages" name="min_pages" value="8" min="5" max="50"
                                   style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px;">
                        </div>
                        <div style="flex: 1;">
                            <label style="display: block; margin-bottom: 5px; color: #2c3e50; font-weight: bold;">最多页数</label>
                            <input type="number" id="max_pages" name="max_pages" value="15" min="5" max="50"
                                   style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px;">
                        </div>
                    </div>
                    <p style="font-size: 12px; color: #7f8c8d; margin-top: 10px; margin-bottom: 0;">
                        建议范围：5-50页，AI会在此范围内生成最合适的页数
                    </p>
                </div>
            </div>

            <div style="margin-bottom: 25px;">
                <label style="display: block; margin-bottom: 8px; color: #2c3e50; font-weight: bold;">PPT风格 (Style)</label>
                <p style="font-size: 12px; color: #7f8c8d; margin-bottom: 15px;">选择适合您内容的PPT风格：</p>
                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                    <div class="style-option" data-style="general" style="border: 2px solid #ddd; border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                        <div style="font-size: 24px; margin-bottom: 8px;">📋</div>
                        <h5 style="color: #2c3e50; margin-bottom: 5px;">通用场景</h5>
                        <p style="font-size: 12px; color: #7f8c8d;">适用于商务汇报、学术演讲等通用场景</p>
                    </div>
                    <div class="style-option" data-style="keynote" style="border: 2px solid #ddd; border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                        <div style="font-size: 24px; margin-bottom: 8px;">🎯</div>
                        <h5 style="color: #2c3e50; margin-bottom: 5px;">发布会</h5>
                        <p style="font-size: 12px; color: #7f8c8d;">Apple风格发布会，卡片式布局，科技感强</p>
                    </div>
                    <div class="style-option" data-style="custom" style="border: 2px solid #ddd; border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                        <div style="font-size: 24px; margin-bottom: 8px;">🎨</div>
                        <h5 style="color: #2c3e50; margin-bottom: 5px;">自定义风格</h5>
                        <p style="font-size: 12px; color: #7f8c8d;">使用自定义提示词定制独特风格</p>
                    </div>
                </div>
                <input type="hidden" id="ppt_style" name="ppt_style" value="general" required>

                <!-- Custom style prompt input (hidden by default) -->
                <div id="custom-style-section" style="display: none; margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                    <label style="display: block; margin-bottom: 8px; color: #2c3e50; font-weight: bold;">自定义风格提示词</label>
                    <textarea id="custom_style_prompt" name="custom_style_prompt"
                              style="width: 100%; height: 120px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; resize: vertical;"
                              placeholder="请输入您希望的PPT风格描述，例如：简约现代风格，使用蓝色主题，卡片式布局..."></textarea>
                    <p style="font-size: 12px; color: #7f8c8d; margin-top: 5px;">详细描述您期望的PPT风格，AI将根据您的描述生成相应的设计</p>
                </div>
            </div>

            <div style="text-align: center;">
                <button type="submit" id="confirm-requirements-btn"
                        style="background: #27ae60; color: white; border: none; padding: 15px 30px; border-radius: 8px; font-size: 16px; cursor: pointer; font-weight: bold;">
                    🚀 确认需求并跳转到大纲生成
                </button>
            </div>
        </form>
    </div>
    {% endif %}

<!-- Project Actions -->
<div style="text-align: center; margin-bottom: 40px;">
    <div style="display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; background: white; padding: 20px; border-radius: 16px; box-shadow: 0 8px 25px rgba(0,0,0,0.08);">
        <a href="/projects/{{ todo_board.task_id }}" style="background: linear-gradient(135deg, #3498db, #2980b9); color: white; text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 3px 12px rgba(52, 152, 219, 0.25); display: flex; align-items: center; gap: 6px; font-size: 0.9em;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 5px 16px rgba(52, 152, 219, 0.35)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(52, 152, 219, 0.25)'">
            📊 项目详情
        </a>

        {% if todo_board.overall_progress >= 100 %}
        <a href="/projects/{{ todo_board.task_id }}/preview" target="_blank" style="background: linear-gradient(135deg, #27ae60, #229954); color: white; text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 3px 12px rgba(39, 174, 96, 0.25); display: flex; align-items: center; gap: 6px; font-size: 0.9em;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 5px 16px rgba(39, 174, 96, 0.35)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(39, 174, 96, 0.25)'">
            🔍 预览 PPT
        </a>
        <a href="/projects/{{ todo_board.task_id }}/edit" target="_blank" style="background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 3px 12px rgba(231, 76, 60, 0.25); display: flex; align-items: center; gap: 6px; font-size: 0.9em;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 5px 16px rgba(231, 76, 60, 0.35)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(231, 76, 60, 0.25)'">
            ✏️ 编辑 PPT
        </a>
        {% endif %}

        <a href="/projects" style="background: linear-gradient(135deg, #95a5a6, #7f8c8d); color: white; text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 3px 12px rgba(149, 165, 166, 0.25); display: flex; align-items: center; gap: 6px; font-size: 0.9em;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 5px 16px rgba(149, 165, 166, 0.35)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(149, 165, 166, 0.25)'">
            📋 返回项目列表
        </a>
    </div>
</div>

<!-- Task execution is now handled directly in the stage cards -->

<style>
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.todo-stage {
    transition: all 0.3s ease;
}

.todo-stage:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-stream:hover {
    background: #2980b9 !important;
    transform: scale(1.05);
}

.task-item {
    transition: all 0.3s ease;
}

.task-item.active {
    background: #e8f4fd !important;
    border-left: 4px solid #3498db;
}

.output-cursor {
    display: inline-block;
}

.output-cursor.hidden {
    display: none;
}

.style-option {
    transition: all 0.3s ease;
}

.style-option:hover {
    border-color: #3498db !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}

.style-option.selected {
    border-color: #3498db !important;
    background: #e8f4fd !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3);
}

.page-count-option {
    transition: all 0.3s ease;
}

.page-count-option:hover {
    border-color: #3498db !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}

.page-count-option.active {
    border-color: #3498db !important;
    background: #e8f4fd !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3);
}
</style>
{% endblock %}

{% block extra_js %}
<script>
let currentProjectId = '{{ todo_board.task_id }}';
let outlineGenerationStarted = false; // 防止重复调用大纲生成

// Page count selection functionality
function initializePageCountSelection() {
    const pageCountOptions = document.querySelectorAll('.page-count-option');
    const pageCountModeInput = document.getElementById('page_count_mode');
    const customRangeSection = document.getElementById('custom-range-section');

    pageCountOptions.forEach(option => {
        option.addEventListener('click', function() {
            // Remove active class from all options
            pageCountOptions.forEach(opt => opt.classList.remove('active'));

            // Add active class to clicked option
            this.classList.add('active');

            // Update hidden input value
            const selectedMode = this.getAttribute('data-mode');
            pageCountModeInput.value = selectedMode;

            // Show/hide custom range section
            if (selectedMode === 'custom_range') {
                customRangeSection.style.display = 'block';
            } else {
                customRangeSection.style.display = 'none';
            }

            // Update visual styles
            updatePageCountStyles();
        });
    });

    // Set default selection
    const defaultOption = document.querySelector('.page-count-option[data-mode="ai_decide"]');
    if (defaultOption) {
        defaultOption.classList.add('active');
    }

    // Initialize visual styles
    updatePageCountStyles();
}

// Update page count option visual styles
function updatePageCountStyles() {
    const pageCountOptions = document.querySelectorAll('.page-count-option');
    pageCountOptions.forEach(option => {
        if (option.classList.contains('active')) {
            option.style.borderColor = '#3498db';
            option.style.background = '#e8f4fd';
        } else {
            option.style.borderColor = '#ddd';
            option.style.background = 'white';
        }
    });
}

// Style selection functionality
function initializeStyleSelection() {
    const styleOptions = document.querySelectorAll('.style-option');
    const pptStyleInput = document.getElementById('ppt_style');
    const customStyleSection = document.getElementById('custom-style-section');

    styleOptions.forEach(option => {
        option.addEventListener('click', function() {
            // Remove selected class from all options
            styleOptions.forEach(opt => opt.classList.remove('selected'));

            // Add selected class to clicked option
            this.classList.add('selected');

            // Update hidden input value
            const selectedStyle = this.getAttribute('data-style');
            pptStyleInput.value = selectedStyle;

            // Show/hide custom style section
            if (selectedStyle === 'custom') {
                customStyleSection.style.display = 'block';
            } else {
                customStyleSection.style.display = 'none';
            }
        });
    });

    // Set default selection
    const defaultOption = document.querySelector('.style-option[data-style="general"]');
    if (defaultOption) {
        defaultOption.classList.add('selected');
    }
}

// Initialize outline display for completed stages
function initializeOutlineDisplay() {
    // Check if outline generation stage is completed and has content
    const outlineStage = document.querySelector('[data-stage-id="outline_generation"]');
    if (outlineStage) {
        const statusIcon = outlineStage.querySelector('.stage-status-icon');
        if (statusIcon && statusIcon.textContent === '✓') {
            // Stage is completed, ensure output area is visible
            const outputDiv = document.getElementById('outline-output-outline_generation');
            if (outputDiv) {
                outputDiv.style.display = 'block';

                // Hide cursor for completed stage
                const cursorDiv = document.getElementById('outline-cursor-outline_generation');
                if (cursorDiv) {
                    cursorDiv.style.display = 'none';
                }
            }
        }
    }
}

// AI大脑思考动画控制函数
let brainAnimationInterval = null;
let activeBrains = new Set();

function startBrainAnimation(prefix = '') {
    const brainId = prefix ? `loading-brain-${prefix}` : 'loading-brain';
    const brain = document.getElementById(brainId);

    if (!brain) return;

    // 添加到活动大脑集合
    activeBrains.add(prefix);

    // 启动大脑思考状态
    brain.classList.remove('completed');

    // 创建动态文字效果
    function updateThinkingText() {
        if (!activeBrains.has(prefix)) return;

        const textElement = brain.querySelector('.generating-text');
        if (textElement) {
            const texts = [
                '正在分析内容结构',
                '正在构建逻辑框架',
                '正在优化大纲层次',
                '正在完善内容要点',
                '正在生成PPT大纲'
            ];

            const randomText = texts[Math.floor(Math.random() * texts.length)];
            textElement.textContent = randomText;
        }
    }

    // 每3秒更新思考文字
    updateThinkingText();
    const textInterval = setInterval(updateThinkingText, 3000);

    // 存储定时器引用
    if (!brainAnimationInterval) {
        brainAnimationInterval = {};
    }
    brainAnimationInterval[prefix] = textInterval;
}

function stopBrainAnimation(prefix = '') {
    const brainId = prefix ? `loading-brain-${prefix}` : 'loading-brain';
    const brain = document.getElementById(brainId);

    // 从活动大脑集合中移除
    activeBrains.delete(prefix);

    if (brain) {
        brain.classList.add('completed');

        // 更新完成文字
        const textElement = brain.querySelector('.generating-text');
        if (textElement) {
            textElement.textContent = '大纲生成完成';
        }

        const dotsElement = brain.querySelector('.generating-dots');
        if (dotsElement) {
            dotsElement.textContent = '✓';
        }
    }

    // 清除文字更新定时器
    if (brainAnimationInterval && brainAnimationInterval[prefix]) {
        clearInterval(brainAnimationInterval[prefix]);
        delete brainAnimationInterval[prefix];
    }
}

// 兼容旧的函数名
function startLoadingAnimation(prefix = '') {
    startBrainAnimation(prefix);
}

function stopLoadingAnimation(prefix = '') {
    stopBrainAnimation(prefix);
}

// 兼容漏斗动画函数名
function startFunnelAnimation(prefix = '') {
    startBrainAnimation(prefix);
}

function stopFunnelAnimation(prefix = '') {
    stopBrainAnimation(prefix);
}

// 兼容书本动画函数名
function startBookAnimation(prefix = '') {
    startBrainAnimation(prefix);
}

function stopBookAnimation(prefix = '') {
    stopBrainAnimation(prefix);
}



// 显示成功完成动画
function showBrainCompletion(prefix = '') {
    const brainId = prefix ? `loading-brain-${prefix}` : 'loading-brain';
    const brain = document.getElementById(brainId);

    if (brain) {
        // 停止思考动画并显示完成状态
        stopBrainAnimation(prefix);
        brain.classList.add('completed');

        // 2秒后隐藏整个动画容器
        setTimeout(() => {
            if (brain.parentNode && brain.parentNode.parentNode) {
                brain.parentNode.parentNode.style.display = 'none';
            }
        }, 2000);
    }
}

// 兼容旧的函数名
function showBookCompletion(prefix = '') {
    showBrainCompletion(prefix);
}

function showFunnelCompletion(prefix = '') {
    showBrainCompletion(prefix);
}

// Handle requirements form submission and AI suggestions loading
document.addEventListener('DOMContentLoaded', function() {
    // Initialize outline display if already completed
    initializeOutlineDisplay();

    // Initialize page count selection
    initializePageCountSelection();

    // Initialize style selection
    initializeStyleSelection();

    // Check if we should auto-start outline generation
    checkAutoStartOutline();

    // 直接显示需求表单，不再加载AI建议
    showRequirementsForm();

    const requirementsForm = document.getElementById('requirements-form');
    if (requirementsForm) {
        requirementsForm.addEventListener('submit', async function(e) {
            e.preventDefault();

            const formData = new FormData(requirementsForm);
            const confirmBtn = document.getElementById('confirm-requirements-btn');

            const requirementsSection = document.getElementById('requirements-section');
            if (requirementsSection) {
                requirementsSection.style.display = 'none';
            }

            
            showOutlineSection();

            
            try {
                const response = await fetch(`/projects/${currentProjectId}/confirm-requirements`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (response.ok && result.status === 'success') {
                    
                    setTimeout(() => {
                        const contentSource = document.querySelector('input[name="content_source"]:checked');
                        if (contentSource && contentSource.value === 'file') {
                            
                            startFileOutlineGeneration();
                        } else {
                            
                            startOutlineGenerationNew();
                        }
                    }, 1000); 
                } else {
                    console.error('Requirements confirmation failed:', result.message);
                    
                    alert('需求确认失败: ' + (result.message || '未知错误'));
                    
                    const requirementsSection = document.getElementById('requirements-section');
                    const outlineSection = document.getElementById('outline-section');
                    if (requirementsSection) requirementsSection.style.display = 'block';
                    if (outlineSection) outlineSection.style.display = 'none';
                }
            } catch (error) {
                console.error('Error confirming requirements:', error);
                alert('需求确认失败: ' + error.message);
                
                const requirementsSection = document.getElementById('requirements-section');
                const outlineSection = document.getElementById('outline-section');
                if (requirementsSection) requirementsSection.style.display = 'block';
                if (outlineSection) outlineSection.style.display = 'none';
            }
        });
    }
});

// Check if we should auto-start outline generation
function checkAutoStartOutline() {
    // 防止重复调用
    if (outlineGenerationStarted) {
        console.log('Outline generation already started, skipping auto-start check...');
        return;
    }

    // Check if outline section is visible and outline generation should start
    const outlineSection = document.getElementById('outline-section');
    if (outlineSection && outlineSection.style.display !== 'none') {
        // Check if outline generation is in running state
        const outlineCursor = document.getElementById('outline-cursor');
        if (outlineCursor && outlineCursor.style.display !== 'none') {
            // Auto-start outline generation
            setTimeout(() => {
                startOutlineGenerationNew();
            }, 500);
        }
    }
}

// Show outline section
function showOutlineSection() {
    // Create and show outline section if it doesn't exist
    let outlineSection = document.getElementById('outline-section');
    if (!outlineSection) {
        outlineSection = document.createElement('div');
        outlineSection.id = 'outline-section';
        outlineSection.style.cssText = 'max-width: 1200px; margin: 20px auto; background: white; border-radius: 15px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);';

        outlineSection.innerHTML = `
            <div style="text-align: center; margin-bottom: 30px;">
                <h3 style="color: #2c3e50; margin-bottom: 10px;">
                    <i class="fas fa-brain"></i> PPT 大纲生成
                </h3>
                <p style="color: #7f8c8d;">AI正在为您生成专业的PPT大纲，您可以实时查看并编辑</p>
            </div>

            <div style="background: #f8f9fa; border-radius: 10px; padding: 20px; border: 2px solid #e9ecef;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <h5 style="color: #2c3e50; margin: 0;">
                        <i class="fas fa-list-alt"></i> 大纲内容
                        <span id="outline-status" style="color: #f39c12; font-size: 0.8em; margin-left: 10px; display: none;">
                        </span>
                    </h5>

                    <div style="display: flex; align-items: center; gap: 10px;">
                        <!-- View Toggle Buttons - Always show -->
                        <div style="display: flex; background: #e9ecef; border-radius: 5px; padding: 2px;">
                            <button id="json-view-btn-new" onclick="switchOutlineViewNew('json')"
                                    style="background: #3498db; color: white; border: none; padding: 5px 10px; border-radius: 3px; font-size: 11px; cursor: pointer; transition: all 0.3s ease;">
                                <i class="fas fa-code"></i> JSON
                            </button>
                            <button id="outline-view-btn-new" onclick="switchOutlineViewNew('outline')"
                                    style="background: transparent; color: #6c757d; border: none; padding: 5px 10px; border-radius: 3px; font-size: 11px; cursor: pointer; transition: all 0.3s ease;">
                                <i class="fas fa-list-ul"></i> 大纲视图
                            </button>
                        </div>

                        <!-- Action Buttons -->
                        <div id="outline-actions" style="display: none;">
                            <button onclick="regenerateOutlineNew()" class="btn btn-sm btn-outline-warning" style="margin-right: 8px;">
                                <i class="fas fa-sync"></i> 重新生成大纲
                            </button>
                            <button onclick="editOutlineNew()" class="btn btn-sm btn-outline-primary" style="margin-right: 8px;">
                                <i class="fas fa-edit"></i> 编辑大纲
                            </button>
                        </div>
                    </div>
                </div>

                <!-- JSON View (default) -->
                <div id="outline-content-display" style="background: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 25px; min-height: 400px; max-height: 600px; overflow-y: auto; font-family: 'Microsoft YaHei', Arial, sans-serif; line-height: 1.8; font-size: 14px; display: block; position: relative;">
                    <div id="outline-placeholder" class="loading-container">
                        <div class="loading-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <div class="loading-title">AI正在生成PPT大纲</div>

                        <div class="brain-container">
                            <div class="ai-brain" id="loading-brain-dynamic">
                                <div class="brain-core">
                                    <div class="brain-icon">🧠</div>
                                </div>
                                <svg class="progress-ring" width="140" height="140">
                                    <circle class="progress-ring-circle" cx="70" cy="70" r="70"></circle>
                                    <circle class="progress-ring-progress" cx="70" cy="70" r="70"></circle>
                                </svg>
                                <div class="neural-network">
                                    <div class="neural-line" style="--rotation: 45deg;"></div>
                                    <div class="neural-line" style="--rotation: -30deg;"></div>
                                    <div class="neural-line" style="--rotation: -45deg;"></div>
                                    <div class="neural-line" style="--rotation: 60deg;"></div>
                                </div>
                                <div class="thought-bubbles">
                                    <div class="thought-bubble"></div>
                                    <div class="thought-bubble"></div>
                                    <div class="thought-bubble"></div>
                                </div>
                                <div class="text-generation">
                                    <div class="generating-text">正在分析内容结构</div>
                                    <div class="generating-dots">• • •</div>
                                </div>
                            </div>
                        </div>

                        <div class="loading-tips">
                            <h5><i class="fas fa-lightbulb"></i> 小贴士</h5>
                            <p>AI正在根据您的需求智能生成PPT大纲，包括标题、内容要点和逻辑结构。生成完成后您可以实时编辑和调整。</p>
                        </div>
                    </div>

                    <!-- 光标元素移到内容容器内部，使用绝对定位，默认隐藏 -->
                    <div id="outline-cursor" style="position: absolute; bottom: 20px; right: 20px; display: none; width: 2px; height: 16px; background: #3498db; animation: blink 1s infinite; pointer-events: none;"></div>
                </div>

                <!-- Outline View -->
                <div id="outline-view-new" style="display: none;">
                    <!-- Outline Toolbar -->
                    <div id="outline-toolbar-new" style="background: #f8f9fa; border: 1px solid #dee2e6; border-bottom: none; border-radius: 8px 8px 0 0; padding: 10px; display: flex; align-items: center; justify-content: space-between;">
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <span style="color: #2c3e50; font-weight: 500;">
                                <i class="fas fa-list-ul"></i> PPT大纲预览
                            </span>
                            <span style="color: #7f8c8d; font-size: 12px;">支持简洁视图和详细视图切换</span>
                        </div>
                        <div style="display: flex; gap: 8px;">
                            <button onclick="toggleOutlineViewModeNew()" class="btn btn-xs btn-info" title="切换视图模式">
                                <i class="fas fa-eye"></i> <span id="viewToggleTextNew">详细视图</span>
                            </button>
                            <button onclick="editOutlineNew()" class="btn btn-xs btn-primary" title="修改大纲">
                                <i class="fas fa-edit"></i> 修改大纲
                            </button>
                            <button onclick="exportOutlineJSONNew()" class="btn btn-xs btn-success" title="导出JSON">
                                <i class="fas fa-download"></i> 导出JSON
                            </button>
                        </div>
                    </div>

                    <div id="outline-container-new" style="background: white; border: 1px solid #dee2e6; border-radius: 0 0 8px 8px; height: 500px; overflow-y: auto; position: relative;">
                        <div id="outline-content-new" style="width: 100%; height: 100%; padding: 20px;">
                            <!-- 大纲内容将在这里显示 -->
                        </div>
                        <div id="outline-loading-new" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #7f8c8d; display: none;">
                            <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 15px;"></i>
                            <p>正在加载大纲...</p>
                        </div>
                        <div id="outline-error-new" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #e74c3c; display: none;">
                            <i class="fas fa-exclamation-triangle fa-2x" style="margin-bottom: 15px;"></i>
                            <p>大纲加载失败，请检查数据格式</p>
                        </div>
                        <div id="outline-empty-new" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #7f8c8d; display: block;">
                            <i class="fas fa-list-ul fa-3x" style="margin-bottom: 20px; opacity: 0.3;"></i>
                            <h4 style="color: #95a5a6; margin-bottom: 15px;">大纲视图</h4>
                            <p style="margin-bottom: 20px;">大纲生成完成后，结构化内容将在这里显示</p>
                            <p style="font-size: 14px; color: #bdc3c7;">支持简洁视图和详细视图切换，可编辑大纲内容</p>
                        </div>
                    </div>
                </div>



                <div id="outline-edit-area" style="display: none; margin-top: 20px;">
                    <h6 style="color: #2c3e50; margin-bottom: 15px;">
                        <i class="fas fa-code"></i> 编辑大纲JSON
                    </h6>
                    <div style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin-bottom: 10px; font-size: 12px; color: #6c757d;">
                        <i class="fas fa-info-circle"></i>
                        请编辑JSON格式的大纲。确保JSON格式正确，包含title和slides数组。
                    </div>
                    <textarea id="outline-editor"
                              style="width: 100%; height: 400px; padding: 15px; border: 1px solid #ddd; border-radius: 8px;
                                     font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; line-height: 1.4;
                                     resize: vertical; background: #f8f9fa;"
                              placeholder='请输入JSON格式的大纲，例如：
{
  "title": "PPT标题",
  "slides": [
    {
      "page_number": 1,
      "title": "页面标题",
      "content_points": ["要点1", "要点2"],
      "slide_type": "title"
    }
  ]
}'></textarea>
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
                        <div style="font-size: 12px; color: #6c757d;">
                            <i class="fas fa-lightbulb"></i>
                            提示：slide_type可选值：title, content, agenda, thankyou
                        </div>
                        <div>
                            <button onclick="validateJSON()" class="btn btn-sm btn-info" style="margin-right: 8px;">
                                <i class="fas fa-check-circle"></i> 验证JSON
                            </button>
                            <button onclick="cancelEditOutlineNew()" class="btn btn-sm btn-secondary" style="margin-right: 8px;">
                                <i class="fas fa-times"></i> 取消
                            </button>
                            <button onclick="saveOutlineEditNew()" class="btn btn-sm btn-primary">
                                <i class="fas fa-save"></i> 保存修改
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Insert after requirements section or at the beginning
        const requirementsSection = document.getElementById('requirements-section');
        if (requirementsSection) {
            requirementsSection.parentNode.insertBefore(outlineSection, requirementsSection.nextSibling);
        } else {
            const container = document.querySelector('div[style*="text-align: center"]');
            if (container) {
                container.appendChild(outlineSection);
            }
        }
    }

    outlineSection.style.display = 'block';

    // 启动等待动画
    setTimeout(() => {
        startFunnelAnimation('dynamic');
    }, 100);
}


function showRequirementsForm() {
    try {
        // Hide loading indicator
        const loadingElement = document.getElementById('ai-loading');
        if (loadingElement) {
            loadingElement.style.display = 'none';
        }

        // Show form
        const formElement = document.getElementById('requirements-form');
        if (formElement) {
            formElement.style.display = 'block';
        }


    } catch (error) {
        console.error('Error showing requirements form:', error);

        // Hide loading and show form with default options
        const loadingElement = document.getElementById('ai-loading');
        if (loadingElement) {
            loadingElement.style.display = 'none';
        }

        const formElement = document.getElementById('requirements-form');
        if (formElement) {
            formElement.style.display = 'block';
        }
    }
}

// Populate checkbox options
function populateCheckboxOptions(containerId, options, name) {
    const container = document.getElementById(containerId);
    container.innerHTML = '';

    options.forEach(option => {
        const div = document.createElement('div');
        div.style.cssText = 'padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: white; cursor: pointer; transition: all 0.3s ease;';

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = name;
        checkbox.value = option;
        checkbox.id = `${name}_${options.indexOf(option)}`;
        checkbox.style.marginRight = '8px';

        const label = document.createElement('label');
        label.htmlFor = checkbox.id;
        label.textContent = option;
        label.style.cursor = 'pointer';

        div.appendChild(checkbox);
        div.appendChild(label);

        // Add click handler for the entire div
        div.addEventListener('click', function(e) {
            if (e.target !== checkbox) {
                checkbox.checked = !checkbox.checked;
            }
            updateCheckboxStyle(div, checkbox.checked);
        });

        // Add change handler for checkbox
        checkbox.addEventListener('change', function() {
            updateCheckboxStyle(div, this.checked);
        });

        container.appendChild(div);
    });
}

// Populate radio options
function populateRadioOptions(containerId, options, name) {
    const container = document.getElementById(containerId);
    container.innerHTML = '';

    options.forEach(option => {
        const div = document.createElement('div');
        div.style.cssText = 'padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; background: white; cursor: pointer; transition: all 0.3s ease;';

        const radio = document.createElement('input');
        radio.type = 'radio';
        radio.name = name;
        radio.value = option;
        radio.id = `${name}_${options.indexOf(option)}`;
        radio.style.marginRight = '8px';

        const label = document.createElement('label');
        label.htmlFor = radio.id;
        label.textContent = option;
        label.style.cursor = 'pointer';

        div.appendChild(radio);
        div.appendChild(label);

        // Add click handler for the entire div
        div.addEventListener('click', function(e) {
            if (e.target !== radio) {
                radio.checked = true;
            }
            updateRadioStyles(name);
        });

        // Add change handler for radio
        radio.addEventListener('change', function() {
            updateRadioStyles(name);
        });

        container.appendChild(div);
    });
}

// Update checkbox visual style
function updateCheckboxStyle(div, checked) {
    if (checked) {
        div.style.background = '#e8f4fd';
        div.style.borderColor = '#3498db';
        div.style.transform = 'scale(1.02)';
    } else {
        div.style.background = 'white';
        div.style.borderColor = '#ddd';
        div.style.transform = 'scale(1)';
    }
}

// Update radio button visual styles
function updateRadioStyles(name) {
    const radios = document.querySelectorAll(`input[name="${name}"]`);
    radios.forEach(radio => {
        const div = radio.parentElement;
        if (radio.checked) {
            div.style.background = '#e8f4fd';
            div.style.borderColor = '#3498db';
            div.style.transform = 'scale(1.02)';
        } else {
            div.style.background = 'white';
            div.style.borderColor = '#ddd';
            div.style.transform = 'scale(1)';
        }
    });
}


// Outline editing functions
function editOutline(stageId) {
    const outlineContent = document.getElementById(`outline-content-${stageId}`);
    const outlineEdit = document.getElementById(`outline-edit-${stageId}`);
    const outlineEditor = document.getElementById(`outline-editor-${stageId}`);

    if (outlineContent && outlineEdit && outlineEditor) {
        // Copy current content to editor
        outlineEditor.value = outlineContent.textContent;

        // Hide content, show editor
        outlineContent.parentElement.style.display = 'none';
        outlineEdit.style.display = 'block';
    }
}

function cancelEditOutline(stageId) {
    const outlineContent = document.getElementById(`outline-content-${stageId}`);
    const outlineEdit = document.getElementById(`outline-edit-${stageId}`);

    if (outlineContent && outlineEdit) {
        // Show content, hide editor
        outlineContent.parentElement.style.display = 'block';
        outlineEdit.style.display = 'none';
    }
}



// 重试文件大纲生成函数
function retryFileOutlineGeneration() {
    console.log('Retrying file outline generation');

    // 重置状态
    outlineGenerationStarted = false;

    // 清除错误内容，但保留placeholder div
    const contentDiv = document.getElementById('outline-content-display');
    if (contentDiv) {
        // 只清除非placeholder的子元素
        const children = Array.from(contentDiv.children);
        children.forEach(child => {
            if (child.id !== 'outline-placeholder') {
                child.remove();
            }
        });
    }

    // 重置placeholder div状态
    const placeholderDiv = document.getElementById('outline-placeholder');
    if (placeholderDiv) {
        console.log('Resetting placeholder div for file retry');
        placeholderDiv.style.display = 'none';
        placeholderDiv.className = '';
        placeholderDiv.innerHTML = '';
    } else {
        console.log('Placeholder div not found, creating new one for file retry');
        // 如果找不到，创建一个新的
        const newPlaceholderDiv = document.createElement('div');
        newPlaceholderDiv.id = 'outline-placeholder';
        newPlaceholderDiv.className = 'loading-container';
        contentDiv.appendChild(newPlaceholderDiv);
    }

    // 隐藏操作按钮
    const actionsDiv = document.getElementById('outline-actions');
    if (actionsDiv) {
        actionsDiv.style.display = 'none';
    }

    // 调用生成函数
    startFileOutlineGeneration();
}

// File outline generation function for file uploads (non-streaming)
async function startFileOutlineGeneration() {
    console.log('Starting file outline generation (non-streaming)');

    // 防止重复调用
    if (outlineGenerationStarted) {
        console.log('Outline generation already started, skipping...');
        return;
    }

    const contentDiv = document.getElementById('outline-content-display');
    const cursorDiv = document.getElementById('outline-cursor');
    const statusDiv = document.getElementById('outline-status');
    const placeholderDiv = document.getElementById('outline-placeholder');

    if (!contentDiv) {
        console.error('Outline content div not found');
        return;
    }

    // 标记为已开始
    outlineGenerationStarted = true;

    // 显示增强的加载状态
    if (placeholderDiv) {
        placeholderDiv.innerHTML = `
            <div class="loading-icon">
                <i class="fas fa-file-alt"></i>
            </div>
            <div class="loading-title">正在从文件生成PPT大纲</div>

            <div class="brain-container">
                <div class="ai-brain" id="loading-brain-file">
                    <div class="brain-core">
                        <div class="brain-icon">📄</div>
                    </div>
                    <svg class="progress-ring" width="140" height="140">
                        <circle class="progress-ring-circle" cx="70" cy="70" r="70"></circle>
                        <circle class="progress-ring-progress" cx="70" cy="70" r="70"></circle>
                    </svg>
                    <div class="neural-network">
                        <div class="neural-line" style="--rotation: 45deg;"></div>
                        <div class="neural-line" style="--rotation: -30deg;"></div>
                        <div class="neural-line" style="--rotation: -45deg;"></div>
                        <div class="neural-line" style="--rotation: 60deg;"></div>
                    </div>
                    <div class="thought-bubbles">
                        <div class="thought-bubble"></div>
                        <div class="thought-bubble"></div>
                        <div class="thought-bubble"></div>
                    </div>
                    <div class="text-generation">
                        <div class="generating-text">正在解析文件内容</div>
                        <div class="generating-dots">• • •</div>
                    </div>
                </div>
            </div>

            <div class="loading-tips">
                <h5><i class="fas fa-lightbulb"></i> 小贴士</h5>
                <p>AI正在智能分析您上传的文件内容，提取关键信息并生成结构化的PPT大纲。</p>
            </div>
        `;
        placeholderDiv.className = 'loading-container';
        placeholderDiv.style.display = 'block';

        // 启动文件处理动画
        startBrainAnimation('file');
    }

    // 隐藏光标（文件生成不需要流式效果）
    if (cursorDiv) {
        cursorDiv.style.display = 'none';
    }

    try {
        // 调用文件大纲生成接口（非流式）
        const response = await fetch(`/projects/${currentProjectId}/generate-file-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();

        if (result.error || result.status === "error") {
            // 停止加载动画
            stopBookAnimation('file');

            // 显示错误信息和重新生成按钮，但保留placeholder div
            // 先确保placeholder div存在
            let placeholderDiv = document.getElementById('outline-placeholder');
            if (!placeholderDiv) {
                placeholderDiv = document.createElement('div');
                placeholderDiv.id = 'outline-placeholder';
                placeholderDiv.className = 'loading-container';
                contentDiv.appendChild(placeholderDiv);
            }

            // 清除其他内容，只保留placeholder
            const children = Array.from(contentDiv.children);
            children.forEach(child => {
                if (child.id !== 'outline-placeholder') {
                    child.remove();
                }
            });

            // 在placeholder前添加错误信息
            const errorDiv = document.createElement('div');
            errorDiv.innerHTML = `
                <div style="color: #e74c3c; text-align: center; padding: 20px;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 24px; margin-bottom: 10px;"></i>
                    <div style="margin-bottom: 15px;">文件大纲生成失败</div>
                    <div style="font-size: 14px; margin-bottom: 20px; color: #7f8c8d;">${result.error || result.message || '未知错误'}</div>
                    <button onclick="retryFileOutlineGeneration()" class="btn btn-warning btn-sm">
                        <i class="fas fa-sync"></i> 重新生成大纲
                    </button>
                </div>
            `;
            contentDiv.insertBefore(errorDiv, placeholderDiv);
            if (placeholderDiv) placeholderDiv.style.display = 'none';

            // 重置标志，允许重试
            outlineGenerationStarted = false;
            return;
        }

        // 停止加载动画
        stopBookAnimation('file');

        // 隐藏加载状态
        if (placeholderDiv) {
            placeholderDiv.style.display = 'none';
        }

        // 一次性显示完整的大纲内容
        if (result.outline_content) {
            // 格式化JSON内容
            let formattedContent;
            try {
                const parsed = JSON.parse(result.outline_content);
                formattedContent = JSON.stringify(parsed, null, 2);
            } catch (e) {
                formattedContent = result.outline_content;
            }

            // 显示格式化的内容 - 使用textContent而不是innerHTML来避免HTML转义问题
            const preElement = document.createElement('pre');
            preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
            preElement.textContent = formattedContent;
            contentDiv.innerHTML = '';
            contentDiv.appendChild(preElement);
        }

        // 重置标志，允许下次生成
        outlineGenerationStarted = false;

        // Show action buttons
        const actionsDiv = document.getElementById('outline-actions');
        if (actionsDiv) {
            actionsDiv.style.display = 'block';
        }

        // 尝试解析并渲染大纲预览
        try {
            const parsedOutline = JSON.parse(result.outline_content);
            if (parsedOutline && parsedOutline.slides) {
                renderOutlinePreview(parsedOutline);
            }
        } catch (e) {
            console.log('大纲内容正在生成中，暂时无法解析为JSON');
        }

        // Show start PPT generation button
        showStartPPTButton();

    } catch (error) {
        console.error('Error generating file outline:', error);

        // 停止加载动画
        stopFunnelAnimation('file');

        // 显示连接错误和重新生成按钮，但保留placeholder div
        // 先确保placeholder div存在
        let placeholderDiv = document.getElementById('outline-placeholder');
        if (!placeholderDiv) {
            placeholderDiv = document.createElement('div');
            placeholderDiv.id = 'outline-placeholder';
            placeholderDiv.className = 'loading-container';
            contentDiv.appendChild(placeholderDiv);
        }

        // 清除其他内容，只保留placeholder
        const children = Array.from(contentDiv.children);
        children.forEach(child => {
            if (child.id !== 'outline-placeholder') {
                child.remove();
            }
        });

        // 在placeholder前添加错误信息
        const errorDiv = document.createElement('div');
        errorDiv.innerHTML = `
            <div style="color: #e74c3c; text-align: center; padding: 20px;">
                <i class="fas fa-exclamation-triangle" style="font-size: 24px; margin-bottom: 10px;"></i>
                <div style="margin-bottom: 15px;">连接失败</div>
                <div style="font-size: 14px; margin-bottom: 20px; color: #7f8c8d;">连接错误: ${error.message}</div>
                <button onclick="retryFileOutlineGeneration()" class="btn btn-warning btn-sm">
                    <i class="fas fa-sync"></i> 重新生成大纲
                </button>
            </div>
        `;
        contentDiv.insertBefore(errorDiv, placeholderDiv);
        if (placeholderDiv) placeholderDiv.style.display = 'none';

        // 重置标志，允许重试
        outlineGenerationStarted = false;
    }
}

// 重试大纲生成函数
function retryOutlineGeneration() {
    console.log('Retrying outline generation');

    // 重置状态
    outlineGenerationStarted = false;

    // 清除错误内容，但保留placeholder div
    const contentDiv = document.getElementById('outline-content-display');
    if (contentDiv) {
        // 只清除非placeholder的子元素
        const children = Array.from(contentDiv.children);
        children.forEach(child => {
            if (child.id !== 'outline-placeholder') {
                child.remove();
            }
        });
    }

    // 重置placeholder div状态
    const placeholderDiv = document.getElementById('outline-placeholder');
    if (placeholderDiv) {
        console.log('Resetting placeholder div for retry');
        placeholderDiv.style.display = 'none';
        placeholderDiv.className = '';
        placeholderDiv.innerHTML = '';
    } else {
        console.log('Placeholder div not found, creating new one');
        // 如果找不到，创建一个新的
        const newPlaceholderDiv = document.createElement('div');
        newPlaceholderDiv.id = 'outline-placeholder';
        newPlaceholderDiv.className = 'loading-container';
        contentDiv.appendChild(newPlaceholderDiv);
    }

    // 隐藏操作按钮
    const actionsDiv = document.getElementById('outline-actions');
    if (actionsDiv) {
        actionsDiv.style.display = 'none';
    }

    // 调用生成函数
    startOutlineGenerationNew();
}

// New outline generation function for the new UI (non-streaming)
async function startOutlineGenerationNew() {
    console.log('Starting new outline generation (non-streaming)');

    // 防止重复调用
    if (outlineGenerationStarted) {
        console.log('Outline generation already started, skipping...');
        return;
    }

    const contentDiv = document.getElementById('outline-content-display');
    const cursorDiv = document.getElementById('outline-cursor');
    const statusDiv = document.getElementById('outline-status');
    const placeholderDiv = document.getElementById('outline-placeholder');

    if (!contentDiv) {
        console.error('Outline content div not found');
        return;
    }

    // 标记为已开始
    outlineGenerationStarted = true;

    // 显示增强的加载状态
    if (placeholderDiv) {
        console.log('Setting up placeholder div for outline generation');
        placeholderDiv.innerHTML = `
            <div class="loading-icon">
                <i class="fas fa-brain"></i>
            </div>
            <div class="loading-title">AI正在生成PPT大纲</div>

            <div class="brain-container">
                <div class="ai-brain" id="loading-brain-stream">
                    <div class="brain-core">
                        <div class="brain-icon">🧠</div>
                    </div>
                    <svg class="progress-ring" width="140" height="140">
                        <circle class="progress-ring-circle" cx="70" cy="70" r="70"></circle>
                        <circle class="progress-ring-progress" cx="70" cy="70" r="70"></circle>
                    </svg>
                    <div class="neural-network">
                        <div class="neural-line" style="--rotation: 45deg;"></div>
                        <div class="neural-line" style="--rotation: -30deg;"></div>
                        <div class="neural-line" style="--rotation: -45deg;"></div>
                        <div class="neural-line" style="--rotation: 60deg;"></div>
                    </div>
                    <div class="thought-bubbles">
                        <div class="thought-bubble"></div>
                        <div class="thought-bubble"></div>
                        <div class="thought-bubble"></div>
                    </div>
                    <div class="text-generation">
                        <div class="generating-text">正在生成PPT大纲</div>
                        <div class="generating-dots">• • •</div>
                    </div>
                </div>
            </div>

            <div class="loading-tips">
                <h5><i class="fas fa-lightbulb"></i> 小贴士</h5>
                <p>AI正在根据您的需求智能生成PPT大纲，包括标题、内容要点和逻辑结构。生成完成后将一次性显示完整大纲，您可以编辑和调整。</p>
            </div>
        `;
        placeholderDiv.className = 'loading-container';
        placeholderDiv.style.display = 'block';
        console.log('Placeholder div set up, starting brain animation');

        // 启动动画
        startBrainAnimation('stream');
        console.log('Brain animation started');
    } else {
        console.error('Placeholder div not found!');
    }

    // 隐藏光标元素（非流式生成不需要）
    if (cursorDiv) {
        cursorDiv.style.display = 'none';
    }

    // Hide status div during generation
    if (statusDiv) {
        statusDiv.style.display = 'none';
    }

    try {
        // 调用非流式大纲生成接口
        const response = await fetch(`/projects/${currentProjectId}/generate-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();

        if (result.error || result.status === "error") {
            // 停止加载动画
            stopBookAnimation('stream');

            // 显示错误信息和重新生成按钮，但保留placeholder div
            // 先确保placeholder div存在
            let errorPlaceholderDiv = document.getElementById('outline-placeholder');
            if (!errorPlaceholderDiv) {
                errorPlaceholderDiv = document.createElement('div');
                errorPlaceholderDiv.id = 'outline-placeholder';
                errorPlaceholderDiv.className = 'loading-container';
                contentDiv.appendChild(errorPlaceholderDiv);
            }

            // 隐藏加载状态
            errorPlaceholderDiv.style.display = 'none';

            // 清除其他内容，只保留placeholder
            const children = Array.from(contentDiv.children);
            children.forEach(child => {
                if (child.id !== 'outline-placeholder') {
                    child.remove();
                }
            });

            // 在placeholder前添加错误信息
            const errorDiv = document.createElement('div');
            errorDiv.innerHTML = `
                <div style="color: #e74c3c; text-align: center; padding: 20px;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 24px; margin-bottom: 10px;"></i>
                    <div style="margin-bottom: 15px;">大纲生成失败</div>
                    <div style="font-size: 14px; margin-bottom: 20px; color: #7f8c8d;">${result.error || result.message || '未知错误'}</div>
                    <button onclick="retryOutlineGeneration()" class="btn btn-warning btn-sm">
                        <i class="fas fa-sync"></i> 重新生成大纲
                    </button>
                </div>
            `;
            contentDiv.insertBefore(errorDiv, errorPlaceholderDiv);
            if (cursorDiv) cursorDiv.style.display = 'none';

            // 重置标志，允许重试
            outlineGenerationStarted = false;
            return;
        }

        // 停止加载动画
        stopBookAnimation('stream');

        // 隐藏加载状态
        if (placeholderDiv) {
            placeholderDiv.style.display = 'none';
        }

        // 一次性显示完整的大纲内容
        if (result.outline_content) {
            // 格式化JSON内容
            let formattedContent;
            try {
                const parsed = JSON.parse(result.outline_content);
                formattedContent = JSON.stringify(parsed, null, 2);
            } catch (e) {
                formattedContent = result.outline_content;
            }

            // 显示格式化的内容
            const preElement = document.createElement('pre');
            preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
            preElement.textContent = formattedContent;
            contentDiv.innerHTML = '';
            contentDiv.appendChild(preElement);
        }

        // 重置标志，允许下次生成
        outlineGenerationStarted = false;

        // Show action buttons
        const actionsDiv = document.getElementById('outline-actions');
        if (actionsDiv) {
            actionsDiv.style.display = 'block';
        }

        // Generate outline view if currently in outline view
        if (currentViewNew === 'outline') {
            setTimeout(() => {
                renderOutlineViewNew();
            }, 500);
        }

        // Show start PPT generation button
        showStartPPTButton();
    } catch (error) {
        console.error('Error streaming outline generation:', error);

        // 停止加载动画
        stopFunnelAnimation('stream');

        // 隐藏加载状态
        if (placeholderDiv) {
            placeholderDiv.style.display = 'none';
        }

        // 显示连接错误和重新生成按钮，但保留placeholder div
        // 先确保placeholder div存在
        let placeholderDiv = document.getElementById('outline-placeholder');
        if (!placeholderDiv) {
            placeholderDiv = document.createElement('div');
            placeholderDiv.id = 'outline-placeholder';
            placeholderDiv.className = 'loading-container';
            contentDiv.appendChild(placeholderDiv);
        }

        // 清除其他内容，只保留placeholder
        const children = Array.from(contentDiv.children);
        children.forEach(child => {
            if (child.id !== 'outline-placeholder') {
                child.remove();
            }
        });

        // 在placeholder前添加错误信息
        const errorDiv = document.createElement('div');
        errorDiv.innerHTML = `
            <div style="color: #e74c3c; text-align: center; padding: 20px;">
                <i class="fas fa-exclamation-triangle" style="font-size: 24px; margin-bottom: 10px;"></i>
                <div style="margin-bottom: 15px;">连接失败</div>
                <div style="font-size: 14px; margin-bottom: 20px; color: #7f8c8d;">连接错误: ${error.message}</div>
                <button onclick="retryOutlineGeneration()" class="btn btn-warning btn-sm">
                    <i class="fas fa-sync"></i> 重新生成大纲
                </button>
            </div>
        `;
        contentDiv.insertBefore(errorDiv, placeholderDiv);
        if (cursorDiv) cursorDiv.style.display = 'none';
        // Keep status div hidden

        // 重置标志，允许重试
        outlineGenerationStarted = false;
    }
}

// 显示自定义需求输入弹窗
function showCustomRequirementsModal() {
    return new Promise((resolve) => {
        // 创建遮罩层
        const overlay = document.createElement('div');
        overlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        `;
        
        // 创建弹窗
        const modal = document.createElement('div');
        modal.style.cssText = `
            background: white;
            border-radius: 8px;
            padding: 24px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        `;
        
        modal.innerHTML = `
            <h4 style="margin-top: 0; margin-bottom: 16px; color: #333;">
                <i class="fas fa-magic" style="color: #3498db; margin-right: 8px;"></i>
                重新生成大纲
            </h4>
            <p style="margin-bottom: 16px; color: #666; font-size: 14px;">
                您可以输入额外的自定义需求，或者直接点击“生成”使用原有设置。
            </p>
            <textarea 
                id="custom-requirements-input" 
                placeholder="例如：\n- 需要更多图表和数据展示\n- 增加案例分析部分\n- 突出创新点和亮点"
                style="
                    width: 100%;
                    height: 120px;
                    padding: 12px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    font-size: 14px;
                    resize: vertical;
                    font-family: inherit;
                    box-sizing: border-box;
                "
            ></textarea>
            <div style="margin-top: 20px; display: flex; gap: 12px; justify-content: flex-end;">
                <button 
                    id="modal-cancel-btn"
                    style="
                        padding: 10px 20px;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        background: white;
                        color: #666;
                        cursor: pointer;
                        font-size: 14px;
                    "
                >
                    取消
                </button>
                <button 
                    id="modal-confirm-btn"
                    style="
                        padding: 10px 20px;
                        border: none;
                        border-radius: 4px;
                        background: #3498db;
                        color: white;
                        cursor: pointer;
                        font-size: 14px;
                    "
                >
                    <i class="fas fa-sync" style="margin-right: 6px;"></i>
                    生成
                </button>
            </div>
        `;
        
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
        
        // 获取元素
        const textarea = modal.querySelector('#custom-requirements-input');
        const cancelBtn = modal.querySelector('#modal-cancel-btn');
        const confirmBtn = modal.querySelector('#modal-confirm-btn');
        
        // 自动聚焦到输入框
        setTimeout(() => textarea.focus(), 100);
        
        // 取消按钮
        cancelBtn.onclick = () => {
            document.body.removeChild(overlay);
            resolve(null);
        };
        
        // 确认按钮
        confirmBtn.onclick = () => {
            const value = textarea.value.trim();
            document.body.removeChild(overlay);
            resolve(value);
        };
        
        // 点击遮罩层关闭
        overlay.onclick = (e) => {
            if (e.target === overlay) {
                document.body.removeChild(overlay);
                resolve(null);
            }
        };
        
        // 键盘事件
        textarea.onkeydown = (e) => {
            // Ctrl/Cmd + Enter 提交
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                e.preventDefault();
                confirmBtn.click();
            }
            // Escape 取消
            if (e.key === 'Escape') {
                e.preventDefault();
                cancelBtn.click();
            }
        };
    });
}

// 重新生成大纲函数
async function regenerateOutlineNew() {
    console.log('Starting outline regeneration');

    // 使用自定义弹窗让用户输入额外需求
    const customRequirements = await showCustomRequirementsModal();
    
    // 如果用户点击取消，返回 null
    if (customRequirements === null) {
        return;
    }

    // 隐藏操作按钮
    const actionsDiv = document.getElementById('outline-actions');
    if (actionsDiv) {
        actionsDiv.style.display = 'none';
    }

    // 隐藏开始PPT生成按钮
    hideStartPPTButton();

    // 确保切换到JSON视图以显示生成过程
    switchOutlineViewNew('json');

    // 清空当前内容并显示加载状态
    const contentDiv = document.getElementById('outline-content-display');

    // 先获取placeholder div引用，然后清空其他内容
    let placeholderDiv = document.getElementById('outline-placeholder');

    if (contentDiv) {
        // 只清除非placeholder的子元素
        const children = Array.from(contentDiv.children);
        children.forEach(child => {
            if (child.id !== 'outline-placeholder') {
                child.remove();
            }
        });

        // 如果placeholder div不存在，创建一个新的
        if (!placeholderDiv) {
            placeholderDiv = document.createElement('div');
            placeholderDiv.id = 'outline-placeholder';
            placeholderDiv.className = 'loading-container';
            contentDiv.appendChild(placeholderDiv);
        }
    }

    if (placeholderDiv) {
        placeholderDiv.style.display = 'block';
        placeholderDiv.innerHTML = `
            <div class="loading-icon">
                <i class="fas fa-brain"></i>
            </div>
            <div class="loading-title">正在重新生成大纲</div>

            <div class="brain-container">
                <div class="ai-brain" id="loading-brain-regenerate">
                    <div class="brain-core">
                        <div class="brain-icon">🧠</div>
                    </div>
                    <svg class="progress-ring" width="140" height="140">
                        <circle class="progress-ring-circle" cx="70" cy="70" r="70"></circle>
                        <circle class="progress-ring-progress" cx="70" cy="70" r="70"></circle>
                    </svg>
                    <div class="neural-network">
                        <div class="neural-line" style="--rotation: 45deg;"></div>
                        <div class="neural-line" style="--rotation: -30deg;"></div>
                        <div class="neural-line" style="--rotation: -45deg;"></div>
                        <div class="neural-line" style="--rotation: 60deg;"></div>
                    </div>
                    <div class="thought-bubbles">
                        <div class="thought-bubble"></div>
                        <div class="thought-bubble"></div>
                        <div class="thought-bubble"></div>
                    </div>
                    <div class="text-generation">
                        <div class="generating-text">正在重新分析内容</div>
                        <div class="generating-dots">• • •</div>
                    </div>
                </div>
            </div>

            <div class="loading-tips">
                <h5><i class="fas fa-lightbulb"></i> 小贴士</h5>
                <p>AI正在重新分析您的需求并生成全新的PPT大纲，请稍候...</p>
            </div>
        `;

        // 启动重新生成动画
        setTimeout(() => {
            startBrainAnimation('regenerate');
        }, 100);
    }

    // 重置生成标志
    outlineGenerationStarted = false;

    // 重置大纲生成阶段状态（不触发页面重新加载）
    try {
        await updateStageStatusSilent('outline_generation', 'running', 0);
    } catch (error) {
        console.warn('Failed to update stage status:', error);
    }

    // 调用专门的重新生成大纲接口，带上自定义需求
    try {
        console.log('Calling regenerate outline API with custom requirements:', customRequirements);
        const response = await fetch(`/projects/${currentProjectId}/regenerate-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                custom_requirements: customRequirements || ''
            })
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();

        if (result.error || result.status === "error") {
            // 显示错误信息
            if (contentDiv) {
                contentDiv.innerHTML = `<div style="color: #e74c3c; text-align: center; padding: 20px;">
                    <i class="fas fa-exclamation-triangle"></i> 错误: ${result.error || result.message || '未知错误'}
                </div>`;
            }
            stopBrainAnimation('regenerate');
            if (placeholderDiv) placeholderDiv.style.display = 'none';

            // 重新显示操作按钮
            if (actionsDiv) {
                actionsDiv.style.display = 'block';
            }

            // 重置标志，允许重试
            outlineGenerationStarted = false;
            return;
        }

        // 停止重新生成动画并隐藏加载状态
        stopBrainAnimation('regenerate');
        if (placeholderDiv) {
            placeholderDiv.style.display = 'none';
        }

        // 显示生成的大纲内容
        if (contentDiv && result.outline_content) {
            const preElement = document.createElement('pre');
            preElement.style.cssText = 'white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New", monospace; font-size: 12px; line-height: 1.4; margin: 0; padding: 0; background: transparent; border: none;';
            preElement.textContent = result.outline_content;
            contentDiv.appendChild(preElement);
        }

        // 重置标志，允许下次生成
        outlineGenerationStarted = false;

        // Show action buttons
        if (actionsDiv) {
            actionsDiv.style.display = 'block';
        }

        // Generate outline view if currently in outline view
        if (currentViewNew === 'outline') {
            setTimeout(() => {
                renderOutlineViewNew();
            }, 500);
        }

        // Show start PPT generation button
        showStartPPTButton();
    } catch (error) {
        console.error('Error during outline regeneration:', error);

        // 显示错误信息
        if (contentDiv) {
            contentDiv.innerHTML = `<div style="color: #e74c3c; text-align: center; padding: 20px;">
                <i class="fas fa-exclamation-triangle"></i> 重新生成失败: ${error.message}
            </div>`;
        }

        stopBrainAnimation('regenerate');
        if (placeholderDiv) {
            placeholderDiv.style.display = 'none';
        }

        // 重新显示操作按钮
        if (actionsDiv) {
            actionsDiv.style.display = 'block';
        }

        // 重置标志，允许重试
        outlineGenerationStarted = false;
    }
}

// New outline editing functions for JSON
function editOutlineNew() {
    const contentDiv = document.getElementById('outline-content-display');
    const editArea = document.getElementById('outline-edit-area');
    const editor = document.getElementById('outline-editor');

    if (contentDiv && editArea && editor) {
        // Get current JSON content - 优先从pre元素获取
        let jsonContent = '';
        const preElement = contentDiv.querySelector('pre');
        if (preElement) {
            jsonContent = preElement.textContent || preElement.innerText || '';
        } else {
            // 如果没有pre元素，从整个div获取内容
            jsonContent = contentDiv.textContent || contentDiv.innerText || '';
        }

        // Try to parse and reformat the JSON for better editing
        try {
            const parsed = JSON.parse(jsonContent);
            jsonContent = JSON.stringify(parsed, null, 2);
        } catch (e) {
            console.warn('Content is not valid JSON, using as-is:', e);
        }

        editor.value = jsonContent;

        // Hide content, show editor
        contentDiv.style.display = 'none';
        editArea.style.display = 'block';
    }
}

function cancelEditOutlineNew() {
    const contentDiv = document.getElementById('outline-content-display');
    const editArea = document.getElementById('outline-edit-area');

    if (contentDiv && editArea) {
        // Show content, hide editor
        contentDiv.style.display = 'block';
        editArea.style.display = 'none';
    }
}

// JSON validation function
function validateJSON() {
    const editor = document.getElementById('outline-editor');
    if (!editor) return;

    try {
        const jsonData = JSON.parse(editor.value);

        // Validate required structure
        if (!jsonData.title) {
            throw new Error('缺少必需字段: title');
        }
        if (!jsonData.slides || !Array.isArray(jsonData.slides)) {
            throw new Error('缺少必需字段: slides (必须是数组)');
        }

        // Validate each slide
        for (let i = 0; i < jsonData.slides.length; i++) {
            const slide = jsonData.slides[i];
            if (!slide.title) {
                throw new Error(`第${i+1}个幻灯片缺少title字段`);
            }
            if (!slide.content_points || !Array.isArray(slide.content_points)) {
                throw new Error(`第${i+1}个幻灯片缺少content_points字段 (必须是数组)`);
            }
            if (!slide.slide_type) {
                throw new Error(`第${i+1}个幻灯片缺少slide_type字段`);
            }
        }

        // Format and update editor content
        editor.value = JSON.stringify(jsonData, null, 2);

        alert('✅ JSON格式验证通过！');
        return true;

    } catch (error) {
        alert('❌ JSON格式错误: ' + error.message);
        return false;
    }
}

async function saveOutlineEditNew() {
    const editor = document.getElementById('outline-editor');
    const contentDiv = document.getElementById('outline-content-display');

    if (!editor || !contentDiv) return;

    // Validate JSON before saving
    if (!validateJSON()) {
        return;
    }

    try {
        const response = await fetch(`/projects/${currentProjectId}/update-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                outline_content: editor.value
            })
        });

        if (response.ok) {
            // Update display content with formatted JSON - 使用textContent避免HTML转义问题
            const preElement = document.createElement('pre');
            preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
            preElement.textContent = editor.value;
            contentDiv.innerHTML = '';
            contentDiv.appendChild(preElement);

            // Hide editor, show content
            cancelEditOutlineNew();

            // Show success message
            alert('✅ 大纲已更新');

            // 立即更新大纲视图，确保使用最新的数据
            setTimeout(() => {
                // 强制刷新大纲视图，使用编辑器中的最新内容
                try {
                    const parsedOutline = JSON.parse(editor.value);

                    // 如果当前是大纲视图，重新渲染
                    if (currentView === 'outline') {
                        renderOutlineView();
                    }

                    // 如果当前是新的大纲视图，强制使用最新数据重新渲染
                    if (currentViewNew === 'outline') {
                        // 直接传递解析后的大纲数据，避免从DOM重新读取
                        renderOutlineViewNewWithData(parsedOutline);
                    }
                } catch (parseError) {
                    console.error('Failed to parse updated outline:', parseError);
                    // 如果解析失败，仍然尝试常规渲染
                    if (currentView === 'outline') {
                        renderOutlineView();
                    }
                    if (currentViewNew === 'outline') {
                        renderOutlineViewNew();
                    }
                }
            }, 100); // 减少延迟，立即更新
        } else {
            alert('❌ 保存失败，请重试');
        }
    } catch (error) {
        console.error('Error saving outline:', error);
        alert('❌ 保存失败: ' + error.message);
    }
}

function confirmOutlineNew() {
    if (confirm('确认大纲内容？')) {
        // Mark outline as confirmed
        fetch(`/projects/${currentProjectId}/confirm-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        }).then(response => {
            if (response.ok) {
                // Hide edit/confirm buttons and show start PPT button
                const actionsDiv = document.getElementById('outline-actions');
                if (actionsDiv) {
                    actionsDiv.style.display = 'none';
                }

                // Show start PPT generation button
                showStartPPTButton();
            } else {
                alert('确认失败，请重试');
            }
        }).catch(error => {
            console.error('Error confirming outline:', error);
            alert('确认失败: ' + error.message);
        });
    }
}



// Show start PPT generation button
function showStartPPTButton() {
    // Check if button already exists
    let startPPTButton = document.getElementById('start-ppt-button');

    if (!startPPTButton) {
        // Create start PPT button only if it doesn't exist
        const outlineSection = document.getElementById('outline-section');
        if (outlineSection) {
            startPPTButton = document.createElement('div');
            startPPTButton.id = 'start-ppt-button';
            startPPTButton.style.cssText = 'text-align: center; margin-top: 30px; padding: 20px; background: #e8f5e8; border-radius: 10px; border: 2px solid #27ae60;';

            startPPTButton.innerHTML = `
                <button onclick="startPPTGenerationFromOutline()" class="btn btn-success btn-lg" style="padding: 15px 30px; font-size: 18px;">
                    <i class="fas fa-rocket"></i> 开始生成PPT
                </button>
            `;

            // Insert after outline section
            outlineSection.parentNode.insertBefore(startPPTButton, outlineSection.nextSibling);
        }
    }

    if (startPPTButton) {
        startPPTButton.style.display = 'block';
    }
}

// Hide start PPT generation button
function hideStartPPTButton() {
    const startPPTButton = document.getElementById('start-ppt-button');
    if (startPPTButton) {
        startPPTButton.style.display = 'none';
    }
}

// Start PPT generation from outline
function startPPTGenerationFromOutline() {

    if (confirm('确认开始生成PPT？这将跳转到模板选择页面。')) {
        // Redirect to template selection page
        window.location.href = `/projects/${currentProjectId}/template-selection`;
    }
}

// 重试流式大纲生成函数
function retryStreamingOutlineGeneration() {
    console.log('Retrying streaming outline generation');

    // 重置状态 - 这里不需要重置outlineGenerationStarted，因为流式生成有自己的逻辑

    // 清除错误内容
    const stageId = 'outline_generation';
    const contentDiv = document.getElementById(`outline-content-${stageId}`);
    if (contentDiv) {
        contentDiv.innerHTML = '';
        console.log('Cleared streaming outline content for retry');
    } else {
        console.error('Streaming outline content div not found!');
    }

    // 调用生成函数
    startOutlineGeneration();
}

// Start outline generation with streaming
async function startOutlineGeneration() {
    console.log('Starting outline generation with streaming');

    const stageId = 'outline_generation';
    const outputDiv = document.getElementById(`outline-output-${stageId}`);
    const contentDiv = document.getElementById(`outline-content-${stageId}`);
    const cursorDiv = document.getElementById(`outline-cursor-${stageId}`);

    if (!outputDiv || !contentDiv || !cursorDiv) {
        console.error('Outline output elements not found');
        return;
    }

    // Show output area
    outputDiv.style.display = 'block';
    contentDiv.textContent = '';
    cursorDiv.style.display = 'inline-block';

    // Update stage status to running
    const stageElement = document.querySelector(`[data-stage-id="${stageId}"]`);
    if (stageElement) {
        const statusIcon = stageElement.querySelector('.stage-status-icon');
        if (statusIcon) {
            statusIcon.innerHTML = '<div style="display: inline-block; width: 12px; height: 12px; border: 2px solid #f3f3f3; border-top: 2px solid #f39c12; border-radius: 50%; animation: spin 1s linear infinite;"></div>';
        }
    }

    try {
        const response = await fetch(`/projects/${currentProjectId}/outline-stream`);
        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            const chunk = decoder.decode(value);
            const lines = chunk.split('\n');

            for (const line of lines) {
                if (line.startsWith('data: ')) {
                    try {
                        const data = JSON.parse(line.slice(6));

                        if (data.error) {
                            // 显示错误信息和重新生成按钮
                            contentDiv.innerHTML = `
                                <div style="color: #e74c3c; text-align: center; padding: 20px;">
                                    <i class="fas fa-exclamation-triangle" style="font-size: 24px; margin-bottom: 10px;"></i>
                                    <div style="margin-bottom: 15px;">大纲生成失败</div>
                                    <div style="font-size: 14px; margin-bottom: 20px; color: #7f8c8d;">${data.error}</div>
                                    <button onclick="retryStreamingOutlineGeneration()" class="btn btn-warning btn-sm">
                                        <i class="fas fa-sync"></i> 重新生成大纲
                                    </button>
                                </div>
                            `;
                            cursorDiv.style.display = 'none';
                            if (stageElement) {
                                const statusIcon = stageElement.querySelector('.stage-status-icon');
                                if (statusIcon) statusIcon.textContent = '❌';
                            }
                            return;
                        }

                        if (data.content) {
                            contentDiv.textContent += data.content;
                            contentDiv.scrollTop = contentDiv.scrollHeight;
                        }

                        if (data.done) {
                            cursorDiv.style.display = 'none';
                            if (stageElement) {
                                const statusIcon = stageElement.querySelector('.stage-status-icon');
                                if (statusIcon) statusIcon.textContent = '✓';
                            }

                            // 格式化JSON内容并用pre元素包装
                            try {
                                const jsonContent = contentDiv.textContent;
                                const parsed = JSON.parse(jsonContent);
                                const formattedContent = JSON.stringify(parsed, null, 2);

                                // 创建pre元素来正确显示JSON
                                const preElement = document.createElement('pre');
                                preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
                                preElement.textContent = formattedContent;
                                contentDiv.innerHTML = '';
                                contentDiv.appendChild(preElement);

                                console.log('Successfully formatted JSON outline with', parsed.slides ? parsed.slides.length : 0, 'slides');
                            } catch (e) {
                                console.warn('Failed to parse JSON content for formatting:', e);
                                // 保持原始内容，但仍然用pre包装
                                const preElement = document.createElement('pre');
                                preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
                                preElement.textContent = contentDiv.textContent;
                                contentDiv.innerHTML = '';
                                contentDiv.appendChild(preElement);
                            }

                            // Update the header to show completion
                            const outputDiv = document.getElementById(`outline-output-${stageId}`);
                            if (outputDiv) {
                                const header = outputDiv.querySelector('h6');
                                if (header && !header.querySelector('.completion-badge')) {
                                    const badge = document.createElement('span');
                                    badge.className = 'completion-badge';
                                    badge.style.cssText = 'color: #27ae60; font-size: 0.8em; margin-left: 10px;';
                                    badge.textContent = '✅ 生成完成';
                                    header.appendChild(badge);
                                }
                            }

                            // 延迟刷新页面，让用户有时间看到格式化的内容
                            setTimeout(() => {
                                window.location.reload();
                            }, 3000);
                            return;
                        }
                    } catch (e) {
                        console.error('Error parsing outline stream data:', e);
                    }
                }
            }
        }
    } catch (error) {
        console.error('Error streaming outline generation:', error);
        // 显示连接错误和重新生成按钮
        contentDiv.innerHTML = `
            <div style="color: #e74c3c; text-align: center; padding: 20px;">
                <i class="fas fa-exclamation-triangle" style="font-size: 24px; margin-bottom: 10px;"></i>
                <div style="margin-bottom: 15px;">连接失败</div>
                <div style="font-size: 14px; margin-bottom: 20px; color: #7f8c8d;">连接错误: ${error.message}</div>
                <button onclick="retryStreamingOutlineGeneration()" class="btn btn-warning btn-sm">
                    <i class="fas fa-sync"></i> 重新生成大纲
                </button>
            </div>
        `;
        cursorDiv.style.display = 'none';
        if (stageElement) {
            const statusIcon = stageElement.querySelector('.stage-status-icon');
            if (statusIcon) statusIcon.textContent = '❌';
        }
    }
}

// Start execution for a complete stage
async function startStageExecution(stageId) {
    console.log(`Starting stage execution for: ${stageId}`);

    // Special handling for outline generation
    if (stageId === 'outline_generation') {
        // 检查是否已经开始了新的大纲生成
        if (outlineGenerationStarted) {
            console.log('Outline generation already started via new method, skipping stage execution...');
            return;
        }
        return startOutlineGeneration();
    }

    const taskItem = document.querySelector(`[data-stage-id="${stageId}"]`);
    if (!taskItem) {
        console.error(`Task item not found for stage: ${stageId}`);
        return;
    }

    // Check if stage is already running or completed
    const stageStatusIcon = taskItem.querySelector('.stage-status-icon');
    if (stageStatusIcon && (stageStatusIcon.textContent === '✓' || stageStatusIcon.innerHTML.includes('spin'))) {
        console.log(`Stage ${stageId} is already running or completed`);
        return;
    }

    const statusIcon = taskItem.querySelector('.task-status');
    const outputDiv = taskItem.querySelector('.task-output');
    const outputContent = taskItem.querySelector('.output-content');
    const outputCursor = taskItem.querySelector('.output-cursor');
    const streamBtn = taskItem.querySelector('.btn-stream');

    // Update UI
    taskItem.classList.add('active');
    statusIcon.textContent = '🔄';
    outputDiv.style.display = 'block';
    outputContent.textContent = '';
    outputCursor.classList.remove('hidden');
    streamBtn.disabled = true;
    streamBtn.textContent = '处理中...';

    // If this is PPT creation stage, show editor button immediately
    if (stageId === 'ppt_creation') {
        // Show the existing editor button if it exists
        const existingEditorBtn = document.getElementById(`editor-btn-${stageId}`);
        if (existingEditorBtn) {
            existingEditorBtn.style.display = 'inline-block';
            console.log('Editor button shown for PPT creation stage');
        } else {
            // Create new editor button if not exists
            const editorBtn = document.createElement('button');
            editorBtn.onclick = openEditor;
            editorBtn.className = 'editor-btn';
            editorBtn.style.cssText = 'background: #27ae60; color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.8em; cursor: pointer; margin-left: 8px;';
            editorBtn.innerHTML = '<i class="fas fa-edit"></i> 打开编辑器';

            // Insert after the stream button
            if (streamBtn && streamBtn.parentNode) {
                streamBtn.parentNode.insertBefore(editorBtn, streamBtn.nextSibling);
            }

            console.log('Editor button created for PPT creation stage');
        }
    }

    try {
        const response = await fetch(`/projects/${currentProjectId}/stage-stream/${stageId}`);
        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            const chunk = decoder.decode(value);
            const lines = chunk.split('\n');

            for (const line of lines) {
                if (line.startsWith('data: ')) {
                    try {
                        const data = JSON.parse(line.slice(6));

                        if (data.error) {
                            outputContent.textContent = `错误: ${data.error}`;
                            statusIcon.textContent = '❌';
                            streamBtn.disabled = false;
                            streamBtn.textContent = '重试';

                            // If stage is already running or completed, don't show as error
                            if (data.error.includes('already running') || data.error.includes('already completed')) {
                                outputContent.textContent = `提示: ${data.error}`;
                                statusIcon.textContent = '⚠️';
                                streamBtn.style.display = 'none';
                            }
                            break;
                        }

                        if (data.content) {
                            outputContent.textContent += data.content;
                            outputDiv.scrollTop = outputDiv.scrollHeight;
                        }

                        if (data.done) {
                            outputCursor.classList.add('hidden');
                            statusIcon.textContent = '✅';
                            streamBtn.textContent = '完成';
                            streamBtn.style.display = 'none';

                            // 如果是大纲生成阶段，格式化JSON内容
                            if (stageId === 'outline_generation') {
                                try {
                                    const jsonContent = outputContent.textContent;
                                    const parsed = JSON.parse(jsonContent);
                                    const formattedContent = JSON.stringify(parsed, null, 2);

                                    // 创建pre元素来正确显示JSON
                                    const preElement = document.createElement('pre');
                                    preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
                                    preElement.textContent = formattedContent;
                                    outputContent.innerHTML = '';
                                    outputContent.appendChild(preElement);

                                    console.log('Successfully formatted JSON outline with', parsed.slides ? parsed.slides.length : 0, 'slides');
                                } catch (e) {
                                    console.warn('Failed to parse JSON content for formatting:', e);
                                    // 保持原始内容，但仍然用pre包装
                                    const preElement = document.createElement('pre');
                                    preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
                                    preElement.textContent = outputContent.textContent;
                                    outputContent.innerHTML = '';
                                    outputContent.appendChild(preElement);
                                }
                            }

                            // If this is PPT creation stage, update editor button text
                            if (stageId === 'ppt_creation') {
                                const existingEditorBtn = taskItem.querySelector('.editor-btn');
                                if (existingEditorBtn) {
                                    existingEditorBtn.innerHTML = '<i class="fas fa-edit"></i> 查看PPT';
                                    console.log('Updated editor button text to "查看PPT"');
                                }
                            }

                            // Refresh the page to show updated progress
                            setTimeout(() => {
                                window.location.reload();
                            }, 2000);
                            break;
                        }
                    } catch (e) {
                        console.error('Error parsing stream data:', e);
                    }
                }
            }
        }
    } catch (error) {
        console.error('Error streaming stage:', error);
        outputContent.textContent = `连接错误: ${error.message}`;
        statusIcon.textContent = '❌';
    } finally {
        streamBtn.disabled = false;
        if (streamBtn.textContent === '处理中...') {
            streamBtn.textContent = '重试';
        }
    }
}

function startStage(stageId) {
    updateStageStatus(stageId, 'running');
}

function completeStage(stageId) {
    updateStageStatus(stageId, 'completed', 100);
}

function retryStage(stageId) {
    updateStageStatus(stageId, 'running', 0);
}

// Continue from a specific stage - reset all subsequent stages and start from the selected stage
async function continueFromStage(stageId) {
    console.log(`Continue from stage: ${stageId}`);

    // Show confirmation dialog
    const confirmMessage = `确定要从"${getStageDisplayName(stageId)}"步骤重新开始吗？\n\n这将重置该步骤及之后的所有步骤，并重新执行工作流程。`;

    if (!confirm(confirmMessage)) {
        return;
    }

    try {
        // Call backend API to reset stages from the selected stage
        const response = await fetch(`/api/projects/${currentProjectId}/continue-from-stage`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                stage_id: stageId
            })
        });

        if (response.ok) {
            const result = await response.json();

            // Show success message
            alert(`已从"${getStageDisplayName(stageId)}"步骤重新开始，正在重新执行工作流程...`);

            // Reload page to show updated status
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } else {
            const error = await response.json();
            throw new Error(error.detail || '重新开始失败');
        }
    } catch (error) {
        console.error('Error continuing from stage:', error);
        alert('重新开始失败: ' + error.message);
    }
}

// Get display name for stage ID
function getStageDisplayName(stageId) {
    const stageNames = {
        'requirements_confirmation': '需求确认',
        'outline_generation': '大纲生成',
        'theme_configuration': '主题配置',
        'content_enhancement': '内容增强',
        'ppt_creation': 'PPT生成',
        'quality_review': '质量审核'
    };

    return stageNames[stageId] || stageId;
}

async function updateStageStatus(stageId, status, progress = null) {
    try {
        const response = await fetch(`/api/projects/${currentProjectId}/stages/${stageId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                status: status,
                progress: progress
            })
        });

        if (response.ok) {
            // Reload page to show updated status
            setTimeout(() => {
                window.location.reload();
            }, 500);
        } else {
            alert('更新失败，请重试');
        }
    } catch (error) {
        console.error('Error updating stage:', error);
        alert('更新失败: ' + error.message);
    }
}

// Silent version that doesn't reload the page (for regeneration scenarios)
async function updateStageStatusSilent(stageId, status, progress = null) {
    try {
        const response = await fetch(`/api/projects/${currentProjectId}/stages/${stageId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                status: status,
                progress: progress
            })
        });

        if (!response.ok) {
            console.warn('Failed to update stage status silently');
        }
    } catch (error) {
        console.error('Error updating stage silently:', error);
    }
}

// Subtask management functions removed - now using complete stage execution

// Real-time updates
setInterval(async function() {
    try {
        const response = await fetch(`/api/projects/${currentProjectId}/todo`);
        const todoData = await response.json();

        // Update overall progress
        const progressBar = document.querySelector('.overall-progress-bar');
        const progressText = document.querySelector('.overall-progress-text');
        const progressDetails = document.querySelector('.progress-details');

        if (progressBar && progressText && todoData.overall_progress !== undefined) {
            progressBar.style.width = todoData.overall_progress + '%';
            progressText.textContent = `总体进度: ${todoData.overall_progress.toFixed(1)}%`;
        }

        if (progressDetails && todoData.stages && Array.isArray(todoData.stages)) {
            const completedStages = todoData.stages.filter(s => s.status === 'completed').length;
            progressDetails.textContent = `已完成 ${completedStages} / ${todoData.stages.length} 个阶段`;
        }

        // Hide connection error if update is successful
        const errorElement = document.getElementById('connection-error');
        if (errorElement) {
            errorElement.style.display = 'none';
        }

        // Update stage indicators
        if (todoData.stages && Array.isArray(todoData.stages)) {
            todoData.stages.forEach(stage => {
            const stageElement = document.querySelector(`[data-stage-id="${stage.id}"]`);
            if (stageElement) {
                const icon = stageElement.querySelector('.stage-status-icon');
                const progressBar = stageElement.querySelector('.stage-progress-bar');
                const progressText = stageElement.querySelector('.stage-progress-text');
                const taskStatus = stageElement.querySelector('.task-status');

                // Update status icon
                if (stage.status === 'completed') {
                    icon.textContent = '✓';
                    icon.parentElement.style.background = '#27ae60';
                    if (taskStatus) taskStatus.textContent = '✅';

                    // Auto-start outline generation when requirements confirmation is completed
                    if (stage.id === 'requirements_confirmation') {
                        const outlineStage = document.querySelector('[data-stage-id="outline_generation"]');
                        const outlineStatus = outlineStage?.querySelector('.stage-status-icon')?.textContent;
                        if (outlineStatus === '⏳') {
                            console.log('Requirements just completed, starting outline generation');
                            setTimeout(() => {
                                startStageExecution('outline_generation');
                            }, 2000); // Wait 2 seconds for UI to update
                        }
                    }
                } else if (stage.status === 'running') {
                    icon.innerHTML = '<div style="width: 16px; height: 16px; border: 2px solid white; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div>';
                    icon.parentElement.style.background = '#3498db';
                    if (taskStatus) taskStatus.textContent = '🔄';

                    // Show editor button for PPT creation stage when it starts running
                    if (stage.id === 'ppt_creation') {
                        const editorBtn = document.getElementById(`editor-btn-${stage.id}`);
                        if (editorBtn) {
                            editorBtn.style.display = 'inline-block';
                        }
                    }
                } else if (stage.status === 'failed') {
                    icon.textContent = '✗';
                    icon.parentElement.style.background = '#e74c3c';
                    if (taskStatus) taskStatus.textContent = '❌';
                }

                // Update progress bar
                if (progressBar && progressText && stage.status === 'running') {
                    progressBar.style.width = stage.progress + '%';
                    progressText.textContent = stage.progress.toFixed(1) + '%';
                }
            }
        });
        }

    } catch (error) {
        console.error('Error updating TODO board:', error);
        // Show connection error message
        const errorElement = document.getElementById('connection-error');
        if (errorElement) {
            errorElement.style.display = 'block';
            errorElement.textContent = '连接错误，请刷新页面重试';
        }
    }
}, 3000); // Update every 3 seconds

// Modal functionality removed - using direct stage execution

// Open editor function
function openEditor() {
    console.log(`Opening editor for project: ${currentProjectId}`);
    const editorUrl = `/projects/${currentProjectId}/edit`;
    console.log(`Editor URL: ${editorUrl}`);
    window.open(editorUrl, '_blank');
}

// Auto-start workflow when page loads
document.addEventListener('DOMContentLoaded', function() {
    // Check if we just came from requirements confirmation (URL parameter or session storage)
    const urlParams = new URLSearchParams(window.location.search);
    const fromRequirements = urlParams.get('from_requirements') === 'true' ||
                            sessionStorage.getItem('requirements_just_confirmed') === 'true';

    // Clear the session storage flag
    sessionStorage.removeItem('requirements_just_confirmed');

    // Check requirements confirmation status and outline generation status
    const requirementsStage = document.querySelector('[data-stage-id="requirements_confirmation"]');
    const outlineStage = document.querySelector('[data-stage-id="outline_generation"]');

    const requirementsCompleted = requirementsStage?.querySelector('.stage-status-icon')?.textContent === '✓';
    const outlineStatus = outlineStage?.querySelector('.stage-status-icon')?.textContent;

    // Auto-start outline generation if requirements just confirmed or if requirements completed and outline pending
    if ((fromRequirements || requirementsCompleted) && outlineStatus === '⏳') {
        // Requirements confirmed, automatically start outline generation (second step)
        console.log('Requirements confirmed, starting outline generation automatically');
        // 只有在不是来自需求确认页面时才调用，避免重复调用
        if (!fromRequirements) {
            setTimeout(() => {
                startOutlineGenerationNew();
            }, 1000);
        }
    } else if (!requirementsCompleted) {
        // Check if this is a new project (all stages are pending)
        const stages = document.querySelectorAll('.todo-stage');
        let allPending = true;

        stages.forEach(stage => {
            const statusIcon = stage.querySelector('.stage-status-icon');
            if (statusIcon && statusIcon.textContent !== '⏳') {
                allPending = false;
            }
        });

        if (allPending) {
            // Start the workflow automatically for requirements confirmation
            setTimeout(() => {
                fetch(`/projects/${currentProjectId}/start-workflow`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                }).then(response => {
                    if (response.ok) {
                        console.log('Workflow started automatically');
                    } else {
                        console.error('Failed to start workflow');
                    }
                }).catch(error => {
                    console.error('Error starting workflow:', error);
                });
            }, 2000); // Wait 2 seconds after page load
        }
    }
});

// Sequential stage execution - simplified to not interfere with backend workflow
async function startSequentialStageExecution() {
    console.log('Workflow started automatically');
    // The backend workflow will handle the actual execution
    // Frontend just monitors progress through real-time updates
}

// Execute a single stage and wait for completion
async function executeStageAndWait(stageId) {
    return new Promise((resolve, reject) => {
        const taskItem = document.querySelector(`[data-stage-id="${stageId}"]`);
        if (!taskItem) {
            resolve();
            return;
        }

        const statusIcon = taskItem.querySelector('.task-status');
        const outputDiv = taskItem.querySelector('.task-output');
        const outputContent = taskItem.querySelector('.output-content');
        const outputCursor = taskItem.querySelector('.output-cursor');
        const streamBtn = taskItem.querySelector('.btn-stream');

        // Update UI
        taskItem.classList.add('active');
        statusIcon.textContent = '🔄';
        outputDiv.style.display = 'block';
        outputContent.textContent = '';
        outputCursor.classList.remove('hidden');
        if (streamBtn) {
            streamBtn.disabled = true;
            streamBtn.textContent = '处理中...';
        }

        // Start streaming
        fetch(`/projects/${currentProjectId}/stage-stream/${stageId}`)
            .then(response => response.body.getReader())
            .then(reader => {
                const decoder = new TextDecoder();

                function readStream() {
                    return reader.read().then(({ done, value }) => {
                        if (done) {
                            // Stream completed
                            outputCursor.classList.add('hidden');
                            statusIcon.textContent = '✅';
                            if (streamBtn) {
                                streamBtn.textContent = '完成';
                                streamBtn.disabled = false;
                                streamBtn.style.display = 'none';
                            }

                            // Small delay before resolving to ensure UI updates
                            setTimeout(() => {
                                resolve();
                            }, 500);
                            return;
                        }

                        const chunk = decoder.decode(value);
                        const lines = chunk.split('\n');

                        for (const line of lines) {
                            if (line.startsWith('data: ')) {
                                try {
                                    const data = JSON.parse(line.slice(6));

                                    if (data.error) {
                                        outputContent.textContent = `错误: ${data.error}`;
                                        statusIcon.textContent = '❌';
                                        reject(new Error(data.error));
                                        return;
                                    }

                                    if (data.content) {
                                        outputContent.textContent += data.content;
                                        outputDiv.scrollTop = outputDiv.scrollHeight;
                                    }

                                    if (data.done) {
                                        outputCursor.classList.add('hidden');
                                        statusIcon.textContent = '✅';
                                        if (streamBtn) {
                                            streamBtn.textContent = '完成';
                                            streamBtn.disabled = false;
                                        }

                                        // 如果是大纲生成相关的流式处理，格式化JSON内容
                                        if (stageId === 'outline_generation' || outputContent.textContent.trim().startsWith('{')) {
                                            try {
                                                const jsonContent = outputContent.textContent;
                                                const parsed = JSON.parse(jsonContent);
                                                const formattedContent = JSON.stringify(parsed, null, 2);

                                                // 创建pre元素来正确显示JSON
                                                const preElement = document.createElement('pre');
                                                preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
                                                preElement.textContent = formattedContent;
                                                outputContent.innerHTML = '';
                                                outputContent.appendChild(preElement);

                                                console.log('Successfully formatted JSON content with', parsed.slides ? parsed.slides.length : 0, 'slides');
                                            } catch (e) {
                                                console.warn('Failed to parse JSON content for formatting:', e);
                                                // 保持原始内容，但仍然用pre包装
                                                const preElement = document.createElement('pre');
                                                preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
                                                preElement.textContent = outputContent.textContent;
                                                outputContent.innerHTML = '';
                                                outputContent.appendChild(preElement);
                                            }
                                        }

                                        resolve();
                                        return;
                                    }
                                } catch (e) {
                                    console.error('Error parsing stream data:', e);
                                }
                            }
                        }

                        return readStream();
                    });
                }

                return readStream();
            })
            .catch(error => {
                console.error('Error streaming subtask:', error);
                outputContent.textContent = `连接错误: ${error.message}`;
                statusIcon.textContent = '❌';
                if (streamBtn) {
                    streamBtn.disabled = false;
                    streamBtn.textContent = '重试';
                }
                reject(error);
            });
    });
}

// Update stage visual status
function updateStageVisualStatus(stageElement, status) {
    const statusIcon = stageElement.querySelector('.stage-status-icon');
    const progressBar = stageElement.querySelector('.stage-progress-bar');

    if (status === 'running') {
        if (statusIcon) statusIcon.textContent = '🔄';
        if (progressBar) progressBar.style.width = '50%';
        stageElement.style.borderLeft = '4px solid #f39c12';
    } else if (status === 'completed') {
        if (statusIcon) statusIcon.textContent = '✅';
        if (progressBar) progressBar.style.width = '100%';
        stageElement.style.borderLeft = '4px solid #27ae60';
    }
}


let currentView = 'outline';
let mindmapData = null;
let selectedNode = null;
let editingNode = null;
let mindmapSvg = null;
let mindmapZoom = null;

// 切换大纲视图（JSON编辑器 vs 大纲视图）
function switchOutlineView(viewType) {
    const jsonView = document.getElementById('json-view');
    const outlineView = document.getElementById('outline-view');
    const jsonBtn = document.getElementById('json-view-btn');
    const outlineBtn = document.getElementById('outline-view-btn');

    if (viewType === 'json') {
        // 切换到JSON视图
        if (jsonView) jsonView.style.display = 'block';
        if (outlineView) outlineView.style.display = 'none';

        // 更新按钮样式
        if (jsonBtn) {
            jsonBtn.style.background = '#3498db';
            jsonBtn.style.color = 'white';
        }
        if (outlineBtn) {
            outlineBtn.style.background = 'transparent';
            outlineBtn.style.color = '#6c757d';
        }

        currentView = 'json';
    } else if (viewType === 'outline') {
        // 切换到大纲视图
        if (jsonView) jsonView.style.display = 'none';
        if (outlineView) outlineView.style.display = 'block';

        // 更新按钮样式
        if (outlineBtn) {
            outlineBtn.style.background = '#3498db';
            outlineBtn.style.color = 'white';
        }
        if (jsonBtn) {
            jsonBtn.style.background = 'transparent';
            jsonBtn.style.color = '#6c757d';
        }

        currentView = 'outline';

        // 渲染大纲视图
        renderOutlineView();
    }
}

// 渲染大纲视图
function renderOutlineView() {
    const outlineContent = getOutlineContent();
    if (!outlineContent) {
        console.log('No outline content available');
        return;
    }

    try {
        const parsedOutline = JSON.parse(outlineContent);
        if (parsedOutline && parsedOutline.slides) {
            renderOutlinePreview(parsedOutline);
        }
    } catch (e) {
        console.log('Failed to parse outline content for view rendering');
    }
}

// 获取大纲内容
function getOutlineContent() {
    const outlineDisplay = document.getElementById('outline-content-display');
    if (!outlineDisplay) return null;

    const preElement = outlineDisplay.querySelector('pre');
    if (preElement) {
        let content = preElement.textContent || preElement.innerText || '';
        return content.trim();
    }

    // 如果没有pre元素，从整个div获取内容并处理HTML实体
    let content = outlineDisplay.textContent || outlineDisplay.innerText || '';
    content = content.replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ');
    return content.trim();
}


// ========== 大纲预览功能 ==========

let isDetailView = false;
let currentOutlineData = null;

// 切换大纲视图（简洁视图 vs 详细视图）
function toggleOutlineView() {
    const compactView = document.getElementById('compactView');
    const detailView = document.getElementById('detailView');
    const toggleText = document.getElementById('viewToggleText');

    if (isDetailView) {
        compactView.style.display = 'block';
        detailView.style.display = 'none';
        toggleText.textContent = '详细视图';
        isDetailView = false;
    } else {
        compactView.style.display = 'none';
        detailView.style.display = 'block';
        toggleText.textContent = '简洁视图';
        isDetailView = true;
    }
}

// 渲染大纲预览
function renderOutlinePreview(outlineData) {
    if (!outlineData) return;

    currentOutlineData = outlineData;

    // 隐藏空状态，显示内容
    const emptyDiv = document.getElementById('outline-empty');
    const loadingDiv = document.getElementById('outline-loading');
    if (emptyDiv) emptyDiv.style.display = 'none';
    if (loadingDiv) loadingDiv.style.display = 'none';

    // 渲染简洁视图
    renderCompactView(outlineData);

    // 渲染详细视图
    renderDetailView(outlineData);
}

// 渲染简洁视图
function renderCompactView(outlineData) {
    const container = document.getElementById('outline-slides-compact');
    if (!container || !outlineData.slides) return;

    container.innerHTML = '';

    outlineData.slides.forEach((slide, index) => {
        const slideCard = document.createElement('div');
        slideCard.style.cssText = `
            padding: 15px; background: white; border-radius: 8px;
            border-left: 4px solid #3498db; transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative;
            cursor: pointer;
        `;

        slideCard.onmouseover = function() {
            this.style.transform = 'translateY(-2px)';
            this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
        };
        slideCard.onmouseout = function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
        };

        const contentPoints = slide.content_points || slide.content || [];
        const firstPoint = Array.isArray(contentPoints) ? contentPoints[0] : contentPoints;
        const remainingCount = Array.isArray(contentPoints) ? Math.max(0, contentPoints.length - 1) : 0;

        slideCard.innerHTML = `
            <div style="display: flex; align-items: center; margin-bottom: 8px;">
                <span style="background: #3498db; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: bold; margin-right: 10px;">
                    ${slide.page_number || index + 1}
                </span>
                <strong style="color: #2c3e50; font-size: 0.9em;">${slide.title || '未命名幻灯片'}</strong>
            </div>
            ${slide.subtitle ? `<p style="color: #7f8c8d; font-size: 0.8em; margin: 5px 0; font-style: italic;">${slide.subtitle}</p>` : ''}
            <div style="color: #666; font-size: 0.8em; line-height: 1.4;">
                ${firstPoint ? (typeof firstPoint === 'string' ? firstPoint.substring(0, 80) + (firstPoint.length > 80 ? '...' : '') : JSON.stringify(firstPoint).substring(0, 80) + '...') : '<span style="color: #95a5a6;">暂无内容</span>'}
                ${remainingCount > 0 ? `<br><span style="color: #95a5a6;">+${remainingCount} 个要点</span>` : ''}
            </div>
        `;

        slideCard.onclick = () => viewSlideDetail(index);
        container.appendChild(slideCard);
    });
}

// 渲染详细视图
function renderDetailView(outlineData) {
    const container = document.getElementById('outline-slides-detail');
    if (!container || !outlineData.slides) return;

    container.innerHTML = '';

    outlineData.slides.forEach((slide, index) => {
        const slideDiv = document.createElement('div');
        slideDiv.style.cssText = `
            padding: 20px; margin-bottom: 15px; background: #f8f9fa;
            border-radius: 10px; border-left: 4px solid #3498db; position: relative;
        `;

        const contentPoints = slide.content_points || slide.content || [];
        let contentHtml = '';

        if (Array.isArray(contentPoints) && contentPoints.length > 0) {
            contentHtml = `
                <div style="margin-top: 10px;">
                    <h5 style="color: #555; margin-bottom: 8px; font-size: 0.9em;">内容要点：</h5>
                    <ul style="margin: 0; padding-left: 20px; color: #555; line-height: 1.6;">
                        ${contentPoints.map(point => `<li style="margin-bottom: 5px;">${point}</li>`).join('')}
                    </ul>
                </div>
            `;
        } else if (contentPoints) {
            contentHtml = `
                <div style="margin-top: 10px;">
                    <h5 style="color: #555; margin-bottom: 8px; font-size: 0.9em;">内容：</h5>
                    <div style="background: white; padding: 15px; border-radius: 6px; color: #555; line-height: 1.6; white-space: pre-wrap;">${contentPoints}</div>
                </div>
            `;
        }

        slideDiv.innerHTML = `
            <div style="display: flex; align-items: center; margin-bottom: 15px;">
                <span style="background: #3498db; color: white; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 15px;">
                    ${slide.page_number || index + 1}
                </span>
                <div style="flex: 1;">
                    <strong style="color: #2c3e50; font-size: 1.1em;">${slide.title || '未命名幻灯片'}</strong>
                    ${slide.subtitle ? `<br><em style="color: #7f8c8d; font-size: 0.9em;">${slide.subtitle}</em>` : ''}
                </div>
            </div>
            ${contentHtml}
            ${slide.slide_type ? `<div style="margin-top: 10px;"><span style="background: #e8f4fd; color: #3498db; padding: 4px 8px; border-radius: 4px; font-size: 0.8em;">类型: ${slide.slide_type}</span></div>` : ''}
        `;

        container.appendChild(slideDiv);
    });
}

// 查看幻灯片详情
function viewSlideDetail(slideIndex) {
    if (!currentOutlineData || !currentOutlineData.slides || !currentOutlineData.slides[slideIndex]) return;

    const slide = currentOutlineData.slides[slideIndex];

    // 创建模态框显示详细信息
    const modal = document.createElement('div');
    modal.style.cssText = `
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 1000; display: flex;
        align-items: center; justify-content: center; padding: 20px;
    `;

    const content = document.createElement('div');
    content.style.cssText = `
        background: white; border-radius: 15px; padding: 30px;
        max-width: 600px; max-height: 80vh; overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    `;

    const contentPoints = slide.content_points || slide.content || [];
    let contentHtml = '';

    if (Array.isArray(contentPoints) && contentPoints.length > 0) {
        contentHtml = `
            <h5 style="color: #555; margin: 15px 0 8px 0;">内容要点：</h5>
            <ul style="margin: 0; padding-left: 20px; color: #555; line-height: 1.6;">
                ${contentPoints.map(point => `<li style="margin-bottom: 5px;">${point}</li>`).join('')}
            </ul>
        `;
    } else if (contentPoints) {
        contentHtml = `
            <h5 style="color: #555; margin: 15px 0 8px 0;">内容：</h5>
            <div style="background: #f8f9fa; padding: 15px; border-radius: 6px; color: #555; line-height: 1.6; white-space: pre-wrap;">${contentPoints}</div>
        `;
    }

    content.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="color: #2c3e50; margin: 0;">第${slide.page_number || slideIndex + 1}页详情</h3>
            <button onclick="this.closest('.modal').remove()" style="background: #e74c3c; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px;">×</button>
        </div>
        <h4 style="color: #3498db; margin-bottom: 10px;">${slide.title || '未命名幻灯片'}</h4>
        ${slide.subtitle ? `<p style="color: #7f8c8d; font-style: italic; margin-bottom: 15px;">${slide.subtitle}</p>` : ''}
        ${contentHtml}
        ${slide.slide_type ? `<div style="margin-top: 15px;"><span style="background: #e8f4fd; color: #3498db; padding: 6px 12px; border-radius: 6px; font-size: 0.9em;">类型: ${slide.slide_type}</span></div>` : ''}
    `;

    modal.className = 'modal';
    modal.appendChild(content);
    document.body.appendChild(modal);

    // 点击背景关闭
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

// 编辑大纲内容
function editOutlineContent() {
    // 获取当前大纲内容
    let outlineContent = '';
    if (currentOutlineData) {
        outlineContent = JSON.stringify(currentOutlineData, null, 2);
    } else {
        // 尝试从显示区域获取内容
        const outlineDisplay = document.getElementById('outline-content-display');
        if (outlineDisplay) {
            outlineContent = outlineDisplay.textContent || outlineDisplay.innerText || '';
        }
    }

    // 创建编辑模态框
    const modal = document.createElement('div');
    modal.style.cssText = `
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 1000; display: flex;
        align-items: center; justify-content: center; padding: 20px;
    `;

    const content = document.createElement('div');
    content.style.cssText = `
        background: white; border-radius: 15px; padding: 30px;
        width: 90%; max-width: 800px; height: 80vh; display: flex;
        flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    `;

    content.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="color: #2c3e50; margin: 0;">编辑PPT大纲</h3>
            <button onclick="this.closest('.modal').remove()" style="background: #e74c3c; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px;">×</button>
        </div>
        <div style="flex: 1; display: flex; flex-direction: column;">
            <textarea id="outlineEditor" style="flex: 1; border: 2px solid #ecf0f1; border-radius: 8px; padding: 15px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.5; resize: none;" placeholder="编辑大纲JSON...">${outlineContent}</textarea>
            <div style="display: flex; gap: 8px; margin-top: 15px; justify-content: flex-end;">
                <button onclick="this.closest('.modal').remove()" class="btn btn-sm" style="background: #95a5a6; color: white;">取消</button>
                <button onclick="saveOutlineChanges()" class="btn btn-sm btn-primary">保存修改</button>
            </div>
        </div>
    `;

    modal.className = 'modal';
    modal.appendChild(content);
    document.body.appendChild(modal);
}

// 保存大纲修改
function saveOutlineChanges() {
    const editor = document.getElementById('outlineEditor');
    if (!editor) return;

    try {
        const newOutline = JSON.parse(editor.value);

        // 更新当前大纲数据
        currentOutlineData = newOutline;

        // 重新渲染预览
        renderOutlinePreview(newOutline);

        // 更新JSON显示区域
        const outlineDisplay = document.getElementById('outline-content-display');
        if (outlineDisplay) {
            const formattedContent = JSON.stringify(newOutline, null, 2);
            const preElement = document.createElement('pre');
            preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
            preElement.textContent = formattedContent;
            outlineDisplay.innerHTML = '';
            outlineDisplay.appendChild(preElement);
        }

        // 保存到服务器
        fetch(`/projects/${currentProjectId}/update-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                outline_content: JSON.stringify(newOutline, null, 2)
            })
        }).then(response => {
            if (response.ok) {
                alert('大纲修改成功！');
                // 关闭模态框
                document.querySelector('.modal').remove();

                // 立即重新渲染大纲视图，使用最新数据
                setTimeout(() => {
                    // 如果当前是大纲视图，重新渲染
                    if (currentView === 'outline') {
                        renderOutlineView();
                    }

                    // 如果当前是新的大纲视图，使用最新数据重新渲染
                    if (currentViewNew === 'outline') {
                        renderOutlineViewNewWithData(newOutline);
                    }
                }, 100); // 减少延迟
            } else {
                alert('保存失败，请重试');
            }
        }).catch(error => {
            console.error('Error saving outline:', error);
            alert('保存失败: ' + error.message);
        });

    } catch (error) {
        if (error instanceof SyntaxError) {
            alert('JSON格式错误，请检查语法！');
        } else {
            console.error('Error saving outline:', error);
            alert('保存失败: ' + error.message);
        }
    }
}

// 导出大纲为JSON文件
function exportOutlineJSON() {
    if (!currentOutlineData) {
        alert('大纲数据不存在，无法导出');
        return;
    }

    const dataStr = JSON.stringify(currentOutlineData, null, 2);
    const dataBlob = new Blob([dataStr], {type: 'application/json'});

    const link = document.createElement('a');
    link.href = URL.createObjectURL(dataBlob);
    link.download = `${(currentOutlineData.title || 'ppt_outline')}_${new Date().toISOString().split('T')[0]}.json`;

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    console.log('大纲JSON文件已导出');
}


// 大纲视图模式切换（简洁视图 vs 详细视图）
function toggleOutlineViewMode() {
    isDetailView = !isDetailView;
    const toggleText = document.getElementById('viewToggleText');

    if (toggleText) {
        toggleText.textContent = isDetailView ? '简洁视图' : '详细视图';
    }

    // 重新渲染大纲视图
    renderOutlineView();
}



// 更新JSON编辑器内容
function updateJsonEditor(jsonString) {
    const contentDiv = document.getElementById('outline-content-display');
    if (contentDiv) {
        // 尝试格式化JSON
        let formattedContent;
        let parsedOutline = null;
        try {
            parsedOutline = JSON.parse(jsonString);
            formattedContent = JSON.stringify(parsedOutline, null, 2);
        } catch (e) {
            formattedContent = jsonString;
        }

        // 创建pre元素来正确显示JSON
        const preElement = document.createElement('pre');
        preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
        preElement.textContent = formattedContent;
        contentDiv.innerHTML = '';
        contentDiv.appendChild(preElement);

        // 如果当前是大纲视图，立即更新大纲显示
        if (parsedOutline && currentViewNew === 'outline') {
            setTimeout(() => {
                renderOutlineViewNewWithData(parsedOutline);
            }, 100);
        }
    }
}

// 保存大纲到服务器
async function saveOutlineToServer(jsonString) {
    try {
        const response = await fetch(`/projects/${currentProjectId}/update-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                outline_content: jsonString
            })
        });

        if (!response.ok) {
            throw new Error('保存到服务器失败');
        }

        console.log('大纲已保存到服务器');
    } catch (error) {
        console.error('保存到服务器失败:', error);
        throw error;
    }
}

// ========== 辅助函数 ==========

// 隐藏右键菜单
function hideContextMenu() {
    const contextMenu = document.getElementById('mindmap-context-menu');
    if (contextMenu) {
        contextMenu.style.display = 'none';
    }
}

// ========== 事件监听器 ==========

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 隐藏右键菜单当点击其他地方时
    document.addEventListener('click', function(event) {
        if (!event.target.closest('#mindmap-context-menu')) {
            hideContextMenu();
        }
    });

    // 键盘事件处理
    document.addEventListener('keydown', function(event) {
        // ESC键取消编辑
        if (event.key === 'Escape') {
            if (document.getElementById('node-edit-modal').style.display === 'block') {
                cancelNodeEdit();
            }
            hideContextMenu();
            clearNodeSelection();
        }

        // Enter键保存编辑
        if (event.key === 'Enter' && document.getElementById('node-edit-modal').style.display === 'block') {
            saveNodeEdit();
        }
    });

    // 页面加载时检查是否有现有的大纲数据
    setTimeout(function() {
        const outlineDisplay = document.getElementById('outline-content-display');
        if (outlineDisplay) {
            const content = outlineDisplay.textContent || outlineDisplay.innerText || '';
            if (content.trim()) {
                try {
                    const parsedOutline = JSON.parse(content);
                    if (parsedOutline && parsedOutline.slides) {
                        // 渲染大纲预览
                        renderOutlinePreview(parsedOutline);

                        // 如果当前是大纲视图，渲染大纲内容
                        if (currentView === 'outline') {
                            renderOutlineView();
                        }

                        // 如果当前是新的大纲视图，渲染新的大纲内容
                        if (currentViewNew === 'outline') {
                            renderOutlineViewNew();
                        }
                    }
                } catch (e) {
                    console.log('现有内容不是有效的JSON格式');
                }
            }
        }
    }, 500);
});

// ========== 全屏功能 ==========

let isFullscreen = false;
let originalMindmapData = null;




// New view switching functions for the new outline section
let currentViewNew = 'json'; // Default to JSON view for better compatibility
let currentEditInput = null; // Track current editing input to prevent duplicates

function switchOutlineViewNew(view) {
    console.log('Switching to view:', view);

    const jsonViewBtn = document.getElementById('json-view-btn-new');
    const outlineViewBtn = document.getElementById('outline-view-btn-new');
    const jsonView = document.getElementById('outline-content-display');
    const outlineView = document.getElementById('outline-view-new');
    const actionsDiv = document.getElementById('outline-actions');

    if (!jsonViewBtn || !outlineViewBtn || !jsonView || !outlineView) {
        console.error('View elements not found');
        return;
    }

    currentViewNew = view;

    if (view === 'json') {
        // Show JSON view
        jsonView.style.display = 'block';
        outlineView.style.display = 'none';

        // Show action buttons in JSON view
        if (actionsDiv) {
            actionsDiv.style.display = 'block';
        }

        // Update button styles
        jsonViewBtn.style.background = '#3498db';
        jsonViewBtn.style.color = 'white';
        outlineViewBtn.style.background = 'transparent';
        outlineViewBtn.style.color = '#6c757d';
    } else if (view === 'outline') {
        // Show outline view
        jsonView.style.display = 'none';
        outlineView.style.display = 'block';

        // Hide action buttons in outline view
        if (actionsDiv) {
            actionsDiv.style.display = 'none';
        }

        // Update button styles
        outlineViewBtn.style.background = '#3498db';
        outlineViewBtn.style.color = 'white';
        jsonViewBtn.style.background = 'transparent';
        jsonViewBtn.style.color = '#6c757d';

        // Generate outline view if content exists
        renderOutlineViewNew();
    }
}

// 渲染新的大纲视图
function renderOutlineViewNew() {
    let outlineContent = getOutlineContentNew();
    const outlineContainer = document.getElementById('outline-content-new');
    const loadingDiv = document.getElementById('outline-loading-new');
    const errorDiv = document.getElementById('outline-error-new');
    const emptyDiv = document.getElementById('outline-empty-new');

    if (!outlineContainer) {
        console.error('Outline container not found');
        return;
    }

    // 显示加载状态
    if (loadingDiv) loadingDiv.style.display = 'block';
    if (errorDiv) errorDiv.style.display = 'none';
    if (emptyDiv) emptyDiv.style.display = 'none';

    try {
        if (!outlineContent) {
            // 没有内容，显示空状态
            if (loadingDiv) loadingDiv.style.display = 'none';
            if (emptyDiv) emptyDiv.style.display = 'block';
            return;
        }

        // 额外的内容清理，确保JSON格式正确
        outlineContent = outlineContent.trim();

        // 如果内容不是以{开头，尝试查找JSON开始位置
        if (!outlineContent.startsWith('{')) {
            const jsonStart = outlineContent.indexOf('{');
            if (jsonStart > 0) {
                outlineContent = outlineContent.substring(jsonStart);
                console.log('从位置', jsonStart, '开始提取JSON内容');
            }
        }

        // 如果内容不是以}结尾，尝试查找JSON结束位置
        if (!outlineContent.endsWith('}')) {
            const jsonEnd = outlineContent.lastIndexOf('}');
            if (jsonEnd > 0) {
                outlineContent = outlineContent.substring(0, jsonEnd + 1);
                console.log('截取到位置', jsonEnd + 1, '的JSON内容');
            }
        }

        let parsedOutline;
        try {
            parsedOutline = JSON.parse(outlineContent);
        } catch (parseError) {
            console.error('JSON解析失败:', parseError);
            if (loadingDiv) loadingDiv.style.display = 'none';
            if (errorDiv) errorDiv.style.display = 'block';
            return;
        }

        // 使用解析后的数据渲染
        renderOutlineViewNewWithData(parsedOutline);

    } catch (error) {
        console.error('渲染大纲视图时出错:', error);
        if (loadingDiv) loadingDiv.style.display = 'none';
        if (errorDiv) errorDiv.style.display = 'block';
    }
}

// 使用指定数据渲染新的大纲视图
function renderOutlineViewNewWithData(parsedOutline) {
    const outlineContainer = document.getElementById('outline-content-new');
    const loadingDiv = document.getElementById('outline-loading-new');
    const errorDiv = document.getElementById('outline-error-new');
    const emptyDiv = document.getElementById('outline-empty-new');

    if (!outlineContainer) {
        console.error('Outline container not found');
        return;
    }

    try {
        if (!parsedOutline || !parsedOutline.slides) {
            // 没有有效数据，显示空状态
            if (loadingDiv) loadingDiv.style.display = 'none';
            if (errorDiv) errorDiv.style.display = 'none';
            if (emptyDiv) emptyDiv.style.display = 'block';
            return;
        }

        if (!parsedOutline.slides || parsedOutline.slides.length === 0) {
            // 没有slides数据，显示空状态
            if (loadingDiv) loadingDiv.style.display = 'none';
            if (emptyDiv) emptyDiv.style.display = 'block';
            return;
        }

        // 渲染大纲内容
        renderOutlineContentNew(parsedOutline, outlineContainer);

        // 隐藏加载状态
        if (loadingDiv) loadingDiv.style.display = 'none';

    } catch (error) {
        console.error('Error rendering outline view with data:', error);
        if (loadingDiv) loadingDiv.style.display = 'none';
        if (errorDiv) {
            errorDiv.style.display = 'block';
            const errorP = errorDiv.querySelector('p');
            if (errorP) {
                errorP.textContent = '大纲渲染失败：' + error.message;
            }
        }
    }
}

// 大纲视图模式切换（简洁视图 vs 详细视图）
let isDetailViewNew = false;

function toggleOutlineViewModeNew() {
    isDetailViewNew = !isDetailViewNew;
    const toggleText = document.getElementById('viewToggleTextNew');

    if (toggleText) {
        toggleText.textContent = isDetailViewNew ? '简洁视图' : '详细视图';
    }

    // 重新渲染大纲视图
    renderOutlineViewNew();
}

// 渲染大纲内容
function renderOutlineContentNew(outline, container) {
    if (!outline || !outline.slides || !container) {
        return;
    }

    // 清空容器
    container.innerHTML = '';

    // 创建标题区域
    const titleSection = document.createElement('div');
    titleSection.style.cssText = 'text-align: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #ecf0f1;';
    titleSection.innerHTML = `
        <h4 style="color: #3498db; margin-bottom: 10px;">${outline.title || '未命名大纲'}</h4>
        <p style="color: #7f8c8d; margin: 0;">
            总共 ${outline.slides.length} 页幻灯片 |
            场景: ${outline.metadata?.scenario || '未指定'} |
            语言: ${outline.metadata?.language || 'zh'}
        </p>
    `;
    container.appendChild(titleSection);

    // 创建大纲内容区域
    const contentSection = document.createElement('div');
    contentSection.style.cssText = 'background: #f8f9fa; border-radius: 10px; padding: 20px;';

    if (isDetailViewNew) {
        // 详细视图
        renderDetailedOutlineView(outline.slides, contentSection);
    } else {
        // 简洁视图
        renderCompactOutlineView(outline.slides, contentSection);
    }

    container.appendChild(contentSection);
}

// 渲染简洁视图
function renderCompactOutlineView(slides, container) {
    const gridContainer = document.createElement('div');
    gridContainer.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;';

    slides.forEach((slide, index) => {
        const slideCard = document.createElement('div');
        slideCard.style.cssText = `
            padding: 15px; background: white; border-radius: 8px;
            border-left: 4px solid #3498db; transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; cursor: pointer;
        `;

        // 添加悬停效果
        slideCard.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
            this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
        });
        slideCard.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
        });

        // 操作按钮
        const actionButtons = document.createElement('div');
        actionButtons.style.cssText = 'position: absolute; top: 10px; right: 10px; display: flex; gap: 5px;';
        actionButtons.innerHTML = `
            <button onclick="editSingleSlideNew(${index})" class="btn btn-primary" style="font-size: 0.7em; padding: 4px 8px; border-radius: 4px;" title="编辑此页">
                <i class="fas fa-edit"></i>
            </button>
            <button onclick="viewSlideDetailNew(${index})" class="btn btn-info" style="font-size: 0.7em; padding: 4px 8px; border-radius: 4px;" title="查看详情">
                <i class="fas fa-eye"></i>
            </button>
        `;

        // 内容区域
        const contentArea = document.createElement('div');
        contentArea.style.cssText = 'margin-right: 60px;';
        contentArea.addEventListener('click', () => viewSlideDetailNew(index));

        const header = document.createElement('div');
        header.style.cssText = 'display: flex; align-items: center; margin-bottom: 8px;';
        header.innerHTML = `
            <span style="background: #3498db; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: bold; margin-right: 10px;">
                ${slide.page_number || index + 1}
            </span>
            <strong style="color: #2c3e50; font-size: 0.9em;">${slide.title || '未命名幻灯片'}</strong>
        `;

        const subtitle = document.createElement('div');
        if (slide.subtitle) {
            subtitle.innerHTML = `<p style="color: #7f8c8d; font-size: 0.8em; margin: 5px 0; font-style: italic;">${slide.subtitle}</p>`;
        }

        const content = document.createElement('div');
        content.style.cssText = 'color: #666; font-size: 0.8em; line-height: 1.4;';

        if (slide.content_points && slide.content_points.length > 0) {
            const firstPoint = slide.content_points[0];
            const truncatedPoint = firstPoint.length > 80 ? firstPoint.substring(0, 80) + '...' : firstPoint;
            content.innerHTML = truncatedPoint;

            if (slide.content_points.length > 1) {
                content.innerHTML += `<br><span style="color: #95a5a6;">+${slide.content_points.length - 1} 个要点</span>`;
            }
        } else if (slide.content) {
            const truncatedContent = slide.content.length > 80 ? slide.content.substring(0, 80) + '...' : slide.content;
            content.innerHTML = truncatedContent;
        } else {
            content.innerHTML = '<span style="color: #95a5a6;">暂无内容</span>';
        }

        contentArea.appendChild(header);
        contentArea.appendChild(subtitle);
        contentArea.appendChild(content);

        slideCard.appendChild(actionButtons);
        slideCard.appendChild(contentArea);
        gridContainer.appendChild(slideCard);
    });

    container.appendChild(gridContainer);
}

// 渲染详细视图
function renderDetailedOutlineView(slides, container) {
    const detailContainer = document.createElement('div');
    detailContainer.style.cssText = 'max-height: 400px; overflow-y: auto;';

    slides.forEach((slide, index) => {
        const slideDetail = document.createElement('div');
        slideDetail.style.cssText = `
            padding: 20px; margin-bottom: 15px; background: white;
            border-radius: 10px; border-left: 4px solid #3498db; position: relative;
        `;

        const header = document.createElement('div');
        header.style.cssText = 'display: flex; align-items: center; margin-bottom: 15px;';
        header.innerHTML = `
            <span style="background: #3498db; color: white; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 15px;">
                ${slide.page_number || index + 1}
            </span>
            <div style="flex: 1;">
                <strong style="color: #2c3e50; font-size: 1.1em;">${slide.title || '未命名幻灯片'}</strong>
                ${slide.subtitle ? `<br><em style="color: #7f8c8d; font-size: 0.9em;">${slide.subtitle}</em>` : ''}
            </div>
            <button onclick="editSingleSlideNew(${index})" class="btn btn-primary" style="font-size: 0.8em; padding: 6px 12px;" title="编辑此页">
                <i class="fas fa-edit"></i> 编辑
            </button>
        `;

        const contentSection = document.createElement('div');

        if (slide.content_points && slide.content_points.length > 0) {
            const pointsSection = document.createElement('div');
            pointsSection.style.cssText = 'margin-top: 10px;';
            pointsSection.innerHTML = '<h5 style="color: #555; margin-bottom: 8px; font-size: 0.9em;">内容要点：</h5>';

            const pointsList = document.createElement('ul');
            pointsList.style.cssText = 'margin: 0; padding-left: 20px; color: #555; line-height: 1.6;';

            slide.content_points.forEach(point => {
                const listItem = document.createElement('li');
                listItem.style.cssText = 'margin-bottom: 5px;';
                listItem.textContent = point;
                pointsList.appendChild(listItem);
            });

            pointsSection.appendChild(pointsList);
            contentSection.appendChild(pointsSection);
        } else if (slide.content) {
            const contentDiv = document.createElement('div');
            contentDiv.style.cssText = 'margin-top: 10px;';
            contentDiv.innerHTML = `
                <h5 style="color: #555; margin-bottom: 8px; font-size: 0.9em;">内容：</h5>
                <div style="background: #f8f9fa; padding: 15px; border-radius: 6px; color: #555; line-height: 1.6; white-space: pre-wrap;">${slide.content}</div>
            `;
            contentSection.appendChild(contentDiv);
        }

        if (slide.slide_type) {
            const typeTag = document.createElement('div');
            typeTag.style.cssText = 'margin-top: 10px;';
            typeTag.innerHTML = `
                <span style="background: #e8f4fd; color: #3498db; padding: 4px 8px; border-radius: 4px; font-size: 0.8em;">
                    类型: ${slide.slide_type}
                </span>
            `;
            contentSection.appendChild(typeTag);
        }

        slideDetail.appendChild(header);
        slideDetail.appendChild(contentSection);
        detailContainer.appendChild(slideDetail);
    });

    container.appendChild(detailContainer);
}

// 查看幻灯片详情
function viewSlideDetailNew(slideIndex) {
    const outlineContent = getOutlineContent();
    if (!outlineContent) return;

    try {
        const parsedOutline = JSON.parse(outlineContent);
        const slide = parsedOutline.slides[slideIndex];

        if (!slide) return;

        // 创建模态框显示详细信息
        const modal = document.createElement('div');
        modal.style.cssText = `
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1000; display: flex;
            align-items: center; justify-content: center; padding: 20px;
        `;

        const content = document.createElement('div');
        content.style.cssText = `
            background: white; border-radius: 15px; padding: 30px;
            max-width: 600px; max-height: 80vh; overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        `;

        let contentPoints = '';
        if (slide.content_points && slide.content_points.length > 0) {
            contentPoints = '<h5 style="color: #555; margin: 15px 0 8px 0;">内容要点：</h5><ul style="margin: 0; padding-left: 20px; color: #555; line-height: 1.6;">';
            slide.content_points.forEach(point => {
                contentPoints += `<li style="margin-bottom: 5px;">${point}</li>`;
            });
            contentPoints += '</ul>';
        } else if (slide.content) {
            contentPoints = `<h5 style="color: #555; margin: 15px 0 8px 0;">内容：</h5><div style="background: #f8f9fa; padding: 15px; border-radius: 6px; color: #555; line-height: 1.6; white-space: pre-wrap;">${slide.content}</div>`;
        }

        content.innerHTML = `
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 style="color: #2c3e50; margin: 0;">第${slide.page_number || slideIndex + 1}页详情</h3>
                <button onclick="this.closest('.modal').remove()" style="background: #e74c3c; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px;">×</button>
            </div>
            <h4 style="color: #3498db; margin-bottom: 10px;">${slide.title || '未命名幻灯片'}</h4>
            ${slide.subtitle ? `<p style="color: #7f8c8d; font-style: italic; margin-bottom: 15px;">${slide.subtitle}</p>` : ''}
            ${contentPoints}
            ${slide.slide_type ? `<div style="margin-top: 15px;"><span style="background: #e8f4fd; color: #3498db; padding: 6px 12px; border-radius: 6px; font-size: 0.9em;">类型: ${slide.slide_type}</span></div>` : ''}
        `;

        modal.className = 'modal';
        modal.appendChild(content);
        document.body.appendChild(modal);

        // 点击背景关闭
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.remove();
            }
        });
    } catch (error) {
        console.error('Error viewing slide detail:', error);
        alert('查看详情失败: ' + error.message);
    }
}

// 编辑大纲
function editOutlineNew() {
    const outlineContent = getOutlineContent();
    if (!outlineContent) {
        alert('大纲数据不存在，无法编辑');
        return;
    }

    // 创建编辑模态框
    const modal = document.createElement('div');
    modal.style.cssText = `
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 1000; display: flex;
        align-items: center; justify-content: center; padding: 20px;
    `;

    const content = document.createElement('div');
    content.style.cssText = `
        background: white; border-radius: 15px; padding: 30px;
        width: 90%; max-width: 800px; height: 80vh; display: flex;
        flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    `;

    content.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="color: #2c3e50; margin: 0;">编辑PPT大纲</h3>
            <button onclick="this.closest('.modal').remove()" style="background: #e74c3c; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px;">×</button>
        </div>
        <div style="flex: 1; display: flex; flex-direction: column;">
            <textarea id="outlineEditorNew" style="flex: 1; border: 2px solid #ecf0f1; border-radius: 8px; padding: 15px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.5; resize: none;" placeholder="编辑大纲JSON...">${outlineContent}</textarea>
            <div style="display: flex; gap: 8px; margin-top: 15px; justify-content: flex-end;">
                <button onclick="this.closest('.modal').remove()" class="btn btn-sm" style="background: #95a5a6; color: white;">取消</button>
                <button onclick="saveOutlineChangesNew()" class="btn btn-sm btn-primary">保存修改</button>
            </div>
        </div>
    `;

    modal.className = 'modal';
    modal.appendChild(content);
    document.body.appendChild(modal);
}

// 保存大纲修改
async function saveOutlineChangesNew() {
    const editor = document.getElementById('outlineEditorNew');
    if (!editor) return;

    try {
        const newOutline = JSON.parse(editor.value);

        const response = await fetch(`/projects/${currentProjectId}/update-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ outline_content: editor.value })
        });

        if (response.ok) {
            alert('大纲修改成功！');
            // 关闭模态框
            const modal = editor.closest('.modal');
            if (modal) modal.remove();

            // 更新JSON显示区域
            const outlineDisplay = document.getElementById('outline-content-display');
            if (outlineDisplay) {
                const preElement = document.createElement('pre');
                preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
                preElement.textContent = editor.value;
                outlineDisplay.innerHTML = '';
                outlineDisplay.appendChild(preElement);
            }

            // 立即重新渲染大纲视图，使用最新数据
            setTimeout(() => {
                renderOutlineViewNewWithData(newOutline);
            }, 100); // 减少延迟
        } else {
            const error = await response.json();
            alert('保存失败: ' + (error.detail || '未知错误'));
        }
    } catch (error) {
        if (error instanceof SyntaxError) {
            alert('JSON格式错误，请检查语法！');
        } else {
            console.error('Error saving outline:', error);
            alert('保存失败: ' + error.message);
        }
    }
}

// 导出大纲为JSON文件
function exportOutlineJSONNew() {
    const outlineContent = getOutlineContent();
    if (!outlineContent) {
        alert('大纲数据不存在，无法导出');
        return;
    }

    try {
        const parsedOutline = JSON.parse(outlineContent);
        const dataStr = JSON.stringify(parsedOutline, null, 2);
        const dataBlob = new Blob([dataStr], {type: 'application/json'});

        const link = document.createElement('a');
        link.href = URL.createObjectURL(dataBlob);
        link.download = `${(parsedOutline.title || 'ppt_outline')}_${new Date().toISOString().split('T')[0]}.json`;

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 显示成功提示
        const toast = document.createElement('div');
        toast.style.cssText = `
            position: fixed; top: 20px; right: 20px; background: #27ae60;
            color: white; padding: 15px 20px; border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1001;
            font-size: 14px; font-weight: bold;
        `;
        toast.textContent = '✅ 大纲JSON文件已导出';
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.remove();
        }, 3000);
    } catch (error) {
        console.error('Error exporting outline:', error);
        alert('导出失败: ' + error.message);
    }
}

// 编辑单页幻灯片
function editSingleSlideNew(slideIndex) {
    const outlineContent = getOutlineContentNew();
    if (!outlineContent) {
        alert('大纲数据不存在，无法编辑');
        return;
    }

    try {
        const parsedOutline = JSON.parse(outlineContent);
        const slide = parsedOutline.slides[slideIndex];

        if (!slide) {
            alert('幻灯片不存在');
            return;
        }

        // 创建单页编辑模态框
        const modal = document.createElement('div');
        modal.style.cssText = `
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1000; display: flex;
            align-items: center; justify-content: center; padding: 20px;
        `;

        const content = document.createElement('div');
        content.style.cssText = `
            background: white; border-radius: 15px; padding: 30px;
            width: 90%; max-width: 700px; max-height: 85vh; overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        `;

        // 构建内容要点的编辑界面 - 使用占位符，稍后用JavaScript创建
        let contentPointsHtml = '';
        if (slide.content_points && slide.content_points.length > 0) {
            slide.content_points.forEach((point, index) => {
                contentPointsHtml += `
                    <div class="content-point-item" data-point-index="${index}" style="display: flex; align-items: center; margin-bottom: 10px;">
                        <input type="text" class="content-point-input" data-index="${index}"
                               value="${point.replace(/"/g, '&quot;')}"
                               style="flex: 1; padding: 8px 12px; border: 2px solid #ecf0f1; border-radius: 6px; font-size: 14px;">
                        <button class="remove-point-btn" data-remove-index="${index}"
                                style="background: #e74c3c; color: white; border: none; border-radius: 4px; padding: 6px 10px; margin-left: 8px; cursor: pointer;">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
            });
        }

        content.innerHTML = `
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
                <h3 style="color: #2c3e50; margin: 0;">编辑第${slide.page_number || slideIndex + 1}页</h3>
                <button onclick="this.closest('.modal').remove()"
                        style="background: #e74c3c; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px;">×</button>
            </div>

            <form id="singleSlideEditForm" style="display: flex; flex-direction: column; gap: 20px;">
                <!-- 页面标题 -->
                <div>
                    <label style="display: block; color: #2c3e50; font-weight: bold; margin-bottom: 8px;">页面标题</label>
                    <input type="text" id="slideTitle" value="${(slide.title || '').replace(/"/g, '&quot;')}"
                           style="width: 100%; padding: 12px; border: 2px solid #ecf0f1; border-radius: 8px; font-size: 16px;">
                </div>

                <!-- 页面副标题 -->
                <div>
                    <label style="display: block; color: #2c3e50; font-weight: bold; margin-bottom: 8px;">副标题（可选）</label>
                    <input type="text" id="slideSubtitle" value="${(slide.subtitle || '').replace(/"/g, '&quot;')}"
                           style="width: 100%; padding: 12px; border: 2px solid #ecf0f1; border-radius: 8px; font-size: 14px;">
                </div>

                <!-- 幻灯片类型 -->
                <div>
                    <label style="display: block; color: #2c3e50; font-weight: bold; margin-bottom: 8px;">幻灯片类型</label>
                    <select id="slideType" style="width: 100%; padding: 12px; border: 2px solid #ecf0f1; border-radius: 8px; font-size: 14px;">
                        <option value="title" ${slide.slide_type === 'title' ? 'selected' : ''}>标题页</option>
                        <option value="content" ${slide.slide_type === 'content' ? 'selected' : ''}>内容页</option>
                        <option value="conclusion" ${slide.slide_type === 'conclusion' ? 'selected' : ''}>结论页</option>
                        <option value="thankyou" ${slide.slide_type === 'thankyou' ? 'selected' : ''}>感谢页</option>
                    </select>
                </div>

                <!-- 内容要点 -->
                <div>
                    <label style="display: block; color: #2c3e50; font-weight: bold; margin-bottom: 8px;">内容要点</label>
                    <div id="contentPointsContainer" style="margin-bottom: 10px;">
                        ${contentPointsHtml}
                    </div>
                    <button type="button" onclick="addSingleContentPoint()"
                            style="background: #3498db; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer;">
                        <i class="fas fa-plus"></i> 添加要点
                    </button>
                </div>

                <!-- 页面描述 -->
                <div>
                    <label style="display: block; color: #2c3e50; font-weight: bold; margin-bottom: 8px;">页面描述（可选）</label>
                    <textarea id="slideDescription" rows="3"
                              style="width: 100%; padding: 12px; border: 2px solid #ecf0f1; border-radius: 8px; font-size: 14px; resize: vertical;">${slide.description || ''}</textarea>
                </div>

                <!-- 操作按钮 -->
                <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
                    <button type="button" onclick="this.closest('.modal').remove()"
                            class="btn" style="background: #95a5a6; color: white; padding: 12px 24px;">取消</button>
                    <button type="button" onclick="saveSingleSlideEdit(${slideIndex})"
                            class="btn btn-primary" style="padding: 12px 24px;">保存修改</button>
                </div>
            </form>
        `;

        modal.className = 'modal';
        modal.appendChild(content);
        document.body.appendChild(modal);

        // 为删除按钮添加事件监听器
        const removeButtons = modal.querySelectorAll('.remove-point-btn');
        removeButtons.forEach(button => {
            button.addEventListener('click', function() {
                const index = parseInt(this.getAttribute('data-remove-index'));
                removeSingleContentPointByElement(this.parentElement);
            });
        });

        // 点击背景关闭
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.remove();
            }
        });

    } catch (error) {
        console.error('Error editing single slide:', error);
        alert('编辑失败: ' + error.message);
    }
}

// 添加内容要点
function addSingleContentPoint() {
    const container = document.getElementById('contentPointsContainer');
    if (!container) return;

    const currentPoints = container.querySelectorAll('.content-point-item');
    const newIndex = currentPoints.length;

    const pointDiv = document.createElement('div');
    pointDiv.className = 'content-point-item';
    pointDiv.style.cssText = 'display: flex; align-items: center; margin-bottom: 10px;';

    // 创建输入框
    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'content-point-input';
    input.setAttribute('data-index', newIndex);
    input.placeholder = '输入新的内容要点...';
    input.style.cssText = 'flex: 1; padding: 8px 12px; border: 2px solid #ecf0f1; border-radius: 6px; font-size: 14px;';

    // 创建删除按钮
    const button = document.createElement('button');
    button.className = 'remove-point-btn';
    button.setAttribute('data-remove-index', newIndex);
    button.addEventListener('click', function() {
        removeSingleContentPointByElement(this.parentElement);
    });
    button.style.cssText = 'background: #e74c3c; color: white; border: none; border-radius: 4px; padding: 6px 10px; margin-left: 8px; cursor: pointer;';
    button.innerHTML = '<i class="fas fa-trash"></i>';

    pointDiv.appendChild(input);
    pointDiv.appendChild(button);

    container.appendChild(pointDiv);

    // 聚焦到新添加的输入框
    const newInput = pointDiv.querySelector('.content-point-input');
    if (newInput) {
        newInput.focus();
    }
}

// 删除内容要点（通过索引）
function removeSingleContentPoint(index) {
    const container = document.getElementById('contentPointsContainer');
    if (!container) return;

    const pointItems = container.querySelectorAll('.content-point-item');
    if (pointItems[index]) {
        removeSingleContentPointByElement(pointItems[index]);
    }
}

// 删除内容要点（通过元素）
function removeSingleContentPointByElement(element) {
    if (!element) return;

    element.remove();

    // 重新编号剩余的要点
    const container = document.getElementById('contentPointsContainer');
    if (!container) return;

    const remainingItems = container.querySelectorAll('.content-point-item');
    remainingItems.forEach((item, newIndex) => {
        const input = item.querySelector('.content-point-input');
        const button = item.querySelector('.remove-point-btn, button');
        if (input) input.setAttribute('data-index', newIndex);
        if (button) {
            if (button.classList.contains('remove-point-btn')) {
                button.setAttribute('data-remove-index', newIndex);
            } else {
                // 重新创建按钮以更新事件处理
                const newButton = document.createElement('button');
                newButton.onclick = () => removeSingleContentPoint(newIndex);
                newButton.style.cssText = 'background: #e74c3c; color: white; border: none; border-radius: 4px; padding: 6px 10px; margin-left: 8px; cursor: pointer;';
                newButton.innerHTML = '<i class="fas fa-trash"></i>';
                button.parentNode.replaceChild(newButton, button);
            }
        }
    });
}

// 保存单页编辑
async function saveSingleSlideEdit(slideIndex) {
    try {
        // 获取表单数据
        const title = document.getElementById('slideTitle').value.trim();
        const subtitle = document.getElementById('slideSubtitle').value.trim();
        const slideType = document.getElementById('slideType').value;
        const description = document.getElementById('slideDescription').value.trim();

        // 获取所有内容要点
        const contentPointInputs = document.querySelectorAll('.content-point-input');
        const contentPoints = Array.from(contentPointInputs)
            .map(input => input.value.trim())
            .filter(point => point.length > 0);

        if (!title) {
            alert('页面标题不能为空');
            return;
        }

        if (contentPoints.length === 0) {
            alert('至少需要一个内容要点');
            return;
        }

        // 获取当前大纲
        const outlineContent = getOutlineContentNew();
        const parsedOutline = JSON.parse(outlineContent);

        // 更新指定的幻灯片
        const updatedSlide = {
            page_number: parsedOutline.slides[slideIndex].page_number || slideIndex + 1,
            title: title,
            content_points: contentPoints,
            slide_type: slideType,
            type: slideType // 保持兼容性
        };

        // 添加可选字段
        if (subtitle) {
            updatedSlide.subtitle = subtitle;
        }
        if (description) {
            updatedSlide.description = description;
        }

        // 保留原有的图表配置（如果存在）
        if (parsedOutline.slides[slideIndex].chart_config) {
            updatedSlide.chart_config = parsedOutline.slides[slideIndex].chart_config;
        }

        // 更新大纲
        parsedOutline.slides[slideIndex] = updatedSlide;

        // 保存到服务器
        const response = await fetch(`/projects/${currentProjectId}/update-outline`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                outline_content: JSON.stringify(parsedOutline, null, 2)
            })
        });

        if (response.ok) {
            // 关闭模态框
            const modal = document.querySelector('.modal');
            if (modal) modal.remove();

            // 更新JSON显示区域
            const outlineDisplay = document.getElementById('outline-content-display');
            if (outlineDisplay) {
                const formattedContent = JSON.stringify(parsedOutline, null, 2);
                const preElement = document.createElement('pre');
                preElement.style.cssText = 'margin: 0; font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;';
                preElement.textContent = formattedContent;
                outlineDisplay.innerHTML = '';
                outlineDisplay.appendChild(preElement);
            }

            // 显示成功消息
            const toast = document.createElement('div');
            toast.style.cssText = `
                position: fixed; top: 20px; right: 20px; background: #27ae60;
                color: white; padding: 15px 20px; border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1001;
                font-size: 14px; font-weight: bold;
            `;
            toast.textContent = `✅ 第${slideIndex + 1}页已更新`;
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.remove();
            }, 3000);

            // 立即重新渲染大纲视图，使用最新数据
            setTimeout(() => {
                renderOutlineViewNewWithData(parsedOutline);
            }, 100);

        } else {
            const error = await response.json();
            alert('保存失败: ' + (error.detail || '未知错误'));
        }

    } catch (error) {
        console.error('Error saving single slide:', error);
        alert('保存失败: ' + error.message);
    }
}



// Get outline content for new section
function getOutlineContentNew() {
    const contentDiv = document.getElementById('outline-content-display');
    if (!contentDiv) return null;

    // 首先尝试从pre元素中获取原始文本内容
    const preElement = contentDiv.querySelector('pre');
    if (preElement) {
        let content = preElement.textContent || preElement.innerText || '';

        // Remove placeholder text
        if (content.includes('正在生成大纲') || content.includes('等待大纲生成')) {
            return null;
        }

        return content.trim();
    }

    // 如果没有pre元素，尝试从整个div获取内容
    let content = contentDiv.textContent || contentDiv.innerText || '';

    // 处理HTML实体和格式问题
    content = content.replace(/&nbsp;/g, ' ')
                    .replace(/&lt;/g, '<')
                    .replace(/&gt;/g, '>')
                    .replace(/&amp;/g, '&')
                    .replace(/&quot;/g, '"')
                    .replace(/&#39;/g, "'")
                    .replace(/<br\s*\/?>/gi, '\n')
                    .replace(/\s+/g, ' ')
                    .trim();

    // Remove placeholder text
    if (content.includes('正在生成大纲') || content.includes('等待大纲生成')) {
        return null;
    }

    return content;
}

// 调试大纲内容的函数
function debugOutlineContent() {
    const outlineContent = getOutlineContentNew();

    console.log('=== 大纲内容调试信息 ===');
    console.log('原始内容长度：', outlineContent ? outlineContent.length : 0);
    console.log('原始内容（前500字符）：', outlineContent ? outlineContent.substring(0, 500) : 'null');
    console.log('原始内容（后100字符）：', outlineContent ? outlineContent.substring(Math.max(0, outlineContent.length - 100)) : 'null');

    // 检查常见的JSON格式问题
    if (outlineContent) {
        console.log('首字符：', outlineContent.charAt(0), '(ASCII:', outlineContent.charCodeAt(0), ')');
        console.log('末字符：', outlineContent.charAt(outlineContent.length - 1), '(ASCII:', outlineContent.charCodeAt(outlineContent.length - 1), ')');

        // 检查是否包含HTML实体
        if (outlineContent.includes('&nbsp;')) {
            console.log('⚠️ 发现HTML实体 &nbsp;');
        }
        if (outlineContent.includes('<br>')) {
            console.log('⚠️ 发现HTML标签 <br>');
        }

        // 尝试清理内容
        let cleanedContent = outlineContent.replace(/&nbsp;/g, ' ').replace(/<br>/g, '\n').trim();
        console.log('清理后内容（前200字符）：', cleanedContent.substring(0, 200));

        try {
            JSON.parse(cleanedContent);
            console.log('✅ 清理后的内容可以正确解析为JSON');
        } catch (e) {
            console.log('❌ 清理后仍然无法解析：', e.message);
        }
    }

    // 显示调试信息弹窗
    alert('调试信息已输出到控制台，请按F12查看');
}

// Convert JSON to mindmap data for new section
function convertJsonToMindmapNew(jsonData) {
    const mindmapData = {
        name: jsonData.title || 'PPT大纲',
        children: []
    };

    if (jsonData.slides && Array.isArray(jsonData.slides)) {
        jsonData.slides.forEach(slide => {
            const slideNode = {
                name: `${slide.page_number}. ${slide.title}`,
                children: []
            };

            if (slide.content_points && Array.isArray(slide.content_points)) {
                slide.content_points.forEach(point => {
                    slideNode.children.push({
                        name: point,
                        children: []
                    });
                });
            }

            mindmapData.children.push(slideNode);
        });
    }

    return mindmapData;
}


// 文件上传相关函数
function toggleContentSourceTodo() {
    const fileSection = document.getElementById('file-upload-section-todo');
    const processingOptions = document.getElementById('file-processing-options-todo');
    const pdfProcessingMode = document.getElementById('pdf-processing-mode-todo');
    const manualRadio = document.querySelector('input[name="content_source"][value="manual"]');
    const fileRadio = document.querySelector('input[name="content_source"][value="file"]');
    const topicInput = document.getElementById('topic');

    if (fileRadio && fileRadio.checked) {
        if (fileSection) fileSection.style.display = 'block';
        if (topicInput) {
            topicInput.required = false;
            topicInput.placeholder = '可选：自定义标题（留空则从文件自动提取）';
        }
        // 检查当前选择的文件，决定是否显示处理选项
        const fileInput = document.getElementById('file_upload_todo');
        if (fileInput && fileInput.files[0]) {
            const fileExt = '.' + fileInput.files[0].name.split('.').pop().toLowerCase();
            // 对所有文件类型显示处理选项容器
            if (processingOptions) {
                processingOptions.style.display = 'block';
            }
            // 只对PDF文件显示处理方式选项
            if (pdfProcessingMode) {
                pdfProcessingMode.style.display = fileExt === '.pdf' ? 'block' : 'none';
            }
        }
    } else {
        if (fileSection) fileSection.style.display = 'none';
        if (processingOptions) processingOptions.style.display = 'none';
        if (pdfProcessingMode) pdfProcessingMode.style.display = 'none';
        if (topicInput) {
            topicInput.required = true;
            topicInput.placeholder = '请输入PPT主题';
        }
    }
}

// 受众选择相关函数
function toggleCustomAudience() {
    const audienceSelect = document.getElementById('audience_type');
    const customSection = document.getElementById('custom-audience-section');
    const customInput = document.getElementById('custom_audience');

    if (audienceSelect && customSection && customInput) {
        if (audienceSelect.value === '自定义') {
            customSection.style.display = 'block';
            customInput.required = true;
        } else {
            customSection.style.display = 'none';
            customInput.required = false;
            customInput.value = ''; // 清空自定义输入
        }
    }
}

// 文件上传验证和预览
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('file_upload_todo');
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            const processingOptions = document.getElementById('file-processing-options-todo');
            const pdfProcessingMode = document.getElementById('pdf-processing-mode-todo');

            if (file) {
                // 验证文件大小 (100MB 限制)
                if (file.size > 100 * 1024 * 1024) {
                    alert('文件大小不能超过 100MB');
                    e.target.value = '';
                    if (processingOptions) processingOptions.style.display = 'none';
                    if (pdfProcessingMode) pdfProcessingMode.style.display = 'none';
                    return;
                }

                // 验证文件类型
                const allowedTypes = ['.pdf', '.docx', '.txt', '.md'];
                const fileExt = '.' + file.name.split('.').pop().toLowerCase();
                if (!allowedTypes.includes(fileExt)) {
                    alert('只支持 PDF、DOCX、TXT、MD 格式的文件');
                    e.target.value = '';
                    if (processingOptions) processingOptions.style.display = 'none';
                    if (pdfProcessingMode) pdfProcessingMode.style.display = 'none';
                    return;
                }

                // 显示文件处理选项（对所有文件类型）
                if (processingOptions) {
                    processingOptions.style.display = 'block';
                }

                // 根据文件类型显示或隐藏PDF专用处理方式选项
                if (pdfProcessingMode) {
                    if (fileExt === '.pdf') {
                        pdfProcessingMode.style.display = 'block';
                    } else {
                        pdfProcessingMode.style.display = 'none';
                    }
                }

                // 显示文件信息
                const fileInfo = document.createElement('div');
                fileInfo.style.marginTop = '10px';
                fileInfo.style.padding = '10px';
                fileInfo.style.background = '#e8f5e8';
                fileInfo.style.borderRadius = '5px';
                fileInfo.style.color = '#2d5a2d';
                fileInfo.innerHTML = `
                    <strong>已选择文件：</strong>${file.name}<br>
                    <strong>文件大小：</strong>${(file.size / 1024 / 1024).toFixed(2)} MB<br>
                    <strong>文件类型：</strong>${fileExt.toUpperCase()}
                `;

                // 移除现有文件信息
                const existingInfo = e.target.parentNode.querySelector('.file-info-todo');
                if (existingInfo) {
                    existingInfo.remove();
                }

                fileInfo.className = 'file-info-todo';
                e.target.parentNode.appendChild(fileInfo);

                // 自动填充主题（如果为空）
                const topicInput = document.getElementById('topic');
                if (topicInput && !topicInput.value.trim()) {
                    const baseName = file.name.replace(/\.[^/.]+$/, "");
                    topicInput.value = baseName;
                }
            } else {
                // 如果没有选择文件，隐藏处理选项
                if (processingOptions) processingOptions.style.display = 'none';
                if (pdfProcessingMode) pdfProcessingMode.style.display = 'none';
            }
        });
    }
});

// 清除所有已选择的文件
function clearAllFiles() {
    const fileInput = document.getElementById('file_upload_todo');
    if (fileInput) {
        fileInput.value = '';
        updateFilesList();
    }
}

// 移除单个文件
function removeFile(index) {
    const fileInput = document.getElementById('file_upload_todo');
    if (!fileInput || !fileInput.files) return;

    const dt = new DataTransfer();
    const files = Array.from(fileInput.files);

    files.forEach((file, i) => {
        if (i !== index) {
            dt.items.add(file);
        }
    });

    fileInput.files = dt.files;
    updateFilesList();
}

// 更新文件列表显示
function updateFilesList() {
    const fileInput = document.getElementById('file_upload_todo');
    const filesList = document.getElementById('selected-files-list-todo');
    const filesContainer = document.getElementById('files-list-container-todo');
    const processingOptions = document.getElementById('file-processing-options-todo');
    const pdfProcessingMode = document.getElementById('pdf-processing-mode-todo');

    if (!fileInput || !filesList || !filesContainer) return;

    const files = fileInput.files;

    if (files.length === 0) {
        filesList.style.display = 'none';
        if (processingOptions) processingOptions.style.display = 'none';
        if (pdfProcessingMode) pdfProcessingMode.style.display = 'none';
        return;
    }

    // 显示文件列表
    filesList.style.display = 'block';

    // 显示文件处理选项
    if (processingOptions) {
        processingOptions.style.display = 'block';
    }

    // 检查是否有PDF文件
    let hasPdf = false;
    for (let i = 0; i < files.length; i++) {
        const fileExt = '.' + files[i].name.split('.').pop().toLowerCase();
        if (fileExt === '.pdf') {
            hasPdf = true;
            break;
        }
    }

    // 根据是否有PDF显示/隐藏PDF处理选项
    if (pdfProcessingMode) {
        pdfProcessingMode.style.display = hasPdf ? 'block' : 'none';
    }

    // 生成文件列表HTML
    let html = '';
    let totalSize = 0;

    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const fileExt = '.' + file.name.split('.').pop().toLowerCase();
        const sizeInMB = (file.size / 1024 / 1024).toFixed(2);
        totalSize += file.size;

        html += `
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: #f8f9fa; border-radius: 4px; margin-bottom: 5px; border-left: 3px solid #3498db;">
                <div style="flex: 1;">
                    <div style="font-weight: 500; color: #2c3e50;">${i + 1}. ${file.name}</div>
                    <div style="font-size: 12px; color: #7f8c8d;">
                        <span>${fileExt.toUpperCase()}</span> |
                        <span>${sizeInMB} MB</span>
                    </div>
                </div>
                <button type="button" onclick="removeFile(${i})"
                        style="padding: 4px 8px; background: #e74c3c; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px;">
                    删除
                </button>
            </div>
        `;
    }

    // 添加总计信息
    html += `
        <div style="margin-top: 10px; padding: 8px; background: #e8f5e9; border-radius: 4px; text-align: center;">
            <strong style="color: #2c3e50;">共 ${files.length} 个文件 | 总大小: ${(totalSize / 1024 / 1024).toFixed(2)} MB</strong>
        </div>
    `;

    filesContainer.innerHTML = html;

    // 自动填充主题（如果为空且只有一个文件）
    const topicInput = document.getElementById('topic');
    if (topicInput && !topicInput.value.trim() && files.length === 1) {
        const baseName = files[0].name.replace(/\.[^/.]+$/, "");
        topicInput.value = baseName;
    } else if (topicInput && !topicInput.value.trim() && files.length > 1) {
        topicInput.value = `合并文档 (${files.length}个文件)`;
    }
}

// 监听文件选择变化 - 支持多文件
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('file_upload_todo');
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const files = e.target.files;
            const processingOptions = document.getElementById('file-processing-options-todo');
            const pdfProcessingMode = document.getElementById('pdf-processing-mode-todo');

            if (files && files.length > 0) {
                // 验证所有文件
                const allowedTypes = ['.pdf', '.docx', '.txt', '.md', '.jpg', '.jpeg', '.png', '.xlsx', '.csv'];
                let hasInvalidFile = false;
                let hasOversizedFile = false;

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    const fileExt = '.' + file.name.split('.').pop().toLowerCase();

                    // 验证文件大小
                    if (file.size > 100 * 1024 * 1024) {
                        alert(`文件 "${file.name}" 大小超过100MB限制`);
                        hasOversizedFile = true;
                        break;
                    }

                    // 验证文件类型
                    if (!allowedTypes.includes(fileExt)) {
                        alert(`文件 "${file.name}" 格式不支持\n支持的格式: ${allowedTypes.join(', ')}`);
                        hasInvalidFile = true;
                        break;
                    }
                }

                if (hasInvalidFile || hasOversizedFile) {
                    e.target.value = '';
                    if (processingOptions) processingOptions.style.display = 'none';
                    if (pdfProcessingMode) pdfProcessingMode.style.display = 'none';
                    return;
                }

                // 更新文件列表显示
                updateFilesList();
            } else {
                // 如果没有选择文件，隐藏处理选项
                const filesList = document.getElementById('selected-files-list-todo');
                if (filesList) filesList.style.display = 'none';
                if (processingOptions) processingOptions.style.display = 'none';
                if (pdfProcessingMode) pdfProcessingMode.style.display = 'none';
            }
        });
    }
});

// 表单提交处理
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('requirements-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const fileRadio = document.querySelector('input[name="content_source"][value="file"]');
            const fileInput = document.getElementById('file_upload_todo');

            if (fileRadio && fileRadio.checked && fileInput && fileInput.files.length === 0) {
                e.preventDefault();
                alert('请选择要上传的文件');
                return false;
            }

            // 显示加载状态
            const submitBtn = document.getElementById('confirm-requirements-btn');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '⏳ 处理中...';
            }
        });
    }
});
</script>

{% endblock %}