<template>
    <div>
        <section class="creation-box bg-fff round-24">
            <div class="composer-input p-24">
                <div class="flex-items-center gap-12 mb-8">
                    <el-button v-if="currentScene" class="scene-tag flex-center px-10 gap-6"
                        @click="emit('clearScene')">
                        <el-icon>
                            <component :is="sceneIcons[currentScene.key]" />
                        </el-icon>
                        <span>{{ currentScene.label }}</span>
                        <el-icon>
                            <Close />
                        </el-icon>
                    </el-button>
                </div>
                <el-input v-model="prompt" class="prompt-input" type="textarea" resize="none" :rows="8"
                    :placeholder="currentScene ? '补充创作要求，例如画面风格、卖点、人群或投放场景' : '参考已上传的图片/视频，生成相关的产品素材。'" />
            </div>
            <div class="relative flex-between gap-16 px-24 py-10">
                <div class="flex-items-center gap-10 flex-wrap">
                    <template v-if="currentScene">
                        <el-button v-for="action in currentScene.uploads" :key="action"
                            class="tool-btn flex-center gap-6 h-34 px-14" plain>
                            <el-icon>
                                <Upload />
                            </el-icon>
                            <span>{{ action }}</span>
                        </el-button>
                        <div v-if="currentScene.key === 'product'"
                            class="target-toggle flex-items-center h-34 px-8 round-6 gap-4">
                            <span class=" color-888 mr-10">输出目标:</span>
                            <el-button v-for="item in outputOptions" :key="item.value"
                                class="target-btn flex-center gap-6 h-28 px-12 round-4"
                                :class="{ active: outputTarget === item.value }" text
                                @click="outputTarget = item.value">
                                <el-icon>
                                    <component :is="item.icon" />
                                </el-icon>
                                <span>{{ item.label }}</span>
                            </el-button>
                        </div>
                    </template>
                    <template v-else>
                        <el-button class="tool-btn flex-center gap-6 h-34 px-14" plain>
                            <el-icon>
                                <Link />
                            </el-icon>
                            <span>商品 URL/ID</span>
                        </el-button>
                        <el-button class="tool-btn flex-center gap-6 h-34 px-14" plain @click="mediaVisible = true">
                            <el-icon>
                                <Picture />
                            </el-icon>
                            <span>媒体素材</span>
                        </el-button>
                    </template>

                    <el-popover v-model:visible="settingVisible" trigger="click" placement="bottom-start" width="334"
                        popper-class="quick-creation-popover" :teleported="false" :show-arrow="false" :hide-after="0">
                        <template #reference>
                            <el-button class="tool-btn flex-center gap-6 h-34 px-14" :class="{ active: settingVisible }"
                                plain>
                                <el-icon>
                                    <Operation />
                                </el-icon>
                                <span>设置</span>
                                <el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </el-button>
                        </template>
                        <div class="popover-card bg-fff round-18 p-16">
                            <div class="flex-between">
                                <h3 class="lh-20 color-000">视频输出参数设置</h3>
                                <span class="soft-pill h-22 lh-22 px-10 round-12  color-888">画质与格式</span>
                            </div>

                            <div class="mt-18">
                                <div class=" lh-20  color-000">1. 视频长度 (20 - 120 秒)</div>
                                <div class="flex-items-center gap-10 mt-10">
                                    <el-button v-for="item in durationOptions" :key="item"
                                        class="flex-center h-30 px-20" :class="{ active: duration === item }" plain
                                        @click="duration = item">
                                        {{ item }}s
                                    </el-button>
                                </div>
                                <el-slider v-model="duration" class="duration-slider mt-14" :min="20" :max="120"
                                    :step="10" :show-tooltip="false" />
                                <p class="mt-4  color-888">当前: <strong class="color-main">{{ duration }} 秒</strong></p>
                            </div>

                            <div class="mt-18">
                                <div class=" lh-20 color-000">2. 视频画面比例</div>
                                <div class="flex-items-center gap-10 mt-10">
                                    <el-button class="ratio-btn flex-center h-34 px-20"
                                        :class="{ active: ratio === 'portrait' }" plain @click="ratio = 'portrait'">
                                        <span class="phone-icon w-8 h-16 mr-4"></span>
                                        <span>9:16 竖屏</span>
                                    </el-button>
                                    <el-button class="flex-center h-34 px-20" :class="{ active: ratio === 'landscape' }"
                                        plain @click="ratio = 'landscape'">
                                        <span class="screen-icon w-16 h-10 mr-4"></span>
                                        <span>16:9 横屏</span>
                                    </el-button>
                                </div>
                            </div>

                            <div class="setting-row flex-between mt-16 pt-14">
                                <span class="  color-000">3. 是否自动去水印并补足</span>
                                <el-switch v-model="autoFix" active-color="#9022fd" />
                            </div>
                        </div>
                    </el-popover>

                    <el-popover v-model:visible="modeVisible" trigger="click" placement="bottom-start" width="334"
                        popper-class="quick-creation-popover" :teleported="false" :show-arrow="false" :hide-after="0">
                        <template #reference>
                            <el-button class="tool-btn flex-center gap-6 h-34 px-14 round-6 pointer"
                                :class="{ active: modeVisible }" plain>
                                <el-icon>
                                    <MagicStick />
                                </el-icon>
                                <span>{{ activeMode.label }}</span>
                                <el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </el-button>
                        </template>
                        <div class="popover-card bg-fff round-18 p-16">
                            <div class="flex-between">
                                <h3 class="flex-items-center gap-6 color-000">
                                    <el-icon class="color-main">
                                        <MagicStick />
                                    </el-icon>
                                    <span>AI大模型模式选择</span>
                                </h3>
                                <span class="soft-pill h-22 lh-22 px-10 round-12  color-main ">运算算力</span>
                            </div>

                            <el-button v-for="item in modeOptions" :key="item.value"
                                class="mode-option relative w-full mt-10 p-12 round-6 text-left pointer"
                                :class="{ active: activeMode.value === item.value }" plain @click="activeMode = item">
                                <div class="w-full">
                                    <div class="lh-20 color-000">
                                        {{ item.label }}
                                        <em class="ml-8  ">{{ item.badge }}</em>
                                    </div>
                                    <div class="mt-4  color-888">{{ item.desc }}</div>
                                </div>
                                <span v-if="activeMode.value === item.value"
                                    class="mode-dot absolute wh-8 round"></span>
                            </el-button>
                        </div>
                    </el-popover>
                </div>
                <el-button class="generate-btn flex-center border-none pointer" size="large" circle
                    :icon="StarFilled" />
            </div>
        </section>
        <div class="flex-center gap-14 flex-wrap mt-18">
            <el-button v-for="item in scenes" :key="item.key"
                class="scene-btn flex-center gap-8 h-38 px-20 round-20 bg-fff   pointer"
                :class="{ active: activeScene === item.key }" plain @click="emit('selectScene', item.key)">
                <el-icon :style="{ color: item.color }">
                    <component :is="sceneIcons[item.key]" />
                </el-icon>
                <span>{{ item.label }}</span>
            </el-button>
        </div>

        <MediaMaterialDialog v-model="mediaVisible" v-model:selected="selectedMaterials" />
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { Component } from 'vue';
import {
    ArrowDown,
    Box,
    Close,
    Link,
    StarFilled,
    Monitor,
    Operation,
    Picture,
    Upload,
    User,
    VideoCamera,
} from '@element-plus/icons-vue';
import MediaMaterialDialog from './MediaMaterialDialog.vue';
import type { MaterialItem, SceneKey } from '../types';

