{% extends "base.html" %}
{% block title %}项目编辑 - 专利撰写助手{% endblock %}

{% block content %}
<div class="workspace" data-project-id="{{ project_id }}">
    <!-- Left Sidebar: Chapter List -->
    <aside class="sidebar" id="chapter-sidebar">
        <div class="sidebar-header">
            <h3>章节列表</h3>
            <div class="sidebar-actions">
                <button class="btn btn-primary btn-sm" onclick="generateAll()" title="一键生成全部章节">⚡ 全部生成</button>
            </div>
        </div>
        <nav id="chapter-nav">
            <div class="loading">加载中...</div>
        </nav>
        <div class="sidebar-footer">
            <button class="btn btn-secondary btn-sm btn-block" onclick="exportDocx()">📥 导出 DOCX</button>
            <button class="btn btn-secondary btn-sm btn-block" onclick="exportMarkdown()">📥 导出 Markdown</button>
        </div>
    </aside>

    <!-- Center: Main Area -->
    <section class="editor" id="editor-panel">
        <!-- Concept Panel (shown by default when no chapter is selected) -->
        <div id="concept-panel" class="concept-panel">
            <div class="concept-header">
                <h2>🔑 关键核心技术构思</h2>
                <span class="hint-text">请先详细描述您的核心技术构思，AI将基于此构思展开专利交底书撰写</span>
            </div>
            <div class="concept-body">
                <div class="form-group">
                    <label for="concept-title">发明名称（可选，AI将自动生成）</label>
                    <input type="text" id="concept-title" class="form-input" placeholder="例如：一种基于自适应算法的智能电网负载均衡系统">
                </div>
                <div class="form-group">
                    <label for="concept-text">
                        核心技术构思 <span class="required">*</span>
                        <span class="hint-text">请尽可能详细描述，包括：要解决的技术问题、关键技术方案的构成和工作原理、与现有技术的区别和创新点、预期的技术效果</span>
                    </label>
                    <textarea id="concept-text" class="form-input concept-textarea"
                        placeholder="请在此详细描述您的核心技术构思...

您可以参考以下结构来组织您的构思：&#10;1. 要解决的技术问题：现有技术存在什么不足或痛点...&#10;2. 关键技术方案：本发明的核心方案是什么，由哪些关键要素组成，它们之间如何协作...&#10;3. 创新点：与现有技术相比，本发明有哪些不同之处和突破...&#10;4. 预期效果：实施本发明后预期能达到什么样的技术效果或性能指标..."></textarea>
                </div>
                <div class="concept-actions">
                    <button class="btn btn-primary" onclick="saveConcept()">💾 保存构思</button>
                    <button class="btn btn-outline" onclick="analyzeConcept()">🔍 分析技术特征</button>
                </div>
                <div id="concept-analysis-result" class="concept-analysis" style="display:none"></div>
            </div>
        </div>

        <!-- Chapter Editor (shown when a chapter is selected) -->
        <div id="chapter-editor" style="display:none">
            <div class="editor-toolbar">
                <h3 id="editor-chapter-title"></h3>
                <span id="editor-chapter-status" class="badge"></span>
                <button class="btn btn-outline btn-sm" id="btn-generate-chapter">🤖 AI生成</button>
                <button class="btn btn-secondary btn-sm" id="btn-preview">👁 预览</button>
                <button class="btn btn-primary btn-sm" id="btn-save">💾 保存</button>
                <button class="btn btn-secondary btn-sm" id="btn-version" style="display:none">🕐 历史版本</button>
                <button class="btn btn-secondary btn-sm" onclick="backToConcept()">← 返回构思</button>
            </div>
            <div class="editor-body">
                <textarea class="editor-textarea" id="editor-textarea"
                    placeholder="请在此编辑章节内容，或点击「AI生成」基于核心技术构思自动撰写..."></textarea>
                <div class="editor-preview" id="editor-preview" style="display:none"></div>
            </div>
        </div>
    </section>

    <!-- Right Panel: Figure Checklist -->
    <aside class="figure-panel" id="figure-panel">
        <div class="panel-header">
            <h3>附图清单</h3>
            <span id="figure-count" class="badge">0</span>
        </div>
        <div id="figure-list">
            <p class="hint">生成章节后，附图标记将自动显示在此处</p>
        </div>
    </aside>
</div>

<!-- Streaming overlay -->
<div id="streaming-overlay" style="display:none">
    <div class="streaming-content">
        <div class="streaming-header">
            <h3 id="streaming-title">正在生成...</h3>
            <div class="spinner"></div>
        </div>
        <div id="streaming-output" class="streaming-output"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/project.js"></script>
{% endblock %}