<template>
    <section class="step-three h-full">
        <div v-if="!isReady" class="planning-panel h-full flex-col flex-center text-center">
            <div class="fs-18 fw-700 color-000 lh-30">分镜策划进行中</div>
            <div class="fs-14 color-536 lh-24 mt-8">Agent正在进行分镜策划，请耐心等待...</div>
            <div class="progress-meta flex-between w-400 mt-36 fs-14 color-536">
                <span>当前剧集进度：</span>
                <span>第1集/共1集</span>
            </div>
            <div class="planning-card w-400 p-12 mt-14 round-10 bg-fff">
                <div class="fs-14 fw-700 color-000 lh-24 text-left">第1集 策划解析进度: {{ planningProgress }}%</div>
                <el-progress class="mt-14" :percentage="planningProgress" :show-text="false" :stroke-width="6" />
            </div>
        </div>

        <div v-else class="storyboard-workspace h-full flex hidden">
            <aside class="episode-rail flex-col items-center pt-12">
                <div class="fs-12 color-536 lh-22 mb-8">集数</div>
                <div class="episode-no flex-center w-36 h-36 round-8 color-fff fw-700">1</div>
            </aside>

            <aside class="asset-sidebar bg-fff flex-col px-12 py-12 hidden">
                <div class="flex-items-center gap-8 fs-16 fw-700 color-000 lh-24 mb-16">
                    <el-icon class="color-aaa">
                        <Document />
                    </el-icon>
                    <span>第 1 集 丝袜产品展示</span> 
                    <el-icon class="fs-14 color-536">
                        <Notebook />
                    </el-icon>
                    <span class="fs-12 color-536">剧本</span>
                </div>

                <div class="asset-filter flex-items-center h-34 p-4 round-8 mb-14">
                    <el-button v-for="item in filters" :key="item.value" class="filter-btn flex-1 h-26 fs-12 border-none"
                        :class="{ active: activeFilter === item.value }" text @click="activeFilter = item.value">
                        {{ item.label }}
                    </el-button>
                </div>

                <div class="asset-scroll flex-1 over-y-auto hide-scroll">
                    <div class="flex-between fs-14 fw-700 color-000 lh-24 mb-10">
                        <span>角色</span>
                        <el-icon class="color-536 pointer">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="role-card mb-18">
                        <img :src="peopleImg" alt="苏晓" class="role-img w-118 h-118 round-8 cover" />
                        <div class="fs-14 color-000 lh-22 mt-6">苏晓</div>
                        <div class="fs-12 color-536 lh-20">主形象</div>
                        <el-button class="w-118 h-32 mt-8 fs-12">未配置音色</el-button>
                    </div>

                    <div class="flex-between fs-14 fw-700 color-000 lh-24 mb-10">
                        <span>场景</span>
                        <el-icon class="color-536 pointer">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="empty-card flex-col flex-center h-186 round-8 mb-18">
                        <el-icon class="fs-26 color-ccc mb-8">
                            <Picture />
                        </el-icon>
                        <span class="fs-12 color-aaa">暂未选择场景</span>
                    </div>

                    <div class="flex-between fs-14 fw-700 color-000 lh-24 mb-10">
                        <span>道具</span>
                        <el-icon class="color-536 pointer">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="empty-card flex-col flex-center h-80 round-8">
                        <el-icon class="fs-26 color-ccc mb-8">
                            <Star />
                        </el-icon>
                        <span class="fs-12 color-aaa">暂未选择道具</span>
                    </div>
                </div>
            </aside>

            <main class="story-main flex-1 flex-col hidden">
                <header class="toolbar flex-between px-12 py-10">
                    <div></div>
                    <div class="flex-items-center gap-12">
                        <el-button class="h-32 px-16 fs-12">
                            <el-icon>
                                <Refresh />
                            </el-icon>
                            重新解析
                        </el-button>
                        <el-button class="h-32 px-16 fs-12">
                            <el-icon>
                                <List />
                            </el-icon>
                            批量生视频
                        </el-button>
                    </div>
                </header>

                <section class="story-content flex-1 flex gap-12 px-12 hidden">
                    <div class="script-panel flex-1 bg-fff round-12 p-12 flex-col">
                        <div class="flex-items-center gap-12 mb-8">
                            <div class="fs-16 fw-700 color-000">分镜1</div>
                            <el-tag size="small" effect="plain">ID</el-tag>
                            <el-button class="h-32 px-12 fs-12">
                                <el-icon>
                                    <Aim />
                                </el-icon>
                                3D导演台
                                <span class="beta fs-10 ml-4">Beta</span>
                            </el-button>
                        </div>

                        <div class="flex-items-center gap-8 mb-8">
                            <el-button class="h-30 px-12 fs-12">
                                <el-icon>
                                    <FolderOpened />
                                </el-icon>
                                项目素材库
                            </el-button>
                            <el-button class="h-30 px-12 fs-12">
                                <el-icon>
                                    <Folder />
                                </el-icon>
                                资产库
                            </el-button>
                        </div>

                        <div class="prompt-row flex-items-center gap-8 h-34 mb-10">
                            <el-button class="wh-34 p-0" plain>
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </el-button>
                            <el-button class="wh-34 p-0" plain>
                                <el-icon>
                                    <CopyDocument />
                                </el-icon>
                            </el-button>
                            <span class="fs-14 color-aaa">使用 @ 引用角色、场景、道具、音色及参考素材，编辑更灵活，分镜更精准</span>
                        </div>

                        <div class="script-scroll flex-1 over-y-auto hide-scroll pr-8">
                            <p class="fs-14 color-000 lh-28 mb-18">
                                画风: 写实风格, 细节刻画逼真，参考院线电影，真人电影风格，影视大片，真实透视比例，细节清晰不过度锐化
                            </p>
                            <p class="fs-14 color-000 lh-28 mb-18">
                                分镜具体动作描述：<br />
                                整体视觉基调：明亮柔和的自然光影，画面干净，色调温暖，营造出舒适真实的居家氛围。
                            </p>
                            <p v-for="item in shots" :key="item.id" class="fs-14 color-000 lh-28 mb-18">
                                镜头{{ item.id }}（{{ item.duration }}秒）：【场景】居家客厅，室内，白天【机位】{{ item.camera }}【站位】苏晓 {{ item.position }}【动作】{{ item.action }}（画外音，苏晓解说）：“{{ item.speech }}”
                            </p>
                        </div>

                        <div class="script-footer flex-between pt-8">
                            <div class="flex-items-center gap-6">
                                <el-tag effect="plain">Doubao-Seedance-2.5</el-tag>
                                <el-tag effect="plain">27s | 720p | 1个 | mov</el-tag>
                                <el-tag effect="plain">@</el-tag>
                            </div>
                            <div class="flex-items-center gap-8">
                                <el-button class="wh-32 p-0">
                                    <el-icon>
                                        <Pointer />
                                    </el-icon>
                                </el-button>
                                <el-button type="primary" class="h-32 px-18 border-none">
                                    <el-icon>
                                        <MagicStick />
                                    </el-icon>
                                    6,129
                                </el-button>
                            </div>
                        </div>
                    </div>

                    <div class="preview-panel flex-1 bg-fff round-12 p-12 flex-col">
                        <div class="preview-tabs flex justify-end gap-26 fs-14 mb-8">
                            <span class="preview-tab pointer" :class="{ active: previewMode === 'generated' }"
                                @click="previewMode = 'generated'">分镜生成</span>
                            <span class="preview-tab pointer" :class="{ active: previewMode === 'origin' }"
                                @click="previewMode = 'origin'">原视频</span>
                        </div>
                        <div v-if="previewMode === 'generated'" class="preview-empty flex-1 flex-col flex-center round-8">
                            <el-icon class="fs-36 color-ccc mb-8">
                                <VideoCamera />
                            </el-icon>
                            <span class="fs-12 color-aaa">请先完成分镜视频生成</span>
                        </div>
                        <div v-else class="origin-preview flex-1 flex-center round-8 hidden relative">
                            <img :src="peopleImg" alt="原视频" class="origin-img h-full cover" />
                            <span class="play-btn absolute flex-center wh-64 round pointer">
                                <el-icon class="fs-40 color-fff">
                                    <VideoPlay />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </section>

                <footer class="shot-strip bg-fff round-10 mx-12 my-12 px-14 py-14">
                    <div class="fs-14 color-000 lh-24 mb-10">1 分镜</div>
                    <div class="shot-card flex-col items-center pointer">
                        <div class="shot-thumb flex-center w-130 h-90 round-6">
                            <el-icon class="fs-28 color-ccc">
                                <VideoCamera />
                            </el-icon>
                        </div>
                        <div class="fs-12 color-536 lh-22 mt-6">分镜 01 · 待生成</div>
                    </div>
                </footer>
            </main>
        </div>
    </section>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import {
    Aim,
    CopyDocument,
    Document,
    Folder,
    FolderOpened,
    List,
    MagicStick,
    Notebook,
    Picture,
    Plus,
    Pointer,
    Refresh,
    Star,
    VideoCamera,
    VideoPlay,
} from '@element-plus/icons-vue';
import peopleImg from '@/static/image/meinv.png';

