<script setup lang="ts">
import {onMounted, ref} from "vue";
import InputInlineEditor from "../../components/common/InputInlineEditor.vue";
import VideoPlayer from "../../components/common/VideoPlayer.vue";
import {t} from "../../lang";
import {Dialog} from "../../lib/dialog";
import {VideoTemplateRecord, VideoTemplateService} from "../../service/VideoTemplateService";
import VideoInfo from "../Apps/common/VideoInfo.vue";
import VideoTemplateCloudDialog from "./components/VideoTemplateCloudDialog.vue";
import VideoTemplateEditDialog from "./components/VideoTemplateEditDialog.vue";

const editDialog = ref<InstanceType<typeof VideoTemplateEditDialog>>();
const cloudDialog = ref<InstanceType<typeof VideoTemplateCloudDialog>>();
const records = ref<VideoTemplateRecord[]>([]);
const loading = ref(true);

const doRefresh = async () => {
    loading.value = true;
    records.value = await VideoTemplateService.list();
    loading.value = false;
};

onMounted(async () => {
    await doRefresh();
});

const doDelete = async (record: VideoTemplateRecord) => {
    await Dialog.confirm(t("确认删除？"));
    await VideoTemplateService.delete(record);
    await doRefresh();
    // 触发更新事件，通知其他组件刷新
    window.dispatchEvent(new CustomEvent('video-template-updated'));
};

const onChangeTitle = async (record: VideoTemplateRecord, value: string) => {
    await VideoTemplateService.update(record.id!, {name: value});
    await doRefresh();
    // 触发更新事件，通知其他组件刷新
    window.dispatchEvent(new CustomEvent('video-template-updated'));
};

const onUpdate = async () => {
    await doRefresh();
    // 触发更新事件，通知其他组件刷新
    window.dispatchEvent(new CustomEvent('video-template-updated'));
};
</script>

<template>
    <div class="video-template-page p-5">
        <div class="mb-4 flex items-center">
            <div class="flex-grow flex items-end">
                <div class="text-3xl font-bold template-page-title">{{ $t("数字人形象") }}</div>
                <div class="text-gray-400 ml-3 template-page-subtitle">{{ $t("管理多个数字人形象") }}</div>
            </div>
            <div class="flex items-center">
                <a-button @click="cloudDialog?.show()" class="ml-2">
                    <template #icon>
                        <icon-cloud />
                    </template>
                    {{ $t("云端形象") }}
                </a-button>
                <a-button @click="editDialog?.add()" class="ml-2">
                    <template #icon>
                        <icon-plus />
                    </template>
                    {{ $t("添加") }}
                </a-button>
            </div>
        </div>
        <div>
            <m-empty v-if="!records.length && !loading" />
            <m-loading v-else-if="!records.length && loading" page />
            <div class="flex flex-wrap -mx-2">
                <div v-for="r in records" :key="r.id" class="w-1/3 flex-shrink-0 p-2">
                    <div class="rounded-xl shadow border p-4 hover:shadow-lg">
                        <div class="flex mb-3">
                            <div class="flex-grow w-0 mr-2">
                                <div
                                    class="inline-flex max-w-full items-center bg-blue-100 rounded-full px-2 leading-8 h-8 template-name-pill"
                                >
                                    <div class="truncate overflow-hidden flex-grow cursor-pointer template-title-text">
                                        {{ r.name }}
                                    </div>
                                    <InputInlineEditor :value="r.name" @change="onChangeTitle(r, $event)">
                                        <a class="ml-1 text-gray-400 template-edit-trigger" href="javascript:;">
                                            <icon-pen />
                                        </a>
                                    </InputInlineEditor>
                                </div>
                            </div>
                            <div>
                                <a-button status="danger" @click="doDelete(r)">
                                    <template #icon>
                                        <icon-delete />
                                    </template>
                                </a-button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="h-48 bg-black p-2 rounded-lg template-preview-shell">
                                <VideoPlayer :url="'file://' + r.video" />
                            </div>
                        </div>
                        <div class="flex gap-1">
                            <VideoInfo :data="r.info" :label="false" :icon="false" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <VideoTemplateEditDialog @update="onUpdate" ref="editDialog" />
    <VideoTemplateCloudDialog @update="onUpdate" ref="cloudDialog" />
