<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="900">
        <div class="subject-dialog flex-col bg-fff round-8 hidden">
            <header class="dialog-header flex-items-center gap-16 px-26 py-10">
                <el-icon class="fs-16 color-666 pointer" @click="dialogVisible = false">
                    <Back />
                </el-icon>
                <div>
                    <div class="fs-16 fw-700 color-000 lh-24">{{ currentTitle }}</div>
                    <div class="fs-12 color-888 lh-20">仅修改当前创意</div>
                </div>
            </header>

            <section class="dialog-body px-26 py-20">
                <template v-if="subjectType === 'product'">
                    <div class="flex-between mb-16">
                        <div>
                            <div class="fs-14 fw-700 color-000 lh-22">
                                商品参考图 <span class="color-888 fw-400">{{ productImages.length }}/6</span>
                            </div>
                            <div class="fs-12 color-888 lh-20">至少保留一张商品参考图</div>
                        </div>
                        <el-button type="primary" class="h-32 px-16 fs-12 border-none" @click="imageDialogVisible = true">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            <span>添加参考图</span>
                        </el-button>
                    </div>
                    <div class="flex gap-10">
                        <div v-for="item in productImages" :key="item.id" class="reference-card relative w-178 h-178 round-6 hidden">
                            <img :src="item.image" :alt="item.name" class="w-full h-full cover" />
                            <div class="image-actions absolute top-8 right-8 flex-items-center gap-6">
                                <span class="action-btn flex-center wh-22 round-4 pointer">
                                    <el-icon class="fs-12">
                                        <Delete />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </template>

                <template v-else-if="subjectType === 'actor'">
                    <div class="flex gap-20">
                        <div class="actor-cover w-240 h-318 round-8 hidden">
                            <img :src="actorInfo.image" :alt="actorInfo.title" class="w-full h-full cover" />
                        </div>
                        <div class="flex-1 flex-col">
                            <div class="info-box p-16 round-6 mb-20">
                                <div class="fs-12 fw-700 color-000 mb-10">形象描述</div>
                                <div class="fs-12 color-333 lh-22">{{ actorInfo.desc }}</div>
                            </div>
                            <div class="flex-between mb-12">
                                <div class="fs-14 fw-700 color-000">音色</div>
                                <span class="fs-12 fw-700 color-main pointer" @click="toggleToneCreator">
                                    {{ isToneCreatorVisible ? '取消' : '新增音色' }}
                                </span>
                            </div>
                            <div class="tone-list flex gap-8 mb-12">
                                <div v-for="item in actorTones" :key="item.id"
                                    class="tone-item flex-center h-50 px-34 round-6 fs-12 fw-700 pointer"
                                    :class="{ active: selectedToneId === item.id }" @click="selectedToneId = item.id">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="info-box p-16 round-6">
                                <div class="fs-12 fw-700 color-000 mb-10">音色描述</div>
                                <div class="fs-12 color-333 lh-22">{{ currentTone?.desc }}</div>
                            </div>
                            <div v-if="isToneCreatorVisible" class="tone-creator p-12 round-6 mt-12">
                                <el-input v-model="toneCreatorText" class="tone-textarea" type="textarea" resize="none"
                                    :rows="4" placeholder="请输入音色描述" />
                                <div class="flex justify-end mt-14">
                                    <el-button type="primary" class="h-32 px-16 fs-12 border-none"
                                        :disabled="isGenerateToneDisabled" @click="generateTone">
                                        生成音色
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                <template v-else>
                    <div class="info-box p-16 round-6 mb-20">
                        <div class="fs-12 fw-700 color-000 mb-10">旁白描述</div>
                        <div class="fs-12 color-333 lh-22">{{ voiceInfo.desc }}</div>
                    </div>
                    <div class="flex-between mb-12">
                        <div class="fs-14 fw-700 color-000">音色</div>
                        <span class="fs-12 fw-700 color-main pointer" @click="toggleToneCreator">
                            {{ isToneCreatorVisible ? '取消' : '新增音色' }}
                        </span>
                    </div>
                    <div class="tone-list flex gap-8 mb-12">
                        <div v-for="item in voiceTones" :key="item.id"
                            class="tone-item flex-center h-50 px-34 round-6 fs-12 fw-700 pointer"
                            :class="{ active: selectedToneId === item.id }" @click="selectedToneId = item.id">
                            {{ item.name }}
                        </div>
                    </div>
                    <div class="info-box p-16 round-6">
                        <div class="fs-12 fw-700 color-000 mb-10">音色描述</div>
                        <div class="fs-12 color-333 lh-22">{{ currentTone?.desc }}</div>
                    </div>
                    <div v-if="isToneCreatorVisible" class="tone-creator p-12 round-6 mt-12">
                        <el-input v-model="toneCreatorText" class="tone-textarea" type="textarea" resize="none"
                            :rows="4" placeholder="请输入音色描述" />
                        <div class="flex justify-end mt-14">
                            <el-button type="primary" class="h-32 px-16 fs-12 border-none"
                                :disabled="isGenerateToneDisabled" @click="generateTone">
                                生成音色
                            </el-button>
                        </div>
                    </div>
                </template>
            </section>

            <footer class="dialog-footer flex justify-end px-26 py-16">
                <el-button class="px-18 fs-12" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" class="px-20 fs-12 border-none" @click="confirmSubject">
                    应用
                </el-button>
            </footer>
        </div>
    </Dialog>
    <AgentProductImageDialog v-model="imageDialogVisible" data-type="goods" @confirm="handleReferenceImagesConfirm" />
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { Back, Delete, Plus } from '@element-plus/icons-vue';
import AgentProductImageDialog from './AgentProductImageDialog.vue';
import Dialog from '@/components/Dialog/index.vue';
import productImg from '@/static/image/huaban.png';
import peopleImg from '@/static/image/meinv.png';