type FilterValue = 'all' | 'role' | 'scene' | 'prop';
type PreviewMode = 'generated' | 'origin';

const filters: { label: string; value: FilterValue }[] = [
    { label: '全部', value: 'all' },
    { label: '角色', value: 'role' },
    { label: '场景', value: 'scene' },
    { label: '道具', value: 'prop' },
];

const shots = [
    {
        id: 1,
        duration: '2.0',
        camera: '位于苏晓正前方约1.5米，与她盘坐坐姿平齐的高度，固定不动。',
        position: '盘腿坐在地面上，位于画面中央，面向镜头。',
        action: '双手捧着一个白色包装盒，面带微笑地看向镜头。',
        speech: '今天新到手了来蜜的热销款0.01，真的很清透。',
    },
    {
        id: 2,
        duration: '1.3',
        camera: '位于苏晓正前方，略微俯拍她的手部和腿部，固定不动。',
        position: '保持盘坐姿势，身体位于画面外，仅展示手部和膝盖区域。',
        action: '打开包装盒，从里面拿出一团雾好的黑色丝袜。',
        speech: '让我看看是怎么个超薄丝滑法。',
    },
    {
        id: 3,
        duration: '2.2',
        camera: '与镜头2机位相同，固定不动。',
        position: '保持盘坐姿势，身体位于画面外，仅展示手部和膝盖区域。',
        action: '双手捏住黑色丝袜的两端，将其缓缓拉伸展开。',
        speech: '颜色均匀通透。',
    },
    {
        id: 4,
        duration: '2.5',
        camera: '位于苏晓右侧，平拍她的手部，固定不动。',
        position: '苏晓的手臂举起，将丝袜置于镜头与窗帘之间。',
        action: '双手撑开黑色丝袜的一部分，对着光亮处展示其通透质感。',
        speech: '真的很清透。',
    },
    {
        id: 5,
        duration: '1.8',
        camera: '机位位于苏晓正前方低位，略微仰拍，固定不动。',
        position: '双腿交叉站立，身体位于画面中央。',
        action: '穿着黑色丝袜和黑色高跟鞋，保持站姿，展示腿部穿着效果。',
        speech: '是那种高级的黑丝质感。',
    },
    {
        id: 6,
        duration: '2.0',
        camera: '机位在苏晓右前方，平拍，固定不动。',
        position: '坐在黑色沙发上，跷着二郎腿，身体朝向镜头左前方约45度。',
        action: '右手轻轻地从膝盖处向下抚摸穿着丝袜的小腿，面带微笑。',
        speech: '穿上真的超舒适。',
    },
    {
        id: 7,
        duration: '1.2',
        camera: '机位贴近苏晓的腿部，平拍特写，固定不动。',
        position: '腿部占据画面大部分。',
        action: '一只手在穿着黑色丝袜的小腿上缓慢地抚摸，展示丝袜的光泽和丝滑感。',
        speech: '它的面料很亲肤。',
    },
    {
        id: 8,
        duration: '4.0',
        camera: '机位在苏晓正前方，平拍，固定不动。',
        position: '位于镜头前，身体被丝袜遮挡，仅手臂可见。',
        action: '双手分别抓住黑色丝袜的腰部两端，用力向两侧反复拉伸。',
        speech: '丝袜细腻，弹性也很大，各种身材的姐妹都能穿。',
    },
    {
        id: 9,
        duration: '1.8',
        camera: '机位在苏晓右前方低位，略微仰拍她的腿部，固定不动。',
        position: '穿着丝袜和高跟鞋，侧身坐在一个黑色吧台凳上，双腿交叠。',
        action: '镜头停留在腿部线条，展示自然的光泽。',
        speech: '显瘦又高级。',
    },
];

