{% extends "base.html" %}

{% block title %}分镜生成 - AI创作工作台{% endblock %}

{% block extra_css %}
<style>
    .sb-page { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; min-height: calc(100vh - 190px); color: #1f2937; }
    .sb-header { padding: 16px 24px; border-bottom: 1px solid #e5e7eb; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    .sb-select {
        padding: 8px 12px; border-radius: 6px; border: 1px solid #e5e7eb;
        background: #ffffff; color: #1f2937; font-size: 13px; outline: none; min-width: 150px;
    }
    .sb-select:focus { border-color: #2563eb; }
    .sb-btn {
        padding: 8px 16px; border-radius: 6px; border: none; font-size: 13px;
        cursor: pointer; transition: all 0.2s; font-weight: 500;
    }
    .sb-btn-primary { background: #2563eb; color: #fff; }
    .sb-btn-primary:hover { background: #1d4ed8; }
    .sb-btn-danger { background: #ef4444; color: #fff; }
    .sb-btn-danger:hover { background: #dc2626; }
    .sb-btn-outline { background: transparent; color: #6b7280; border: 1px solid #d1d5db; }
    .sb-btn-outline:hover { border-color: #6b7280; color: #1f2937; }

    .sb-layout { display: flex; gap: 20px; padding: 24px; min-height: calc(100vh - 120px); }
    .sb-left { width: 45%; }
    .sb-right { width: 55%; }

    .sb-panel {
        background: #ffffff; border-radius: 12px; padding: 20px;
        border: 1px solid #e5e7eb; margin-bottom: 16px;
    }
    .sb-panel-title {
        font-size: 16px; font-weight: 600; color: #111827;
        border-left: 3px solid #3b82f6; padding-left: 10px; margin-bottom: 16px;
    }

    /* 场景列表 */
    .sb-scene-item {
        padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb;
        margin-bottom: 12px; cursor: pointer; transition: all 0.2s;
    }
    .sb-scene-item:hover { border-color: #2563eb; background: rgba(14, 165, 233, 0.05); }
    .sb-scene-item.active { border-color: #2563eb; background: rgba(14, 165, 233, 0.1); }
    .sb-scene-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .sb-scene-title { font-size: 14px; font-weight: 500; color: #111827; }
    .sb-scene-meta { font-size: 12px; color: #6b7280; }
    .sb-scene-content { font-size: 13px; color: #6b7280; line-height: 1.6; max-height: 100px; overflow: hidden; }

    /* 镜头列表 */
    .sb-shot-item {
        padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb;
        margin-bottom: 8px; background: #f1f5f9;
    }
    .sb-shot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .sb-shot-number { font-size: 13px; font-weight: 500; color: #3b82f6; }
    .sb-shot-type { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #dbeafe; color: #3b82f6; border: 1px solid #2563eb; }
    .sb-shot-content { font-size: 12px; color: #6b7280; line-height: 1.5; }
    .sb-shot-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5e7eb; font-size: 11px; color: #6b7280; }

    /* 空状态 */
    .sb-empty {
        text-align: center; padding: 60px 20px; color: #6b7280;
    }
    .sb-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }

    /* 进度 */
    .sb-progress { display: none; padding: 12px; background: #f1f5f9; border-radius: 8px; margin-top: 12px; }
    .sb-progress.show { display: block; }
    .sb-progress-text { color: #3b82f6; font-size: 13px; }

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

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

{% block content %}
<div class="sb-page">
    <!-- 顶部工具栏 -->
    <div class="sb-header">
        <select id="sb-novel-select" class="sb-select" onchange="onNovelChange()">
            <option value="">选择小说</option>
        </select>
        <select id="sb-chapter-select" class="sb-select" onchange="onChapterChange()">
            <option value="">选择章节</option>
        </select>
        <select id="sb-template-select" class="sb-select">
            <option value="">选择分镜模板</option>
        </select>
        <select id="sb-llm-select" class="sb-select">
            <option value="">选择大模型</option>
        </select>
        <select id="sb-style-select" class="sb-select">
            <option value="">风格提示词（可选）</option>
        </select>
        <button class="sb-btn sb-btn-primary" onclick="generateAll()">批量生成全部分镜</button>
        <button class="sb-btn sb-btn-outline" onclick="exportStoryboard()">导出分镜</button>
        <button class="sb-btn sb-btn-danger" onclick="clearStoryboard()">清空分镜</button>
    </div>

    <!-- 历史分镜项目（按当前小说展示） -->
    <div class="sb-header" style="border-top: 1px solid #e5e7eb; border-bottom: none; padding-top: 12px;">
        <span style="color:#6b7280;font-size:13px;">已保存的分镜项目：</span>
        <select id="sb-existing-select" class="sb-select" onchange="onExistingChange()" style="min-width:280px;">
            <option value="">（当前章节暂无分镜项目）</option>
        </select>
        <span id="sb-existing-hint" style="color:#6b7280;font-size:12px;"></span>
    </div>

    <div class="sb-layout">
        <!-- 左侧：剧本内容 -->
        <div class="sb-left">
            <div class="sb-panel">
                <div class="sb-panel-title">剧本内容</div>
                <div id="sb-script-content">
                    <div class="sb-empty">
                        <div class="sb-empty-icon">📜</div>
                        <div>请先选择小说和章节</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧：分镜结果 -->
        <div class="sb-right">
            <div class="sb-panel">
                <div class="sb-panel-title">分镜结果</div>
                <div id="sb-storyboard-content">
                    <div class="sb-empty">
                        <div class="sb-empty-icon"></div>
                        <div>暂无分镜，请点击生成</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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