<template>
    <main class="step3-main flex-1 flex-col hidden">
        <div class="preview-workspace flex-1 flex-col hidden">
            <section class="flex-1 flex hidden">
                <aside class="plan-tabs flex-col items-center gap-22 py-28">
                    <div v-for="item in plans" :key="item.id" class="plan-tab flex-col flex-center gap-8 py-10 round-6 pointer relative"
                        :class="{ active: selectedPlanId === item.id }" @click="selectPlan(item.id)">
                        <el-icon class="fs-18">
                            <VideoCamera />
                        </el-icon>
                        <span class="fs-12 fw-700">{{ item.name }}</span>
                        <span v-if="item.dot" class="notice-dot absolute wh-8 round"></span>
                    </div>
                </aside>

                <aside class="video-panel flex-col items-center px-16 py-18">
                    <div class="preview-cover relative w-188 h-334 round-8 hidden">
                        <img v-if="!previewCoverErrorMap[selectedPlan.id]" :src="selectedPlan.cover"
                            :alt="selectedPlan.name" class="w-full h-full cover" @error="handlePreviewCoverError" />
                        <div v-else class="preview-placeholder flex-col flex-center w-full h-full">
                            <el-icon class="fs-30 color-888 mb-8">
                                <VideoCamera />
                            </el-icon>
                            <span class="fs-12 color-888">视频加载中</span>
                        </div>
                        <span class="recommend-tag absolute top-8 left-8 h-24 lh-24 px-10 round-4 fs-12 fw-700 color-fff">
                            {{ selectedPlan.name }}
                        </span>
                        <span class="play-btn absolute flex-center wh-50 round pointer">
                            <el-icon class="fs-30 color-main">
                                <VideoPlay />
                            </el-icon>
                        </span>
                    </div>
                    <div class="flex-items-center gap-8 mt-16">
                        <el-button class="wh-32 p-0">
                            <el-icon>
                                <VideoPlay />
                            </el-icon>
                        </el-button>
                        <el-button class="wh-32 p-0">
                            <el-icon>
                                <Microphone />
                            </el-icon>
                        </el-button>
                        <span class="fs-12 color-000">00:00</span>
                        <span class="fs-12 color-888">/ 00:21</span>
                    </div>
                </aside>

                <section class="material-panel flex-1 px-16 py-18">
                    <h3 class="fs-16 fw-700 color-000 mb-14">适合“画面1”的原料</h3>
                    <div class="material-list flex gap-8 mb-16">
                        <div class="add-material flex-col flex-center w-66 h-66 round-6 pointer">
                            <el-icon class="fs-18 color-666 mb-4">
                                <Plus />
                            </el-icon>
                            <span class="fs-12 color-888">新增视频</span>
                        </div>
                        <div v-for="item in selectedPlan.materials" :key="item.id"
                            class="material-card relative w-66 h-66 round-6 hidden pointer"
                            :class="{ active: selectedMaterialId === item.id }" @click="selectedMaterialId = item.id">
                            <img :src="item.image" :alt="item.name" class="w-full h-full cover" />
                            <span class="ai-tag absolute top-0 left-0 h-20 lh-20 px-6 fs-10 fw-700 color-fff">AI</span>
                        </div>
                    </div>

                    <div class="description-box p-16 round-8">
                        <div class="flex-between mb-8">
                            <div>
                                <div class="fs-14 fw-700 color-000 mb-4">画面描述</div>
                                <div class="fs-12 color-888">原料时长：7秒 · 所用片段：0.0-7.0秒</div>
                            </div>
                            <div class="flex-items-center gap-22 color-666 fs-12">
                                <span class="flex-items-center gap-4 pointer">
                                    <el-icon>
                                        <Crop />
                                    </el-icon>
                                    裁剪
                                </span>
                                <span class="flex-items-center gap-4 pointer">
                                    <el-icon>
                                        <MagicStick />
                                    </el-icon>
                                    优化
                                </span>
                            </div>
                        </div>
                        <div class="section-line mb-14"></div>
                        <div class="script-scroll over-y-auto pr-8">
                            <div v-for="item in shotDescriptions" :key="item.time" class="mb-14">
                                <div class="fs-12 fw-700 color-333 lh-22">{{ item.time }} {{ item.scene }}</div>
                                <div class="fs-12 color-333 lh-22 mt-6">口播内容：{{ item.speech }}</div>
                            </div>
                        </div>
                        <div class="section-line mt-12 mb-12"></div>
                        <div class="flex-items-center gap-8">
                            <span class="fs-12 fw-700 color-333">参考主体:</span>
                            <span class="subject-icon flex-center wh-32 round-4">
                                <el-icon>
                                    <Box />
                                </el-icon>
                            </span>
                            <span class="subject-icon flex-center wh-32 round-4 hidden">
                                <img :src="peopleImg" alt="人物形象" class="w-full h-full cover" />
                            </span>
                            <span class="subject-icon flex-center wh-32 round-4">
                                <el-icon>
                                    <Microphone />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </section>
            </section>

            <section class="timeline-panel flex-between px-10 py-10" >
                <div class="timeline-inner flex-col">
                    <div class="flex-items-center gap-20 color-666 fs-16 mb-16">
                        <el-icon class="pointer">
                            <Refresh />
                        </el-icon>
                        <el-icon class="pointer">
                            <MagicStick />
                        </el-icon>
                        <el-icon class="pointer">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="flex gap-12">
                        <div v-for="item in timelineItems" :key="item.id" class="timeline-card relative w-112 h-62 round-4 hidden pointer"
                            :class="{ active: selectedTimelineId === item.id }" @click="selectedTimelineId = item.id">
                            <img :src="item.image" :alt="item.name" class="w-full h-full cover" />
                            <span class="timeline-name absolute top-4 left-4 h-18 lh-18 px-4 fs-10 color-fff fw-700">
                                {{ item.name }}
                            </span>
                            <span class="duration absolute right-4 bottom-4 h-18 lh-18 px-4 fs-10 color-fff round-4">7.0s</span>
                        </div>
                    </div>
                </div>
                <span class="fs-10 color-888">点击画面可查看对应分镜</span>
            </section>
        </div>

        <footer class="flex justify-end pt-12 pb-12 pr-20">
            <el-button type="primary" class="fs-12 border-none create-btn" @click="emit('createVideo')">
                生成视频成片
            </el-button>
        </footer>
    </main>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Box, Crop, MagicStick, Microphone, Plus, Refresh, VideoCamera, VideoPlay } from '@element-plus/icons-vue';