const isReady = ref(false);
const planningProgress = ref(0);
const activeFilter = ref<FilterValue>('all');
const previewMode = ref<PreviewMode>('generated');
let timer: number | undefined;

const runPlanning = () => {
    timer = window.setInterval(() => {
        planningProgress.value = Math.min(100, planningProgress.value + 20);

        if (planningProgress.value >= 100) {
            window.clearInterval(timer);
            timer = undefined;
            window.setTimeout(() => {
                isReady.value = true;
            }, 400);
        }
    }, 420);
};

onMounted(() => {
    runPlanning();
});

onBeforeUnmount(() => {
    if (timer) {
        window.clearInterval(timer);
    }
});
</script>

<style scoped lang="scss">
.step-three {
    background: #f8fafc;
}

.planning-panel {
    min-height: calc(100vh - 60px);
}

.color-536 {
    color: #536883;
}

.planning-card {
    border: 1px solid #e2e8f3;
}

.episode-rail {
    flex: 0 0 60px;
    background: #eef3ff;
}

.episode-no {
    background: rgba(var(--main-color), 1);
}

.asset-sidebar {
    flex: 0 0 282px;
    min-height: 0;
}

.asset-filter {
    background: #f4f7fb;
}

.filter-btn.active {
    background: #fff;
    box-shadow: 0 1px 4px rgba(17, 36, 62, .12);
}