type SubjectType = 'product' | 'actor' | 'voice';

type ToneItem = {
    id: string;
    name: string;
    desc: string;
};

const props = defineProps<{
    modelValue: boolean;
    subjectType: SubjectType;
}>();

const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    confirm: [value: { subjectType: SubjectType; toneId: string }];
}>();

const selectedToneId = ref('');
const imageDialogVisible = ref(false);
const isToneCreatorVisible = ref(false);
const toneCreatorText = ref('');

const productImages = ref([
    {
        id: 'product-1',
        name: '商品参考图 1',
        image: productImg,
    },
    {
        id: 'product-2',
        name: '商品参考图 2',
        image: peopleImg,
    },
]);

const actorInfo = {
    title: '人物形象 1',
    image: peopleImg,
    desc: '一位注重生活品质和驾驶安全的年轻车主，表达自然可信。',
};

const voiceInfo = {
    desc: '广告旁白音色，专业清晰，节奏稳健，重点信息有强调。',
};

const actorTones = ref<ToneItem[]>([
    {
        id: 'actor-tone-1',
        name: '音色 1',
        desc: '自然生活化口吻，语速适中，适合真实体验类内容。',
    },
    {
        id: 'actor-tone-2',
        name: '音色 2',
        desc: '达到',
    },
]);

const voiceTones = ref<ToneItem[]>([
    {
        id: 'voice-tone-1',
        name: '音色 1',
        desc: '青年男性，广告旁白风格，专业讲解口吻，音色清晰稳重',
    },
]);

const titleMap: Record<SubjectType, string> = {
    product: '防晒霜SPF50权威检测图',
    actor: '人物形象 1设定',
    voice: '旁白设定',
};

const dialogVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
});

const currentTitle = computed(() => titleMap[props.subjectType]);

const currentToneList = computed(() => (props.subjectType === 'voice' ? voiceTones.value : actorTones.value));

const currentTone = computed(() => currentToneList.value.find((item) => item.id === selectedToneId.value));

const isGenerateToneDisabled = computed(() => toneCreatorText.value.trim() === '');

watch(
    () => props.subjectType,
    (value) => {
        selectedToneId.value = value === 'voice' ? 'voice-tone-1' : 'actor-tone-2';
        isToneCreatorVisible.value = false;
        toneCreatorText.value = '';
    },
    { immediate: true },
);

const confirmSubject = () => {
    emit('confirm', {
        subjectType: props.subjectType,
        toneId: selectedToneId.value,
    });
    dialogVisible.value = false;
};

const handleReferenceImagesConfirm = (ids: string[]) => {
    const selectedImages = ids
        .filter((id) => !productImages.value.some((item) => item.id === id))
        .map((id, index) => ({
            id,
            name: `商品参考图 ${productImages.value.length + index + 1}`,
            image: index % 2 === 0 ? productImg : peopleImg,
        }));

    productImages.value = [...productImages.value, ...selectedImages].slice(0, 6);
};

const toggleToneCreator = () => {
    isToneCreatorVisible.value = !isToneCreatorVisible.value;
    if (!isToneCreatorVisible.value) {
        toneCreatorText.value = '';
    }
};

const generateTone = () => {
    if (isGenerateToneDisabled.value) {
        return;
    }

    const list = props.subjectType === 'voice' ? voiceTones.value : actorTones.value;
    const tone = {
        id: `${props.subjectType}-tone-${Date.now()}`,
        name: `音色 ${list.length + 1}`,
        desc: toneCreatorText.value.trim(),
    };
    list.push(tone);
    selectedToneId.value = tone.id;
    isToneCreatorVisible.value = false;
    toneCreatorText.value = '';
};
</script>

<style scoped lang="scss">
.subject-dialog {
    border: 1px solid #dce6f2;
}

.dialog-header {
    border-bottom: 1px solid #dce6f2;
}

.dialog-body {
    min-height: 272px;
}

.dialog-footer {
    border-top: 1px solid #dce6f2;
}

.reference-card,
.actor-cover {
    background: #f3f6fb;
}

.image-actions {
    opacity: 0;
    transition: opacity .2s;
}

.reference-card:hover .image-actions {
    opacity: 1;
}

.action-btn {
    color: #fff;
    background: rgba(0, 0, 0, .42);
}

.info-box {
    border: 1px solid #dce6f2;
    background: #f8fafc;
}

.tone-creator {
    border: 1px solid #dce6f2;
    background: #fbfdff;
}

.tone-item {
    min-width: 108px;
    border: 1px solid #dce6f2;
    color: #333;
    background: #fff;

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

:deep(.tone-textarea .el-textarea__inner) {
    min-height: 96px !important;
    border-radius: 6px;
    font-size: 12px;
    line-height: 22px;
    box-shadow: 0 0 0 1px #dce6f2 inset;
}
</style>
