{% extends "base.html" %}

{% block title %}剧本转换 - AI创作工作台{% endblock %}

{% block extra_css %}
<style>
    .sc-page { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; min-height: calc(100vh - 190px); color: #1f2937; }
    .sc-layout { display: flex; gap: 20px; padding: 24px; min-height: calc(100vh - 64px); }

    /* 左侧面板 */
    .sc-left { width: 420px; flex-shrink: 0; }
    .sc-panel {
        background: #ffffff; border-radius: 12px; padding: 24px;
        border: 1px solid #e5e7eb;
    }
    .sc-panel-title {
        font-size: 18px; font-weight: 600; color: #111827;
        border-left: 3px solid #3b82f6; padding-left: 12px; margin-bottom: 24px;
    }

    .sc-label { display: block; color: #6b7280; font-size: 14px; font-weight: 500; margin-bottom: 8px; margin-top: 20px; }
    .sc-label:first-of-type { margin-top: 0; }
    .sc-select {
        width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e7eb;
        background: #f1f5f9; color: #1f2937; font-size: 14px; outline: none;
        appearance: none; cursor: pointer;
    }
    .sc-select:focus { border-color: #2563eb; }

    /* 章节选择 */
    .sc-chapter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .sc-chapter-header label { color: #6b7280; font-size: 14px; font-weight: 500; margin: 0; }
    .sc-select-all { color: #3b82f6; font-size: 13px; cursor: pointer; background: none; border: none; }
    .sc-select-all:hover { text-decoration: underline; }

    .sc-chapter-list {
        max-height: 200px; overflow-y: auto; border: 1px solid #e5e7eb;
        border-radius: 8px; padding: 8px; background: #f1f5f9;
    }
    .sc-chapter-item {
        display: flex; align-items: center; padding: 10px 12px; border-radius: 6px;
        cursor: pointer; transition: background 0.15s; gap: 10px;
    }
    .sc-chapter-item:hover { background: rgba(56, 189, 248, 0.05); }
    .sc-chapter-item.selected { background: rgba(14, 165, 233, 0.1); border: 1px solid rgba(14, 165, 233, 0.3); }
    .sc-chapter-item input[type="checkbox"] { accent-color: #2563eb; width: 16px; height: 16px; }
    .sc-chapter-item .ch-title { color: #1f2937; font-size: 14px; flex: 1; }
    .sc-chapter-item .ch-status {
        font-size: 11px; padding: 2px 8px; border-radius: 10px;
        background: #d1fae5; color: #047857; border: 1px solid #a7f3d0;
    }

    /* 转换按钮 */
    .sc-convert-btn {
        width: 100%; padding: 14px; border-radius: 10px; border: none;
        font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s;
        margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .sc-convert-btn.ready { background: linear-gradient(135deg, #2563eb, #06b6d4); color: #fff; }
    .sc-convert-btn.ready:hover { background: linear-gradient(135deg, #1d4ed8, #0891b2); }
    .sc-convert-btn.converting { background: #d1d5db; color: #6b7280; cursor: not-allowed; }

    /* 进度区域 */
    .sc-progress {
        margin-top: 16px; padding: 16px; border-radius: 8px;
        background: #f1f5f9; border: 1px solid #e5e7eb; display: none;
    }
    .sc-progress.show { display: block; }
    .sc-progress-title { color: #3b82f6; font-size: 14px; font-weight: 500; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .sc-progress-item { color: #6b7280; font-size: 13px; padding: 4px 0; display: flex; align-items: center; gap: 6px; }
    .sc-progress-done { color: #34d399; font-size: 13px; margin-top: 8px; display: flex; align-items: center; gap: 6px; }

    /* 右侧面板 */
    .sc-right { flex: 1; min-width: 0; }
    .sc-result-panel {
        background: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb;
        min-height: calc(100vh - 112px); display: flex; flex-direction: column;
    }
    .sc-result-header {
        padding: 20px 24px; border-bottom: 1px solid #e5e7eb;
        display: flex; justify-content: space-between; align-items: center;
    }
    .sc-clear-btn {
        padding: 6px 14px; border-radius: 6px; border: 1px solid #ef4444;
        background: transparent; color: #f87171; font-size: 13px; cursor: pointer;
    }
    .sc-clear-btn:hover { background: rgba(239, 68, 68, 0.1); }

    /* 空状态 */
    .sc-empty {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        justify-content: center; color: #6b7280; padding: 40px;
    }
    .sc-empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.3; }
    .sc-empty-text { font-size: 16px; margin-bottom: 8px; }
    .sc-empty-hint { font-size: 13px; color: #d1d5db; text-align: center; line-height: 1.6; }

    /* 结果内容 */
    .sc-result-content { flex: 1; padding: 24px; overflow-y: auto; display: none; }
    .sc-result-content.show { display: block; }

    /* 章节Tab */
    .sc-result-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
    .sc-result-tab {
        padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer;
        background: transparent; color: #6b7280; border: 1px solid transparent;
    }
    .sc-result-tab:hover { color: #1f2937; }
    .sc-result-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

    /* 章节内容卡片 */
    .sc-chapter-card {
        background: #f1f5f9; border-radius: 10px; padding: 20px;
        border: 1px solid #e5e7eb; margin-bottom: 16px;
    }
    .sc-chapter-card-header {
        display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
    }
    .sc-chapter-card-title { color: #111827; font-size: 15px; font-weight: 500; }
    .sc-chapter-card-actions { display: flex; gap: 8px; }
    .sc-btn-save {
        padding: 6px 14px; border-radius: 6px; border: none;
        background: #2563eb; color: #fff; font-size: 13px; cursor: pointer;
    }
    .sc-btn-save:hover { background: #1d4ed8; }
    .sc-btn-delete {
        padding: 6px 14px; border-radius: 6px; border: none;
        background: #ef4444; color: #fff; font-size: 13px; cursor: pointer;
    }
    .sc-btn-delete:hover { background: #dc2626; }
    .sc-chapter-body { color: #4b5563; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }

    /* 滚动条 */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* ===== UI 精修：统一设计语言 ===== */
    .sc-btn-save { border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
    .sc-btn-save:hover { box-shadow: 0 4px 12px rgba(37,99,235,0.22); transform: translateY(-1px); }
    .sc-btn-delete { border-radius: 10px; }
    .sc-select { border-radius: 10px; border: 1px solid #d1d5db; background: #ffffff; padding: 8px 12px; }
    .sc-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
    .sc-panel { border-radius: 14px; }
    </style>
{% endblock %}

{% block content %}
<div class="sc-page">
    <div class="sc-layout">
        <!-- 左侧：剧本转换 -->
        <div class="sc-left">
            <div class="sc-panel">
                <div class="sc-panel-title">剧本转换</div>

                <!-- 选择小说 -->
                <label class="sc-label">选择小说</label>
                <select id="sc-novel-select" class="sc-select" onchange="onNovelSelected()">
                    <option value="">请选择小说</option>
                </select>

                <!-- 选择章节 -->
                <div class="sc-chapter-header" style="margin-top:20px;">
                    <label class="sc-label" style="margin:0;">选择章节</label>
                    <button class="sc-select-all" onclick="toggleSelectAll()">全选</button>
                </div>
                <div id="sc-chapter-list" class="sc-chapter-list">
                    <div style="text-align:center;padding:20px;color:#6b7280;font-size:13px;">请先选择小说</div>
                </div>

                <!-- 选择提示词模板 -->
                <label class="sc-label">选择提示词模板</label>
                <select id="sc-template-select" class="sc-select">
                    <option value="">请选择模板</option>
                </select>

                <!-- 选择大模型配置 -->
                <label class="sc-label">选择大模型配置</label>
                <select id="sc-llm-select" class="sc-select">
                    <option value="">请选择模型配置</option>
                </select>

                <!-- 开始转换按钮 -->
                <button id="sc-convert-btn" class="sc-convert-btn ready" onclick="startConvert()">
                    <span>◎</span> 开始转换
                </button>

                <!-- 进度区域 -->
                <div id="sc-progress" class="sc-progress">
                    <div class="sc-progress-title">
                        <span style="display:inline-block;width:16px;height:16px;border:2px solid #3b82f6;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;"></span>
                        正在调用大模型转换剧本...
                    </div>
                    <div id="sc-progress-items"></div>
                    <div id="sc-progress-done" class="sc-progress-done" style="display:none;"></div>
                </div>
            </div>
        </div>

        <!-- 右侧：剧本结果 -->
        <div class="sc-right">
            <div class="sc-result-panel">
                <div class="sc-result-header">
                    <div class="sc-panel-title" style="margin-bottom:0;">剧本结果</div>
                    <button class="sc-clear-btn" onclick="clearAllResults()" style="display:none;" id="sc-clear-btn">清空全部</button>
                </div>

                <!-- 空状态 -->
                <div id="sc-empty-state" class="sc-empty">
                    <div class="sc-empty-icon">📋</div>
                    <div class="sc-empty-text">暂无剧本</div>
                    <div class="sc-empty-hint">在左侧选择小说、章节、模板和模型配置，点击「开始转换」生成剧本</div>
                </div>

                <!-- 结果内容 -->
                <div id="sc-result-content" class="sc-result-content">
                    <div id="sc-result-tabs" class="sc-result-tabs"></div>
                    <div id="sc-result-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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