.asset-scroll,
.script-scroll,
.story-main {
    min-height: 0;
}

.role-img,
.empty-card,
.preview-empty,
.shot-thumb {
    background: #f3f5f9;
}

.story-content {
    min-height: 0;
}

.toolbar {
    flex: 0 0 54px;
    border-bottom: 1px solid #dce6f2;
}

.script-panel,
.preview-panel,
.shot-strip {
    border: 1px solid #e2e8f3;
}

.script-scroll {
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
}

.beta {
    color: #6a44ff;
}

.preview-panel {
    min-width: 420px;
}

.preview-tab {
    position: relative;
    height: 28px;
    line-height: 28px;
    color: #536883;

    &.active {
        color: #000;

        &::after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            background: rgba(var(--main-color), 1);
            content: '';
        }
    }
}

.origin-preview {
    background: #000;
}

.origin-img {
    max-width: 74%;
}

.play-btn {
    top: 50%;
    left: 50%;
    background: rgba(0, 0, 0, .38);
    transform: translate(-50%, -50%);
}

.shot-strip {
    flex: 0 0 164px;
}

.shot-card {
    width: 150px;
}

.shot-thumb {
    border: 2px solid rgba(var(--main-color), 1);
}

:deep(.planning-card .el-progress-bar__outer) {
    background: #eef1f8;
}

:deep(.planning-card .el-progress-bar__inner) {
    background: rgba(var(--main-color), 1);
}
</style>