type SceneItem = {
    key: SceneKey;
    label: string;
    desc: string;
    color: string;
    uploads: string[];
};

type ModeOption = {
    value: 'light' | 'standard' | 'expert';
    label: string;
    badge: string;
    desc: string;
};

const props = defineProps<{
    activeScene?: SceneKey;
}>();

const emit = defineEmits<{
    selectScene: [value: SceneKey];
    clearScene: [];
}>();

const prompt = ref('');
const mediaVisible = ref(false);
const settingVisible = ref(false);
const modeVisible = ref(false);
const duration = ref(30);
const ratio = ref<'portrait' | 'landscape'>('portrait');
const autoFix = ref(true);
const outputTarget = ref<'image' | 'video'>('video');
const selectedMaterials = ref<MaterialItem[]>([]);

const scenes: SceneItem[] = [
    { key: 'product', label: '产品素材', desc: '参考已上传的图片/视频，生成相关的产品素材。', color: '#1877ff', uploads: ['上传图片/视频素材'] },
    { key: 'pain', label: '痛点对比', desc: '参考已上传的图片，生成痛点对比素材。', color: '#ff3b55', uploads: ['上传痛点素材', '上传解决痛点素材'] },
    { key: 'process', label: '使用过程', desc: '参考已上传的图片/视频，生成使用过程视频。', color: '#10c887', uploads: ['上传商品图片', '上传使用过程视频'] },
    { key: 'koc', label: 'koc口播', desc: '输入产品卖点与人群场景，生成达人口播素材。', color: '#8b1cff', uploads: ['上传商品图片', '上传口播参考'] },
    { key: 'story', label: '剧情素材', desc: '参考商品素材和目标人群，生成剧情化短视频素材。', color: '#ff8200', uploads: ['上传商品素材', '上传剧情参考'] },
];

