{% 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: var(--surface-contrast);
        color: var(--surface);
        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: var(--surface);
        color: var(--text-secondary);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8em;
        border: 1px solid var(--border-color);
    }

    .content-points {
        margin: 0;
        padding-left: 20px;
        color: var(--text-secondary);
        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 {
        position: relative;
        text-align: left;
        padding: 28px;
        background: linear-gradient(135deg, rgba(17, 17, 17, 0.06), rgba(17, 17, 17, 0.02));
        border-radius: 18px;
        margin: 15px 0;
        box-shadow: var(--shadow-soft);
        max-height: 520px;
        overflow: hidden;
        border: 1px solid var(--border-color);
    }

    .loading-container::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 18% 18%, rgba(17, 17, 17, 0.08), transparent 40%),
            radial-gradient(circle at 78% 12%, rgba(15, 23, 42, 0.08), transparent 36%);
        opacity: 0.9;
        pointer-events: none;
    }

    .loading-container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 42%);
        opacity: 0.65;
        pointer-events: none;
    }

    .outline-loading {
        position: relative;
        z-index: 1;
    }

    .loading-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .loading-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        letter-spacing: 0.02em;
        background: var(--surface-contrast);
        color: var(--surface);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .loading-chip i {
        font-size: 12px;
    }

    .loading-title {
        font-size: 1.3em;
        font-weight: 700;
        color: var(--ink-strong);
        margin-bottom: 4px;
    }

    .loading-subtitle {
        font-size: 0.95em;
        color: var(--text-secondary);
        opacity: 0.9;
    }

    .loading-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: center;
        justify-items: center;
    }

    @media (max-width: 1080px) {
        .loading-grid {
            grid-template-columns: 1fr;
        }
    }

    .loading-visual {
        background: transparent;
        border: none;
        border-radius: 12px;
        padding: 8px;
        box-shadow: none;
        max-width: 520px;
        width: 100%;
    }

    .ai-brain {
        position: relative;
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }

    .brain-core {
        position: absolute;
        inset: 30px;
        background: var(--primary-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--surface);
        font-weight: 800;
        letter-spacing: 0.08em;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.08);
        animation: brainPulse 4s ease-in-out infinite;
    }

    .brain-core::after {
        content: '';
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.35);
        opacity: 0.5;
    }

    .brain-orbit {
        position: absolute;
        border: 1px solid rgba(17, 17, 17, 0.12);
        border-radius: 50%;
        inset: 10px;
        animation: ringSpin 12s linear infinite;
    }

    .brain-orbit.ring-2 {
        inset: 22px;
        opacity: 0.55;
        animation-duration: 9s;
    }

    .brain-orbit.ring-3 {
        inset: 32px;
        opacity: 0.35;
        animation-duration: 7s;
    }

    .orbit-dot {
        position: absolute;
        width: 12px;
        height: 12px;
        background: var(--surface);
        border: 2px solid var(--ink);
        border-radius: 50%;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        top: 50%;
        left: 50%;
        transform-origin: center;
        animation: orbit 8s linear infinite;
    }

    .orbit-dot.dot-2 {
        animation-duration: 10s;
        animation-delay: -2s;
    }

    .orbit-dot.dot-3 {
        animation-duration: 11s;
        animation-delay: -1s;
    }

    .orbit-dot.dot-4 {
        animation-duration: 9s;
        animation-delay: -3s;
    }

    .generating-text {
        text-align: center;
        color: var(--ink-strong);
        font-weight: 700;
        font-size: 14px;
        margin-top: 16px;
        animation: textFade 4s ease-in-out infinite;
    }

    .generating-dots {
        display: inline-block;
        margin-left: 6px;
        color: var(--text-secondary);
        letter-spacing: 2px;
        animation: dotsAnimation 1.8s ease-in-out infinite;
    }

    @keyframes orbit {
        0% {
            transform: rotate(0deg) translateX(90px) rotate(0deg);
        }

        100% {
            transform: rotate(360deg) translateX(90px) rotate(-360deg);
        }
    }

    @keyframes ringSpin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes brainPulse {

        0%,
        100% {
            transform: scale(1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.08);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 14px 50px rgba(0, 0, 0, 0.15), 0 0 0 6px rgba(17, 17, 17, 0.05);
        }
    }

    /* 文字生成效果 */
    @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.35;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0.35;
        }
    }

    /* 完成状态动画 */
    .ai-brain.completed .brain-core {
        box-shadow: 0 14px 40px rgba(22, 163, 74, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    .ai-brain.completed .generating-text {
        color: #16a34a;
    }

    .tips-marquee {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        border: 1px solid rgba(17, 17, 17, 0.08);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        z-index: 3;
    }

    .tips-marquee i {
        color: var(--ink-strong);
    }

    .tips-marquee .tips-text {
        display: inline-block;
        padding-left: 0;
        color: var(--text-secondary);
        font-size: 0.92em;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
    }

    .loading-tips {
        margin: 12px 0 4px;
        position: relative;
        z-index: 4;
    }

    .skeleton-wrap {
        position: relative;
        width: 100%;
        height: 280px;
        background: linear-gradient(180deg, rgba(17, 17, 17, 0.04), rgba(17, 17, 17, 0.02));
        border-radius: 16px;
        overflow: hidden;
        padding: 20px 18px;
    }

    .skeleton-lines {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .skeleton-line {
        height: 12px;
        border-radius: 10px;
        background: linear-gradient(90deg, rgba(17, 17, 17, 0.08) 25%, rgba(17, 17, 17, 0.12) 37%, rgba(17, 17, 17, 0.08) 63%);
        background-size: 400% 100%;
        animation: skeletonShimmer 1.6s ease-in-out infinite;
    }

    .skeleton-line.title {
        width: 60%;
        height: 16px;
        margin-bottom: 6px;
    }

    .skeleton-line.long {
        width: 100%;
    }

    .skeleton-line.mid {
        width: 80%;
    }

    .skeleton-line.short {
        width: 55%;
    }

    .skeleton-sheen {
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, transparent 90%);
        transform: translateX(-100%);
        animation: sheenMove 2.4s ease-in-out infinite;
        opacity: 0.28;
    }

    @keyframes skeletonShimmer {
        0% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes sheenMove {
        0% {
            transform: translateX(-120%);
        }

        100% {
            transform: translateX(120%);
        }
    }

    .loading-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .loading-overlay::before {
        content: '';
        position: absolute;
        inset: 0;
        backdrop-filter: blur(6px);
        background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 50%, transparent 70%);
        border-radius: 18px;
    }

    .overlay-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        color: var(--ink-strong);
    }

    .loading-ring {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 2px solid rgba(17, 17, 17, 0.12);
        border-top-color: var(--ink-strong);
        animation: spin 1s linear infinite;
        box-shadow: 0 0 0 6px rgba(17, 17, 17, 0.05), 0 0 30px rgba(17, 17, 17, 0.12);
    }

    .overlay-text {
        font-weight: 700;
        letter-spacing: 0.02em;
        font-size: 14px;
    }

    .overlay-step {
        font-size: 12px;
        color: var(--text-secondary);
        letter-spacing: 0.01em;
    }

    .outline-loading-active #outline-toolbar-new button,
    .outline-loading-active #outline-toolbar-new .btn {
        pointer-events: none;
        opacity: 0.45;
        cursor: not-allowed;
    }

    .outline-dim {
        transition: opacity 0.3s ease;
    }

    .micro-progress {
        width: 180px;
        height: 6px;
        border-radius: 999px;
        background: rgba(17, 17, 17, 0.1);
        overflow: hidden;
        position: relative;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .micro-progress span {
        display: block;
        height: 100%;
        width: 60%;
        background: linear-gradient(90deg, #0f172a, #111111, #0f172a);
        animation: microProgress 1.8s ease-in-out infinite;
        border-radius: 999px;
    }

    @keyframes microProgress {
        0% {
            transform: translateX(-80%);
        }

        50% {
            transform: translateX(10%);
        }

        100% {
            transform: translateX(120%);
        }
    }

    .loading-tips h5 {
        color: var(--ink-strong);
        margin-bottom: 8px;
        font-size: 1em;
    }

    .loading-tips p {
        color: var(--text-secondary);
        margin: 0;
        font-size: 0.95em;
        line-height: 1.5;
    }

    /* 表单美化 */
    .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: 1px solid var(--border-color);
        border-radius: 10px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: var(--surface);
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: rgba(17, 17, 17, 0.65);
        box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
        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;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        box-shadow: none;
        background: var(--surface-contrast);
        color: var(--surface);
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-soft);
    }

    .btn-primary {
        background: var(--surface-contrast);
        color: var(--surface);
    }

    .btn-success {
        background: #1f2a37;
        color: var(--surface);
    }

    .btn-outline-primary {
        background: transparent;
        color: var(--ink);
        border: 1px solid var(--border-color);
    }

    .btn-outline-primary:hover {
        background: var(--surface-contrast);
        color: var(--surface);
    }

    .btn-secondary {
        background: #3f3f3f;
        color: var(--surface);
    }

    /* 小尺寸按钮 */
    .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: var(--ink);
        border: 1px solid var(--border-color);
    }

    .btn-outline-warning:hover {
        background: var(--surface-contrast);
        color: var(--surface);
    }

    .btn-info {
        background: #2d2d2d;
        color: var(--surface);
    }

    /* 响应式设计 */
    @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: var(--glass-bg); color: var(--text-primary); padding: 40px 0; margin: -20px -20px 30px -20px; text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--glass-border);">
    <div style="position: relative; z-index: 1;">
        <h2 style="font-size: 2em; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em;">{{ todo_board.title
            }}</h2>
        <p style="opacity: 0.9; font-size: 1em;">项目ID: <code
                style="background: var(--surface); padding: 4px 10px; border-radius: 6px; font-family: 'Consolas', monospace; font-size: 0.9em; border: 1px solid var(--border-color);">{{ todo_board.task_id }}</code>
        </p>
    </div>
