{% extends "base.html" %}

{% block title %}小说生成 - AI创作工作台{% endblock %}

{% block extra_css %}
<style>
    .novels-page { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; min-height: calc(100vh - 190px); color: #1f2937; }
    .novels-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; border-bottom: 1px solid #e5e7eb; }
    .novels-title { font-size: 22px; font-weight: 600; color: #111827; }
    .btn-import {
        padding: 8px 20px; background: linear-gradient(135deg, #2563eb, #6366f1); color: #fff; border: none; border-radius: 8px;
        font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s;
    }
    .btn-import:hover { opacity: 0.9; }
    .btn-secondary {
        padding: 6px 14px; background: transparent; color: #6b7280; border: 1px solid #d1d5db; border-radius: 6px;
        font-size: 13px; cursor: pointer; transition: all 0.2s;
    }
    .btn-secondary:hover { border-color: #2563eb; color: #3b82f6; }

    .novels-table { width: 100%; border-collapse: collapse; }
    .novels-table th {
        text-align: left; padding: 14px 24px; font-size: 13px; color: #374151;
        border-bottom: 1px solid #e5e7eb; font-weight: 500; white-space: nowrap;
    }
    .novels-table td {
        padding: 18px 24px; border-bottom: 1px solid #e5e7eb; vertical-align: middle;
    }
    .novels-table tr:hover td { background: rgba(56, 189, 248, 0.03); }

    .novel-cover {
        width: 56px; height: 72px; border-radius: 6px; background: linear-gradient(135deg, #ffffff, #e5e7eb);
        display: flex; align-items: center; justify-content: center;
        color: #d1d5db; font-size: 11px; text-align: center; overflow: hidden;
        border: 1px solid #e5e7eb; cursor: pointer;
    }
    .novel-cover img { width: 100%; height: 100%; object-fit: cover; }
    .novel-cover:hover { border-color: #2563eb; }

    .novel-name { font-size: 15px; font-weight: 500; color: #111827; }
    .novel-name-row { display: flex; flex-direction: column; gap: 6px; }
    .source-tag {
        display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
        background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe;
    }
    .source-tag.ai { background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff; }

    .tag-list { display: flex; gap: 6px; flex-wrap: wrap; }
    .tag-item {
        display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px;
        background: rgba(14, 165, 233, 0.15); color: #3b82f6; border: 1px solid rgba(14, 165, 233, 0.3);
    }
    .tag-item.screen { background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); }
    .tag-item.visual { background: rgba(168, 85, 247, 0.15); color: #c084fc; border-color: rgba(168, 85, 247, 0.3); }
    .tag-item.status { background: rgba(234, 179, 8, 0.15); color: #fbbf24; border-color: rgba(234, 179, 8, 0.3); }

    .chapter-count { color: #6b7280; font-size: 14px; }
    .create-time { color: #6b7280; font-size: 13px; }

    .action-btns { display: flex; gap: 10px; flex-wrap: nowrap; }
    .action-btn {
        padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer;
        border: none; background: transparent; color: #6b7280; transition: all 0.15s;
        white-space: nowrap;
    }
    .action-btn:hover { color: #3b82f6; }
    .action-btn.danger { color: #f87171; }
    .action-btn.danger:hover { color: #ef4444; }
    .action-btn.primary { color: #3b82f6; }

    /* 章节详情视图 */
    .chapter-view { display: none; }
    .chapter-view.active { display: block; }
    .list-view.hidden { display: none; }
    .breadcrumb {
        display: flex; align-items: center; gap: 8px; padding: 16px 32px;
        font-size: 14px; color: #6b7280; border-bottom: 1px solid #e5e7eb;
    }
    .breadcrumb a { color: #3b82f6; cursor: pointer; text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb .sep { color: #d1d5db; }
    .breadcrumb .current { color: #111827; }
    .chapter-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 16px 32px; border-bottom: 1px solid #e5e7eb;
    }
    .chapter-title { font-size: 16px; font-weight: 600; color: #111827; }
    .chapter-actions { display: flex; gap: 10px; }

    .chapter-table { width: 100%; border-collapse: collapse; }
    .chapter-table th {
        text-align: left; padding: 12px 24px; font-size: 13px; color: #374151;
        border-bottom: 1px solid #e5e7eb; font-weight: 500;
    }
    .chapter-table td {
        padding: 14px 24px; border-bottom: 1px solid #e5e7eb; vertical-align: middle;
    }
    .chapter-table tr:hover td { background: rgba(56, 189, 248, 0.03); }
    .chapter-number { color: #3b82f6; font-weight: 600; }
    .chapter-title-cell { color: #1f2937; font-weight: 500; }
    .chapter-preview {
        color: #6b7280; font-size: 13px; max-width: 400px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .checkbox-cell { width: 36px; }
    .checkbox-cell input[type="checkbox"] {
        width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb;
    }

    /* 弹窗通用 */
    .modal-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
        z-index: 100; align-items: center; justify-content: center;
    }
    .modal-overlay.show { display: flex; }
    .modal-content {
        background: #ffffff; border-radius: 12px; width: 90%; max-width: 680px;
        max-height: 85vh; display: flex; flex-direction: column;
        border: 1px solid #e5e7eb;
    }
    .modal-content.wide { max-width: 900px; }
    .modal-content.narrow { max-width: 500px; }
    .modal-header {
        padding: 20px 24px; border-bottom: 1px solid #e5e7eb;
        display: flex; justify-content: space-between; align-items: center;
        flex-shrink: 0;
    }
    .modal-title { font-size: 18px; font-weight: 600; color: #111827; }
    .modal-subtitle { font-size: 13px; color: #6b7280; margin-top: 4px; }
    .modal-close { background: none; border: none; color: #6b7280; font-size: 24px; cursor: pointer; }
    .modal-close:hover { color: #1f2937; }

    .modal-tabs { display: flex; border-bottom: 1px solid #e5e7eb; padding: 0 24px; flex-shrink: 0; }
    .modal-tab {
        padding: 12px 20px; font-size: 14px; cursor: pointer; border: none;
        background: transparent; color: #6b7280; border-bottom: 2px solid transparent;
    }
    .modal-tab:hover { color: #1f2937; }
    .modal-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }

    .modal-body { padding: 24px; overflow-y: auto; flex: 1; }
    .modal-body::-webkit-scrollbar { width: 6px; }
    .modal-body::-webkit-scrollbar-track { background: #f1f5f9; }
    .modal-body::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .form-group { margin-bottom: 20px; }
    .form-label { display: block; color: #6b7280; font-size: 13px; margin-bottom: 8px; }
    .form-hint { color: #6b7280; font-size: 12px; margin-bottom: 8px; }
    .form-input, .form-textarea, .form-select {
        width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e7eb;
        background: #f1f5f9; color: #1f2937; font-size: 14px; outline: none;
    }
    .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: #2563eb; }
    .form-textarea { min-height: 160px; font-family: inherit; resize: vertical; }

    .modal-footer {
        padding: 16px 24px; border-top: 1px solid #e5e7eb;
        display: flex; justify-content: flex-end; gap: 12px;
        flex-shrink: 0;
    }
    .btn-cancel {
        padding: 8px 20px; border-radius: 8px; border: 1px solid #d1d5db;
        background: transparent; color: #6b7280; cursor: pointer; font-size: 14px;
    }
    .btn-cancel:hover { border-color: #6b7280; color: #1f2937; }
    .btn-confirm {
        padding: 8px 20px; border-radius: 8px; border: none;
        background: linear-gradient(135deg, #2563eb, #6366f1); color: #fff; cursor: pointer; font-size: 14px; font-weight: 500;
    }
    .btn-confirm:hover { opacity: 0.9; }
    .btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

    /* 比例选择 */
    .ratio-list { display: flex; gap: 8px; flex-wrap: wrap; }
    .ratio-btn {
        padding: 6px 14px; border-radius: 6px; border: 1px solid #e5e7eb;
        background: #f1f5f9; color: #6b7280; cursor: pointer; font-size: 13px; transition: all 0.15s;
    }
    .ratio-btn:hover { border-color: #2563eb; }
    .ratio-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }

    /* 封面预览区 */
    .cover-preview-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px;
    }
    .cover-preview-cell {
        aspect-ratio: auto; border-radius: 8px; border: 1px solid #e5e7eb;
        background: #f1f5f9; display: flex; align-items: center; justify-content: center;
        color: #d1d5db; font-size: 12px; text-align: center; position: relative; overflow: hidden;
    }
    .cover-preview-cell img { width: 100%; height: 100%; object-fit: cover; }
    .cover-preview-cell.selected { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(14,165,233,0.3); }
    .cover-preview-cell .ratio-label {
        position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6);
        color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 10px;
    }
    .cover-preview-cell .star-badge {
        position: absolute; top: 4px; left: 4px; background: #f59e0b;
        color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 10px;
    }
    .cover-preview-cell .cover-check {
        position: absolute; bottom: 4px; right: 4px; background: #2563eb;
        color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 10px; cursor: pointer;
    }

    /* 参考图上传 */
    .ref-upload-list { display: flex; gap: 12px; margin-top: 8px; }
    .ref-upload-item {
        width: 80px; height: 80px; border-radius: 8px; border: 2px dashed #e5e7eb;
        display: flex; align-items: center; justify-content: center; cursor: pointer;
        transition: all 0.2s; overflow: hidden; position: relative;
    }
    .ref-upload-item:hover { border-color: #2563eb; }
    .ref-upload-item img { width: 100%; height: 100%; object-fit: cover; }
    .ref-upload-item .plus { font-size: 32px; color: #d1d5db; }
    .ref-upload-item .remove-btn {
        position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.7);
        color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px;
        font-size: 12px; cursor: pointer; display: none;
    }
    .ref-upload-item:hover .remove-btn { display: block; }

    /* 批量操作栏 */
    .batch-bar {
        display: none; padding: 10px 32px; background: rgba(14, 165, 233, 0.1);
        border-bottom: 1px solid #e5e7eb; align-items: center; gap: 16px;
    }
    .batch-bar.show { display: flex; }
    .batch-bar .selected-count { color: #3b82f6; font-size: 13px; }

    /* 文件上传区 */
    .file-upload-area {
        border: 2px dashed #e5e7eb; border-radius: 8px; padding: 32px;
        text-align: center; cursor: pointer; transition: all 0.2s;
    }
    .file-upload-area:hover { border-color: #2563eb; background: rgba(14, 165, 233, 0.05); }
    .file-upload-icon { font-size: 40px; color: #6b7280; margin-bottom: 8px; }
    .file-upload-text { color: #6b7280; font-size: 14px; }
    .file-upload-hint { color: #6b7280; font-size: 12px; margin-top: 6px; }

    /* 标签编辑 */
    .tag-editor { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .tag-editor .tag-chip {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 10px; border-radius: 12px; font-size: 12px;
        background: rgba(14, 165, 233, 0.15); color: #3b82f6;
        border: 1px solid rgba(14, 165, 233, 0.3);
    }
    .tag-editor .tag-chip .remove { cursor: pointer; opacity: 0.7; }
    .tag-editor .tag-chip .remove:hover { opacity: 1; color: #f87171; }
    .tag-editor input {
        padding: 3px 10px; border-radius: 12px; border: 1px dashed #e5e7eb;
        background: transparent; color: #1f2937; font-size: 12px; outline: none; width: 120px;
    }
    .tag-editor input:focus { border-color: #2563eb; }

    /* 提示 */
    .tip-box {
        padding: 10px 14px; border-radius: 8px; background: rgba(234, 179, 8, 0.1);
        border: 1px solid rgba(234, 179, 8, 0.3); color: #fbbf24;
        font-size: 12px; margin-top: 12px;
    }

    /* 加载动画 */
    .loading-spinner {
        display: inline-block; width: 16px; height: 16px;
        border: 2px solid #e5e7eb; border-top-color: #2563eb;
        border-radius: 50%; animation: spin 0.6s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ===== UI 精修：统一设计语言 ===== */
    .form-input, .form-select, .form-textarea { border-radius: 10px; border: 1px solid #d1d5db; background: #ffffff; }
    .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
    .modal-box { border-radius: 16px; }
    .btn-import { border-radius: 10px; box-shadow: 0 2px 8px rgba(37,99,235,0.2); }
    </style>
{% endblock %}

{% block content %}
<div class="novels-page">
    <!-- 小说列表视图 -->
    <div id="list-view" class="list-view">
        <div class="novels-header">
            <div class="novels-title"> 小说列表</div>
            <div style="display:flex; gap:10px;">
                <button class="btn-secondary" onclick="alert('短剧工坊同步功能开发中...')">短剧工坊同步</button>
                <button class="btn-import" onclick="openImportModal()">+ 导入/创作小说</button>
            </div>
        </div>

        <div id="novels-list">
            <table class="novels-table">
                <thead>
                    <tr>
                        <th style="width:70px;">封面</th>
                        <th>小说名称</th>
                        <th style="width:200px;">标签</th>
                        <th style="width:80px;">章节数</th>
                        <th style="width:180px;">创建时间</th>
                        <th style="width:320px;">操作</th>
                    </tr>
                </thead>
                <tbody id="novels-tbody">
                    <tr><td colspan="6" style="text-align:center;padding:60px;color:#6b7280;">加载中...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 章节详情视图 -->
    <div id="chapter-view" class="chapter-view">
        <div class="breadcrumb">
            <a onclick="backToList()">小说列表</a>
            <span class="sep">/</span>
            <span class="current" id="breadcrumb-novel-name"></span>
        </div>
        <div class="chapter-header">
            <div class="chapter-title" id="chapter-view-title"></div>
            <div class="chapter-actions">
                <button class="btn-secondary" onclick="batchRewrite()" id="batch-rewrite-btn">批量洗稿</button>
                <button class="btn-import" onclick="openAddChapterModal()">+ 手动添加章节</button>
                <button class="btn-secondary" onclick="backToList()">返回列表</button>
            </div>
        </div>
        <div class="batch-bar" id="batch-bar">
            <span class="selected-count" id="selected-count">已选 0 项</span>
            <button class="btn-secondary" onclick="batchDeleteChapters()">批量删除</button>
            <button class="btn-confirm" style="padding:6px 16px;font-size:13px;" onclick="batchRewrite()">批量洗稿</button>
            <button class="btn-secondary" onclick="clearChapterSelection()">取消选择</button>
        </div>
        <table class="chapter-table">
            <thead>
                <tr>
                    <th class="checkbox-cell"><input type="checkbox" id="select-all-chapters" onchange="toggleSelectAllChapters(this)"></th>
                    <th style="width:60px;">序号</th>
                    <th>章节标题</th>
                    <th>内容预览</th>
                    <th style="width:200px;">操作</th>
                </tr>
            </thead>
            <tbody id="chapters-tbody">
                <tr><td colspan="5" style="text-align:center;padding:60px;color:#6b7280;">加载中...</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 导入/创作小说弹窗 -->
<div id="import-modal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title">导入 / 创作小说</div>
            <button class="modal-close" onclick="closeImportModal()">&times;</button>
        </div>
        <div class="modal-subtitle" style="padding:12px 24px 0;color:#6b7280;font-size:13px;">
            支持小说导入和剧本导入，可分别设置屏幕模式和视觉方向
        </div>

        <div class="modal-tabs">
            <button class="modal-tab active" onclick="switchImportTab('novel_import', this)">小说导入</button>
            <button class="modal-tab" onclick="switchImportTab('script_import', this)">剧本导入</button>
            <button class="modal-tab" onclick="switchImportTab('ai_create', this)">AI创作</button>
            <button class="modal-tab" onclick="switchImportTab('coze', this)">Coze工作流</button>
        </div>

        <div class="modal-body">
            <!-- 小说导入 -->
            <div id="panel-novel_import" class="tab-panel active">
                <div style="display:flex; gap:16px; margin-bottom:16px;">
                    <div style="flex:1;">
                        <div class="form-group">
                            <label class="form-label">小说名称</label>
                            <input type="text" id="novel-import-name" class="form-input" placeholder="请输入小说名称">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">屏幕模式</label>
                    <div class="ratio-list" id="novel-screen-mode">
                        <button class="ratio-btn" data-value="竖屏">竖屏</button>
                        <button class="ratio-btn active" data-value="横屏">横屏</button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">视觉方向</label>
                    <div class="ratio-list" id="novel-visual-tags">
                        <button class="ratio-btn" data-value="3D国内真人">3D国内真人</button>
                        <button class="ratio-btn" data-value="3D海外真人">3D海外真人</button>
                        <button class="ratio-btn" data-value="3D国漫">3D国漫</button>
                        <button class="ratio-btn" data-value="2D国漫">2D国漫</button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">导入方式</label>
                    <div style="display:flex; gap:12px; margin-bottom:12px;">
                        <label style="display:flex;align-items:center;gap:6px;cursor:pointer;">
                            <input type="radio" name="novel-import-method" value="paste" checked onchange="toggleNovelImportMethod()"> 粘贴文本
                        </label>
                        <label style="display:flex;align-items:center;gap:6px;cursor:pointer;">
                            <input type="radio" name="novel-import-method" value="upload" onchange="toggleNovelImportMethod()"> 上传文件
                        </label>
                    </div>
                    <div id="novel-paste-area">
                        <textarea id="novel-import-text" class="form-textarea" placeholder="粘贴小说内容..."></textarea>
                        <div class="form-hint">支持自动识别章节标记：[第X章] 或 [第X章 标题]</div>
                    </div>
                    <div id="novel-upload-area" style="display:none;">
                        <div class="file-upload-area" onclick="document.getElementById('novel-import-file').click()">
                            <div class="file-upload-icon">&#128196;</div>
                            <div class="file-upload-text">点击或拖拽文件到此处</div>
                            <div class="file-upload-hint">支持 .txt 格式</div>
                        </div>
                        <input type="file" id="novel-import-file" accept=".txt" style="display:none;" onchange="onNovelFileSelected(this)">
                        <div id="novel-import-file-name" style="margin-top:8px;color:#3b82f6;font-size:13px;"></div>
                    </div>
                </div>
            </div>

            <!-- 剧本导入 -->
            <div id="panel-script_import" class="tab-panel">
                <div class="form-group">
                    <label class="form-label">小说名称</label>
                    <input type="text" id="script-import-name" class="form-input" placeholder="请输入小说名称">
                </div>
                <div class="form-group">
                    <label class="form-label">屏幕模式</label>
                    <div class="ratio-list" id="script-screen-mode">
                        <button class="ratio-btn" data-value="竖屏">竖屏</button>
                        <button class="ratio-btn active" data-value="横屏">横屏</button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">视觉方向</label>
                    <div class="ratio-list" id="script-visual-tags">
                        <button class="ratio-btn" data-value="3D国内真人">3D国内真人</button>
                        <button class="ratio-btn" data-value="3D海外真人">3D海外真人</button>
                        <button class="ratio-btn" data-value="3D国漫">3D国漫</button>
                        <button class="ratio-btn" data-value="2D国漫">2D国漫</button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">剧本内容</label>
                    <div class="form-hint">支持自动识别集数标记：[第X集] 或 [EP01]</div>
                    <textarea id="script-import-text" class="form-textarea" placeholder="粘贴剧本内容..."></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">提示词模板</label>
                    <select id="script-template" class="form-select">
                        <option value="">选择模板</option>
                    </select>
                </div>
            </div>

            <!-- AI创作 -->
            <div id="panel-ai_create" class="tab-panel">
                <div class="form-group">
                    <label class="form-label">小说名称</label>
                    <input type="text" id="ai-novel-name" class="form-input" placeholder="请输入小说名称">
                </div>
                <div class="form-group">
                    <label class="form-label">创作概念</label>
                    <textarea id="ai-concept" class="form-textarea" placeholder="描述你想创作的小说内容、风格、题材等..."></textarea>
                </div>
                <div style="display:flex; gap:16px;">
                    <div class="form-group" style="flex:1;">
                        <label class="form-label">大语言模型</label>
                        <select id="ai-llm" class="form-select">
                            <option value="">选择模型</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex:1;">
                        <label class="form-label">大纲模板</label>
                        <select id="ai-template" class="form-select">
                            <option value="">选择模板</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Coze工作流 -->
            <div id="panel-coze" class="tab-panel">
                <div class="form-group">
                    <label class="form-label">Coze工作流</label>
                    <div class="form-hint">请先在「系统设置 > Coze工作流」中配置小说生成的工作流链接</div>
                    <div id="coze-config-status" style="padding:16px;background:#f1f5f9;border-radius:8px;border:1px solid #e5e7eb;text-align:center;color:#6b7280;font-size:13px;">
                        未配置
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeImportModal()">取消</button>
            <button class="btn-confirm" id="confirm-btn" onclick="confirmImport()">开始导入</button>
        </div>
    </div>
</div>

<!-- 增量导入弹窗 -->
<div id="incremental-modal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title" id="incremental-modal-title">增量导入</div>
            <button class="modal-close" onclick="closeIncrementalModal()">&times;</button>
        </div>
        <div class="modal-subtitle" style="padding:12px 24px 0;color:#6b7280;font-size:13px;">
            按集号/章节号匹配：重合的更新内容，没有的新增，不会清空旧章节。
        </div>
        <div class="modal-tabs">
            <button class="modal-tab active" onclick="switchIncrementalTab('paste', this)">粘贴文本</button>
            <button class="modal-tab" onclick="switchIncrementalTab('upload', this)">上传文件</button>
        </div>
        <div class="modal-body">
            <div id="incremental-paste" class="tab-panel active">
                <textarea id="incremental-text" class="form-textarea" placeholder="粘贴增量导入的内容..."></textarea>
            </div>
            <div id="incremental-upload" class="tab-panel">
                <div class="file-upload-area" onclick="document.getElementById('incremental-file').click()">
                    <div class="file-upload-icon">&#128196;</div>
                    <div class="file-upload-text">点击或拖拽文件到此处</div>
                    <div class="file-upload-hint">支持 .txt 格式</div>
                </div>
                <input type="file" id="incremental-file" accept=".txt" style="display:none;" onchange="onIncrementalFileSelected(this)">
                <div id="incremental-file-name" style="margin-top:8px;color:#3b82f6;font-size:13px;"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeIncrementalModal()">取消</button>
            <button class="btn-confirm" onclick="confirmIncrementalImport()">增量导入</button>
        </div>
    </div>
</div>

<!-- 制作封面弹窗 -->
<div id="cover-modal" class="modal-overlay">
    <div class="modal-content wide">
        <div class="modal-header">
            <div class="modal-title">制作封面</div>
            <button class="modal-close" onclick="closeCoverModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div style="display:flex; gap:24px;">
                <!-- 左侧：配置区 -->
                <div style="flex:1; max-width:400px;">
                    <div class="form-group">
                        <label class="form-label">标签提示</label>
                        <input type="text" id="cover-tag-prompt" class="form-input" placeholder="默认为空(让prompt让模型自己画标题更自然)。" maxlength="50">
                        <div class="form-hint" id="cover-tag-count">0 / 32</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">提示词</label>
                        <textarea id="cover-prompt" class="form-textarea" placeholder="小说《XXX》封面海报。
主要角色:
风格、构图、色调、背景、标题位置 — 由你在这里自由描述。
建议要素:主角面部清晰,氛围感强,色彩浓郁。
严禁水印,LOGO,二次元,卡通,平面插画。"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">比例</label>
                        <div class="ratio-list" id="cover-ratios">
                            <button class="ratio-btn active" data-value="3:4" data-label="3:4 竖">3:4 竖</button>
                            <button class="ratio-btn" data-value="4:3" data-label="4:3 横">4:3 横</button>
                            <button class="ratio-btn" data-value="1:1" data-label="1:1 方">1:1 方</button>
                            <button class="ratio-btn" data-value="9:16" data-label="9:16 长竖">9:16 长竖</button>
                            <button class="ratio-btn" data-value="16:9" data-label="16:9 长横">16:9 长横</button>
                        </div>
                        <div class="form-hint">可多选一次生成多个比例封面(常用 3:4 / 4:3 / 1:1)</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">图模型</label>
                        <select id="cover-model" class="form-select">
                            <option value="kkai">KKAI (gpt-image-2) · 默认</option>
                            <option value="tongyi">通义万相</option>
                            <option value="wanx">万相2.1</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">参考图 (最多2张, 除非男女主)</label>
                        <div class="ref-upload-list" id="cover-ref-list">
                            <div class="ref-upload-item" onclick="document.getElementById('cover-ref-1').click()">
                                <span class="plus">+</span>
                                <input type="file" id="cover-ref-1" accept="image/*" style="display:none;" onchange="onCoverRefSelected(1, this)">
                            </div>
                            <div class="ref-upload-item" onclick="document.getElementById('cover-ref-2').click()">
                                <span class="plus">+</span>
                                <input type="file" id="cover-ref-2" accept="image/*" style="display:none;" onchange="onCoverRefSelected(2, this)">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧：预览区 -->
                <div style="flex:1;">
                    <div class="form-label">封面预览 (多比例)</div>
                    <div class="form-hint">标记为主封面(显示在小说列表)</div>
                    <div class="cover-preview-grid" id="cover-preview-grid">
                        <div class="cover-preview-cell" data-ratio="3:4" style="grid-column:1;">
                            <span>待生成</span>
                            <span class="ratio-label">3:4</span>
                        </div>
                        <div class="cover-preview-cell" data-ratio="4:3" style="grid-column:2;">
                            <span>待生成</span>
                            <span class="ratio-label">4:3</span>
                        </div>
                        <div class="cover-preview-cell" data-ratio="1:1" style="grid-column:3;">
                            <span>待生成</span>
                            <span class="ratio-label">1:1</span>
                        </div>
                        <div class="cover-preview-cell" data-ratio="9:16" style="grid-column:1;grid-row:2;">
                            <span>待生成</span>
                            <span class="ratio-label">9:16</span>
                        </div>
                        <div class="cover-preview-cell" data-ratio="16:9" style="grid-column:2;grid-row:2;">
                            <span>待生成</span>
                            <span class="ratio-label">16:9</span>
                        </div>
                    </div>
                    <div style="display:flex; justify-content:flex-end; margin-top:16px;">
                        <button class="btn-confirm" id="cover-generate-btn" onclick="generateCovers()">
                            <span id="cover-generate-text">生成选中比例 (3)</span>
                        </button>
                    </div>
                    <div class="tip-box">
                        实验功能, 效果由模型决定。每个比例独立生成, 互不影响。可单独重生成。关闭弹窗后能看到结果。
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 标签编辑弹窗 -->
<div id="tag-modal" class="modal-overlay">
    <div class="modal-content narrow">
        <div class="modal-header">
            <div class="modal-title">编辑标签</div>
            <button class="modal-close" onclick="closeTagModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">屏幕模式</label>
                <div class="ratio-list" id="tag-screen-mode">
                    <button class="ratio-btn" data-value="竖屏">竖屏</button>
                    <button class="ratio-btn" data-value="横屏">横屏</button>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">视觉方向标签</label>
                <div class="ratio-list" id="tag-visual-tags">
                    <button class="ratio-btn" data-value="3D国内真人">3D国内真人</button>
                    <button class="ratio-btn" data-value="3D海外真人">3D海外真人</button>
                    <button class="ratio-btn" data-value="3D国漫">3D国漫</button>
                    <button class="ratio-btn" data-value="2D国漫">2D国漫</button>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">其他标签</label>
                <div class="tag-editor" id="tag-editor"></div>
                <input type="text" id="tag-input" class="form-input" placeholder="输入标签后按回车添加" style="margin-top:8px;" onkeydown="if(event.key==='Enter') addTagInput()">
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeTagModal()">取消</button>
            <button class="btn-confirm" onclick="saveTagModal()">保存</button>
        </div>
    </div>
</div>

<!-- 添加章节弹窗 -->
<div id="add-chapter-modal" class="modal-overlay">
    <div class="modal-content narrow">
        <div class="modal-header">
            <div class="modal-title">手动添加章节</div>
            <button class="modal-close" onclick="closeAddChapterModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">章节序号</label>
                <input type="number" id="new-chapter-number" class="form-input" placeholder="章节序号" min="1">
            </div>
            <div class="form-group">
                <label class="form-label">章节标题</label>
                <input type="text" id="new-chapter-title" class="form-input" placeholder="章节标题">
            </div>
            <div class="form-group">
                <label class="form-label">章节内容</label>
                <textarea id="new-chapter-content" class="form-textarea" placeholder="章节内容..."></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeAddChapterModal()">取消</button>
            <button class="btn-confirm" onclick="addChapter()">添加</button>
        </div>
    </div>
</div>

<!-- 编辑章节弹窗 -->
<div id="edit-chapter-modal" class="modal-overlay">
    <div class="modal-content narrow">
        <div class="modal-header">
            <div class="modal-title">编辑章节</div>
            <button class="modal-close" onclick="closeEditChapterModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">章节标题</label>
                <input type="text" id="edit-chapter-title" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">章节内容</label>
                <textarea id="edit-chapter-content" class="form-textarea"></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeEditChapterModal()">取消</button>
            <button class="btn-confirm" onclick="saveEditChapter()">保存</button>
        </div>
    </div>
</div>

<!-- 查看剧本弹窗 -->
<div id="view-script-modal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title" id="view-script-title">查看剧本</div>
            <button class="modal-close" onclick="closeViewScriptModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div id="view-script-content" style="max-height:500px;overflow-y:auto;white-space:pre-wrap;color:#1f2937;font-size:14px;line-height:1.8;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeViewScriptModal()">关闭</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/novels.js"></script>
{% endblock %}