<template>
    <div class="step-two-page h-full hidden flex" :class="{ 'detail-open': selectedAsset }">
        <div class="step-left h-full relative" :class="selectedAsset ? 'flex-1' : 'w-full'">
            <div class="h-full w-full">
                <section class="step-two h-full px-24 relative flex-col">
                    <div v-if="!isParsed" class="parse-panel flex-col flex-center text-center">
                        <div class="parse-illus relative mb-16">
                            <el-icon class="document-icon">
                                <Document />
                            </el-icon>
                            <span class="loading-badge flex-center wh-24 round">
                                <el-icon class="loading-icon">
                                    <Loading />
                                </el-icon>
                            </span>
                        </div>
                        <div class="fs-18 fw-700 color-000 lh-30">剧集资产解析中</div>
                        <div class="fs-14 color-536 lh-24">剧集资产解析中，请耐心等待...</div>

                        <div class="parse-card flex-between gap-24 mt-52 px-52 py-22 round-14">
                            <div v-for="item in parseTasks" :key="item.key" class="parse-item flex-col flex-center">
                                <el-progress type="circle" :percentage="item.progress" :width="48" :stroke-width="5"
                                    :status="item.progress === 100 ? 'success' : undefined" :color="progressColor" />
                                <div class="fs-14 color-536 lh-24 mt-12">{{ item.label }}</div>
                            </div>
                        </div>
                    </div>

                    <div v-else class="parsed-panel h-full flex-col">
                        <div class="result-notice flex-between h-48 px-16 round-8 mt-14 mb-20">
                            <div class="flex-items-center gap-10 fs-12 color-000">
                                <el-icon class="color-main ">
                                    <InfoFilled />
                                </el-icon>
                                <span>请完成新旧角色、场景、和道具映射关系；确认替换关系后，系统将自动对原视频进行智能切片并提取关键词对应，用于后续分镜生成。</span>
                            </div>
                            <el-icon class="color-536 pointer">
                                <Close />
                            </el-icon>
                        </div>

                        <div class="flex-between mb-28">
                            <div class="asset-tabs flex-items-center gap-28">
                                <div v-for="tab in assetTabs" :key="tab.key"
                                    class="asset-tab flex-items-center gap-6  pointer"
                                    :class="{ active: activeTab === tab.key }" @click="changeTab(tab.key)">
                                    <span>{{ tab.label }}</span>
                                    <span class="tab-count flex-center h-16 px-6 round-8 color-fff fs-12">{{ tab.count
                                        }}</span>
                                </div>
                            </div>
                            <div class="asset-actions flex-items-center gap-16 fs-12 color-536">
                                <span>形象总计 <span class="color-000">3</span></span>
                                <span>已解析 <span class="color-main">0</span></span>
                                <span>失败<span class="danger-text">0</span></span>
                                <span class="divider"></span>
                                <el-button link class="fs-12 color-000">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                    添加角色
                                </el-button>
                                <span class="divider"></span>
                                <el-button link class="fs-12 color-000">
                                    <el-icon>
                                        <List />
                                    </el-icon>
                                    批量生成
                                </el-button>
                                <span class="divider"></span>
                                <el-icon class="fs-18 color-536 pointer">
                                    <MoreFilled />
                                </el-icon>
                            </div>
                        </div>

                        <div class="asset-scroll flex-1 over-y-auto hide-scroll pb-80">
                            <div v-if="currentAssets.length" class="asset-list flex flex-wrap gap-20">
                                <div v-for="item in currentAssets" :key="item.id"
                                    class="asset-card bg-fff round-8 p-12 pointer"
                                    :class="{ active: selectedAsset?.id === item.id }" @click="selectAsset(item)">
                                    <div class="asset-compare flex gap-8">
                                        <div class="asset-side flex-col flex-1">
                                            <div class="asset-media relative round-6 hidden">
                                                <span class="corner-tag old flex-center color-fff fs-12">原</span>
                                                <img :src="item.origin" :alt="item.oldName"
                                                    class="w-full h-full cover" />
                                            </div>
                                            <div class="fs-14 color-000 lh-24 mt-8">{{ item.oldName }}</div>
                                        </div>
                                        <div class="asset-side flex-col flex-1">
                                            <div class="asset-media empty-media relative flex-center round-6">
                                                <span class="corner-tag new flex-center color-fff fs-12">新</span>
                                                <div class="flex-col flex-center color-999 fs-12">
                                                    <el-icon class="fs-22 mb-6">
                                                        <Picture />
                                                    </el-icon>
                                                    <span>暂未配置设定图</span>
                                                </div>
                                            </div>
                                            <div class="fs-14 color-000 lh-24 mt-8">{{ item.newName }}</div>
                                        </div>
                                    </div>
                                    <div class="flex-between mt-8">
                                        <el-button class="h-32 px-14 fs-12" @click.stop="openVoiceDialog(item)">
                                            <el-icon>
                                                <Microphone />
                                            </el-icon>
                                            配置音色
                                        </el-button>
                                        <el-button class="more-btn wh-32 p-0" plain>
                                            <el-icon>
                                                <MoreFilled />
                                            </el-icon>
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="empty-assets flex-center h-220 bg-fff round-8 color-999 fs-14">
                                暂无道具资产
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="absolute bottom-10 w-full color-000 flex-center">
                <el-button type="primary" class="start-btn h-44 round-140 border-none mt-24" @click="goNext">
                    <el-icon>
                        <MagicStick />
                    </el-icon>
                    <span>分镜解析</span>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </el-button>
            </div>
        </div>
        <div class="py-14 pr-14 flex-1">
            <aside v-if="selectedAsset" class="asset-detail  bg-fff h-full p-20 flex-col round-14">
                <div class="detail-header flex-between mb-24">
                    <div class=" fw-700 color-000">{{ selectedAsset.newName }}</div>
                    <div class="flex-items-center gap-16">
                        <el-icon class=" color-333 pointer">
                            <Edit />
                        </el-icon>
                        <el-button link class="fs-12 color-000">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            添加变装
                        </el-button>
                        <span class="divider"></span>
                        <el-icon class=" color-333 pointer">
                            <Star />
                        </el-icon>
                        <el-icon class=" color-333 pointer">
                            <Download />
                        </el-icon>
                        <span class="divider"></span>
                        <el-button type="primary" class="h-32 px-18 fs-12 border-none">确认角色</el-button>
                        <el-icon class=" color-999 pointer" @click="clearSelectedAsset">
                            <Close />
                        </el-icon>
                    </div>
                </div>

                <div class="detail-preview-wrap flex-1 flex gap-12 hidden">
                    <div class="detail-preview flex-1 flex-center round-6">
                        <div class="flex-col flex-center color-999 fs-14">
                            <el-icon class="fs-28 mb-8">
                                <Picture />
                            </el-icon>
                            <span>暂未配置设定图</span>
                        </div>
                    </div>
                    <div class="thumb-column flex-col items-center gap-10">
                        <div class="fs-12 color-333 lh-20">当前</div>
                        <div class="current-thumb wh-48 round-6 hidden pointer">
                            <img :src="selectedAsset.origin" :alt="selectedAsset.oldName" class="w-full h-full cover" />
                        </div>
                    </div>
                </div>

                <div class="agent-panel mt-14 round-14 hidden bg-fff mr-70">
                    <div class="agent-title flex-between h-48 px-12">
                        <div class="flex-items-center gap-8 fs-14 fw-700 color-000">
                            <el-icon>
                                <MagicStick />
                            </el-icon>
                            Agent 生成形象
                        </div>
                        <div class="flex-items-center gap-16 fs-12 color-333">
                            <span class="flex-items-center gap-4 pointer">
                                <el-icon>
                                    <FolderOpened />
                                </el-icon>
                                从角色库选择
                            </span>
                            <span class="flex-items-center gap-4 pointer">
                                <el-icon>
                                    <Upload />
                                </el-icon>
                                本地上传
                            </span>
                        </div>
                    </div>
                    <div class="agent-content m-12 p-12 round-10">
                        <el-button class="wh-36 p-0 mb-10" plain>
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-button>
                        <div class="fs-12 color-000 lh-22">
                            - 任务：完成角色 {{ selectedAsset.newName }}
                            的上半身正面平视特写和该角色的全身三视图，左边是角色的上半身正面平视特写，右边是该角色的全身三视图。三视图不可以有分割线，比例是
                            16:9，用于展示面部、发型、表情、眼神、上半身服装和配饰细节。
                        </div>
                        <div class="flex-items-center flex-wrap gap-6 mt-12">
                            <el-tag effect="plain" round>Doubao-Seedream-5.0-Pro</el-tag>
                            <el-tag effect="plain" round>1张</el-tag>
                            <el-tag effect="plain" round>1k</el-tag>
                            <el-tag effect="plain" round>16:9</el-tag>
                            <el-tag effect="plain" round>现代都市通用</el-tag>
                        </div>
                        <div class="flex justify-end mt-10">
                            <el-button type="primary" class="h-32 px-18 border-none">
                                <el-icon>
                                    <MagicStick />
                                </el-icon>
                                30
                            </el-button>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
        <VoiceConfigDialog v-model="voiceDialogVisible" @confirm="confirmVoice" />
    </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import {
    ArrowRight,
    Close,
    Document,
    Download,
    Edit,
    FolderOpened,
    InfoFilled,
    List,
    Loading,
    MagicStick,
    Microphone,
    MoreFilled,
    Picture,
    Plus,
    Star,
    Upload,
} from '@element-plus/icons-vue';
import coverImg from '@/static/image/huaban.png';
import roleImg from '@/static/image/meinv.png';
import VoiceConfigDialog from './VoiceConfigDialog.vue';

