{% extends "base.html" %}

{% block title %}即梦视频生成 - AI创作工作台{% endblock %}

{% block extra_css %}
<style>
    .jm-page { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; min-height: calc(100vh - 190px); color: #1f2937; }
    .jm-header { padding: 16px 24px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
    .jm-title { font-size: 20px; font-weight: 600; color: #111827; }
    .jm-btn { padding: 8px 16px; border-radius: 6px; border: none; font-size: 13px; cursor: pointer; transition: all 0.2s; font-weight: 500; }
    .jm-btn-primary { background: #2563eb; color: #fff; }
    .jm-btn-primary:hover { background: #1d4ed8; }
    .jm-btn-outline { background: transparent; color: #6b7280; border: 1px solid #d1d5db; }
    .jm-btn-outline:hover { border-color: #6b7280; color: #1f2937; }

    /* 登录状态栏 */
    .jm-status-bar { padding: 12px 24px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
    .jm-login-status { display: flex; align-items: center; gap: 8px; }
    .jm-badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; background: #dbeafe; color: #3b82f6; }
    .jm-balance { font-size: 13px; color: #6b7280; }
    .jm-actions { display: flex; gap: 8px; }

    /* 模式切换 */
    .jm-mode-tabs { padding: 12px 24px; border-bottom: 1px solid #e5e7eb; display: flex; gap: 16px; }
    .jm-mode-tab { font-size: 13px; color: #6b7280; cursor: pointer; padding-bottom: 8px; border-bottom: 2px solid transparent; }
    .jm-mode-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }

    /* 参数设置栏 */
    .jm-params { padding: 16px 24px; border-bottom: 1px solid #e5e7eb; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    .jm-select { padding: 6px 12px; border-radius: 6px; border: 1px solid #e5e7eb; background: #ffffff; color: #1f2937; font-size: 13px; outline: none; }
    .jm-select:focus { border-color: #2563eb; }
    .jm-input { padding: 6px 12px; border-radius: 6px; border: 1px solid #e5e7eb; background: #ffffff; color: #1f2937; font-size: 13px; outline: none; width: 80px; }
    .jm-input:focus { border-color: #2563eb; }
    .jm-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7280; }

    /* 主布局 */
    .jm-layout { display: flex; gap: 20px; padding: 24px; min-height: calc(100vh - 200px); }
    .jm-left { width: 40%; }
    .jm-right { width: 60%; }

    /* 分镜列表 */
    .jm-panel { background: #ffffff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb; }
    .jm-panel-title { font-size: 16px; font-weight: 600; color: #111827; border-left: 3px solid #3b82f6; padding-left: 10px; margin-bottom: 16px; }
    .jm-shot-list { max-height: 500px; overflow-y: auto; }
    .jm-shot-item { padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
    .jm-shot-item:hover { border-color: #2563eb; }
    .jm-shot-item.active { border-color: #2563eb; background: rgba(14, 165, 233, 0.1); }
    .jm-shot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .jm-shot-number { font-size: 13px; font-weight: 500; color: #3b82f6; }
    .jm-shot-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
    .jm-status-completed { background: #d1fae5; color: #047857; }
    .jm-status-pending { background: #f3f4f6; color: #4b5563; }
    .jm-status-generating { background: #dbeafe; color: #1d4ed8; }
    .jm-status-failed { background: #fee2e2; color: #b91c1c; }
    .jm-status-interrupted { background: #5f3b1e; color: #f59e0b; }
    .jm-shot-meta { font-size: 12px; color: #6b7280; }

    /* 镜头详情 */
    .jm-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .jm-detail-title { font-size: 16px; font-weight: 600; color: #111827; }
    .jm-tail-frame { margin-bottom: 16px; }
    .jm-tail-frame-img { width: 100%; height: 200px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #6b7280; margin-bottom: 8px; }
    .jm-tail-frame-label { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
    .jm-reference-section { margin-bottom: 16px; }
    .jm-reference-title { font-size: 13px; font-weight: 500; color: #111827; margin-bottom: 8px; }
    .jm-upload-btn { padding: 8px 16px; border-radius: 6px; background: #2563eb; color: #fff; border: none; cursor: pointer; font-size: 13px; }
    .jm-upload-btn:hover { background: #1d4ed8; }
    .jm-reference-desc { margin-top: 8px; padding: 8px; background: #f1f5f9; border-radius: 6px; font-size: 12px; color: #6b7280; min-height: 60px; }

    /* 生成日志 */
    .jm-log-section { margin-top: 16px; }
    .jm-log-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 12px; }
    .jm-log-list { max-height: 200px; overflow-y: auto; font-size: 12px; }
    .jm-log-item { padding: 4px 0; color: #6b7280; }
    .jm-log-time { color: #6b7280; margin-right: 8px; }
    .jm-log-warning { color: #f59e0b; }

    /* 底部操作栏 */
    .jm-footer { padding: 16px 24px; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
    .jm-queue-btn { padding: 10px 20px; border-radius: 6px; background: #2563eb; color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 500; }
    .jm-queue-btn:hover { background: #1d4ed8; }
    .jm-footer-actions { display: flex; gap: 8px; }

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

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

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

{% block content %}
<div class="jm-page">
    <div class="jm-header">
        <div class="jm-title">即梦视频生成</div>
        <button class="jm-btn jm-btn-primary" onclick="refreshTasks()">刷新</button>
    </div>

    <!-- 登录状态栏 -->
    <div class="jm-status-bar">
        <div class="jm-login-status">
            <span class="jm-badge">已登录</span>
            <span class="jm-balance">余额: 8972</span>
        </div>
        <div class="jm-actions">
            <button class="jm-btn jm-btn-outline" onclick="loginJimeng()">登录即梦</button>
            <button class="jm-btn jm-btn-outline" onclick="switchAccount()">切换账号</button>
            <button class="jm-btn jm-btn-outline" onclick="checkLoginStatus()">检查登录状态</button>
            <button class="jm-btn jm-btn-outline" onclick="refreshTasks()">刷新</button>
        </div>
    </div>

    <!-- 模式切换 -->
    <div class="jm-mode-tabs">
        <div class="jm-mode-tab active">即梦CLI模式</div>
        <div class="jm-mode-tab">火山方舟API</div>
    </div>

    <!-- 参数设置栏 -->
    <div class="jm-params">
        <select class="jm-select" id="jm-model">
            <option>Seedance 2.0</option>
            <option>Seedance 1.0</option>
        </select>
        <select class="jm-select" id="jm-reference-mode">
            <option>全能参考</option>
            <option>首帧参考</option>
            <option>尾帧参考</option>
        </select>
        <select class="jm-select" id="jm-aspect-ratio">
            <option>9:16</option>
            <option>16:9</option>
            <option>1:1</option>
        </select>
        <select class="jm-select" id="jm-resolution">
            <option>480P</option>
            <option>720P</option>
            <option>1080P</option>
        </select>
        <input type="number" class="jm-input" id="jm-duration" value="14" min="1" max="60">
        <span style="font-size: 13px; color: #6b7280;">秒</span>
        <select class="jm-select" id="jm-style">
            <option>3D真人风格(国内)</option>
            <option>2D动漫风格</option>
            <option>写实风格</option>
        </select>
        <label class="jm-checkbox">
            <input type="checkbox" id="jm-serial-tail" checked>
            串行尾帧
        </label>
    </div>

    <div class="jm-layout">
        <!-- 左侧：分镜列表 -->
        <div class="jm-left">
            <div class="jm-panel">
                <div class="jm-panel-title">分镜列表</div>
                <div id="jm-shot-list" class="jm-shot-list">
                    <div class="jm-empty">
                        <div class="jm-empty-icon">🎬</div>
                        <div>暂无分镜，请先完成信息提取</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧：镜头详情 -->
        <div class="jm-right">
            <div class="jm-panel">
                <div class="jm-detail-header">
                    <div class="jm-detail-title" id="jm-detail-title">分镜 #1-2 详情</div>
                    <button class="jm-btn jm-btn-primary" onclick="generateVideo()">生成视频</button>
                </div>

                <!-- 尾帧参考 -->
                <div class="jm-tail-frame">
                    <div class="jm-tail-frame-img" id="jm-tail-frame-img">
                        此图为上一视频的尾帧参考图，本镜从此画面故事的延续，保持场景与角色一致
                    </div>
                    <label class="jm-checkbox">
                        <input type="checkbox" id="jm-use-tail" checked>
                        生成时使用此尾帧
                    </label>
                </div>

                <!-- 额外参考图 -->
                <div class="jm-reference-section">
                    <div class="jm-reference-title">额外参考图</div>
                    <button class="jm-upload-btn" onclick="uploadReference()">上传参考图</button>
                    <div class="jm-reference-desc" id="jm-reference-desc" placeholder="输入参考图描述（可选），如：按照这个构图生成..."></div>
                </div>

                <!-- 生成日志 -->
                <div class="jm-log-section">
                    <div class="jm-log-title">生成日志</div>
                    <div class="jm-log-list" id="jm-log-list">
                        <div class="jm-log-item"><span class="jm-log-time">22:54:32</span>全局队列已清空,主表状态已刷新</div>
                        <div class="jm-log-item"><span class="jm-log-time">22:54:32</span>加载了 6 个分镜</div>
                        <div class="jm-log-item"><span class="jm-log-time">22:53:49</span>【全局队列】已加入 5 条到队列</div>
                        <div class="jm-log-item"><span class="jm-log-time">22:53:49</span>用户已确认继续</div>
                        <div class="jm-log-item jm-log-warning"><span class="jm-log-time">22:53:36</span>⚠ 预检发现 1 个分镜缺少关联图(等你确认)</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="jm-footer">
        <button class="jm-queue-btn" onclick="addToQueue()">加入队列 (0)</button>
        <div class="jm-footer-actions">
            <button class="jm-btn jm-btn-outline" onclick="refreshStatus()">刷新状态</button>
            <button class="jm-btn jm-btn-outline" onclick="openMaterialFolder()">素材文件夹</button>
        </div>
    </div>
</div>
{% endblock %}

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