import productImg from '@/static/image/huaban.png';
import peopleImg from '@/static/image/meinv.png';

type PlanItem = {
    id: string;
    name: string;
    cover: string;
    dot?: boolean;
    materials: MaterialItem[];
};

type MaterialItem = {
    id: string;
    name: string;
    image: string;
};

type ShotDescription = {
    time: string;
    scene: string;
    speech: string;
};

const emit = defineEmits<{
    createVideo: [];
}>();

const plans: PlanItem[] = [
    {
        id: 'recommend',
        name: '推荐',
        cover: productImg,
        materials: [
            { id: 'material-1', name: '商品原料', image: productImg },
            { id: 'material-2', name: '人物原料', image: peopleImg },
        ],
    },
    {
        id: 'backup-1',
        name: '备选1',
        cover: peopleImg,
        dot: true,
        materials: [
            { id: 'material-3', name: '场景原料', image: peopleImg },
            { id: 'material-4', name: '商品原料', image: productImg },
        ],
    },
];

const shotDescriptions: ShotDescription[] = [
    {
        time: '[00:00-00:07]',
        scene: '雨天车内第一视角，雨刮扫过后玻璃仍有大片油膜与光晕，驾驶员皱眉观察前方。',
        speech: '一下雨，挡风玻璃就像蒙了一层雾，雨刮越刮反而越模糊。第三代',
    },
    {
        time: '[00:07-00:14]',
        scene: '近景展示玻璃油膜清洁擦，完成涂抹、擦拭和冲水；画面保留一半未清洁区域形成直观对比。',
        speech: '用它在玻璃上轻轻擦几遍，冲水后油膜很快就被带走了。',
    },
    {
        time: '[00:14-00:21]',
        scene: '切回驾驶视角，挡风玻璃清晰通透，路面与车灯轮廓清楚，产品定格收尾。',
        speech: '玻璃重新透亮，雨天和夜间开车都安心多了。',
    },
];

const timelineItems = [
    { id: 'shot-1', name: '画面1', image: productImg },
    { id: 'shot-2', name: '画面2', image: peopleImg },
    { id: 'shot-3', name: '画面3', image: productImg },
];

const selectedPlanId = ref('recommend');
const selectedMaterialId = ref('material-1');
const selectedTimelineId = ref('shot-1');
const previewCoverErrorMap = ref<Record<string, boolean>>({});

const selectedPlan = computed(() => plans.find((item) => item.id === selectedPlanId.value) || plans[0]);

const selectPlan = (id: string) => {
    selectedPlanId.value = id;
    selectedMaterialId.value = selectedPlan.value.materials[0]?.id || '';
};

const handlePreviewCoverError = () => {
    previewCoverErrorMap.value = {
        ...previewCoverErrorMap.value,
        [selectedPlan.value.id]: true,
    };
};
</script>

<style scoped lang="scss">
.step3-main {
    min-width: 0;
}

.timeline-panel {
    border-bottom: 1px solid #dce6f2;
    border-top: 1px solid #dce6f2;
}

.plan-tabs {
    flex: 0 0 68px;
    border-right: 1px solid #dce6f2;
    background: #f8fafc;
}

.plan-tab {
    width: 48px;
    color: #0a1b34;

    &.active {
        color: rgba(var(--main-color), 1);
        background: #fff;
    }
}

.notice-dot {
    top: -4px;
    right: 6px;
    background: #18d4e8;
}

.video-panel {
    flex: 0 0 220px;
    border-right: 1px solid #dce6f2;
}

.preview-cover,
.material-card,
.timeline-card {
    background: #f3f6fb;
}

.preview-placeholder {
    background: #f8fafc;
}

.recommend-tag {
    background: #4f5b71;
}

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

.material-panel {
    min-width: 0;
}

.add-material {
    border: 1px dashed #b9c9dd;
    background: #fff;
}

.material-card {
    border: 2px solid transparent;

    &.active {
        border-color: rgba(var(--main-color), 1);
    }
}

.ai-tag {
    background: rgba(18, 24, 38, .72);
}

.description-box {
    background: #f8fafc;
}

.section-line {
    height: 1px;
    background: #dce6f2;
}

.script-scroll {
    min-height: 176px;
}

.subject-icon {
    border: 1px solid #dce6f2;
    background: #fff;
}

.timeline-panel {
    flex: 0 0 132px;
}

.timeline-inner {
    margin-left: 286px;
}

.timeline-card {
    border: 2px solid transparent;

    &.active {
        border-color: rgba(var(--main-color), 1);
    }
}

.timeline-name {
    background: rgba(18, 24, 38, .62);
}

.duration {
    background: rgba(18, 24, 38, .72);
}

.create-btn {
    background: #7d28ff;
}
</style>