type AssetTabKey = 'role' | 'scene' | 'prop';

type ParseTask = {
    key: string;
    label: string;
    progress: number;
};

type AssetItem = {
    id: string;
    oldName: string;
    newName: string;
    origin: string;
};

const isParsed = ref(false);
const activeTab = ref<AssetTabKey>('role');
const selectedAsset = ref<AssetItem>();
const voiceDialogVisible = ref(false);
const voiceAsset = ref<AssetItem>();
const emit = defineEmits<{
    (e: 'next'): void;
}>();
const parseTasks = ref<ParseTask[]>([
    { key: 'summary', label: '剧情概要解析', progress: 0 },
    { key: 'role', label: '角色解析', progress: 0 },
    { key: 'scene', label: '场景解析', progress: 0 },
    { key: 'prop', label: '道具解析', progress: 0 },
]);
const assetTabs = [
    { key: 'role', label: '角色', count: 3 },
    { key: 'scene', label: '场景', count: 1 },
    { key: 'prop', label: '道具', count: 0 },
] as const;
const assetMap: Record<AssetTabKey, AssetItem[]> = {
    role: [
        { id: 'role-1', oldName: '万秋', newName: '万秋', origin: roleImg },
        { id: 'role-2', oldName: '村支书', newName: '村支书', origin: coverImg },
        { id: 'role-3', oldName: '[群像]村民', newName: '[群像]村民', origin: roleImg },
    ],
    scene: [
        { id: 'scene-1', oldName: '村口院落', newName: '村口院落', origin: coverImg },
    ],
    prop: [],
};