const sceneIcons: Record<SceneKey, Component> = {
    product: Box,
    pain: Monitor,
    process: VideoCamera,
    koc: User,
    story: VideoCamera,
};

const outputOptions = [
    { value: 'image' as const, label: '图片', icon: Picture },
    { value: 'video' as const, label: '视频', icon: VideoCamera },
];

const durationOptions = [20, 30, 60, 120];

const modeOptions: ModeOption[] = [
    { value: 'light', label: '轻量模式', badge: '省积分', desc: '响应极快，节省50%算力积分（推荐）' },
    { value: 'standard', label: '标准模式', badge: '均衡', desc: '高清顺滑，兼顾生成速度与画质' },
    { value: 'expert', label: '专家高清模式', badge: '极高画质', desc: '极清画质与细腻质感，适合商业展示' },
];

const activeMode = ref<ModeOption>(modeOptions[0]);

const currentScene = computed(() => scenes.find((item) => item.key === props.activeScene));
</script>

<style lang="scss" scoped>
.creation-box {
    border: 1px solid #e3eaf3;
    box-shadow: 0 2px 8px rgba(15, 35, 70, .08);
}

:deep(.el-button + .el-button) {
    margin-left: 0;
}

:deep(.prompt-input .el-textarea__inner) {
    min-height: 72px !important;
    padding: 0;
    border: 0;
    box-shadow: none;
    color: #183151;
    background: transparent;
    resize: none;
}

:deep(.prompt-input .el-textarea__inner::placeholder) {
    color: #7890ae;
}

:deep(.quick-creation-popover) {
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
}

.tool-btn,
.scene-btn,
.duration-btn,
.ratio-btn {
    border: 1px solid #dfe7f2;
    color: #183151;
    box-shadow: 0 2px 6px rgba(21, 44, 76, .06);
}

.tool-btn.active,
.tool-btn:hover,
.scene-btn.active,
.scene-btn:hover {
    border-color: #cf9dff;
    color: rgba(var(--main-color), 1);
    background: #fbf4ff;
}

.target-toggle,
.soft-pill {
    background: #f3f7fc;
}

.target-btn {
    color: #516986;
    background: transparent;
}

.target-btn.active {
    color: rgba(var(--main-color), 1);
    background: #fff;
    box-shadow: 0 0 0 1px #e4c4ff;
}

.generate-btn {
    color: #4c42ff;
    background: #eff1ff;
    box-shadow: 0 2px 6px rgba(77, 66, 255, .5);
}

.popover-card {
    border: 1px solid #dfe7f2;
    box-shadow: 0 14px 36px rgba(20, 38, 70, .14);
}

.duration-btn,
.ratio-btn {
    background: #f8fbff;
}

.duration-btn.active,
.ratio-btn.active,
.mode-option.active {
    border-color: rgba(var(--main-color), 1);
    color: rgba(var(--main-color), 1);
    background: #fbf4ff;
}

.duration-slider {
    accent-color: rgba(var(--main-color), 1);
}

.phone-icon {
    border: 2px solid currentColor;
}

.screen-icon {
    border: 2px solid currentColor;
}

.setting-row {
    border-top: 1px solid #edf2f7;
}

.mode-option {
    height: auto;
    justify-content: flex-start;
    white-space: normal;
    border: 1px solid #dfe7f2;
    background: #fbfdff;
}

:deep(.mode-option > span) {
    width: 100%;
}

.mode-option em {
    color: #7894b4;
    font-style: normal;
}

.mode-dot {
    top: 24px;
    right: 12px;
    background: rgba(var(--main-color), 1);
}
</style>