</div>

<!-- Requirements Confirmation Section -->
{% set requirements_stage = todo_board.stages | selectattr('id', 'equalto', 'requirements_confirmation') | first %}
{% if not requirements_stage or requirements_stage.status == 'pending' %}
<div id="requirements-section"
    style="max-width: 900px; margin: 15px auto; background: var(--surface); border-radius: 16px; padding: 30px; box-shadow: var(--shadow-soft); border: 1px solid var(--glass-border);">
    <div style="text-align: center; margin-bottom: 25px;">
        <div
            style="display: inline-block; background: var(--surface-contrast); color: var(--surface); padding: 12px 20px; border-radius: 40px; margin-bottom: 15px; box-shadow: none;">
            <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>

    <!-- 直接显示需求表单，无需加载动画 -->
    <form id="requirements-form" style="text-align: left; display: block;" 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: var(--surface-subtle); border-radius: 8px; border: 1px solid var(--glass-border);">
            <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: 1px dashed var(--border-color); background: var(--surface); 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: var(--surface); padding: 10px; border-radius: 6px; border: 1px solid var(--glass-border);">
                    <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: 1px solid var(--border-color); border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                    <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: 1px solid var(--border-color); border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                    <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: var(--surface-subtle); border-radius: 8px; border: 1px solid var(--glass-border);">
                <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 var(--border-color); 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 var(--border-color); 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: 1px solid var(--border-color); border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                    <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: 1px solid var(--border-color); border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                    <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: 1px solid var(--border-color); border-radius: 10px; padding: 15px; cursor: pointer; text-align: center; transition: all 0.3s ease;">
                    <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: #f7f7f7; border-radius: 8px; border: 1px solid #ddd;">
                <label style="display: block; margin-bottom: 8px; color: #333; font-weight: bold;">Custom Style
                    Prompt</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; background: #f7f7f7;"
                    placeholder="Enter your desired PPT style description, e.g. modern minimalist style, blue theme, card layout..."></textarea>
                <p style="font-size: 12px; color: #666; margin-top: 5px;">Describe your expected PPT style in detail, AI
                    will generate the corresponding design based on your description</p>
            </div>
        </div>

        <div style="text-align: center;">
            <button type="submit" id="confirm-requirements-btn"
                style="background: var(--surface-contrast); color: var(--surface); 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: var(--surface); padding: 20px; border-radius: 16px; box-shadow: var(--shadow-soft);">
        <a href="/projects/{{ todo_board.task_id }}"
            style="background: var(--surface-contrast); color: var(--surface); text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; font-size: 0.9em;"
            onmouseover="this.style.transform='translateY(-2px)';" onmouseout="this.style.transform='translateY(0)';">
            查看项目详情
        </a>

        {% if todo_board.overall_progress >= 100 %}
        <a href="/projects/{{ todo_board.task_id }}/preview" target="_blank"
            style="background: #1f2a37; color: var(--surface); text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; font-size: 0.9em;"
            onmouseover="this.style.transform='translateY(-2px)';" onmouseout="this.style.transform='translateY(0)';">
            预览 PPT
        </a>
        <a href="/projects/{{ todo_board.task_id }}/edit" target="_blank"
            style="background: #3f3f3f; color: var(--surface); text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; font-size: 0.9em;"
            onmouseover="this.style.transform='translateY(-2px)';" onmouseout="this.style.transform='translateY(0)';">
            编辑 PPT
        </a>
        {% endif %}

        <a href="/projects"
            style="background: #2d2d2d; color: var(--surface); text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; font-size: 0.9em;"
            onmouseover="this.style.transform='translateY(-2px)';" onmouseout="this.style.transform='translateY(0)';">
            返回项目列表
        </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: var(--surface-contrast) !important;
        color: var(--surface) !important;
        transform: scale(1.05);
    }

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

    .task-item.active {
        background: var(--surface-subtle) !important;
        border-left: 4px solid var(--surface-contrast);
    }

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

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

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

    .style-option:hover {
        border-color: var(--surface-contrast) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    }

    .style-option.selected {
        border-color: var(--surface-contrast) !important;
        background: var(--surface-subtle) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

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

    .page-count-option:hover {
        border-color: var(--surface-contrast) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    }

    .page-count-option.active {
        border-color: var(--surface-contrast) !important;
        background: var(--surface-subtle) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    let currentProjectId = '{{ todo_board.task_id }}';
    let outlineGenerationStarted = false;
    let lastOutlineErrorMessage = '';
    let lastOutlineErrorRetryHandler = 'regenerateOutlineNew';

    let pendingOutlineData = null;
    const MAX_OUTLINE_RENDER_RETRIES = 5;

    // Helper function to convert language code to display name
    function getLanguageDisplayName(languageCode) {
        const languageMap = {
            'zh': '中文',
            'en': 'English',
            'ja': '日本語',
            'ko': '한국어',
            'fr': 'Français',
            'de': 'Deutsch',
            'es': 'Español'
        };
        return languageMap[languageCode] || languageCode || '中文';
    }

    function setOutlineLoadingState(isLoading) {
        const outlineSection = document.getElementById('outline-section');
        if (outlineSection) {
            outlineSection.classList.toggle('outline-loading-active', isLoading);
        }
        const toolbar = document.getElementById('outline-toolbar-new');
        if (toolbar) {
            const btns = toolbar.querySelectorAll('button');
            btns.forEach(btn => {
                btn.disabled = isLoading;
                btn.style.cursor = isLoading ? 'not-allowed' : '';
            });
        }
    }

    function getOutlineLoadingMarkup({ brainId = 'loading-brain', title = '', subtitle = '', tips = '', icon = 'fa-brain', chipText = '大纲生成' } = {}) {
        return `
        <div class="outline-loading">
            <div class="loading-grid">
                <div class="loading-visual">
                    <div class="skeleton-wrap">
                        <div class="skeleton-lines">
                            <div class="skeleton-line title"></div>
                            <div class="skeleton-line long"></div>
                            <div class="skeleton-line long"></div>
                            <div class="skeleton-line mid"></div>
                            <div class="skeleton-line long"></div>
                            <div class="skeleton-line short"></div>
                        </div>
                        <div class="skeleton-sheen"></div>
                    </div>
                    <div class="loading-overlay">
                        <div class="overlay-content">
                            <div class="loading-ring"></div>
                            <div class="overlay-text">大纲生成中</div>
                            <div class="overlay-step">正在理解主题...</div>
                            <div class="micro-progress"><span></span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loading-tips tips-marquee">
                <i class="fas fa-lightbulb"></i>
                <span class="tips-text">${tips}</span>
            </div>
        </div>
    `;
    }

    function stopOutlineGenerationAnimations(reason = '') {
        setOutlineLoadingState(false);

        const outlineGeneratingDiv = document.getElementById('outline-generating-new');
        if (outlineGeneratingDiv) {
            outlineGeneratingDiv.style.cssText = 'display: none !important;';
        }

        if (typeof stopBrainAnimation === 'function') {
            stopBrainAnimation('outline-view');
            stopBrainAnimation('file');
        }

        const placeholderDiv = document.getElementById('outline-placeholder');
        if (placeholderDiv) {
            placeholderDiv.style.display = 'none';
        }

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

        const outlineViewWrapper = document.getElementById('outline-view-new');
        if (outlineViewWrapper) {
            outlineViewWrapper.style.display = 'block';
        }

        toggleOutlineViewDuringRegeneration(false);

        outlineGenerationStarted = false;

        if (reason) {
            console.log('[OUTLINE] Animations stopped:', reason);
        }
    }

    function toggleOutlineViewDuringRegeneration(isRegenerating) {
        const outlineToolbar = document.getElementById('outline-toolbar-new');
        const outlineContent = document.getElementById('outline-content-new');
        const outlineContainer = document.getElementById('outline-container-new');

        if (outlineToolbar) {
            if (isRegenerating) {
                if (!outlineToolbar.hasAttribute('data-prev-opacity')) {
                    outlineToolbar.dataset.prevOpacity = outlineToolbar.style.opacity || '';
                }
                if (!outlineToolbar.hasAttribute('data-prev-pointer')) {
                    outlineToolbar.dataset.prevPointer = outlineToolbar.style.pointerEvents || '';
                }
                outlineToolbar.style.opacity = '0.45';
                outlineToolbar.style.pointerEvents = 'none';
            } else {
                if (outlineToolbar.hasAttribute('data-prev-opacity')) {
                    outlineToolbar.style.opacity = outlineToolbar.dataset.prevOpacity;
                    outlineToolbar.removeAttribute('data-prev-opacity');
                }
                if (outlineToolbar.hasAttribute('data-prev-pointer')) {
                    outlineToolbar.style.pointerEvents = outlineToolbar.dataset.prevPointer;
                    outlineToolbar.removeAttribute('data-prev-pointer');
                }
            }
        }

        if (outlineContent) {
            if (isRegenerating) {
                if (!outlineContent.hasAttribute('data-prev-opacity')) {
                    outlineContent.dataset.prevOpacity = outlineContent.style.opacity || '';
                }
                if (!outlineContent.hasAttribute('data-prev-pointer')) {
                    outlineContent.dataset.prevPointer = outlineContent.style.pointerEvents || '';
                }
                outlineContent.style.opacity = '0.4';
                outlineContent.style.pointerEvents = 'none';
            } else {
                if (outlineContent.hasAttribute('data-prev-opacity')) {
                    outlineContent.style.opacity = outlineContent.dataset.prevOpacity;
                    outlineContent.removeAttribute('data-prev-opacity');
                }
                if (outlineContent.hasAttribute('data-prev-pointer')) {
                    outlineContent.style.pointerEvents = outlineContent.dataset.prevPointer;
                    outlineContent.removeAttribute('data-prev-pointer');
                }
            }
        }

        if (outlineContainer) {
            if (isRegenerating) {
                if (!outlineContainer.hasAttribute('data-prev-pointer-events')) {
                    outlineContainer.dataset.prevPointerEvents = outlineContainer.style.pointerEvents || '';
                }
                outlineContainer.style.pointerEvents = 'none';
                outlineContainer.classList.add('outline-dim');
            } else if (outlineContainer.hasAttribute('data-prev-pointer-events')) {
                outlineContainer.style.pointerEvents = outlineContainer.dataset.prevPointerEvents;
                outlineContainer.removeAttribute('data-prev-pointer-events');
                outlineContainer.classList.remove('outline-dim');
            }
        }
    }

    // 在两个视图中显示大纲生成失败原因
    function showOutlineGenerationError(reason = '未知错误', retryHandler = 'regenerateOutlineNew') {
        lastOutlineErrorMessage = reason || '未知错误';
        lastOutlineErrorRetryHandler = retryHandler || 'regenerateOutlineNew';
        const handlerName = (typeof window !== 'undefined' && typeof window[lastOutlineErrorRetryHandler] === 'function')
            ? lastOutlineErrorRetryHandler
            : 'regenerateOutlineNew';

        setOutlineLoadingState(false);

        const outlineGeneratingDiv = document.getElementById('outline-generating-new');
        if (outlineGeneratingDiv) {
            outlineGeneratingDiv.style.display = 'none';
        }

        const loadingDiv = document.getElementById('outline-loading-new');
        const emptyDiv = document.getElementById('outline-empty-new');
        const errorDiv = document.getElementById('outline-error-new');

        if (loadingDiv) loadingDiv.style.display = 'none';
        if (emptyDiv) emptyDiv.style.display = 'none';

        if (errorDiv) {
            errorDiv.innerHTML = `
            <i class="fas fa-exclamation-triangle fa-2x" style="margin-bottom: 12px;"></i>
            <p style="margin: 0 0 8px; font-weight: 600;">大纲生成失败</p>
            <p class="outline-error-reason" style="margin: 0 0 12px; font-size: 14px; color: #7f8c8d;">原因：${lastOutlineErrorMessage}</p>
            <button onclick="${handlerName}()" class="btn btn-warning btn-sm">
                <i class="fas fa-sync"></i> 重新生成大纲
            </button>
        `;
            errorDiv.style.display = 'block';
        }

        const contentDiv = document.getElementById('outline-content-display');
        if (contentDiv) {
            let placeholderDiv = document.getElementById('outline-placeholder');
            if (!placeholderDiv) {
                placeholderDiv = document.createElement('div');
                placeholderDiv.id = 'outline-placeholder';
                placeholderDiv.className = 'loading-container';
                contentDiv.appendChild(placeholderDiv);
            }

            placeholderDiv.style.display = 'none';

            const children = Array.from(contentDiv.children);
            children.forEach(child => {
                if (child.id !== 'outline-placeholder') {
                    child.remove();
                }
            });

            const errorContainer = document.createElement('div');
            errorContainer.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;">原因：${lastOutlineErrorMessage}</div>
                <button onclick="${handlerName}()" class="btn btn-warning btn-sm">
                    <i class="fas fa-sync"></i> 重新生成大纲
                </button>
            </div>
        `;
            contentDiv.insertBefore(errorContainer, placeholderDiv);
        }

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

        toggleOutlineViewDuringRegeneration(false);
        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 = '#111';
                option.style.background = '#f5f5f5';
            } else {
                option.style.borderColor = '#d9d9d9';
                option.style.background = '#fff';
            }
        });
    }

    // 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() {
        console.log('[INIT] 初始化大纲显示');

        // === 新系统：检查outline-section ===
        const outlineSection = document.getElementById('outline-section');
        console.log('[INIT] outline-section存在:', !!outlineSection);

        if (outlineSection && outlineSection.style.display !== 'none') {
            console.log('[INIT] outline-section可见，检查大纲状态');

            // 检查outline-placeholder的状态
            const placeholderDiv = document.getElementById('outline-placeholder');
            const outlineContentDisplay = document.getElementById('outline-content-display');

            if (placeholderDiv && outlineContentDisplay) {
                // 检查是否有实际的大纲内容（不是加载动画）
                const hasContent = outlineContentDisplay.querySelector('pre');

                console.log('[INIT] 状态检查:', {
                    hasContent: !!hasContent,
                    placeholderDisplay: placeholderDiv.style.display
                });

                if (hasContent) {
                    console.log('[INIT] 大纲已生成完成，停止所有动画');
                    // 确保停止所有动画
                    stopOutlineGenerationAnimations('outline already exists');
                } else {
                    console.log('[INIT] 大纲尚未生成，保持等待状态');
                }
            }
        }

        // === 旧系统：兼容老的stage系统 ===
        const outlineStage = document.querySelector('[data-stage-id="outline_generation"]');
        if (outlineStage) {
            const statusIcon = outlineStage.querySelector('.stage-status-icon');
            const statusText = statusIcon ? statusIcon.textContent.trim() : '';

            console.log('[INIT] 旧系统 - 大纲生成状态:', statusText);

            if (statusText === '✓') {
                const outputDiv = document.getElementById('outline-output-outline_generation');
                if (outputDiv) {
                    outputDiv.style.display = 'block';
                    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) || document.querySelector('.overlay-content');

        if (!brain) return;

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

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

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

            const textElement = brain.querySelector('.generating-label') || brain.querySelector('.generating-text') || brain.querySelector('.overlay-step');
            if (textElement) {
                const texts = [
                    '正在分析内容结构',
                    '正在构建逻辑框架',
                    '正在优化大纲层次',
                    '正在完善内容要点',
                    '正在生成PPT大纲',
                    '正在理解主题...',
                    '正在生成章节...',
                    '正在润色要点...'
                ];

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

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

        // 每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-label') || 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();

        // 表单已经直接显示，不需要额外的显示逻辑

        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';
                }

                // 重置生成标志，确保后续调用不会被跳过
                outlineGenerationStarted = false;

                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') {
                        // 再次确保标志被重置
                        outlineGenerationStarted = false;

                        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: #111; margin-bottom: 10px;">
                    <i class="fas fa-brain"></i> PPT 大纲生成
                </h3>
                <p style="color: #555;">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: #111; margin: 0;">
                        <i class="fas fa-list-alt"></i> 大纲内容
                        <span id="outline-status" style="color: #111; 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: #f0f0f0; border-radius: 5px; padding: 2px; gap: 4px;">
                            <button id="json-view-btn-new" onclick="switchOutlineViewNew('json')"
                                    style="background: #fff; color: #111; border: 1px solid #111; 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: #111; color: #fff; border: 1px solid #111; 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 -->
                <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: none; position: relative;">
                    <div id="outline-placeholder" class="loading-container">
                        ${getOutlineLoadingMarkup({
                brainId: 'loading-brain-dynamic',
                title: 'AI 正在生成 PPT 大纲',
                subtitle: '根据需求梳理章节、层次与要点',
                tips: 'AI正在根据您的需求智能生成PPT大纲，包括标题、内容要点和逻辑结构。生成完成后您可以实时编辑和调整。'
            })}
                    </div>

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

                <!-- Outline View (默认显示) -->
                <div id="outline-view-new" style="display: block;">
                    <!-- 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="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>
                        
                        <!-- 大纲生成中的AI动画 -->
                        <div id="outline-generating-new" class="loading-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; display: none; z-index: 10;">
                            ${getOutlineLoadingMarkup({
                brainId: 'loading-brain-outline-view',
                title: 'AI 正在生成 PPT 大纲',
                subtitle: '根据需求梳理章节、层次与要点',
                tips: 'AI正在根据您的需求智能生成PPT大纲，包括标题、内容要点和逻辑结构。生成完成后您可以实时编辑和调整。'
            })}
                        </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; gap: 8px; margin-top: 15px; justify-content: space-between;">
                        <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';
        setOutlineLoadingState(true);

        // 因为默认视图是大纲视图，需要在这里也显示大纲视图的加载动画
        setTimeout(() => {
            // 显示大纲视图的AI动画
            const outlineGeneratingDiv = document.getElementById('outline-generating-new');
            if (outlineGeneratingDiv) {
                console.log('[SHOW_OUTLINE] 显示大纲视图加载动画');
                outlineGeneratingDiv.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; display: block !important; z-index: 9999; overflow-y: auto;';
                setOutlineLoadingState(true);

                // 隐藏空状态
                const outlineEmptyDiv = document.getElementById('outline-empty-new');
                if (outlineEmptyDiv) {
                    outlineEmptyDiv.style.display = 'none';
                }

                // 启动大纲视图动画
                setTimeout(() => {
                    startBrainAnimation('outline-view');
                    console.log('[SHOW_OUTLINE] 大纲视图动画已启动');
                }, 100);
            }

            // 同时为JSON视图准备动画（切换时可见）
            startFunnelAnimation('dynamic');
        }, 100);

        console.log('[SHOW_OUTLINE] outline-section已创建，动画已初始化');
    }


    // showRequirementsForm 函数已移除，因为表单现在默认直接显示

    // 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 = '#f5f5f5';
            div.style.borderColor = '#111';
            div.style.transform = 'scale(1.02)';
        } else {
            div.style.background = '#fff';
            div.style.borderColor = '#d9d9d9';
            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 = '#f5f5f5';
                div.style.borderColor = '#111';
                div.style.transform = 'scale(1.02)';
            } else {
                div.style.background = '#fff';
                div.style.borderColor = '#d9d9d9';
                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';
        }
    }

    // ** FIX START **
    // Moved startOutlineGenerationNew function to the global scope

    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;
        }

        lastOutlineErrorMessage = '';
        lastOutlineErrorRetryHandler = 'regenerateOutlineNew';

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

        console.log('[MANUAL] 准备生成动画，当前视图:', currentViewNew);

        if (currentViewNew === 'outline') {
            toggleOutlineViewDuringRegeneration(true);
        }

        // === 准备大纲视图的动画 ===
        const outlineContentNewDiv = document.getElementById('outline-content-new');
        if (outlineContentNewDiv) {
            outlineContentNewDiv.innerHTML = '';
            console.log('[MANUAL] 已清空大纲内容区域');
        }

        // 隐藏大纲视图的所有状态元素
        const outlineEmptyDiv = document.getElementById('outline-empty-new');
        if (outlineEmptyDiv) {
            outlineEmptyDiv.style.display = 'none';
        }

        const outlineLoadingDiv = document.getElementById('outline-loading-new');
        if (outlineLoadingDiv) {
            outlineLoadingDiv.style.display = 'none';
        }

        const outlineErrorDiv = document.getElementById('outline-error-new');
        if (outlineErrorDiv) {
            outlineErrorDiv.style.display = 'none';
        }

        // 显示大纲视图中的AI动画
        const outlineGeneratingDiv = document.getElementById('outline-generating-new');
        if (outlineGeneratingDiv) {
            console.log('[MANUAL] 显示大纲视图动画');
            outlineGeneratingDiv.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; display: block !important; z-index: 9999; overflow-y: auto;';
            setOutlineLoadingState(true);
            setTimeout(() => {
                startBrainAnimation('outline-view');
                console.log('[MANUAL] 大纲视图AI动画已启动');
            }, 100);
        }

        // 显示增强的加载状态
        if (placeholderDiv) {
            console.log('Setting up placeholder div for outline generation');
            placeholderDiv.innerHTML = `
            ${getOutlineLoadingMarkup({
                brainId: 'loading-brain-stream',
                title: 'AI 正在生成 PPT 大纲',
                subtitle: '根据需求梳理章节、层次与要点',
                tips: 'AI正在根据您的需求智能生成PPT大纲，包括标题、内容要点和逻辑结构。生成完成后您可以实时编辑和调整。'
            })}
        `;
            placeholderDiv.className = 'loading-container';
            placeholderDiv.style.display = 'block';
            setOutlineLoadingState(true);
            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');
                stopOutlineGenerationAnimations('outline generation error');
                showOutlineGenerationError(result.error || result.message || '未知错误', 'regenerateOutlineNew');
                if (cursorDiv) cursorDiv.style.display = 'none';
                return;
            }

            // 停止加载动画
            stopBookAnimation('stream');
            stopOutlineGenerationAnimations('outline generation completed');

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

            // 一次性显示完整的大纲内容
            let parsedOutline = null;
            if (result.outline_content) {
                // 格式化JSON内容
                let formattedContent;
                try {
                    parsedOutline = JSON.parse(result.outline_content);
                    formattedContent = JSON.stringify(parsedOutline, null, 2);
                } catch (e) {
                    console.warn('[MANUAL] Outline JSON parse failed, using raw content', 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);
            }

            if (parsedOutline && parsedOutline.slides) {
                renderOutlinePreview(parsedOutline);
                renderOutlineViewNewWithData(parsedOutline);
            } else {
                console.warn('[MANUAL] Outline content is empty or invalid, skipping preview render');
            }

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

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

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

            // 停止加载动画
            stopFunnelAnimation('stream');
            stopOutlineGenerationAnimations('outline generation error');

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

            showOutlineGenerationError(error.message || '连接失败', 'regenerateOutlineNew');
            if (cursorDiv) cursorDiv.style.display = 'none';
        }
    }

    // ** FIX END **

    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;
        }

        lastOutlineErrorMessage = '';
        lastOutlineErrorRetryHandler = 'retryFileOutlineGeneration';

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

        console.log('[FILE] 准备生成动画，当前视图:', currentViewNew);

        // === 准备两个视图的动画，但保持当前视图状态不变 ===
        const outlineViewNew = document.getElementById('outline-view-new');
        const jsonView = document.getElementById('outline-content-display');

        // 记录并确保视图状态正确（不强制切换）
        // 两个视图是相邻的，不是叠加的，所以只能显示一个
        console.log('[FILE] 视图状态检查:', {
            outlineViewDisplay: outlineViewNew?.style.display,
            jsonViewDisplay: jsonView?.style.display,
            currentViewNew: currentViewNew
        });

        // === 准备大纲视图的动画 ===
        console.log('[FILE] 开始设置大纲视图动画');

        if (currentViewNew === 'outline') {
            toggleOutlineViewDuringRegeneration(true);
        }

        // 清空大纲视图的内容，确保动画可见
        const outlineContentNewDiv = document.getElementById('outline-content-new');
        if (outlineContentNewDiv) {
            outlineContentNewDiv.innerHTML = '';
            console.log('[FILE] 已清空大纲内容区域');
        }

        // 隐藏大纲视图的所有状态元素
        const outlineEmptyDiv = document.getElementById('outline-empty-new');
        if (outlineEmptyDiv) {
            outlineEmptyDiv.style.display = 'none';
        }

        const outlineLoadingDiv = document.getElementById('outline-loading-new');
        if (outlineLoadingDiv) {
            outlineLoadingDiv.style.display = 'none';
        }

        const outlineErrorDiv = document.getElementById('outline-error-new');
        if (outlineErrorDiv) {
            outlineErrorDiv.style.display = 'none';
        }

        // 显示大纲视图中的AI动画（使用强制样式）
        const outlineGeneratingDiv = document.getElementById('outline-generating-new');
        if (outlineGeneratingDiv) {
            console.log('[FILE] 找到动画容器，准备显示');
            console.log('[FILE] 动画容器当前状态:', {
                display: outlineGeneratingDiv.style.display,
                parent: outlineGeneratingDiv.parentElement?.id
            });

            // 强制设置样式，确保动画可见
            outlineGeneratingDiv.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; display: block !important; z-index: 9999; overflow-y: auto;';
            setOutlineLoadingState(true);

            console.log('[FILE] 动画容器样式已设置:', {
                display: outlineGeneratingDiv.style.display,
                zIndex: outlineGeneratingDiv.style.zIndex,
                position: outlineGeneratingDiv.style.position
            });

            // 启动大纲视图的AI动画
            setTimeout(() => {
                console.log('[FILE] 启动大纲视图AI动画');
                startBrainAnimation('outline-view');

                // 再次确认显示状态
                console.log('[FILE] 动画启动后状态:', {
                    display: window.getComputedStyle(outlineGeneratingDiv).display,
                    visibility: window.getComputedStyle(outlineGeneratingDiv).visibility,
                    zIndex: window.getComputedStyle(outlineGeneratingDiv).zIndex
                });
            }, 100);
        } else {
            console.error('[FILE] 未找到大纲视图动画容器 outline-generating-new');
        }

        // 同时设置JSON视图的加载状态（当用户切换到JSON视图时可见）
        if (placeholderDiv) {
            placeholderDiv.innerHTML = `
            ${getOutlineLoadingMarkup({
                brainId: 'loading-brain-file',
                title: 'AI 正在生成 PPT 大纲',
                subtitle: '根据需求梳理章节、层次与要点',
                tips: 'AI正在根据您的需求智能生成PPT大纲，包括标题、内容要点和逻辑结构。生成完成后您可以实时编辑和调整。'
            })}
        `;
            placeholderDiv.className = 'loading-container';
            placeholderDiv.style.display = 'block';
            setOutlineLoadingState(true);

            // 启动文件处理动画
            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');
                stopOutlineGenerationAnimations('file outline generation error');
                showOutlineGenerationError(result.error || result.message || '未知错误', 'retryFileOutlineGeneration');
                if (cursorDiv) cursorDiv.style.display = 'none';

                return;
            }

            stopBookAnimation('file');
            stopOutlineGenerationAnimations('file outline generation completed');

            let parsedOutline = null;

            if (result.outline_content) {
                let formattedContent;
                try {
                    parsedOutline = JSON.parse(result.outline_content);
                    formattedContent = JSON.stringify(parsedOutline, null, 2);
                } catch (e) {
                    console.warn('[FILE] Outline JSON parse failed, using raw content', 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);
            }

            if (parsedOutline && parsedOutline.slides) {
                renderOutlinePreview(parsedOutline);
                renderOutlineViewNewWithData(parsedOutline);
            } else {
                console.warn('[FILE] Outline content is empty or invalid, skipping preview render');
            }

            showStartPPTButton();
        } catch (error) {
            console.error('Error streaming outline generation:', error);

            // 停止加载动画
            stopFunnelAnimation('file');
            stopOutlineGenerationAnimations('file outline generation error');

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

            showOutlineGenerationError(error.message || '连接失败', 'retryFileOutlineGeneration');
            if (cursorDiv) cursorDiv.style.display = 'none';
        }
    }

    // 显示自定义需求输入弹窗
    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: #fff;
            border-radius: 12px;
            padding: 24px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
            border: 1px solid #111;
        `;

            modal.innerHTML = `
            <h4 style="margin-top: 0; margin-bottom: 16px; color: #111;">
                <i class="fas fa-magic" style="color: #111; margin-right: 8px;"></i>
                重新生成大纲
            </h4>
            <p style="margin-bottom: 16px; color: #555; font-size: 14px;">
                您可以输入额外的自定义需求，或者直接点击“生成”使用原有设置。
            </p>
            <textarea 
                id="custom-requirements-input" 
                placeholder="例如：\n- 需要更多图表和数据展示\n- 增加案例分析部分\n- 突出创新点和亮点"
                style="
                    width: 100%;
                    height: 120px;
                    padding: 12px;
                    border: 1px solid #d9d9d9;
                    border-radius: 6px;
                    font-size: 14px;
                    resize: vertical;
                    font-family: inherit;
                    box-sizing: border-box;
                    color: #111;
                    background: #fff;
                "
            ></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 #111;
                        border-radius: 6px;
                        background: #fff;
                        color: #111;
                        cursor: pointer;
                        font-size: 14px;
                    "
                >
                    取消
                </button>
                <button 
                    id="modal-confirm-btn"
                    style="
                        padding: 10px 20px;
                        border: 1px solid #111;
                        border-radius: 6px;
                        background: #111;
                        color: #fff;
                        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;
        }

        lastOutlineErrorMessage = '';
        lastOutlineErrorRetryHandler = 'regenerateOutlineNew';

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

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

        // 如果当前在大纲视图，显示大纲视图的AI动画
        if (currentViewNew === 'outline') {
            const outlineGeneratingDiv = document.getElementById('outline-generating-new');
            const outlineContentDiv = document.getElementById('outline-content-new');
            toggleOutlineViewDuringRegeneration(true);
            if (outlineGeneratingDiv) {
                // 重新恢复覆盖样式，防止上次停止动画时清空了样式导致未完全遮挡
                outlineGeneratingDiv.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; display: block !important; z-index: 9999; overflow-y: auto;';
                setTimeout(() => {
                    startBrainAnimation('outline-view');
                }, 100);
            }
            // 清空大纲内容
            if (outlineContentDiv) {
                outlineContentDiv.innerHTML = '';
            }
        }

        // 清空当前内容并显示加载状态
        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';
            setOutlineLoadingState(true);
            placeholderDiv.innerHTML = `
            ${getOutlineLoadingMarkup({
                brainId: 'loading-brain-regenerate',
                title: 'AI 正在生成 PPT 大纲',
                subtitle: '根据需求梳理章节、层次与要点',
                tips: 'AI正在根据您的需求智能生成PPT大纲，包括标题、内容要点和逻辑结构。生成完成后您可以实时编辑和调整。'
            })}
        `;

            // 启动重新生成动画
            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") {
                // 显示错误信息
                stopBrainAnimation('regenerate');
                if (placeholderDiv) placeholderDiv.style.display = 'none';

                // 停止大纲视图的AI动画并隐藏
                const outlineGeneratingDiv = document.getElementById('outline-generating-new');
                if (outlineGeneratingDiv) {
                    stopBrainAnimation('outline-view');
                    outlineGeneratingDiv.style.display = 'none';
                }

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

                // 重置标志，允许重试
                outlineGenerationStarted = false;
                toggleOutlineViewDuringRegeneration(false);
                showOutlineGenerationError(result.error || result.message || '未知错误', 'regenerateOutlineNew');
                return;
            }

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

            // 停止大纲视图的AI动画并隐藏
            const outlineGeneratingDiv = document.getElementById('outline-generating-new');
            if (outlineGeneratingDiv) {
                console.log('[SUCCESS] 停止大纲视图动画');
                stopBrainAnimation('outline-view');
                // 使用cssText强制覆盖之前的!important样式
                outlineGeneratingDiv.style.cssText = 'display: none !important;';
            }

            toggleOutlineViewDuringRegeneration(false);

            let parsedOutline = null;

            // 显示生成的大纲内容
            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;';

                try {
                    parsedOutline = JSON.parse(result.outline_content);
                    preElement.textContent = JSON.stringify(parsedOutline, null, 2);
                } catch (parseError) {
                    console.warn('[REGENERATE] Outline JSON parse failed, using raw content', parseError);
                    preElement.textContent = result.outline_content;
                }

                // 清理旧内容（包括占位符），插入最新JSON
                contentDiv.innerHTML = '';
                contentDiv.appendChild(preElement);
            }

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

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

            if (parsedOutline && parsedOutline.slides) {
                renderOutlinePreview(parsedOutline);
                renderOutlineViewNewWithData(parsedOutline);
            } else if (currentViewNew === 'outline') {
                renderOutlineViewNew();
            }

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

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

            // 停止大纲视图的AI动画并隐藏
            const outlineGeneratingDiv = document.getElementById('outline-generating-new');
            if (outlineGeneratingDiv) {
                console.log('[SUCCESS] 停止大纲视图动画');
                stopBrainAnimation('outline-view');
                // 使用cssText强制覆盖之前的!important样式
                outlineGeneratingDiv.style.cssText = 'display: none !important;';
            }

            toggleOutlineViewDuringRegeneration(false);

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

            // 重置标志，允许重试
            outlineGenerationStarted = false;
            showOutlineGenerationError(error.message || '重新生成失败', 'regenerateOutlineNew');
        }
    }

    // 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: #f5f5f5; border-radius: 10px; border: 1px solid #111;';

                startPPTButton.innerHTML = `
                <button onclick="startPPTGenerationFromOutline()" class="btn btn-lg" style="padding: 15px 30px; font-size: 18px; background: #111; color: #fff; border: 1px solid #111;">
                    <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');

        // 重置状态
        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 = '#111111';
                            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 = '#111111';
                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 = '#111111';
                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: #f8f9fa; border-radius: 8px;
            border-left: 4px solid #6c757d; transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative;
            cursor: pointer; color: #333;
        `;

            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: #111; color: #fff; 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: #111; font-size: 0.9em;">${slide.title || '未命名幻灯片'}</strong>
            </div>
            ${slide.subtitle ? `<p style="color: #555; font-size: 0.8em; margin: 5px 0; font-style: italic;">${slide.subtitle}</p>` : ''}
            <div style="color: #444; 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: #888;">暂无内容</span>'}
                ${remainingCount > 0 ? `<br><span style="color: #888;">+${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 #111; 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: #111; color: #fff; 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: #111; font-size: 1.1em;">${slide.title || '未命名幻灯片'}</strong>
                    ${slide.subtitle ? `<br><em style="color: #555; font-size: 0.9em;">${slide.subtitle}</em>` : ''}
                </div>
            </div>
            ${contentHtml}
            ${slide.slide_type ? `<div style="margin-top: 10px;"><span style="background: #f5f5f5; color: #111; 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: #111; margin: 0;">第${slide.page_number || slideIndex + 1}页详情</h3>
            <button onclick="this.closest('.modal').remove()" style="background: transparent; color: #111; border: 1px solid #111; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;">×</button>
        </div>
        <h4 style="color: #111; margin-bottom: 10px;">${slide.title || '未命名幻灯片'}</h4>
        ${slide.subtitle ? `<p style="color: #555; font-style: italic; margin-bottom: 15px;">${slide.subtitle}</p>` : ''}
        ${contentHtml}
        ${slide.slide_type ? `<div style="margin-top: 15px;"><span style="background: #f5f5f5; color: #111; 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: transparent; color: #111; border: 1px solid #111; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;">×</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格式');
                    }
                }
            }

            // 初始化视图状态，确保操作按钮的显示/隐藏符合当前视图
            // 调用视图切换函数来设置正确的初始状态
            switchOutlineViewNew(currentViewNew);
        }, 500);
    });

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

    let isFullscreen = false;
    let originalMindmapData = null;




    // New view switching functions for the new outline section
    let currentViewNew = 'outline'; // 默认使用大纲视图，提供更好的用户体验
    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';

            toggleOutlineViewDuringRegeneration(false);

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

            // Update button styles
            jsonViewBtn.style.background = '#111';
            jsonViewBtn.style.color = '#fff';
            jsonViewBtn.style.border = '1px solid #111';
            outlineViewBtn.style.background = '#fff';
            outlineViewBtn.style.color = '#111';
            outlineViewBtn.style.border = '1px solid #111';
        } else if (view === 'outline') {
            // Show outline view
            jsonView.style.display = 'none';
            outlineView.style.display = 'block';

            const outlineGeneratingDiv = document.getElementById('outline-generating-new');
            const isGenerating = outlineGenerationStarted || (outlineGeneratingDiv && outlineGeneratingDiv.style.display === 'block');
            toggleOutlineViewDuringRegeneration(isGenerating);

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

            // Update button styles
            outlineViewBtn.style.background = '#111';
            outlineViewBtn.style.color = '#fff';
            outlineViewBtn.style.border = '1px solid #111';
            jsonViewBtn.style.background = '#fff';
            jsonViewBtn.style.color = '#111';
            jsonViewBtn.style.border = '1px solid #111';

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

    // 渲染新的大纲视图
    function renderOutlineViewNew() {
        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;
        }

        // 检查是否正在生成大纲
        const outlineGeneratingDiv = document.getElementById('outline-generating-new');
        if (outlineGenerationStarted || (outlineGeneratingDiv && outlineGeneratingDiv.style.display === 'block')) {
            console.log('[RENDER] 大纲正在生成中，跳过渲染');
            // 隐藏所有状态元素，动画已经在显示
            if (loadingDiv) loadingDiv.style.display = 'none';
            if (errorDiv) errorDiv.style.display = 'none';
            if (emptyDiv) emptyDiv.style.display = 'none';
            return;
        }

        if (lastOutlineErrorMessage) {
            if (outlineGeneratingDiv) {
                outlineGeneratingDiv.style.display = 'none';
            }
            if (loadingDiv) loadingDiv.style.display = 'none';
            if (emptyDiv) emptyDiv.style.display = 'none';
            if (errorDiv) {
                const handlerName = (typeof window !== 'undefined' && typeof window[lastOutlineErrorRetryHandler] === 'function')
                    ? lastOutlineErrorRetryHandler
                    : 'regenerateOutlineNew';
                errorDiv.innerHTML = `
                <i class="fas fa-exclamation-triangle fa-2x" style="margin-bottom: 12px;"></i>
                <p style="margin: 0 0 8px; font-weight: 600;">大纲生成失败</p>
                <p class="outline-error-reason" style="margin: 0 0 12px; font-size: 14px; color: #7f8c8d;">原因：${lastOutlineErrorMessage}</p>
                <button onclick="${handlerName}()" class="btn btn-warning btn-sm">
                    <i class="fas fa-sync"></i> 重新生成大纲
                </button>
            `;
                errorDiv.style.display = 'block';
            }
            return;
        }

        let outlineContent = getOutlineContentNew();

        // 显示加载状态
        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, retryCount = 0) {
        stopOutlineGenerationAnimations('data ready for render');

        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) {
            if (retryCount < MAX_OUTLINE_RENDER_RETRIES) {
                console.warn('[OUTLINE] Outline container not ready, retrying render (' + (retryCount + 1) + '/' + MAX_OUTLINE_RENDER_RETRIES + ')');
                setTimeout(() => renderOutlineViewNewWithData(parsedOutline, retryCount + 1), 200);
            } else {
                console.error('[OUTLINE] Outline container not found after retries');
            }
            return;
        }

        try {
            if (!parsedOutline || !parsedOutline.slides || parsedOutline.slides.length === 0) {
                if (loadingDiv) loadingDiv.style.display = 'none';
                if (errorDiv) errorDiv.style.display = 'none';
                if (emptyDiv) emptyDiv.style.display = 'block';
                return;
            }

            renderOutlineContentNew(parsedOutline, outlineContainer);

            if (loadingDiv) loadingDiv.style.display = 'none';
            if (errorDiv) errorDiv.style.display = 'none';
            if (emptyDiv) emptyDiv.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: #111111; font-size: 1.5em; font-weight: bold; margin-bottom: 10px;">${outline.title || '未命名大纲'}</h4>
        <p style="color: #7f8c8d; margin: 0;">
            总共 ${outline.slides.length} 页幻灯片 |
            场景: ${outline.metadata?.scenario || '未指定'} |
            语言: ${getLanguageDisplayName(outline.metadata?.language)}
        </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 #111111; 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: #111111; 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 #111111; position: relative;
        `;

            const header = document.createElement('div');
            header.style.cssText = 'display: flex; align-items: center; margin-bottom: 15px;';
            header.innerHTML = `
            <span style="background: #111111; 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: #111111; 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: transparent; color: #111; border: 1px solid #111; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;">×</button>
            </div>
            <h4 style="color: #111111; 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: #111111; color: white; 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: #111; margin: 0;">编辑PPT大纲</h3>
            <button onclick="this.closest('.modal').remove()" style="background: transparent; color: #111; border: 1px solid #111; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;">×</button>
        </div>
        <div style="flex: 1; display: flex; flex-direction: column;">
            <textarea id="outlineEditorNew" style="flex: 1; border: 2px solid #d9d9d9; border-radius: 8px; padding: 15px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.5; resize: none; background: #fff; color: #111;" placeholder="编辑大纲JSON...">${outlineContent}</textarea>
            <div style="display: flex; gap: 8px; margin-top: 15px; justify-content: space-between;">
                <button onclick="aiOptimizeJSONOutlineInModal()" class="btn btn-sm" style="background: #111; color: #fff; border: 1px solid #111;">
                    <i class="fas fa-magic"></i> 优化大纲
                </button>
                <div style="display: flex; gap: 8px;">
                    <button onclick="this.closest('.modal').remove()" class="btn btn-sm" style="background: #fff; color: #111; border: 1px solid #111;">取消</button>
                    <button onclick="saveOutlineChangesNew()" class="btn btn-sm btn-primary" style="background: #111; color: #fff; border: 1px solid #111;">保存修改</button>
                </div>
            </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 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);
                }

                // 立即重新渲染大纲视图，使用最新数据
                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: #fff;
            color: #000; padding: 15px 20px; border-radius: 8px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 1001;
            font-size: 14px; font-weight: 700; border: 1px solid #000;
            letter-spacing: 0.02em;
        `;
            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: #fff; 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);
            border: 1px solid #111;
        `;

            // 构建内容要点的编辑界面 - 使用占位符，稍后用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 #d9d9d9; border-radius: 6px; font-size: 14px; background: #fff; color: #111;">
                        <button class="remove-point-btn" data-remove-index="${index}"
                                style="background: #fff; color: #111; border: 1px solid #111; border-radius: 4px; padding: 6px 10px; margin-left: 8px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
                            <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: #111; margin: 0;">编辑第${slide.page_number || slideIndex + 1}页</h3>
                <button onclick="this.closest('.modal').remove()"
                        style="background: transparent; color: #111; border: 1px solid #111; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;">×</button>
            </div>

            <form id="singleSlideEditForm" style="display: flex; flex-direction: column; gap: 20px;">
                <!-- 页面标题 -->
                <div>
                    <label style="display: block; color: #111; 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 #d9d9d9; border-radius: 8px; font-size: 16px; background: #fff; color: #111;">
                </div>

                <!-- 页面副标题 -->
                <div>
                    <label style="display: block; color: #111; 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 #d9d9d9; border-radius: 8px; font-size: 14px; background: #fff; color: #111;">
                </div>

                <!-- 幻灯片类型 -->
                <div>
                    <label style="display: block; color: #111; font-weight: bold; margin-bottom: 8px;">幻灯片类型</label>
                    <select id="slideType" style="width: 100%; padding: 12px; border: 2px solid #d9d9d9; border-radius: 8px; font-size: 14px; background: #fff; color: #111;">
                        <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: #111; font-weight: bold; margin-bottom: 8px;">内容要点</label>
                    <div id="contentPointsContainer" style="margin-bottom: 10px;">
                        ${contentPointsHtml}
                    </div>
                    <button type="button" onclick="addSingleContentPoint()"
                            style="background: #111; color: #fff; border: 1px solid #111; border-radius: 6px; padding: 8px 16px; cursor: pointer;">
                        <i class="fas fa-plus"></i> 添加要点
                    </button>
                </div>

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

                <!-- 操作按钮 -->
                <div style="display: flex; gap: 10px; justify-content: space-between; margin-top: 20px;">
                    <button type="button" onclick="aiOptimizeSingleSlideInModal(${slideIndex})"
                            class="btn" style="background: #111; color: #fff; padding: 12px 24px; border: 1px solid #111;">
                        <i class="fas fa-magic"></i> AI优化此页
                    </button>
                    <div style="display: flex; gap: 10px;">
                        <button type="button" onclick="this.closest('.modal').remove()"
                                class="btn" style="background: #fff; color: #111; padding: 12px 24px; border: 1px solid #111;">取消</button>
                        <button type="button" onclick="saveSingleSlideEdit(${slideIndex})"
                                class="btn btn-primary" style="padding: 12px 24px; background: #111; color: #fff; border: 1px solid #111;">保存修改</button>
                    </div>
                </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 #d9d9d9; border-radius: 6px; font-size: 14px; background: #fff; color: #111;';

        // 创建删除按钮
        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: #fff; color: #111; border: 1px solid #111; border-radius: 4px; padding: 6px 10px; margin-left: 8px; cursor: pointer; display: flex; align-items: center; gap: 4px;';
        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: #fff; color: #111; border: 1px solid #111; border-radius: 4px; padding: 6px 10px; margin-left: 8px; cursor: pointer; display: flex; align-items: center; gap: 4px;';
                    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: #fff;
                color: #000; padding: 15px 20px; border-radius: 8px;
                box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 1001;
                font-size: 14px; font-weight: 700; border: 1px solid #000;
                letter-spacing: 0.02em;
            `;
                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;

        // 检查是否包含加载动画元素
        const loadingElements = contentDiv.querySelectorAll('.loading-container, .brain-container, .loading-icon');
        const hasVisibleLoading = Array.from(loadingElements).some(el => {
            const style = window.getComputedStyle(el);
            return style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity || '1') > 0;
        });

        if (hasVisibleLoading) {
            console.log('[GET_OUTLINE] 检测到可见加载动画，返回null');
            return null;
        }

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

            if (content.includes('正在生成大纲') || content.includes('等待大纲生成') ||
                content.includes('AI正在生成') || content.includes('正在解析') ||
                content.includes('正在从文件生成') || content.includes('小贴士') ||
                content.length < 50) { // 太短的内容可能是占位符
                console.log('[GET_OUTLINE] 占位或内容过短，返回null');
                return null;
            }

            return content;
        }

        // 如果没有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('等待大纲生成') ||
            content.includes('AI正在生成') || content.includes('正在解析') ||
            content.includes('正在从文件生成') || content.includes('小贴士') ||
            content.length < 50) { // 太短的内容可能是占位符
            console.log('[GET_OUTLINE] 占位或内容过短，返回null');
            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 #111111;">
                <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 = '⏳ 处理中...';
                }
            });
        }
    });

    // ========== AI优化功能 ==========

    // 创建美化的AI优化需求输入弹窗
    function showAIOptimizeModal(config) {
        return new Promise((resolve, reject) => {
            // 创建模态框遮罩
            const modal = document.createElement('div');
            modal.className = 'ai-optimize-modal';
            modal.style.cssText = `
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
            z-index: 10000; display: flex; align-items: center; justify-content: center;
            padding: 20px; animation: fadeIn 0.3s ease;
        `;

            // 创建弹窗内容
            const content = document.createElement('div');
            content.style.cssText = `
            background: #fff;
            border-radius: 20px; padding: 0; max-width: 600px; width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: slideIn 0.3s ease; max-height: 90vh; overflow: hidden;
            display: flex; flex-direction: column;
            border: 1px solid #111;
        `;

            // 建议示例
            const suggestions = config.suggestions || [
                '增加更多技术细节和实例',
                '简化内容，突出核心要点',
                '添加数据支撑和案例分析',
                '优化逻辑结构，增强说服力',
                '增加视觉化描述建议'
            ];

            content.innerHTML = `
            <style>
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                @keyframes slideIn {
                    from { transform: translateY(-50px); opacity: 0; }
                    to { transform: translateY(0); opacity: 1; }
                }
                .ai-optimize-modal .suggestion-tag {
                    display: inline-block;
                    padding: 6px 12px;
                    background: #111;
                    color: #fff;
                    border-radius: 20px;
                    font-size: 12px;
                    margin: 4px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    border: 1px solid #111;
                }
                .ai-optimize-modal .suggestion-tag:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
                    background: #000;
                }
                .ai-optimize-modal textarea:focus {
                    outline: none;
                    border-color: #111;
                    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
                }
            </style>
            
            <!-- 头部 -->
            <div style="background: #111; color: #fff; padding: 25px 30px; border-radius: 20px 20px 0 0; position: relative;">
                <div style="position: relative; z-index: 1;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <h3 style="margin: 0 0 8px 0; font-size: 1.3em; font-weight: 700;">
                                <i class="fas fa-magic" style="margin-right: 10px;"></i>${config.title}
                            </h3>
                            <p style="margin: 0; opacity: 0.9; font-size: 0.9em;">${config.subtitle}</p>
                        </div>
                        <button onclick="this.closest('.ai-optimize-modal').remove()" style="background: transparent; color: #fff; border: 1px solid #fff; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 20px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'" onmouseout="this.style.background='transparent'">
                            ×
                        </button>
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div style="padding: 30px; flex: 1; overflow-y: auto;">
                <!-- 当前信息展示 -->
                <div style="background: #f5f5f5; border-left: 4px solid #111; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
                    <div style="color: #111; font-size: 0.9em; line-height: 1.6;">
                        <strong style="color: #111;"><i class="fas fa-info-circle"></i> 当前内容</strong><br>
                        ${config.currentInfo}
                    </div>
                </div>

                <!-- 输入框 -->
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 10px; color: #111; font-weight: 600; font-size: 0.95em;">
                        <i class="fas fa-edit"></i> 请描述您的优化需求
                    </label>
                    <textarea id="aiOptimizeInput" style="width: 100%; min-height: 120px; padding: 15px; border: 2px solid #d9d9d9; border-radius: 10px; font-size: 14px; resize: vertical; font-family: inherit; transition: all 0.3s ease; background: #fff; color: #111;" placeholder="详细描述您希望如何优化此内容...\n\n例如：\n- 增加更多技术细节\n- 重新组织逻辑结构\n- 添加案例分析"></textarea>
                </div>

                <!-- 快捷建议 -->
                <div style="margin-bottom: 10px;">
                    <label style="display: block; margin-bottom: 10px; color: #555; font-size: 0.85em;">
                        <i class="fas fa-lightbulb"></i> 点击快捷建议快速填充
                    </label>
                    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                        ${suggestions.map(s => `<span class="suggestion-tag" onclick="document.getElementById('aiOptimizeInput').value = '${s}'">${s}</span>`).join('')}
                    </div>
                </div>
            </div>

            <!-- 底部按钮 -->
            <div style="padding: 20px 30px; background: #fff; border-radius: 0 0 20px 20px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #d9d9d9;">
                <div style="color: #555; font-size: 0.85em;">
                    <i class="fas fa-robot"></i> AI将根据您的需求智能优化内容
                </div>
                <div style="display: flex; gap: 10px;">
                    <button onclick="this.closest('.ai-optimize-modal').remove()" class="btn btn-sm" style="background: #fff; color: #111; padding: 10px 20px; border: 1px solid #111;">
                        <i class="fas fa-times"></i> 取消
                    </button>
                    <button id="confirmOptimizeBtn" class="btn btn-sm" style="background: #111; color: #fff; padding: 10px 24px; border: 1px solid #111;">
                        <i class="fas fa-magic"></i> 开始优化
                    </button>
                </div>
            </div>
        `;

            modal.appendChild(content);
            document.body.appendChild(modal);

            // 聚焦输入框
            setTimeout(() => {
                const input = document.getElementById('aiOptimizeInput');
                if (input) input.focus();
            }, 100);

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

            // 确认按钮
            const confirmBtn = document.getElementById('confirmOptimizeBtn');
            confirmBtn.onclick = () => {
                const input = document.getElementById('aiOptimizeInput');
                const value = input?.value.trim();
                if (!value) {
                    // 输入框抖动动画
                    input.style.animation = 'shake 0.5s';
                    setTimeout(() => { input.style.animation = ''; }, 500);
                    return;
                }
                modal.remove();
                resolve(value);
            };

            // 添加shake动画
            const style = document.createElement('style');
            style.textContent = `
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-10px); }
                75% { transform: translateX(10px); }
            }
        `;
            document.head.appendChild(style);
        });
    }

    // 辅助函数：获取正确的目标受众（处理自定义受众情况）
    function getTargetAudience(outline) {
        if (!outline || !outline.metadata) {
            return '普通大众';
        }
        const audienceType = outline.metadata.target_audience;
        // 如果选择的是"自定义"，则使用custom_audience字段的值
        if (audienceType === '自定义' && outline.metadata.custom_audience) {
            return outline.metadata.custom_audience;
        }
        return audienceType || '普通大众';
    }

    // 在弹窗中AI优化单页
    async function aiOptimizeSingleSlideInModal(slideIndex) {
        // 从表单中获取当前数据
        const title = document.getElementById('slideTitle')?.value.trim() || '';
        const subtitle = document.getElementById('slideSubtitle')?.value.trim() || '';
        const slideType = document.getElementById('slideType')?.value || 'content';
        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;
        }

        // 显示美化的优化需求输入弹窗
        let userRequest;
        try {
            userRequest = await showAIOptimizeModal({
                title: `AI优化 - 第${slideIndex + 1}页`,
                subtitle: '让AI帮助您优化这一页的内容',
                currentInfo: `<strong>标题：</strong>${title}<br>${subtitle ? `<strong>副标题：</strong>${subtitle}<br>` : ''}<strong>类型：</strong>${slideType}<br><strong>内容要点：</strong>${contentPoints.length}个`,
                suggestions: [
                    '增加更多技术细节和实例',
                    '简化内容，突出核心要点',
                    '优化逻辑结构，使内容更连贯',
                    '增强说服力，添加数据支撑',
                    '丰富表达方式，提升专业度'
                ]
            });
        } catch (e) {
            return; // 用户取消
        }

        if (!userRequest || !userRequest.trim()) {
            return;
        }

        // 显示加载提示
        const loadingToast = document.createElement('div');
        loadingToast.id = 'ai-optimize-loading';
        loadingToast.style.cssText = `
        position: fixed; top: 20px; right: 20px; background: #000;
        color: #fff; padding: 15px 20px; border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 10001;
        font-size: 14px; font-weight: 700; border: 1px solid #fff;
        letter-spacing: 0.02em;
    `;
        loadingToast.innerHTML = `<i class="fas fa-spinner fa-spin"></i> AI正在优化第${slideIndex + 1}页...`;
        document.body.appendChild(loadingToast);

        try {
            const outlineContent = getOutlineContentNew();
            const parsedOutline = JSON.parse(outlineContent);

            // 调用AI优化接口
            const response = await fetch('/api/ai/optimize-outline', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    outline_content: outlineContent,
                    user_request: userRequest.trim(),
                    project_info: {
                        topic: parsedOutline.title || '未知',
                        scenario: parsedOutline.metadata?.scenario || '通用',
                        target_audience: getTargetAudience(parsedOutline)
                    },
                    optimization_type: 'single',
                    slide_index: slideIndex
                })
            });

            const result = await response.json();
            loadingToast.remove();

            if (result.success && result.optimized_content) {
                // 解析优化后的单页数据
                const optimizedSlide = JSON.parse(result.optimized_content);

                // 更新弹窗中的表单
                document.getElementById('slideTitle').value = optimizedSlide.title || '';
                document.getElementById('slideSubtitle').value = optimizedSlide.subtitle || '';
                document.getElementById('slideType').value = optimizedSlide.slide_type || 'content';
                document.getElementById('slideDescription').value = optimizedSlide.description || '';

                // 更新内容要点
                const container = document.getElementById('contentPointsContainer');
                if (container) {
                    container.innerHTML = '';
                    if (optimizedSlide.content_points && optimizedSlide.content_points.length > 0) {
                        optimizedSlide.content_points.forEach((point, idx) => {
                            const pointDiv = document.createElement('div');
                            pointDiv.className = 'content-point-item';
                            pointDiv.style.cssText = 'display: flex; align-items: center; margin-bottom: 10px;';
                            pointDiv.innerHTML = `
                            <input type="text" class="content-point-input" data-index="${idx}"
                                   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="${idx}"
                                    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>
                        `;
                            container.appendChild(pointDiv);

                            // 添加删除按钮事件
                            const removeBtn = pointDiv.querySelector('.remove-point-btn');
                            if (removeBtn) {
                                removeBtn.addEventListener('click', function () {
                                    removeSingleContentPointByElement(this.parentElement);
                                });
                            }
                        });
                    }
                }

                // 显示成功提示
                const successToast = document.createElement('div');
                successToast.style.cssText = `
                position: fixed; top: 20px; right: 20px; background: #fff;
                color: #000; padding: 15px 20px; border-radius: 8px;
                box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 10001;
                font-size: 14px; font-weight: 700; border: 1px solid #000;
                letter-spacing: 0.02em;
            `;
                successToast.textContent = `✓ AI优化完成，请检查后保存`;
                document.body.appendChild(successToast);

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

            } else {
                // 显示详细的错误信息
                let errorMsg = result.error || '未知错误';
                if (result.extracted_json) {
                    console.error('提取的JSON:', result.extracted_json);
                    errorMsg += '\n\n请检查控制台查看详细信息。';
                }
                if (result.raw_response) {
                    console.error('AI原始响应:', result.raw_response);
                }
                alert('AI优化失败:\n' + errorMsg);
            }

        } catch (error) {
            console.error('AI优化失败:', error);
            const loadingToast = document.getElementById('ai-optimize-loading');
            if (loadingToast) loadingToast.remove();
            alert('AI优化失败: ' + error.message);
        }
    }

    // 在弹窗中AI优化整个JSON大纲
    async function aiOptimizeJSONOutlineInModal() {
        const editor = document.getElementById('outlineEditorNew');
        if (!editor || !editor.value) {
            alert('请先输入大纲JSON内容');
            return;
        }

        // 验证JSON格式
        let parsedOutline;
        try {
            parsedOutline = JSON.parse(editor.value);
        } catch (e) {
            alert('JSON格式错误，请先修正格式后再进行AI优化');
            return;
        }

        // 显示美化的优化需求输入弹窗
        let userRequest;
        try {
            userRequest = await showAIOptimizeModal({
                title: '优化大纲',
                subtitle: '让AI帮助您优化整个PPT大纲结构和内容',
                currentInfo: `<strong>大纲标题：</strong>${parsedOutline.title}<br><strong>幻灯片数量：</strong>${parsedOutline.slides ? parsedOutline.slides.length : 0} 页<br><strong>场景：</strong>${parsedOutline.metadata?.scenario || '通用'}`,
                suggestions: [
                    '增加更多文字说明',
                    '重新组织结构，优化逻辑流程',
                    '突出创新点和亮点内容',
                    '增强各页面之间的连贯性',
                    '调整页数，使内容更详细'
                ]
            });
        } catch (e) {
            return; // 用户取消
        }

        if (!userRequest || !userRequest.trim()) {
            return;
        }

        // 显示加载提示
        const loadingToast = document.createElement('div');
        loadingToast.id = 'ai-optimize-loading';
        loadingToast.style.cssText = `
        position: fixed; top: 20px; right: 20px; background: #000;
        color: #fff; padding: 15px 20px; border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 10001;
        font-size: 14px; font-weight: 700; border: 1px solid #fff;
        letter-spacing: 0.02em;
    `;
        loadingToast.innerHTML = `<i class="fas fa-spinner fa-spin"></i> AI正在优化整个大纲...`;
        document.body.appendChild(loadingToast);

        try {
            // 调用AI优化接口
            const response = await fetch('/api/ai/optimize-outline', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    outline_content: editor.value,
                    user_request: userRequest.trim(),
                    project_info: {
                        topic: parsedOutline.title || '未知',
                        scenario: parsedOutline.metadata?.scenario || '通用',
                        target_audience: getTargetAudience(parsedOutline)
                    },
                    optimization_type: 'full'
                })
            });

            const result = await response.json();
            loadingToast.remove();

            if (result.success && result.optimized_content) {
                // 更新编辑器内容
                editor.value = result.optimized_content;

                // 显示成功提示
                const successToast = document.createElement('div');
                successToast.style.cssText = `
                position: fixed; top: 20px; right: 20px; background: #fff;
                color: #000; padding: 15px 20px; border-radius: 8px;
                box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 10001;
                font-size: 14px; font-weight: 700; border: 1px solid #000;
                letter-spacing: 0.02em;
            `;
                successToast.innerHTML = `✓ AI优化完成<br><small style="font-weight: normal;">请检查优化结果，满意后点击"保存修改"</small>`;
                document.body.appendChild(successToast);

                setTimeout(() => {
                    successToast.remove();
                }, 5000);

            } else {
                // 显示详细的错误信息
                let errorMsg = result.error || '未知错误';
                if (result.extracted_json) {
                    console.error('提取的JSON:', result.extracted_json);
                    errorMsg += '\n\n请检查控制台查看详细信息。';
                }
                if (result.raw_response) {
                    console.error('AI原始响应:', result.raw_response);
                }
                alert('AI优化失败:\n' + errorMsg);
            }

        } catch (error) {
            console.error('AI优化失败:', error);
            const loadingToast = document.getElementById('ai-optimize-loading');
            if (loadingToast) loadingToast.remove();
            alert('AI优化失败: ' + error.message);
        }
    }

    // AI优化单页大纲（已弃用，保留用于兼容）
    async function aiOptimizeSlideNew(slideIndex) {
        const outlineContent = getOutlineContentNew();
        if (!outlineContent) {
            alert('大纲数据不存在，无法进行AI优化');
            return;
        }

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

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

            // 弹出输入框让用户描述优化需求
            const userRequest = prompt(
                `AI优化 - 第${slide.page_number || slideIndex + 1}页\n\n` +
                `当前标题: ${slide.title}\n\n` +
                `请描述您的优化需求（例如：增加更多技术细节、简化内容、突出重点等）：`
            );

            if (!userRequest || !userRequest.trim()) {
                return; // 用户取消或未输入
            }

            // 显示加载提示
            const loadingToast = document.createElement('div');
            loadingToast.id = 'ai-optimize-loading';
            loadingToast.style.cssText = `
            position: fixed; top: 20px; right: 20px; background: #000;
            color: #fff; padding: 15px 20px; border-radius: 8px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 1001;
            font-size: 14px; font-weight: 700; border: 1px solid #fff;
            letter-spacing: 0.02em;
        `;
            loadingToast.innerHTML = `<i class="fas fa-spinner fa-spin"></i> AI正在优化第${slideIndex + 1}页...`;
            document.body.appendChild(loadingToast);

            // 调用AI优化接口
            const response = await fetch('/api/ai/optimize-outline', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    outline_content: outlineContent,
                    user_request: userRequest.trim(),
                    project_info: {
                        topic: parsedOutline.title || '未知',
                        scenario: parsedOutline.metadata?.scenario || '通用',
                        target_audience: getTargetAudience(parsedOutline)
                    },
                    optimization_type: 'single',
                    slide_index: slideIndex
                })
            });

            const result = await response.json();
            loadingToast.remove();

            if (result.success && result.optimized_content) {
                // 解析优化后的单页数据
                const optimizedSlide = JSON.parse(result.optimized_content);

                // 更新大纲中的这一页
                parsedOutline.slides[slideIndex] = optimizedSlide;

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

                if (saveResponse.ok) {
                    // 更新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 successToast = document.createElement('div');
                    successToast.style.cssText = `
                    position: fixed; top: 20px; right: 20px; background: #fff;
                    color: #000; padding: 15px 20px; border-radius: 8px;
                    box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 1001;
                    font-size: 14px; font-weight: 700; border: 1px solid #000;
                    letter-spacing: 0.02em;
                `;
                    successToast.textContent = `✓ 第${slideIndex + 1}页AI优化完成`;
                    document.body.appendChild(successToast);

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

                    // 立即重新渲染大纲视图
                    setTimeout(() => {
                        renderOutlineViewNewWithData(parsedOutline);
                    }, 100);
                } else {
                    alert('保存优化结果失败');
                }
            } else {
                alert('AI优化失败: ' + (result.error || '未知错误'));
            }

        } catch (error) {
            console.error('AI优化失败:', error);
            const loadingToast = document.getElementById('ai-optimize-loading');
            if (loadingToast) loadingToast.remove();
            alert('AI优化失败: ' + error.message);
        }
    }

    // AI优化JSON大纲
    async function aiOptimizeJSONOutline() {
        const editor = document.getElementById('outline-editor');
        if (!editor || !editor.value) {
            alert('请先输入大纲JSON内容');
            return;
        }

        // 验证JSON格式
        let parsedOutline;
        try {
            parsedOutline = JSON.parse(editor.value);
        } catch (e) {
            alert('JSON格式错误，请先修正格式后再进行AI优化');
            return;
        }

        // 弹出输入框让用户描述优化需求
        const userRequest = prompt(
            `优化大纲\n\n` +
            `当前大纲: ${parsedOutline.title}\n` +
            `共 ${parsedOutline.slides ? parsedOutline.slides.length : 0} 页\n\n` +
            `请描述您的优化需求（例如：增加案例分析、重新组织结构、突出创新点等）：`
        );

        if (!userRequest || !userRequest.trim()) {
            return; // 用户取消或未输入
        }

        // 显示加载提示
        const loadingToast = document.createElement('div');
        loadingToast.id = 'ai-optimize-loading';
        loadingToast.style.cssText = `
        position: fixed; top: 20px; right: 20px; background: #000;
        color: #fff; padding: 15px 20px; border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 1001;
        font-size: 14px; font-weight: 700; border: 1px solid #fff;
        letter-spacing: 0.02em;
    `;
        loadingToast.innerHTML = `<i class="fas fa-spinner fa-spin"></i> AI正在优化整个大纲...`;
        document.body.appendChild(loadingToast);

        try {
            // 调用AI优化接口
            const response = await fetch('/api/ai/optimize-outline', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    outline_content: editor.value,
                    user_request: userRequest.trim(),
                    project_info: {
                        topic: parsedOutline.title || '未知',
                        scenario: parsedOutline.metadata?.scenario || '通用',
                        target_audience: parsedOutline.metadata?.target_audience || '普通大众'
                    },
                    optimization_type: 'full'
                })
            });

            const result = await response.json();
            loadingToast.remove();

            if (result.success && result.optimized_content) {
                // 更新编辑器内容
                editor.value = result.optimized_content;

                // 显示成功提示
                const successToast = document.createElement('div');
                successToast.style.cssText = `
                position: fixed; top: 20px; right: 20px; background: #fff;
                color: #000; padding: 15px 20px; border-radius: 8px;
                box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 1001;
                font-size: 14px; font-weight: 700; border: 1px solid #000;
                letter-spacing: 0.02em;
            `;
                successToast.innerHTML = `✓ AI优化完成<br><small style="font-weight: normal;">请检查优化结果，满意后点击"保存修改"</small>`;
                document.body.appendChild(successToast);

                setTimeout(() => {
                    successToast.remove();
                }, 5000);

            } else {
                alert('AI优化失败: ' + (result.error || '未知错误'));
            }

        } catch (error) {
            console.error('AI优化失败:', error);
            const loadingToast = document.getElementById('ai-optimize-loading');
            if (loadingToast) loadingToast.remove();
            alert('AI优化失败: ' + error.message);
        }
    }

</script>

{% endblock %}