let timer: number | undefined;
const progressColor = 'rgba(var(--main-color), 1)';
const currentAssets = computed(() => assetMap[activeTab.value]);

const changeTab = (key: AssetTabKey) => {
    activeTab.value = key;
    selectedAsset.value = undefined;
};

const selectAsset = (item: AssetItem) => {
    selectedAsset.value = item;
};

const clearSelectedAsset = () => {
    selectedAsset.value = undefined;
};

const openVoiceDialog = (item: AssetItem) => {
    voiceAsset.value = item;
    voiceDialogVisible.value = true;
};

const confirmVoice = (value: { tab: string; voiceId?: string; prompt?: string }) => {
    console.log('confirm voice', voiceAsset.value, value);
};

const goNext = () => {
    emit('next');
};

const runParsing = () => {
    let times = 0;
    timer = window.setInterval(() => {
        times += 1;
        parseTasks.value = parseTasks.value.map((item, index) => {
            const fastComplete = index !== 1 && times >= 4;
            const nextProgress = fastComplete ? 100 : Math.min(100, item.progress + 18 + index * 4);

            return {
                ...item,
                progress: nextProgress,
            };
        });

        if (parseTasks.value.every((item) => item.progress === 100)) {
            window.clearInterval(timer);
            timer = undefined;
            window.setTimeout(() => {
                isParsed.value = true;
            }, 500);
        }
    }, 420);
};

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

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

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