</template>

<style scoped>
/* 页面标题 */
.font-bold {
    color: #ffffff;
}

.template-page-subtitle,
.template-edit-trigger {
    color: #9ca3af;
}

/* 卡片深色主题 */
.rounded-xl.shadow.border {
    background: #141414;
    border: 1px solid #333;
    box-shadow: none;
    transition: all 0.2s;

    &:hover {
        border-color: #4b5563;
        box-shadow: 0 0 15px rgba(168, 85, 247, 0.1); /* 紫色微光 */
    }
}

/* 名字标签背景 */
.bg-blue-100 {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #e5e7eb;
}

.template-preview-shell {
    background: #000000;
}

/* 修复按钮样式 */
:deep(.arco-btn) {
    background-color: #2a2a2a !important;
    border-color: #333 !important;
    color: #e5e7eb !important;
}

:deep(.arco-btn:hover) {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

/* 修复 VideoInfo 标签样式 */
:deep(.arco-tag) {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #e5e7eb !important;
}

:global(body[data-theme="soft-light"]) .video-template-page .template-page-title {
    color: #1e274c !important;
}

:global(body[data-theme="soft-light"]) .video-template-page .template-page-subtitle {
    color: #5d6a95 !important;
}

:global(body[data-theme="soft-light"]) .video-template-page .rounded-xl.shadow.border {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 246, 255, 0.98) 100%) !important;
    border-color: rgba(132, 142, 220, 0.26) !important;
    box-shadow:
        0 20px 46px rgba(104, 110, 170, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

:global(body[data-theme="soft-light"]) .video-template-page .rounded-xl.shadow.border:hover {
    border-color: rgba(106, 116, 247, 0.3) !important;
    box-shadow:
        0 24px 52px rgba(104, 110, 170, 0.16),
        0 0 0 1px rgba(106, 116, 247, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

:global(body[data-theme="soft-light"]) .video-template-page .template-name-pill,
:global(body[data-theme="soft-light"]) .video-template-page .bg-blue-100 {
    background: linear-gradient(180deg, rgba(249, 250, 255, 0.98) 0%, rgba(239, 242, 255, 1) 100%) !important;
    border-color: rgba(132, 142, 220, 0.24) !important;
    color: #1f284b !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

:global(body[data-theme="soft-light"]) .video-template-page .template-title-text {
    color: #1f284b !important;
    font-weight: 600;
}

:global(body[data-theme="soft-light"]) .video-template-page .template-edit-trigger {
    color: #62709b !important;
}

:global(body[data-theme="soft-light"]) .video-template-page .template-preview-shell {
    background: linear-gradient(180deg, rgba(245, 247, 255, 1) 0%, rgba(234, 238, 248, 0.98) 100%) !important;
    border: 1px solid rgba(132, 142, 220, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

:global(body[data-theme="soft-light"]) .video-template-page :deep(.arco-btn) {
    background: linear-gradient(180deg, rgba(249, 250, 255, 0.98) 0%, rgba(238, 242, 255, 1) 100%) !important;
    border-color: rgba(132, 142, 220, 0.24) !important;
    color: #31406f !important;
}

:global(body[data-theme="soft-light"]) .video-template-page :deep(.arco-btn:hover) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 247, 255, 1) 100%) !important;
    border-color: rgba(106, 116, 247, 0.28) !important;
    color: #21305d !important;
}

:global(body[data-theme="soft-light"]) .video-template-page :deep(.arco-btn-status-danger) {
    background: rgba(200, 91, 107, 0.08) !important;
    border-color: rgba(200, 91, 107, 0.22) !important;
    color: #b3495b !important;
}

:global(body[data-theme="soft-light"]) .video-template-page :deep(.arco-tag) {
    background: linear-gradient(180deg, rgba(249, 250, 255, 0.98) 0%, rgba(239, 242, 255, 1) 100%) !important;
    border-color: rgba(132, 142, 220, 0.22) !important;
    color: #425182 !important;
}
</style>