.step-left,
.asset-detail {
    min-width: 0;
}

.asset-detail {
    box-shadow: 0 0 8px #eee;
}

.step-two {
    box-sizing: border-box;
}

.parsed-panel,
.asset-scroll {
    min-height: 0;
}

.parse-panel {
    min-height: 520px;
}

.parse-illus {
    width: 72px;
    height: 72px;
}

.document-icon {
    font-size: 72px;
    color: #e4e8ef;
}

.loading-badge {
    position: absolute;
    right: 2px;
    bottom: 8px;
    color: #fff;
    background: rgba(var(--main-color), 1);
    box-shadow: 0 2px 8px rgba(var(--main-color), .4);
}

.loading-icon {
    animation: spin 1s linear infinite;
}

.parse-card {
    width: 560px;
    border: 1px solid #e6ebf5;
    background: #fbfcff;
}

.parse-item {
    flex: 1;
}

.color-536 {
    color: #536883;
}

.result-notice {
    border: 1px solid #cfd8ff;
    background: #eef1ff;
}

.asset-tab {
    color: #536883;

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

.tab-count {
    min-width: 16px;
    background: #f04455;
}

.divider {
    width: 1px;
    height: 14px;
    background: #dce6f2;
}

.danger-text {
    color: #f5222d;
}

.asset-card {
    flex: 0 0 calc((100% - 60px) / 4);
    border: 1px solid transparent;
    box-shadow: 0 6px 20px rgba(22, 36, 58, .04);

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

.detail-open {
    .asset-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .asset-media {
        height: 352px;
    }
}

.asset-media {
    height: 376px;
    background: #f4f6fa;
}

.empty-media {
    border: 1px solid #eef1f6;
}

.corner-tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 18px;
    height: 18px;
    border-radius: 4px 0 4px 0;
}

.corner-tag.old {
    background: #6b7b93;
}

.corner-tag.new {
    background: rgba(var(--main-color), 1);
}

.more-btn {
    background: #f8fafc;
}

.asset-detail {
    border-left: 1px solid #edf2f7;
}

.detail-preview-wrap {
    min-height: 360px;
}

.detail-preview {
    background: #f4f6fa;
}

.thumb-column {
    flex: 0 0 58px;
}

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

.agent-panel {
    border: 1px solid #edf2f7;
}

.agent-title {
    background: #f8fafc;
}

.agent-content {
    border: 1px solid #edf2f7;
    background: #fff;
}

:deep(.el-progress-circle__track) {
    stroke: #dfe5f6;
}

:deep(.el-progress__text) {
    font-size: 12px !important;
    font-weight: 700;
    color: #000;
}

:deep(.el-progress.is-success .el-progress__text) {
    color: #18b66a;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>
